IF YOU WOULD LIKE TO GET AN ACCOUNT, please write an email to s dot adaszewski at gmail dot com. User accounts are meant only to report issues and/or generate pull requests. This is a purpose-specific Git hosting for ADARED projects. Thank you for your understanding!
Browse Source

Fix WBAccordion's state getting confused when navigating between pages.

pull/1/head
parent
commit
fa8375fc98
1 changed files with 27 additions and 44 deletions
  1. +27
    -44
      frontend/src/js/widget/wb-accordion.js

+ 27
- 44
frontend/src/js/widget/wb-accordion.js View File

@@ -4,7 +4,6 @@ class WBAccordion extends Component {
constructor(...args) {
super(...args);
this.setupIds();
console.log('WBAccordion() : domId=' + this.state.domId);
}
setupIds() {
@@ -13,68 +12,52 @@ class WBAccordion extends Component {
const { state } = this;
state.headerDomIds = names.map(() => ('accordion-' + uuid.v4()));
state.collapseDomIds = names.map(() => ('accordion-' + uuid.v4()));
state.isOpen = Array(names.length).fill(false);
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;
}
setupEvents() {
const { collapseDomIds, isOpen } = this.state;
const accordion = this;
const collapseElements = $(collapseDomIds.map(a => '#' + a).join(','));
this.state.collapseElements = collapseElements;
collapseElements.on('hidden.bs.collapse shown.bs.collapse', function(ev) {
// console.log(this.id);
const el = this;
const idx = collapseDomIds.findIndex(a => (a === el.id));
isOpen[idx] = (ev.type === 'shown');
accordion.setState({ isOpen });
});
}
removeEvents() {
const { collapseElements } = this.state;
collapseElements.off('hidden.bs.collapse shown.bs.collapse');
}
setup() {
componentWillReceiveProps(nextProps) {
this.props = nextProps;
this.setupIds();
this.setupEvents();
}
componentDidMount() {
console.log('WBAccordion.componentDidMount()');
this.setupEvents();
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 });
}
componentWillUnmount() {
console.log('WBAccordion.componentWillUnmount()');
this.removeEvents();
}
componentWillReceiveProps(nextProps) {
console.log('WBAccordion.componentWillReceiveProps()');
this.props = nextProps;
this.removeEvents();
this.setupIds();
this.setState({}); // render
this.setupEvents();
}
render({ children, names, cardHeaderClass }, { domId, headerDomIds,
collapseDomIds, collapseClass, ariaExpanded, buttonClass }) {
render({ children, names, cardHeaderClass }, { domId, headerDomIds, collapseDomIds, isOpen }) {
return (
<div class="accordion" id={ domId }>
{ children.map((_, i) => (
<div class="card">
<div class={ cardHeaderClass} id={ headerDomIds[i] }>
<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={ isOpen[i] } aria-controls={ collapseDomIds[i] }>
<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={ 'collapse' + (isOpen[i] ? ' show' : '') }
aria-labelledby={ headerDomIds[i] } data-parent={ '#' + domId }>
<div id={ collapseDomIds[i] } class={ collapseClass[i] }
aria-labelledby={ headerDomIds[i] }>
<div class="card-body">
{ children[i] }
</div>


Loading…
Cancel
Save