ExpandCollapseToggle() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ ExpandCollapseToggle() — react Function Reference

Dependency Diagram

graph TD
  35679b5e_37ec_5247_d2cd_6bc4bc6446f0["ExpandCollapseToggle()"]
  9930e8cf_03b4_86c0_be04_47b410246b71["Element.js"]
  35679b5e_37ec_5247_d2cd_6bc4bc6446f0 -->|defined in| 9930e8cf_03b4_86c0_be04_47b410246b71
  style 35679b5e_37ec_5247_d2cd_6bc4bc6446f0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/Element.js lines 266–296

function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) {
  const {children, id, isCollapsed} = element;

  // $FlowFixMe[missing-local-annot]
  const toggleCollapsed = event => {
    event.preventDefault();
    event.stopPropagation();

    store.toggleIsCollapsed(id, !isCollapsed);
  };

  // $FlowFixMe[missing-local-annot]
  const stopPropagation = event => {
    // Prevent the row from selecting
    event.stopPropagation();
  };

  if (children.length === 0) {
    return <div className={styles.ExpandCollapseToggle} />;
  }

  return (
    <div
      className={styles.ExpandCollapseToggle}
      onMouseDown={stopPropagation}
      onClick={toggleCollapsed}
      onDoubleClick={swallowDoubleClick}>
      <ButtonIcon type={isCollapsed ? 'collapsed' : 'expanded'} />
    </div>
  );
}