react Architecture Docs
Home / Function/ StyleEditor() — react Function Reference

StyleEditor() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1

Entity Profile

Dependency Diagram

graph TD
  5bd6b860_acd1_7990_1d52_14fe72b2a7fb["StyleEditor()"]
  a7173e0c_ba07_009a_1ada_f864062596b5["StyleEditor.js"]
  5bd6b860_acd1_7990_1d52_14fe72b2a7fb -->|defined in| a7173e0c_ba07_009a_1ada_f864062596b5
  24a5b0f3_4e3a_ff70_e4ed_c4392045f885["serializeDataForCopy()"]
  5bd6b860_acd1_7990_1d52_14fe72b2a7fb -->|calls| 24a5b0f3_4e3a_ff70_e4ed_c4392045f885
  style 5bd6b860_acd1_7990_1d52_14fe72b2a7fb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js lines 35–100

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

  const keys = useMemo(() => Array.from(Object.keys(style)), [style]);

  const handleCopy = withPermissionsCheck(
    {permissions: ['clipboardWrite']},
    () => copy(serializeDataForCopy(style)),
  );

  return (
    <div className={styles.StyleEditor}>
      <div className={styles.HeaderRow}>
        <div className={styles.Header}>
          <div className={styles.Brackets}>{'style {'}</div>
        </div>
        <Button onClick={handleCopy} title="Copy to clipboard">
          <ButtonIcon type="copy" />
        </Button>
      </div>
      {keys.length > 0 &&
        keys.map(attribute => (
          <Row
            key={`${attribute}/${style[attribute]}`}
            attribute={attribute}
            changeAttribute={changeAttribute}
            changeValue={changeValue}
            validAttributes={store.nativeStyleEditorValidAttributes}
            value={style[attribute]}
          />
        ))}
      <NewRow
        changeAttribute={changeAttribute}
        changeValue={changeValue}
        validAttributes={store.nativeStyleEditorValidAttributes}
      />
      <div className={styles.Brackets}>{'}'}</div>
    </div>
  );
}

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does StyleEditor() do?
StyleEditor() is a function in the react codebase, defined in packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js.
Where is StyleEditor() defined?
StyleEditor() is defined in packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js at line 35.
What does StyleEditor() call?
StyleEditor() calls 1 function(s): serializeDataForCopy.

Analyze Your Own Codebase

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

Try Supermodel Free