SuspenseTimelineInput() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js lines 24–187

function SuspenseTimelineInput() {
  const bridge = useContext(BridgeContext);
  const treeDispatch = useContext(TreeDispatcherContext);
  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
  const scrollToHostInstance = useScrollToHostInstance();

  const {timeline, timelineIndex, hoveredTimelineIndex, playing, autoScroll} =
    useContext(SuspenseTreeStateContext);

  const min = 0;
  const max = timeline.length > 0 ? timeline.length - 1 : 0;

  function switchSuspenseNode(nextTimelineIndex: number) {
    const nextSelectedSuspenseID = timeline[nextTimelineIndex].id;
    treeDispatch({
      type: 'SELECT_ELEMENT_BY_ID',
      payload: nextSelectedSuspenseID,
    });
    suspenseTreeDispatch({
      type: 'SUSPENSE_SET_TIMELINE_INDEX',
      payload: nextTimelineIndex,
    });
  }

  function handleChange(pendingTimelineIndex: number) {
    switchSuspenseNode(pendingTimelineIndex);
  }

  function handleFocus() {
    switchSuspenseNode(timelineIndex);
  }

  function handleHoverSegment(hoveredIndex: number) {
    const nextSelectedSuspenseID = timeline[hoveredIndex].id;
    suspenseTreeDispatch({
      type: 'HOVER_TIMELINE_FOR_ID',
      payload: nextSelectedSuspenseID,
    });
  }
  function handleUnhoverSegment() {
    suspenseTreeDispatch({
      type: 'HOVER_TIMELINE_FOR_ID',
      payload: -1,
    });
  }

  function skipPrevious() {
    const nextSelectedSuspenseID = timeline[timelineIndex - 1].id;
    treeDispatch({
      type: 'SELECT_ELEMENT_BY_ID',
      payload: nextSelectedSuspenseID,
    });
    suspenseTreeDispatch({
      type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
      payload: false,
    });
  }

  function skipForward() {
    const nextSelectedSuspenseID = timeline[timelineIndex + 1].id;
    treeDispatch({
      type: 'SELECT_ELEMENT_BY_ID',
      payload: nextSelectedSuspenseID,
    });
    suspenseTreeDispatch({
      type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
      payload: true,
    });
  }

  function togglePlaying() {
    suspenseTreeDispatch({
      type: 'SUSPENSE_PLAY_PAUSE',
      payload: 'toggle',
    });
  }

  // TODO: useEffectEvent here once it's supported in all versions DevTools supports.
  // For now we just exclude it from deps since we don't lint those anyway.
  function changeTimelineIndex(newIndex: number) {
    // Synchronize timeline index with what is resuspended.