@krowdy-ui/views/es/Main/Main.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import { Link as RouterLink, useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { Drawer, List, ListItem, Link, ListItemIcon, ListItemText, Collapse, withStyles } from '@krowdy-ui/core';
import { ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon } from '@material-ui/icons';
import { isExternalURL } from '../utils';
const drawerWidth = 210;
const drawerWidthMin = 56;

const styles = theme => ({
  // drawer: {
  // width: drawerWidthMin
  // },
  drawerContent: {
    width: drawerWidthMin
  },
  drawerIcon: {
    color: 'inherit',
    margin: theme.spacing(.5, 0),
    // minWidth: 32
    minWidth: 'auto'
  },
  drawerItemCollapse: {
    display: 'block'
  },
  drawerLabel: {
    // '& > span': {
    //   fontSize: '1rem'
    // },
    // marginLeft: theme.spacing(2.5),
    marginLeft: theme.spacing(1.5),
    transition: 'transform 300ms ease 0s, opacity 300ms ease 0s'
  },
  drawerPaper: {
    // '&:hover': {
    //   '& $drawerLabel': {
    //     opacity  : 1,
    //     transform: 'translate3d(0px, 0, 0)'
    //   },
    //   boxShadow: '0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)',
    //   width    : drawerWidth
    // },
    background: theme.palette.primary.main,
    borderRight: 0,
    overflow: 'hidden',
    // position   : 'absolute',
    position: 'initial',
    transition: theme.transitions.create('width', {
      duration: theme.transitions.duration.standard,
      easing: theme.transitions.easing.easeInOut
    }),
    whiteSpace: 'nowrap',
    width: drawerWidth,
    zIndex: 10
  },
  drawerPaperClose: {
    '& $drawerLabel': {
      opacity: 0,
      transform: 'translate3d(-10px, 0, 0)'
    },
    // minWidth: drawerWidthMin,
    width: drawerWidthMin
  },
  flexCenterVertical: {
    alignItems: 'center',
    display: 'flex'
  },
  labelBold: {
    '& > span': {
      fontWeight: 'bold'
    }
  },
  listRoot: {
    flex: 1,
    overflowX: 'hidden' // justifyContent: 'space-between'

  },
  main: {
    backgroundColor: theme.palette.grey[200],
    display: 'flex',
    flexGrow: 1,
    // [theme.breakpoints.down('sm')]: {
    //   overflow: 'initial'
    // },
    // borderRadius  : 4,
    overflow: 'auto',
    // flex          : 1,
    // justifyContent: 'center',
    padding: theme.spacing(1) // padding       : theme.spacing(1),
    // position      : 'relative'

  },
  menuDashboardItem: {
    alignItems: 'center',
    display: 'flex',
    padding: theme.spacing(1, 2),
    width: '100%'
  },
  menuDashboardListItem: {
    color: theme.palette.common.white,
    padding: 0
  },
  menuDashboardListItemActive: {
    '&:hover': {
      backgroundColor: theme.palette.common.white
    },
    backgroundColor: theme.palette.common.white,
    color: theme.palette.primary.main
  },
  optionBottom: {
    boxShadow: '0px -1px 5px rgba(0, 0, 0, 0.1)'
  },
  shadow: {
    boxShadow: '0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)',
    // boxShadow: '0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)',
    position: 'relative'
  },
  toolbar: theme.mixins.toolbar
});

var _ref = /*#__PURE__*/React.createElement(ExpandLessIcon, null);

var _ref2 = /*#__PURE__*/React.createElement(ExpandMoreIcon, null);

function DrawerListItem({
  menu,
  classes
}) {
  const history = useHistory();
  const {
    location
  } = history;
  const {
    options,
    title,
    icon,
    url,
    target,
    expanded = false,
    disabled = false,
    onClick
  } = menu;
  const [openCollapse, setOpenCollapse] = React.useState(expanded);

  const _handleToggleCollapse = () => {
    setOpenCollapse(!openCollapse);
  };

  const _handleClickLink = mUrl => ev => {
    if (location.pathname === mUrl || onClick) ev.preventDefault();
    if (onClick) onClick();
  };

  if (options && options.length) return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
    button: true,
    className: clsx(classes.menuDashboardListItem, classes.drawerItemCollapse),
    disableGutters: true,
    onClick: _handleToggleCollapse
  }, /*#__PURE__*/React.createElement("div", {
    // underline='none'
    // color='inherit'
    // component='div'
    className: classes.menuDashboardItem
  }, icon ? /*#__PURE__*/React.createElement(ListItemIcon, {
    className: classes.drawerIcon
  }, icon) : null, /*#__PURE__*/React.createElement("div", {
    className: classes.flexCenterVertical
  }, /*#__PURE__*/React.createElement(ListItemText, {
    className: clsx(classes.drawerLabel, classes.labelBold),
    primary: title,
    primaryTypographyProps: {
      variant: 'body2'
    }
  }), openCollapse ? _ref : _ref2))), /*#__PURE__*/React.createElement(Collapse, {
    in: openCollapse,
    unmountOnExit: true
  }, renderDrawerList(options.map(option => _extends({
    icon
  }, option)), classes)));
  const linkProps = url ? isExternalURL(url) ? {
    href: url
  } : {
    component: RouterLink,
    to: url
  } : {};
  return /*#__PURE__*/React.createElement(ListItem, {
    button: true,
    className: clsx(classes.menuDashboardListItem, url && location.pathname.indexOf(url) === 0 && classes.menuDashboardListItemActive),
    disabled: disabled,
    disableGutters: true
  }, /*#__PURE__*/React.createElement(Link, _extends({
    className: classes.menuDashboardItem,
    color: "inherit",
    onClick: _handleClickLink(url),
    target: target,
    underline: "none"
  }, linkProps), icon ? /*#__PURE__*/React.createElement(ListItemIcon, {
    className: classes.drawerIcon
  }, icon) : null, /*#__PURE__*/React.createElement(ListItemText, {
    className: classes.drawerLabel,
    primary: title,
    primaryTypographyProps: {
      variant: 'body2'
    }
  })));
}

