webroot/js/components/tab-bar.js


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

import { h, Component } from '/js/web_modules/preact.js';

import htm from '/js/web_modules/htm.js';

const html = htm.bind(h);

export default class TabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0,
    };

    this.handleTabClick = this.handleTabClick.bind(this);
  }

  handleTabClick(index) {
    this.setState({ activeIndex: index });
  }

  render() {
    const { tabs, ariaLabel } = this.props;
    if (!tabs.length) {
      return null;
    }

    if (tabs.length === 1) {
      return html` ${tabs[0].content} `;
    } else {
      return html`
        <div class="tab-bar">
          <div role="tablist" aria-label=${ariaLabel}>
            ${tabs.map((tabItem, index) => {
              const handleClick = () => this.handleTabClick(index);
              return html`
                <button
                  role="tab"
                  aria-selected=${index === this.state.activeIndex}
                  aria-controls=${`tabContent${index}`}
                  id=${`tab-${tabItem.label}`}
                  onclick=${handleClick}
                >
                  ${tabItem.label}
                </button>
              `;
            })}
          </div>
          ${tabs.map((tabItem, index) => {
            return html`
              <div
                tabindex="0"
                role="tabpanel"
                id=${`tabContent${index}`}
                aria-labelledby=${`tab-${tabItem.label}`}
                hidden=${index !== this.state.activeIndex}
              >
                ${tabItem.content}
              </div>
            `;
          })}
        </div>
      `;
    }
  }
}