|
- 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) {
- 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, 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>
- </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'
- };
-
- export default WBAccordion;
|