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

import { h, Component } from 'preact';

class WBAccordion extends Component {
  constructor(...args) {
    super(...args);
    this.state.domId = 'accordion-' + uuid.v4();
    this.state.headerDomIds = this.props.names.map(() => ('accordion-' + uuid.v4()));
    this.state.collapseDomIds = this.props.names.map(() => ('accordion-' + uuid.v4()));
  }

  render({ children, names, cardHeaderClass }, { domId, headerDomIds, collapseDomIds }) {
    return (
      <div class="accordion" id={ domId }>
        { children.map((_, i) => (
          <div class="card">
            <div class={ cardHeaderClass} id={ headerDomIds[i] }>
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target={ '#' + collapseDomIds[i] } aria-expanded="false" aria-controls={ collapseDomIds[i] }>
                  { names[i] }
                </button>
              </h2>
            </div>

            <div id={ collapseDomIds[i] } class="collapse" aria-labelledby={ headerDomIds[i] } data-parent={ '#' + domId }>
              <div class="card-body">
                { children[i] }
              </div>
            </div>
          </div>
        )) }
      </div>
    );
  }
};

WBAccordion.defaultProps = {
  'cardHeaderClass': 'card-header'
};

export default WBAccordion;