ActivitySlice() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ ActivitySlice() — react Function Reference

Dependency Diagram

graph TD
  21a2fd3f_0727_79cb_78d9_240c80dc965a["ActivitySlice()"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d["ActivitySlice.js"]
  21a2fd3f_0727_79cb_78d9_240c80dc965a -->|defined in| 3bbe1444_b210_8ba4_4493_8fd51690fd1d
  adfb778d_dcdb_5ece_da70_8b8fdc486f96["useChangeActivitySliceAction()"]
  21a2fd3f_0727_79cb_78d9_240c80dc965a -->|calls| adfb778d_dcdb_5ece_da70_8b8fdc486f96
  style 21a2fd3f_0727_79cb_78d9_240c80dc965a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.js lines 18–52

export default function ActivitySlice(): React.Node {
  const dispatch = useContext(TreeDispatcherContext);
  const {activityID} = useContext(TreeStateContext);
  const store = useContext(StoreContext);

  const activity =
    activityID === null ? null : store.getElementByID(activityID);
  const name = activity ? activity.nameProp : null;

  const changeActivitySliceAction = useChangeActivitySliceAction();

  return (
    <div className={styles.ActivitySlice}>
      <div className={styles.Bar}>
        <Button
          className={styles.ActivitySliceButton}
          onClick={dispatch.bind(null, {
            type: 'SELECT_ELEMENT_BY_ID',
            payload: activityID,
          })}>
          "{name || 'Unknown'}"
        </Button>
      </div>
      <div className={styles.VRule} />
      <Button
        onClick={startTransition.bind(
          null,
          changeActivitySliceAction.bind(null, null),
        )}
        title="Back to tree view">
        <ButtonIcon type="close" />
      </Button>
    </div>
  );
}