ActivityList() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ ActivityList() — react Function Reference

Dependency Diagram

graph TD
  1c876298_f380_e460_56d0_a0a7b509d56d["ActivityList()"]
  e1645ed6_a62a_153d_27fd_691e1a53cb4f["ActivityList.js"]
  1c876298_f380_e460_56d0_a0a7b509d56d -->|defined in| e1645ed6_a62a_153d_27fd_691e1a53cb4f
  adfb778d_dcdb_5ece_da70_8b8fdc486f96["useChangeActivitySliceAction()"]
  1c876298_f380_e460_56d0_a0a7b509d56d -->|calls| adfb778d_dcdb_5ece_da70_8b8fdc486f96
  style 1c876298_f380_e460_56d0_a0a7b509d56d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.js lines 103–263

export default function ActivityList({
  activities,
}: {
  activities: $ReadOnlyArray<{id: Element['id'], depth: number}>,
}): React$Node {
  const {activityID, inspectedElementID} = useContext(TreeStateContext);
  const treeDispatch = useContext(TreeDispatcherContext);
  const store = useContext(StoreContext);
  const selectedActivityID = useSelectedActivityID();
  const {highlightHostInstance, clearHighlightHostInstance} =
    useHighlightHostInstance();

  const [isPendingActivitySliceSelection, startActivitySliceSelection] =
    useTransition();
  const changeActivitySliceAction = useChangeActivitySliceAction();

  const includeAllOption = activityID !== null;

  function handleKeyDown(event: SyntheticKeyboardEvent) {
    switch (event.key) {
      case 'Escape':
        startActivitySliceSelection(() => {
          changeActivitySliceAction(null);
        });
        event.preventDefault();
        break;
      case 'Enter':
      case ' ':
        startActivitySliceSelection(() => {
          changeActivitySliceAction(inspectedElementID);
        });
        event.preventDefault();
        break;
      case 'Home':
        treeDispatch({
          type: 'SELECT_ELEMENT_BY_ID',
          payload: includeAllOption ? null : activities[0].id,
        });
        event.preventDefault();
        break;
      case 'End':
        treeDispatch({
          type: 'SELECT_ELEMENT_BY_ID',
          payload: activities[activities.length - 1].id,
        });
        event.preventDefault();
        break;
      case 'ArrowUp': {
        const currentIndex = activities.findIndex(
          activity => activity.id === selectedActivityID,
        );
        let nextIndex: number;
        if (currentIndex === -1) {
          // Currently selecting "All", wrap around to last Activity.
          nextIndex = activities.length - 1;
        } else {
          nextIndex = currentIndex - 1;
          if (!includeAllOption) {
            nextIndex = (nextIndex + activities.length) % activities.length;
          }
        }

        treeDispatch({
          type: 'SELECT_ELEMENT_BY_ID',
          payload: nextIndex === -1 ? null : activities[nextIndex].id,
        });
        event.preventDefault();
        break;
      }
      case 'ArrowDown': {
        const currentIndex = activities.findIndex(
          activity => activity.id === selectedActivityID,
        );
        let nextIndex: number;
        if (includeAllOption && currentIndex === activities.length - 1) {
          // Currently selecting last Activity, wrap around to "All".
          nextIndex = -1;
        } else {
          nextIndex = (currentIndex + 1) % activities.length;
        }
        treeDispatch({