constructor() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ constructor() — react Function Reference

Dependency Diagram

graph TD
  c2019f0a_3ee0_14a2_1ebd_537aa80bb999["constructor()"]
  408e1017_1239_4514_a7fe_1640babfc1dd["OverlayTip"]
  c2019f0a_3ee0_14a2_1ebd_537aa80bb999 -->|defined in| 408e1017_1239_4514_a7fe_1640babfc1dd
  398fbed3_a71d_efb3_1425_8c5f9e4bcf83["constructor()"]
  398fbed3_a71d_efb3_1425_8c5f9e4bcf83 -->|calls| c2019f0a_3ee0_14a2_1ebd_537aa80bb999
  398fbed3_a71d_efb3_1425_8c5f9e4bcf83["constructor()"]
  c2019f0a_3ee0_14a2_1ebd_537aa80bb999 -->|calls| 398fbed3_a71d_efb3_1425_8c5f9e4bcf83
  style c2019f0a_3ee0_14a2_1ebd_537aa80bb999 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js lines 93–126

  constructor(doc: Document, container: HTMLElement) {
    this.tip = doc.createElement('div');
    assign(this.tip.style, {
      display: 'flex',
      flexFlow: 'row nowrap',
      backgroundColor: '#333740',
      borderRadius: '2px',
      fontFamily:
        '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
      fontWeight: 'bold',
      padding: '3px 5px',
      pointerEvents: 'none',
      position: 'fixed',
      fontSize: '12px',
      whiteSpace: 'nowrap',
    });

    this.nameSpan = doc.createElement('span');
    this.tip.appendChild(this.nameSpan);
    assign(this.nameSpan.style, {
      color: '#ee78e6',
      borderRight: '1px solid #aaaaaa',
      paddingRight: '0.5rem',
      marginRight: '0.5rem',
    });
    this.dimSpan = doc.createElement('span');
    this.tip.appendChild(this.dimSpan);
    assign(this.dimSpan.style, {
      color: '#d7d7d7',
    });

    this.tip.style.zIndex = '10000000';
    container.appendChild(this.tip);
  }