SidebarSelectedFiberInfo() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js lines 23–150

export default function SidebarSelectedFiberInfo(): React.Node {
  const {profilerStore} = useContext(StoreContext);
  const {
    rootID,
    selectCommitIndex,
    selectedCommitIndex,
    selectedFiberID,
    selectedFiberName,
    selectFiber,
  } = useContext(ProfilerContext);
  const {profilingCache} = profilerStore;
  const selectedListItemRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    const selectedElement = selectedListItemRef.current;
    if (
      selectedElement !== null &&
      // $FlowFixMe[method-unbinding]
      typeof selectedElement.scrollIntoView === 'function'
    ) {
      selectedElement.scrollIntoView({block: 'nearest', inline: 'nearest'});
    }
  }, [selectedCommitIndex]);

  if (
    selectedFiberID === null ||
    rootID === null ||
    selectedCommitIndex === null
  ) {
    return null;
  }

  const commitIndices = profilingCache.getFiberCommits({
    fiberID: selectedFiberID,
    rootID: rootID,
  });

  const {nodes} = profilingCache.getCommitTree({
    rootID,
    commitIndex: selectedCommitIndex,
  });
  const node = nodes.get(selectedFiberID);

  // $FlowFixMe[missing-local-annot]
  const handleKeyDown = event => {
    switch (event.key) {
      case 'ArrowUp':
        if (selectedCommitIndex !== null) {
          const prevIndex = commitIndices.indexOf(selectedCommitIndex);
          const nextIndex =
            prevIndex > 0 ? prevIndex - 1 : commitIndices.length - 1;
          selectCommitIndex(commitIndices[nextIndex]);
        }
        event.preventDefault();
        break;
      case 'ArrowDown':
        if (selectedCommitIndex !== null) {
          const prevIndex = commitIndices.indexOf(selectedCommitIndex);
          const nextIndex =
            prevIndex < commitIndices.length - 1 ? prevIndex + 1 : 0;
          selectCommitIndex(commitIndices[nextIndex]);
        }
        event.preventDefault();
        break;
      default:
        break;
    }
  };

  const listItems = [];
  let i = 0;
  for (i = 0; i < commitIndices.length; i++) {
    const commitIndex = commitIndices[i];

    const {duration, timestamp} = profilerStore.getCommitData(
      ((rootID: any): number),
      commitIndex,
    );

    listItems.push(
      <button