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

StyleEditor.js — react Source File

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

File javascript BabelCompiler Validation 15 imports 1 dependents 8 functions

Entity Profile

Dependency Diagram

graph LR
  a7173e0c_ba07_009a_1ada_f864062596b5["StyleEditor.js"]
  f9049b08_60f8_abce_a6a6_153f88447124["Button.js"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> f9049b08_60f8_abce_a6a6_153f88447124
  f71ee326_17f0_7db4_4178_2763fb1c2ad1["Button"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> f71ee326_17f0_7db4_4178_2763fb1c2ad1
  9f39024f_b905_9b0f_2fc7_e24785732638["ButtonIcon.js"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> 9f39024f_b905_9b0f_2fc7_e24785732638
  4690d9c0_cb81_9593_7817_f9e61a49f9e7["ButtonIcon"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> 4690d9c0_cb81_9593_7817_f9e61a49f9e7
  d7b27d30_728f_ba37_ed97_d371fbd3de62["utils.js"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  24a5b0f3_4e3a_ff70_e4ed_c4392045f885["serializeDataForCopy"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> 24a5b0f3_4e3a_ff70_e4ed_c4392045f885
  02194688_f76e_9fd1_c1a7_fcc33ebcc5ab["AutoSizeInput.js"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> 02194688_f76e_9fd1_c1a7_fcc33ebcc5ab
  c7888179_9b91_c305_4113_eda40bc5d70c["AutoSizeInput"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> c7888179_9b91_c305_4113_eda40bc5d70c
  1a6deae6_20c8_440a_bc0b_57ab279fabac["StyleEditor.css"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> 1a6deae6_20c8_440a_bc0b_57ab279fabac
  fa31bba5_57ed_1039_52bb_4a8cb4382642["utils.js"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> fa31bba5_57ed_1039_52bb_4a8cb4382642
  b9d81c20_b199_0aa9_b43a_53a3f46ca053["types.js"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> b9d81c20_b199_0aa9_b43a_53a3f46ca053
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  1e290487_2c6f_fbaf_7be9_e14d5df52457["clipboard-js"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> 1e290487_2c6f_fbaf_7be9_e14d5df52457
  7cd456b6_507e_98de_1e07_f65fc1623ee5["context"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> 7cd456b6_507e_98de_1e07_f65fc1623ee5
  style a7173e0c_ba07_009a_1ada_f864062596b5 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 {useContext, useMemo, useRef, useState} from 'react';
import {copy} from 'clipboard-js';
import {
  BridgeContext,
  StoreContext,
} from 'react-devtools-shared/src/devtools/views/context';
import Button from '../../Button';
import ButtonIcon from '../../ButtonIcon';
import {serializeDataForCopy} from '../../utils';
import AutoSizeInput from './AutoSizeInput';
import styles from './StyleEditor.css';
import {sanitizeForParse} from '../../../utils';
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';

import type {Style} from './types';

type Props = {
  id: number,
  style: Style,
};

type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;
type ChangeValueFn = (name: string, value: any) => void;

export default function StyleEditor({id, style}: Props): React.Node {
  const bridge = useContext(BridgeContext);
  const store = useContext(StoreContext);

  const changeAttribute = (oldName: string, newName: string, value: any) => {
    const rendererID = store.getRendererIDForElement(id);
    if (rendererID !== null) {
      bridge.send('NativeStyleEditor_renameAttribute', {
        id,
        rendererID,
        oldName,
        newName,
        value,
      });
    }
  };

  const changeValue = (name: string, value: any) => {
    const rendererID = store.getRendererIDForElement(id);
    if (rendererID !== null) {
      bridge.send('NativeStyleEditor_setValue', {
        id,
        rendererID,
        name,
        value,
      });
// ... (237 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does StyleEditor.js do?
StyleEditor.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 StyleEditor.js?
StyleEditor.js defines 8 function(s): ChangeAttributeFn, Field, FieldProps.onChange, FieldProps.onReset, FieldProps.onSubmit, NewRow, Row, StyleEditor.
What does StyleEditor.js depend on?
StyleEditor.js imports 15 module(s): AutoSizeInput, AutoSizeInput.js, Button, Button.js, ButtonIcon, ButtonIcon.js, StyleEditor.css, clipboard-js, and 7 more.
What files import StyleEditor.js?
StyleEditor.js is imported by 1 file(s): index.js.
Where is StyleEditor.js in the architecture?
StyleEditor.js is located at packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor).

Analyze Your Own Codebase

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

Try Supermodel Free