List() — react Function Reference

Architecture documentation for the List() function in SnapshotCommitList.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ List() — react Function Reference

Dependency Diagram

graph TD
  2bc45f27_a1bd_a6ba_e765_ef9751585a34["List()"]
  76384bd4_08c7_de17_1f91_2937028def49["SnapshotCommitList.js"]
  2bc45f27_a1bd_a6ba_e765_ef9751585a34 -->|defined in| 76384bd4_08c7_de17_1f91_2937028def49
  style 2bc45f27_a1bd_a6ba_e765_ef9751585a34 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js lines 91–302

function List({
  commitData,
  selectedCommitIndex,
  commitTimes,
  height,
  filteredCommitIndices,
  selectedFilteredCommitIndex,
  selectCommitIndex,
  totalDurations,
  width,
}: ListProps) {
  // $FlowFixMe[incompatible-use]
  const listRef = useRef<FixedSizeList<ItemData> | null>(null);
  const divRef = useRef<HTMLDivElement | null>(null);
  const prevCommitIndexRef = useRef<number | null>(null);

  // Make sure a newly selected snapshot is fully visible within the list.
  useEffect(() => {
    if (selectedFilteredCommitIndex !== prevCommitIndexRef.current) {
      prevCommitIndexRef.current = selectedFilteredCommitIndex;
      if (selectedFilteredCommitIndex !== null && listRef.current !== null) {
        listRef.current.scrollToItem(selectedFilteredCommitIndex);
      }
    }
  }, [listRef, selectedFilteredCommitIndex]);

  const itemSize = useMemo(
    () => Math.max(minBarWidth, width / filteredCommitIndices.length),
    [filteredCommitIndices, width],
  );
  const maxDuration = useMemo(
    () => totalDurations.reduce((max, duration) => Math.max(max, duration), 0),
    [totalDurations],
  );

  const maxCommitIndex = filteredCommitIndices.length - 1;

  const [dragState, setDragState] = useState<DragState | null>(null);

  const handleDragCommit = ({buttons, pageX}: any) => {
    if (buttons === 0) {
      setDragState(null);
      return;
    }

    if (dragState !== null) {
      const {commitIndex, left, sizeIncrement} = dragState;

      let newCommitIndex = commitIndex;
      let newCommitLeft = left;

      if (pageX < newCommitLeft) {
        while (pageX < newCommitLeft) {
          newCommitLeft -= sizeIncrement;
          newCommitIndex -= 1;
        }
      } else {
        let newCommitRectRight = newCommitLeft + sizeIncrement;
        while (pageX > newCommitRectRight) {
          newCommitRectRight += sizeIncrement;
          newCommitIndex += 1;
        }
      }

      if (newCommitIndex < 0) {
        newCommitIndex = 0;
      } else if (newCommitIndex > maxCommitIndex) {
        newCommitIndex = maxCommitIndex;
      }

      selectCommitIndex(newCommitIndex);
    }
  };

  useEffect(() => {
    if (dragState === null) {
      return;
    }

    const element = divRef.current;
    if (element !== null) {