mini-humidifier/src/components/dropdown-base.js at 357c101c90e978a80c712d902eb088e4b99e5a36 · regevbr/mini-humidifier · 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
import { LitElement, html, css } from 'lit';
import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
import sharedStyle from '../sharedStyle';
import HumidifierMenu from './mwc/menu';
import HumidifierListItem from './mwc/list-item';
import buildElementDefinitions from '../utils/buildElementDefinitions';
import globalElementLoader from '../utils/globalElementLoader';

export default class HumidifierDropdownBase extends ScopedRegistryHost(LitElement) {
  static get defineId() { return 'mh-dropdown-base'; }

  static get elementDefinitions() {
    return buildElementDefinitions([
      globalElementLoader('ha-icon'),
      globalElementLoader('ha-icon-button'),
      HumidifierMenu,
      HumidifierListItem,
    ], HumidifierDropdownBase);
  }

  static get properties() {
    return {
      items: [],
      label: String,
      selected: String,
      icon: String,
      active: Boolean,
      disabled: Boolean,
    };
  }

  get selectedId() {
    return this.items.map(item => item.id.toString().toUpperCase())
      .indexOf(this.selected.toString().toUpperCase());
  }

  onChange(e) {
    const { index } = e.detail;
    if (index !== this.selectedId && this.items[index]) {
      this.dispatchEvent(new CustomEvent('change', {
        detail: this.items[index],
      }));
      e.detail.index = -1;
    }
  }

  handleClick() {
    const menu = this.shadowRoot.querySelector('#menu');
    menu.anchor = this.shadowRoot.querySelector('#button');
    menu.show();
  }

  render() {
    return html`
      <div class='mh-dropdown'>
        <ha-icon-button class='mh-dropdown__button icon'
                        id=${'button'}
                        @click=${this.handleClick}
                        ?disabled=${this.disabled}
                        ?color=${this.active}>
          <ha-icon .icon=${this.icon}></ha-icon>
        </ha-icon-button>
        <mwc-menu fixed
                  id=${'menu'}
                  ?quick=${true}
                  .menuCorner=${'END'}
                  .corner=${'TOP_RIGHT'}
                  @selected=${this.onChange}>
          ${this.items.map(item => html`
            <mwc-list-item value=${item.id || item.name} ?selected=${this.selected === item.id}>
              <span class='mh-dropdown__item__label'>${item.name}</span>
            </mwc-list-item>`)}
        </mwc-menu>
      </div>
    `;
  }

  static get styles() {
    return [
      sharedStyle,
      css`
        :host {
          position: relative;
          overflow: hidden;
        }
        .mh-dropdown
        :host([disabled]) {
          opacity: .25;
          pointer-events: none;
        }
        :host([faded]) {
          opacity: .75;
        }
        .mh-dropdown {
          padding: 0;
        }
        ha-icon-button[disabled] {
          opacity: .25;
          pointer-events: none;
        }
        .mh-dropdown__button.icon {
          margin: 0;
        }
        ha-icon-button {
          width: calc(var(--mh-dropdown-unit));
          height: calc(var(--mh-dropdown-unit));
          --mdc-icon-button-size: calc(var(--mh-dropdown-unit));
        }
        mwc-item > *:nth-child(2) {
          margin-left: 4px;
        }
        .mh-dropdown[focused] ha-icon-button {
          color: var(--mh-accent-color);
        }
        .mh-dropdown[focused] ha-icon-button[focused] {
          color: var(--mh-text-color);
          transform: rotate(0deg);
        }
      `,
    ];
  }
}