const renderDrawerList = (menus, classes) => /*#__PURE__*/React.createElement(List, {
  className: classes.root,
  disablePadding: true
}, menus.map((menu, index) => /*#__PURE__*/React.createElement(DrawerListItem, {
  classes: classes,
  key: `listItem-${index}`,
  menu: menu
})));

function Main(props) {
  const {
    classes,
    menus = [],
    component: Component = 'main',
    shadow = false,
    isOpenDrawer,
    children,
    optionBottom
  } = props;

  const _handleClickOptionBottom = ev => {
    if (optionBottom.onClick) optionBottom.onClick(ev);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer, {
    classes: {
      paper: clsx(classes.drawerPaper, shadow && classes.shadow, isOpenDrawer && classes.drawerPaperClose)
    } // className={classes.drawer}
    ,
    open: isOpenDrawer,
    variant: "permanent"
  }, renderDrawerList(menus, {
    drawerIcon: classes.drawerIcon,
    drawerItemCollapse: classes.drawerItemCollapse,
    drawerLabel: classes.drawerLabel,
    flexCenterVertical: classes.flexCenterVertical,
    labelBold: classes.labelBold,
    menuDashboardItem: classes.menuDashboardItem,
    menuDashboardListItem: classes.menuDashboardListItem,
    menuDashboardListItemActive: classes.menuDashboardListItemActive,
    root: classes.listRoot
  }), optionBottom ? /*#__PURE__*/React.createElement(ListItem, {
    button: true,
    className: clsx(classes.menuDashboardListItem, classes.optionBottom),
    disableGutters: true,
    onClick: _handleClickOptionBottom
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.menuDashboardItem
  }, optionBottom.icon ? /*#__PURE__*/React.createElement(ListItemIcon, {
    className: classes.drawerIcon
  }, optionBottom.icon) : null, /*#__PURE__*/React.createElement(ListItemText, {
    className: classes.drawerLabel,
    primary: optionBottom.title,
    primaryTypographyProps: {
      variant: 'body2'
    }
  }))) : null), /*#__PURE__*/React.createElement(Component, {
    className: classes.main
  }, children));
}

process.env.NODE_ENV !== "production" ? Main.propTypes = {
  classes: PropTypes.object.isRequired,
  isOpenDrawer: PropTypes.bool,

  /**
   * @ignore
   */
  menus: PropTypes.arrayOf(PropTypes.shape({
    expanded: PropTypes.bool,
    icon: PropTypes.element,
    options: PropTypes.array,
    target: PropTypes.string,
    title: PropTypes.string.isRequired,
    url: PropTypes.string
  })),
  optionBottom: PropTypes.shape({
    icon: PropTypes.element,
    onClick: PropTypes.func,
    title: PropTypes.string.isRequired
  }),
  shadow: PropTypes.bool
} : void 0;
export default withStyles(styles, {
  name: 'KrowdyMain'
})(Main);