1 | import * as React from 'react';
|
2 | import Icons from '../Icons';
|
3 |
|
4 | import { Content, Header, Wrapper } from './Accordion.styled';
|
5 |
|
6 | interface IProps {
|
7 | header: string| React.ReactNode |React.ReactChild;
|
8 | content: string| React.ReactNode |React.ReactChild;
|
9 | labels?: string| React.ReactNode |React.ReactChild;
|
10 | click: (e?: any) => any;
|
11 | active: boolean | number;
|
12 | automatic?: boolean;
|
13 | activeIndex: null | number;
|
14 | }
|
15 |
|
16 | interface IState {
|
17 | initialHeight: number;
|
18 | active: boolean | number;
|
19 | }
|
20 |
|
21 | export default class WrapperAccordion extends React.Component<IProps, IState> {
|
22 | accordionRef = React.createRef();
|
23 | state = {
|
24 | initialHeight: 0,
|
25 | active: false,
|
26 | }
|
27 |
|
28 | componentDidMount() {
|
29 |
|
30 | const initialHeight = this.accordionRef.current.childNodes[0].clientHeight || 0;
|
31 | this.setState({ initialHeight });
|
32 | }
|
33 |
|
34 | onToggle = () => this.setState(prevState => ({
|
35 | active: !prevState.active
|
36 | }), this.props.click(this.state.active));
|
37 |
|
38 | isAutomatic = () => this.props.activeIndex === this.props.active;
|
39 |
|
40 | isActive = () => (this.props.automatic) ? this.isAutomatic() : this.state.active;
|
41 |
|
42 | render = () => (
|
43 | <Wrapper
|
44 | active={this.isActive()}
|
45 |
|
46 | ref={this.accordionRef}
|
47 | initialHeight={this.state.initialHeight}
|
48 | >
|
49 | <Header onClick={this.onToggle} active={this.isActive()}>
|
50 | {this.props.header}
|
51 | <div className='label-icons'>
|
52 | {this.props.labels}
|
53 | <Icons.Arrow degree={this.isActive() ? 0 : 180} width={20} height={20} />
|
54 | </div>
|
55 | </Header>
|
56 | <Content>{this.props.content}</Content>
|
57 | </Wrapper>
|
58 | )
|
59 | } |
\ | No newline at end of file |