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

SuspenseBreadcrumbs.js — react Source File

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

File javascript BabelCompiler Validation 14 imports 1 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  0adf488f_cc01_d00c_692a_56c1f4de537f["SuspenseBreadcrumbs.js"]
  f9049b08_60f8_abce_a6a6_153f88447124["Button.js"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> f9049b08_60f8_abce_a6a6_153f88447124
  f71ee326_17f0_7db4_4178_2763fb1c2ad1["Button"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> f71ee326_17f0_7db4_4178_2763fb1c2ad1
  9f39024f_b905_9b0f_2fc7_e24785732638["ButtonIcon.js"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> 9f39024f_b905_9b0f_2fc7_e24785732638
  4690d9c0_cb81_9593_7817_f9e61a49f9e7["ButtonIcon"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> 4690d9c0_cb81_9593_7817_f9e61a49f9e7
  bb73063d_5d08_efb3_036e_72b78842d689["tooltip.js"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> bb73063d_5d08_efb3_036e_72b78842d689
  f69a42e8_c2e4_8bc5_9505_2b98ac4fc40b["menu-button.js"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> f69a42e8_c2e4_8bc5_9505_2b98ac4fc40b
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd["TreeContext.js"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  315baf50_1028_51ca_a9c1_679c6a17ed98["hooks.js"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  f36a20ba_8eb6_ff2f_b3c1_f02834b287b0["SuspenseBreadcrumbs.css"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> f36a20ba_8eb6_ff2f_b3c1_f02834b287b0
  9526441b_1b8b_0410_c862_2232f8e4ba65["SuspenseTreeContext.js"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> 9526441b_1b8b_0410_c862_2232f8e4ba65
  aec7978f_0a19_ba93_de9e_ac8cf5ddc74b["types"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> aec7978f_0a19_ba93_de9e_ac8cf5ddc74b
  ebb48597_9981_bb7d_08db_b9fe29a0f62e["SyntheticEvent"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> ebb48597_9981_bb7d_08db_b9fe29a0f62e
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  0adf488f_cc01_d00c_692a_56c1f4de537f --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  style 0adf488f_cc01_d00c_692a_56c1f4de537f 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 type {SuspenseNode} from 'react-devtools-shared/src/frontend/types';
import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';

import * as React from 'react';
import {Fragment, useContext, useLayoutEffect, useRef, useState} from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import Tooltip from '../Components/reach-ui/tooltip';
import {
  Menu,
  MenuList,
  MenuButton,
  MenuItem,
} from '../Components/reach-ui/menu-button';
import {
  TreeDispatcherContext,
  TreeStateContext,
} from '../Components/TreeContext';
import {StoreContext} from '../context';
import {useHighlightHostInstance, useIsOverflowing} from '../hooks';
import styles from './SuspenseBreadcrumbs.css';
import {
  SuspenseTreeStateContext,
  SuspenseTreeDispatcherContext,
} from './SuspenseTreeContext';

type SuspenseBreadcrumbsFlatListProps = {
  onItemClick: (id: SuspenseNode['id'], event: SyntheticMouseEvent) => void,
  onItemPointerEnter: (
    id: SuspenseNode['id'],
    scrollIntoView?: boolean,
  ) => void,
  onItemPointerLeave: (event: SyntheticMouseEvent) => void,
  setElementsTotalWidth: (width: number) => void,
};

function SuspenseBreadcrumbsFlatList({
  onItemClick,
  onItemPointerEnter,
  onItemPointerLeave,
  setElementsTotalWidth,
}: SuspenseBreadcrumbsFlatListProps): React$Node {
  const store = useContext(StoreContext);
  const {activityID} = useContext(TreeStateContext);
  const {selectedSuspenseID, lineage, roots} = useContext(
    SuspenseTreeStateContext,
  );

  const containerRef = useRef<HTMLDivElement | null>(null);
  useLayoutEffect(() => {
    const container = containerRef.current;
// ... (259 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does SuspenseBreadcrumbs.js do?
SuspenseBreadcrumbs.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 SuspenseBreadcrumbs.js?
SuspenseBreadcrumbs.js defines 3 function(s): SuspenseBreadcrumbs, SuspenseBreadcrumbsDropdown, SuspenseBreadcrumbsToParentButton.
What does SuspenseBreadcrumbs.js depend on?
SuspenseBreadcrumbs.js imports 14 module(s): Button, Button.js, ButtonIcon, ButtonIcon.js, SuspenseBreadcrumbs.css, SuspenseTreeContext.js, SyntheticEvent, TreeContext.js, and 6 more.
What files import SuspenseBreadcrumbs.js?
SuspenseBreadcrumbs.js is imported by 1 file(s): SuspenseTab.js.
Where is SuspenseBreadcrumbs.js in the architecture?
SuspenseBreadcrumbs.js is located at packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/SuspenseTab).

Analyze Your Own Codebase

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

Try Supermodel Free