wba/frontend/src/js/widget/wb-accordion.js

import { h, Component } from 'preact';

class WBAccordion extends Component {
  constructor(...args) {
    super(...args);
    this.setupIds();
  }

  setupIds() {
    this.state.domId = 'accordion-' + uuid.v4();
    const { names } = this.props;
    const { state  } = this;
    state.headerDomIds = names.map(() => ('accordion-' + uuid.v4()));
    state.collapseDomIds = names.map(() => ('accordion-' + uuid.v4()));
    state.collapseClass = Array(names.length).fill('collapse');
    state.ariaExpanded = Array(names.length).fill(false);
    state.buttonClass = Array(names.length).fill('btn btn-link collapsed');
    state.collapseElements = null;
  }

  componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.names) === JSON.stringify(this.props.names))
      return;
    this.props = nextProps;
    this.setupIds();
  }

  toggle(idx) {
    const { ariaExpanded, collapseClass, buttonClass } = this.state;
    const isOpen = ariaExpanded[idx];
    for (let i = 0; i < ariaExpanded.length; i++) {
      ariaExpanded[i] = false;
      collapseClass[i] = 'collapse';
      buttonClass[i] = 'btn btn-link collapsed';
    }
    if (!isOpen) {
      ariaExpanded[idx] = true;
      collapseClass[idx] = 'collapse show';
      buttonClass[idx] = 'btn btn-link';
    }
    this.setState({ ariaExpanded, collapseClass, buttonClass });
  }

  render({ children, names, extraHeaderUi, cardHeaderClass }, { domId, headerDomIds,
    collapseDomIds, collapseClass, ariaExpanded, buttonClass }) {

    return (
      <div class="accordion" id={ domId }>
        { children.map((_, i) => (
          <div class="card">
            <div class={ cardHeaderClass } id={ headerDomIds[i] }>
              <h2 class="mb-0">
                <button class={ buttonClass[i] } type="button"
                  aria-expanded={ ariaExpanded[i] } aria-controls={ collapseDomIds[i] }
                  onclick={ () => this.toggle(i) }>
                  { names[i] }
                </button>
                { extraHeaderUi[i] }
              </h2>
            </div>

            <div id={ collapseDomIds[i] } class={ collapseClass[i] }
              aria-labelledby={ headerDomIds[i] }>
              <div class="card-body">
                { children[i] }
              </div>
            </div>
          </div>
        )) }
      </div>
    );
  }
};

WBAccordion.defaultProps = {
  cardHeaderClass: 'card-header',
  extraHeaderUi: []
};

export default WBAccordion;