From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 .../odiparpack/app/components/Sidebar/MainMenu.js  | 130 +++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 front/odiparpack/app/components/Sidebar/MainMenu.js

(limited to 'front/odiparpack/app/components/Sidebar/MainMenu.js')

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);
-- 
cgit v1.2.3