diffhtml/packages/diffhtml-devtools/lib/scripts/panels/mounts.js at 0c4683e19010579e8cc71e87064e901a7dfbbb6f · tbranyen/diffhtml · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import { html } from 'diffhtml';
import { Component } from 'diffhtml-components';
//import { Dropdown } from 'semantic-ui-react';

class DevtoolsMountsPanel extends Component {
  static defaultProps = {
    mounts: [],
    inspect: () => {},
    activeRoute: '',
  }

  state = {
    isExpanded: false,
    activeTab: 0,
  }

  render() {
    const { mounts = [] } = this.props;
    const { isExpanded, activeTab } = this.state;
    const { styles, setActive } = this;

    // FIXME Shouldn't need to concat and filter.
    const options = [].concat(mounts).filter(Boolean).map(({ selector }) => ({
      text: selector,
      value: selector,
    }));

    return html`
      <link rel="stylesheet" href="/styles/theme.css">
      <style>${styles()}</style>

      <div class="ui tall segment">
        <h3 onClick=${() => this.setState({ isExpanded: !isExpanded })}>
          <i style="position: relative; top: -2px" class="icon chevron ${isExpanded ? 'up' : 'down'}"></i> Mounts
        </h3>

        ${isExpanded && html`
          <p>
            Shows the top-level rendered mounts. Attempts to create a unique
            selector for each element.
          </p>
        `}
      </div>

      ${!options.length && html`
        <p class="ui no-mounts">
          <i class="icon exclamation circle"></i>
          <strong>No mounts found, have you rendered anything?</strong>
        </p>
      `}

      ${Boolean(options.length) && html`
        <div class="ui attached tabular menu">
          ${options.map((option, i) => html`
            <div class="ui item ${activeTab === i && 'active'}">
              <a href="#" onClick=${setActive(i)}>&lt;${String(option.text).trim()}&gt;</a>
            </div>
          `)}
        </div>
      `}

      ${mounts[activeTab] && mounts[activeTab].tree && html`
        <devtools-vtree vTree=${mounts[activeTab].tree} />
      `}
    `;
  }

  shouldComponentUpdate() {
    return this.props.activeRoute === '#mounts';
  }

  styles = () => `
    :host {
      display: flex;
      height: 100vh;
      overflow: hidden;
      flex-direction: column;
    }

    * { box-sizing: border-box; user-select: none; }

    h2 {
      font-size: 13px;
    }

    h3 {
      cursor: pointer;
    }

    .ui.segment {
      border-left: 0;
      border-right: 0;
      border-top: 0;
      margin-top: 0;
      margin-bottom: 0;
      top: 0;
      z-index: 100;
      border-radius: 0 !important;
      color: #333;
      user-select: none;
    }

    .ui.mini.icon.input input {
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      border-top: 0;
    }

    select {
      width: 100%;
      padding: 10px;
    }

    .no-mounts {
      padding: 16px;
    }
  `

  setActive = activeTab => ev => {
    ev.preventDefault();
    this.setState({ activeTab });
  }
}

customElements.define('devtools-mounts-panel', DevtoolsMountsPanel);