All files / components/accordion accordion.jsx

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
 
 
 
 
 
1x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
 
class Accordion extends React.Component {
  render() {
    const content = this.props.panels.map((panel, p) => {
      return (
        <div className={`panel box ${panel.theme}`} key={`panel-${p}`}>
          <div className={`box-header${panel.hasBorder ? ' with-border' : ''}`}>
            <h4 className="box-title">
              <a
                data-toggle="collapse"
                data-parent={`#${this.props.id}`}
                href={`#${panel.id}`}
                className={panel.open ? '' : 'collapsed'}
              >
                {panel.header}
              </a>
            </h4>
          </div>
          <div id={panel.id} className={`panel-collapse collapse${panel.open ? ' in' : ''}`}>
            <div className="box-body">
              {panel.body}
            </div>
          </div>
        </div>
      );
    });
    return (
      <div className="box-group" id={this.props.id}>
        {content}
      </div>
    );
  }
}
 
Accordion.propTypes = {
  id: PropTypes.string.isRequired,
  panels: PropTypes.array
};
 
Accordion.defaultProps = {
  panels: []
};
 
export default Accordion;