diff options
Diffstat (limited to 'devtools/client/debugger/src/components/shared/Accordion.js')
-rw-r--r-- | devtools/client/debugger/src/components/shared/Accordion.js | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/components/shared/Accordion.js b/devtools/client/debugger/src/components/shared/Accordion.js new file mode 100644 index 0000000000..3b5d5ae516 --- /dev/null +++ b/devtools/client/debugger/src/components/shared/Accordion.js @@ -0,0 +1,89 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */ + +import { cloneElement, Component } from "devtools/client/shared/vendor/react"; +import { + aside, + button, + div, + h2, +} from "devtools/client/shared/vendor/react-dom-factories"; +import PropTypes from "devtools/client/shared/vendor/react-prop-types"; + +class Accordion extends Component { + static get propTypes() { + return { + items: PropTypes.array.isRequired, + }; + } + + handleHeaderClick(i) { + const item = this.props.items[i]; + const opened = !item.opened; + item.opened = opened; + + if (item.onToggle) { + item.onToggle(opened); + } + + // We force an update because otherwise the accordion + // would not re-render + this.forceUpdate(); + } + + renderContainer = (item, i) => { + const { opened } = item; + const contentElementId = `${item.id}-content`; + + return aside( + { + className: item.className, + key: item.id, + "aria-labelledby": item.id, + role: item.role, + }, + h2( + { + className: "_header", + }, + button( + { + id: item.id, + className: "header-label", + "aria-expanded": `${opened ? "true" : "false"}`, + "aria-controls": opened ? contentElementId : undefined, + onClick: () => this.handleHeaderClick(i), + }, + item.header + ), + item.buttons + ? div( + { + className: "header-buttons", + }, + item.buttons + ) + : null + ), + opened && + div( + { + className: "_content", + id: contentElementId, + }, + cloneElement(item.component, item.componentProps || {}) + ) + ); + }; + render() { + return div( + { + className: "accordion", + }, + this.props.items.map(this.renderContainer) + ); + } +} + +export default Accordion; |