SynchronizedScrollContainer() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js lines 163–274

function SynchronizedScrollContainer({
  className,
  children,
  scaleRef,
}: {
  className?: string,
  children?: React.Node,
  scaleRef: {current: number},
}) {
  const bridge = useContext(BridgeContext);
  const ref = useRef(null);
  const applyingScrollRef = useRef(false);

  // TODO: useEffectEvent
  function scrollContainerTo({
    left,
    top,
    right,
    bottom,
  }: {
    left: number,
    top: number,
    right: number,
    bottom: number,
  }): void {
    const element = ref.current;
    if (element === null) {
      return;
    }
    const scale = scaleRef.current / element.clientWidth;
    const targetLeft = Math.round(left / scale);
    const targetTop = Math.round(top / scale);
    if (
      targetLeft !== Math.round(element.scrollLeft) ||
      targetTop !== Math.round(element.scrollTop)
    ) {
      // Disable scroll events until we've applied the new scroll position.
      applyingScrollRef.current = true;
      element.scrollTo({
        left: targetLeft,
        top: targetTop,
        behavior: 'smooth',
      });
    }
  }

  useEffect(() => {
    const callback = scrollContainerTo;
    bridge.addListener('scrollTo', callback);
    // Ask for the current scroll position when we mount so we can attach ourselves to it.
    bridge.send('requestScrollPosition');
    return () => bridge.removeListener('scrollTo', callback);
  }, [bridge]);

  const scrollTimer = useRef<null | TimeoutID>(null);

  // TODO: useEffectEvent
  function sendScroll() {
    if (scrollTimer.current) {
      clearTimeout(scrollTimer.current);
      scrollTimer.current = null;
    }
    if (applyingScrollRef.current) {
      return;
    }
    const element = ref.current;
    if (element === null) {
      return;
    }
    const scale = scaleRef.current / element.clientWidth;
    const left = element.scrollLeft * scale;
    const top = element.scrollTop * scale;
    const right = left + element.clientWidth * scale;
    const bottom = top + element.clientHeight * scale;
    bridge.send('scrollTo', {left, top, right, bottom});
  }

  // TODO: useEffectEvent
  function throttleScroll() {
    if (!scrollTimer.current) {
      // Periodically synchronize the scroll while scrolling.