1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
/* 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/. */
/**
* This file should not be modified and is a duplicate from the debugger.html project.
* Any changes to this file should be imported from the upstream debugger.html project.
*/
"use strict";
const React = require("devtools/client/shared/vendor/react");
const { DOM: dom, PropTypes } = React;
const { div, span } = dom;
const Accordion = React.createClass({
displayName: "Accordion",
propTypes: {
items: PropTypes.array
},
getInitialState: function () {
return { opened: this.props.items.map(item => item.opened),
created: [] };
},
handleHeaderClick: function (i) {
const opened = [...this.state.opened];
const created = [...this.state.created];
const item = this.props.items[i];
opened[i] = !opened[i];
created[i] = true;
if (opened[i] && item.onOpened) {
item.onOpened();
}
this.setState({ opened, created });
},
renderContainer: function (item, i) {
const { opened, created } = this.state;
const containerClassName =
item.header.toLowerCase().replace(/\s/g, "-") + "-pane";
let arrowClassName = "arrow theme-twisty";
if (opened[i]) {
arrowClassName += " open";
}
return div(
{ className: containerClassName, key: i },
div(
{ className: "_header",
onClick: () => this.handleHeaderClick(i) },
span({ className: arrowClassName }),
item.header
),
(created[i] || opened[i]) ?
div(
{ className: "_content",
style: { display: opened[i] ? "block" : "none" }
},
React.createElement(item.component, item.componentProps || {})
) :
null
);
},
render: function () {
return div(
{ className: "accordion" },
this.props.items.map(this.renderContainer)
);
}
});
module.exports = Accordion;
|
