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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
// Menu Object
import MenuContent from 'ba-api/menu';
import { List, ListItem, ListItemIcon, ListItemText, Collapse, Icon } from '@material-ui/core';
import styles from './sidebar-jss';
function sortByKey(array, key) {
return array.sort((a, b) => {
const x = a[key]; const y = b[key];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}
const LinkBtn = React.forwardRef(function LinkBtn(props, ref) { // eslint-disable-line
return <NavLink to={props.to} {...props} innerRef={ref} />; // eslint-disable-line
});
function MainMenu(props) {
const {
classes,
toggleDrawerOpen,
loadTransition,
openSubMenu,
open,
} = props;
const handleClick = () => {
toggleDrawerOpen();
loadTransition(false);
};
const getMenus = menuArray => menuArray.map((item, index) => {
if (item.child) {
return (
<div key={index.toString()}>
<ListItem
button
className={classNames(classes.head, open.indexOf(item.key) > -1 ? classes.opened : '')}
onClick={() => openSubMenu(item.key, item.keyParent)}
>
{item.icon
&& (
<ListItemIcon className={classes.iconWrapper}>
<Icon className={classes.icon}>{item.icon}</Icon>
</ListItemIcon>
)
}
<ListItemText classes={{ primary: classes.primary }} variant="inset" primary={item.name} />
{ open.indexOf(item.key) > -1 ? <ExpandLess /> : <ExpandMore /> }
</ListItem>
<Collapse
component="li"
className={classNames(
classes.nolist,
(item.keyParent ? classes.child : ''),
)}
in={open.indexOf(item.key) > -1}
timeout="auto"
unmountOnExit
>
<List className={classes.dense} dense>
{ getMenus(sortByKey(item.child, 'key')) }
</List>
</Collapse>
</div>
);
}
return (
<ListItem
key={index.toString()}
button
exact
className={classes.nested}
activeClassName={classes.active}
component={LinkBtn}
to={item.link}
onClick={handleClick}
>
{item.icon
&& (
<ListItemIcon>
<Icon className={classes.icon}>{item.icon}</Icon>
</ListItemIcon>
)
}
<ListItemText classes={{ primary: classes.primary }} inset primary={item.name} />
</ListItem>
);
});
return (
<div>
{getMenus(MenuContent)}
</div>
);
}
MainMenu.propTypes = {
classes: PropTypes.object.isRequired,
open: PropTypes.object.isRequired,
openSubMenu: PropTypes.func.isRequired,
toggleDrawerOpen: PropTypes.func.isRequired,
loadTransition: PropTypes.func.isRequired,
};
const openAction = (key, keyParent) => ({ type: 'OPEN_SUBMENU', key, keyParent });
const reducer = 'ui';
const mapStateToProps = state => ({
force: state, // force active class for sidebar menu
open: state.getIn([reducer, 'subMenuOpen'])
});
const mapDispatchToProps = dispatch => ({
openSubMenu: bindActionCreators(openAction, dispatch)
});
const MainMenuMapped = connect(
mapStateToProps,
mapDispatchToProps
)(MainMenu);
export default withStyles(styles)(MainMenuMapped);
|
