summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx
blob: 72f8de0d23dae2e0c20686034b8d4aeb90d680e8 (plain)
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
/*
 * Copyright © 2016-2018 European Support Limited
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import PropTypes from 'prop-types';

class Accordion extends React.Component {
    static propTypes = {
        title: PropTypes.string,
        children: PropTypes.node
    };

    constructor(props) {
        super(props);
        this.state = {
            open: false
        };
    }
    render() {
        const { children, title } = this.props;
        const { open } = this.state;
        return (
            <div className="accordion">
                <div
                    onClick={() => this.setState({ open: !open })}
                    className="accordion-header">
                    <SVGIcon
                        name="chevronUp"
                        iconClassName={open ? 'down' : ''}
                    />
                    <div className="title">{title}</div>
                </div>
                <div className={`accordion-body ${open ? 'open' : ''}`}>
                    {children}
                </div>
            </div>
        );
    }
}

export default Accordion;