From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- .../debugger/src/components/shared/Accordion.js | 89 ++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 devtools/client/debugger/src/components/shared/Accordion.js (limited to 'devtools/client/debugger/src/components/shared/Accordion.js') 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 . */ + +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; -- cgit v1.2.3