/
accordion-item.js
85 lines (68 loc) · 2.28 KB
/
accordion-item.js
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
83
84
85
// @flow
import React, { Component } from 'react';
import type { Node } from 'react';
import consecutive from 'consecutive';
import classNames from 'classnames';
const nextUuid = consecutive();
type AccordionItemProps = {
accordion: boolean,
expanded: boolean,
onClick: Function,
children: Node,
className: string,
hideBodyClassName: string,
};
type AccordionItemState = {
itemUuid: string,
};
class AccordionItem extends Component<AccordionItemProps, AccordionItemState> {
static defaultProps = {
accordion: true,
expanded: false,
onClick: () => {},
className: 'accordion__item',
hideBodyClassName: '',
};
state = {
itemUuid: nextUuid(),
};
renderChildren() {
const { accordion, expanded, onClick, children } = this.props;
const { itemUuid } = this.state;
return React.Children.map(children, (item) => {
const itemProps = {};
if (item.type.accordionElementName === 'AccordionItemTitle') {
itemProps.expanded = expanded;
itemProps.key = 'title';
itemProps.id = `accordion__title-${itemUuid}`;
itemProps.ariaControls = `accordion__body-${itemUuid}`;
itemProps.onClick = onClick;
itemProps.role = accordion ? 'tab' : 'button';
return React.cloneElement(item, itemProps);
} else if (item.type.accordionElementName === 'AccordionItemBody') {
itemProps.expanded = expanded;
itemProps.key = 'body';
itemProps.id = `accordion__body-${itemUuid}`;
itemProps.role = accordion ? 'tabpanel' : null;
return React.cloneElement(item, itemProps);
}
return item;
});
}
renderChildren = this.renderChildren.bind(this);
render() {
const { className, expanded, hideBodyClassName } = this.props;
const itemClassName = classNames(
className,
{
[hideBodyClassName]: (!expanded && hideBodyClassName),
},
);
return (
<div className={itemClassName}>
{this.renderChildren()}
</div>
);
}
}
export default AccordionItem;