|
- 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()));
- // console.log('WBAccordion() : domId=' + this.state.domId);
- }
-
- /* componentDidMount() {
- console.log('WBAccordion.componentDidMount()');
- }
-
- componentWillReceiveProps(nextProps) {
- console.log('WBAccordion.componentWillReceiveProps()');
- } */
-
- 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;
|