diff options
Diffstat (limited to 'front/odiparpack/app/components/Sidebar/MainMenu.js')
| -rw-r--r-- | front/odiparpack/app/components/Sidebar/MainMenu.js | 130 |
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); |
