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

InspectedElementPropsTree.js — react Source File

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

File javascript BabelCompiler Validation 19 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  816abfef_4d5d_bc7e_fc00_1acadf628d28["InspectedElementPropsTree.js"]
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  f9049b08_60f8_abce_a6a6_153f88447124["Button.js"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> f9049b08_60f8_abce_a6a6_153f88447124
  f71ee326_17f0_7db4_4178_2763fb1c2ad1["Button"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> f71ee326_17f0_7db4_4178_2763fb1c2ad1
  9f39024f_b905_9b0f_2fc7_e24785732638["ButtonIcon.js"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> 9f39024f_b905_9b0f_2fc7_e24785732638
  4690d9c0_cb81_9593_7817_f9e61a49f9e7["ButtonIcon"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> 4690d9c0_cb81_9593_7817_f9e61a49f9e7
  276bc34e_3008_101e_3cd7_cc895fcd3848["KeyValue.js"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> 276bc34e_3008_101e_3cd7_cc895fcd3848
  b5067ef5_22cb_1a20_66d3_9a573b206f48["KeyValue"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> b5067ef5_22cb_1a20_66d3_9a573b206f48
  0e638bf4_827b_30d0_21d6_77d4d615d353["NewKeyValue.js"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> 0e638bf4_827b_30d0_21d6_77d4d615d353
  a6a86905_58d7_fb49_1ae4_1168e4be0901["NewKeyValue"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> a6a86905_58d7_fb49_1ae4_1168e4be0901
  d7b27d30_728f_ba37_ed97_d371fbd3de62["utils.js"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  703db4ef_ef9f_8a4b_eecf_6dad80aa9ddd["alphaSortEntries"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> 703db4ef_ef9f_8a4b_eecf_6dad80aa9ddd
  24a5b0f3_4e3a_ff70_e4ed_c4392045f885["serializeDataForCopy"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> 24a5b0f3_4e3a_ff70_e4ed_c4392045f885
  bba85af0_a356_d0c5_4d12_914508b89593["store.js"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> bba85af0_a356_d0c5_4d12_914508b89593
  2337051b_9399_908a_f16c_81724ab026b7["InspectedElementSharedStyles.css"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> 2337051b_9399_908a_f16c_81724ab026b7
  style 816abfef_4d5d_bc7e_fc00_1acadf628d28 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 {copy} from 'clipboard-js';
import * as React from 'react';
import {OptionsContext} from '../context';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import KeyValue from './KeyValue';
import NewKeyValue from './NewKeyValue';
import {alphaSortEntries, serializeDataForCopy} from '../utils';
import Store from '../../store';
import styles from './InspectedElementSharedStyles.css';
import {
  ElementTypeClass,
  ElementTypeSuspense,
  ElementTypeActivity,
} from 'react-devtools-shared/src/frontend/types';
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';

import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
import type {Element} from 'react-devtools-shared/src/frontend/types';

type Props = {
  bridge: FrontendBridge,
  element: Element,
  inspectedElement: InspectedElement,
  store: Store,
};

export default function InspectedElementPropsTree({
  bridge,
  element,
  inspectedElement,
  store,
}: Props): React.Node {
  const {readOnly} = React.useContext(OptionsContext);

  const {
    canEditFunctionProps,
    canEditFunctionPropsDeletePaths,
    canEditFunctionPropsRenamePaths,
    props,
    type,
  } = inspectedElement;

  const canDeletePaths =
    type === ElementTypeClass || canEditFunctionPropsDeletePaths;
  const canEditValues =
    !readOnly &&
    (type === ElementTypeClass || canEditFunctionProps) &&
    // Make it read-only for Suspense to make it a bit cleaner. It's not
    // useful to edit children anyway.
// ... (64 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does InspectedElementPropsTree.js do?
InspectedElementPropsTree.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 InspectedElementPropsTree.js?
InspectedElementPropsTree.js defines 1 function(s): InspectedElementPropsTree.
What does InspectedElementPropsTree.js depend on?
InspectedElementPropsTree.js imports 19 module(s): Button, Button.js, ButtonIcon, ButtonIcon.js, InspectedElementSharedStyles.css, KeyValue, KeyValue.js, NewKeyValue, and 11 more.
What files import InspectedElementPropsTree.js?
InspectedElementPropsTree.js is imported by 1 file(s): InspectedElementView.js.
Where is InspectedElementPropsTree.js in the architecture?
InspectedElementPropsTree.js is located at packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.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