/
SectionWithSubsection1.jsx
75 lines (64 loc) · 1.95 KB
/
SectionWithSubsection1.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
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
import React from 'react';
import List, {
Item,
Section,
Subsection,
Utils,
} from 'terra-list';
import Placeholder from 'terra-doc-template/lib/Placeholder';
import classNames from 'classnames/bind';
import mockData from './mock-data/mock-section-sub';
import styles from '../example/ListDocCommon.module.scss';
const cx = classNames.bind(styles);
const createListItem = itemData => (
<Item key={itemData.key}>
<Placeholder title={itemData.title} className={cx('placeholder')} />
</Item>
);
const createSubsection = subsectionData => (
<Subsection
key={subsectionData.key}
title={subsectionData.title}
>
{subsectionData.childItems.map(childItem => createListItem(childItem))}
</Subsection>
);
class SectionWithSubsection1 extends React.Component {
constructor(props) {
super(props);
this.createSection = this.createSection.bind(this);
this.createSections = this.createSections.bind(this);
this.handleSectionSelection = this.handleSectionSelection.bind(this);
this.state = { collapsedKeys: [] };
}
handleSectionSelection(event, metaData) {
event.preventDefault();
this.setState(state => ({ collapsedKeys: Utils.updatedMultiSelectedKeys(state.collapsedKeys, metaData.key) }));
}
createSection(sectionData) {
const isCollapsed = this.state.collapsedKeys.indexOf(sectionData.key) >= 0;
return (
<Section
key={sectionData.key}
title={sectionData.title}
isCollapsed={isCollapsed}
isCollapsible
metaData={{ key: sectionData.key }}
onSelect={this.handleSectionSelection}
>
{!isCollapsed && sectionData.childItems.map(childItem => createSubsection(childItem))}
</Section>
);
}
createSections(data) {
return data.map(section => this.createSection(section));
}
render() {
return (
<List dividerStyle="standard">
{this.createSections(mockData)}
</List>
);
}
}
export default SectionWithSubsection1;