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
|
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';
// Menu Object
import MenuContent from 'odi-utils/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 MainMenuSimple(props) {
const {
classes,
toggleDrawerOpen,
loadTransition,
openSubMenu,
open,
} = props;
const handleClick = () => {
//toggleDrawerOpen();
loadTransition(false);
};
const getMenus = menuArray => menuArray.map((item, index) => {
return (
<div key={index.toString()}>
<ListItem
button
exact
className={classNames(classes.head, open.indexOf(item.key) > -1 ? classes.opened : '')}
activeClassName={classes.active}
component={LinkBtn}
to={item.link}
onClick={handleClick}
timeout="auto"
unmountOnExit
>
{item.icon
&& (
<ListItemIcon className={classes.iconWrapper}>
<Icon className={classes.icon}>{item.icon}</Icon>
</ListItemIcon>
)
}
<ListItemText classes={{ primary: classes.primary }} variant="inset" primary={item.name} />
</ListItem>
</div>
);
});
return (
<div>
{getMenus(MenuContent)}
</div>
);
}
MainMenuSimple.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
)(MainMenuSimple);
export default withStyles(styles)(MainMenuMapped);
|
