summaryrefslogtreecommitdiffstats
path: root/front/odiparpack/app/components/Sidebar/MainMenu.js
diff options
context:
space:
mode:
Diffstat (limited to 'front/odiparpack/app/components/Sidebar/MainMenu.js')
-rw-r--r--front/odiparpack/app/components/Sidebar/MainMenu.js130
1 files changed, 130 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Sidebar/MainMenu.js b/front/odiparpack/app/components/Sidebar/MainMenu.js
new file mode 100644
index 0000000..edeb420
--- /dev/null
+++ b/front/odiparpack/app/components/Sidebar/MainMenu.js
@@ -0,0 +1,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);