VerticalDelimiter() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ VerticalDelimiter() — react Function Reference

Dependency Diagram

graph TD
  36e84b4a_5ec2_acbc_e2e8_5a1e41e957e0["VerticalDelimiter()"]
  80ad5569_a221_98e5_daec_ede1bea33ee0["Tree.js"]
  36e84b4a_5ec2_acbc_e2e8_5a1e41e957e0 -->|defined in| 80ad5569_a221_98e5_daec_ede1bea33ee0
  8e17a924_5c80_54a2_af29_cc1a3ea74797["calculateElementOffset()"]
  36e84b4a_5ec2_acbc_e2e8_5a1e41e957e0 -->|calls| 8e17a924_5c80_54a2_af29_cc1a3ea74797
  style 36e84b4a_5ec2_acbc_e2e8_5a1e41e957e0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/Tree.js lines 568–602

function VerticalDelimiter() {
  const store = useContext(StoreContext);
  const {ownerID, inspectedElementIndex} = useContext(TreeStateContext);
  const {lineHeight} = useContext(SettingsContext);

  if (ownerID != null || inspectedElementIndex == null) {
    return null;
  }

  const element = store.getElementAtIndex(inspectedElementIndex);
  if (element == null) {
    return null;
  }
  const indexOfLowestDescendant =
    store.getIndexOfLowestDescendantElement(element);
  if (indexOfLowestDescendant == null) {
    return null;
  }

  const delimiterLeft = calculateElementOffset(element.depth) + 12;
  const delimiterTop = (inspectedElementIndex + 1) * lineHeight;
  const delimiterHeight =
    (indexOfLowestDescendant + 1) * lineHeight - delimiterTop;

  return (
    <div
      className={styles.VerticalDelimiter}
      style={{
        left: delimiterLeft,
        top: delimiterTop,
        height: delimiterHeight,
      }}
    />
  );
}