react Architecture Docs
Home / File/ ActivitySlice.js — react Source File

ActivitySlice.js — react Source File

Architecture documentation for ActivitySlice.js, a javascript file in the react codebase. 10 imports, 1 dependents.

File javascript BabelCompiler Validation 10 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  3bbe1444_b210_8ba4_4493_8fd51690fd1d["ActivitySlice.js"]
  f9049b08_60f8_abce_a6a6_153f88447124["Button.js"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> f9049b08_60f8_abce_a6a6_153f88447124
  f71ee326_17f0_7db4_4178_2763fb1c2ad1["Button"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> f71ee326_17f0_7db4_4178_2763fb1c2ad1
  9f39024f_b905_9b0f_2fc7_e24785732638["ButtonIcon.js"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> 9f39024f_b905_9b0f_2fc7_e24785732638
  4690d9c0_cb81_9593_7817_f9e61a49f9e7["ButtonIcon"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> 4690d9c0_cb81_9593_7817_f9e61a49f9e7
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  e1645ed6_a62a_153d_27fd_691e1a53cb4f["ActivityList.js"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> e1645ed6_a62a_153d_27fd_691e1a53cb4f
  adfb778d_dcdb_5ece_da70_8b8fdc486f96["useChangeActivitySliceAction"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> adfb778d_dcdb_5ece_da70_8b8fdc486f96
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd["TreeContext.js"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  7edcddea_2054_4f70_2197_bcb6a3b74c6d["ActivitySlice.css"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> 7edcddea_2054_4f70_2197_bcb6a3b74c6d
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  80ad5569_a221_98e5_daec_ede1bea33ee0["Tree.js"]
  80ad5569_a221_98e5_daec_ede1bea33ee0 --> 3bbe1444_b210_8ba4_4493_8fd51690fd1d
  style 3bbe1444_b210_8ba4_4493_8fd51690fd1d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */
import * as React from 'react';
import {startTransition, useContext} from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {StoreContext} from '../context';
import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
import styles from './ActivitySlice.css';

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>
  );
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does ActivitySlice.js do?
ActivitySlice.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in ActivitySlice.js?
ActivitySlice.js defines 1 function(s): ActivitySlice.
What does ActivitySlice.js depend on?
ActivitySlice.js imports 10 module(s): ActivityList.js, ActivitySlice.css, Button, Button.js, ButtonIcon, ButtonIcon.js, TreeContext.js, context.js, and 2 more.
What files import ActivitySlice.js?
ActivitySlice.js is imported by 1 file(s): Tree.js.
Where is ActivitySlice.js in the architecture?
ActivitySlice.js is located at packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free