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
|
import React from 'react';
import classnames from 'classnames';
import Collapse from 'react-bootstrap/lib/Collapse.js';
class NavigationSideBar extends React.Component {
static PropTypes = {
activeItemId: React.PropTypes.string.isRequired,
onSelect: React.PropTypes.func,
onToggle: React.PropTypes.func,
groups: React.PropTypes.array
};
render() {
let {groups, activeItemId} = this.props;
return (
<div className='navigation-side-content'>
{groups.map(group => (
<div className='navigation-group' key={group.id}>
<div className='group-name'>{group.name}</div>
<div className='navigation-group-items'>
{
group.items && group.items.map(item => this.renderGroupItem(item, activeItemId))
}
</div>
</div>
))}
</div>
);
}
renderGroupItem(item, activeItemId) {
let isGroup = item.items && item.items.length > 0;
return (
<div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})}>
<div
key={item.id}
className={classnames('navigation-group-item-name', {
'selected': item.id === activeItemId,
'disabled': item.disabled,
'bold-name': item.expanded,
'hidden': item.hidden
})}
onClick={(event) => this.handleItemClicked(event, item)}>
{item.name}
</div>
{isGroup &&
<Collapse in={item.expanded}>
<div>
{item.items.map(item => this.renderGroupItem(item, activeItemId))}
</div>
</Collapse>
}
</div>
);
}
handleItemClicked(event, item) {
event.stopPropagation();
if(this.props.onToggle) {
this.props.onToggle(this.props.groups, item.id);
}
if(item.onSelect) {
item.onSelect();
}
if(this.props.onSelect) {
this.props.onSelect(item);
}
}
}
export default NavigationSideBar;
|
