@krowdy-ui/views/esm/Dashboard/Dashboard.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React, { useState } from 'react';
import { Link as RouterLink, useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@krowdy-ui/styles';
import { Menu as MenuIcon } from '@material-ui/icons';
import { AppBar, Toolbar, IconButton, Typography, MenuItem, Drawer, Divider, List, ListItem, Menu, Link, Button, ListItemIcon, ListItemText // Icon
} from '@krowdy-ui/core';
import { AvatarUser } from '@krowdy-ui/views';
import capitalize from '../utils/capitalize';
var drawerWidth = 210;
var drawerWidthMin = 56;
var useStyles = makeStyles(function (theme) {
  var _main, _wrapperContent;

  return {
    drawerContent: {
      width: drawerWidthMin
    },
    // drawerContentIcon: {
    //   '&:hover': {
    //     backgroundColor: theme.palette.primary[600]
    //   },
    //   backgroundColor: theme.palette.primary[600],
    //   color          : theme.palette.common.white,
    //   height         : 50,
    //   justifyContent : 'flex-end'
    // },
    drawerIcon: {
      color: 'inherit'
    },
    drawerLabel: {
      '& > span': {
        fontSize: '1rem'
      },
      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',
      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(-25px, 0, 0)'
      },
      width: drawerWidthMin
    },
    hiddenUpMobile: _defineProperty({}, theme.breakpoints.up('md'), {
      display: 'none'
    }),
    iconMenu: {
      color: theme.palette.common.white
    },
    linkLabel: {
      '&:after': {
        backgroundColor: theme.palette.primary.main,
        bottom: -2,
        content: '""',
        height: 1,
        left: 0,
        position: 'absolute',
        right: 0,
        transform: 'scaleX(0)',
        transition: 'all .2s ease 0s'
      },
      '&:hover': {
        '&:after': {
          transform: 'scaleX(1)'
        }
      },
      cursor: 'pointer',
      position: 'relative'
    },
    linkLabelSecondary: {
      '&:after': {
        backgroundColor: theme.palette.secondary.main
      }
    },
    logoCompany: {
      '& > img': {
        maxHeight: 50,
        maxWidth: 115
      },
      alignItems: 'center',
      cursor: 'pointer',
      display: 'flex',
      height: 64,
      justifyContent: 'center',
      // marginLeft    : theme.spacing(3),
      // marginRight   : 10,
      margin: theme.spacing(0, 1),
      position: 'relative'
    },
    main: (_main = {}, _defineProperty(_main, theme.breakpoints.down('sm'), {
      overflow: 'auto'
    }), _defineProperty(_main, "backgroundColor", theme.palette.grey[200]), _defineProperty(_main, "display", 'flex'), _defineProperty(_main, "flex", 1), _defineProperty(_main, "height", '100%'), _defineProperty(_main, "overflow", 'hidden'), _defineProperty(_main, "position", 'relative'), _main),
    menuButton: {
      marginRight: theme.spacing(2)
    },
    menuDashboardItem: {
      alignItems: 'center',
      display: 'flex',
      padding: theme.spacing(1, 2),
      width: '100%'
    },
    menuDashboardItemLink: {
      display: 'flex'
    },
    menuDashboardListItem: {
      // '&:hover': {
      //   backgroundColor: theme.palette.primary[600]
      // },
      color: theme.palette.common.white,
      padding: 0
    },
    menuDashboardListItemActive: {
      '&:hover': {
        backgroundColor: theme.palette.common.white
      },
      // '& > div': {
      //   color: 'inherit'
      // },
      // '&:active': {
      //   backgroundColor: theme.palette.common.white,
      //   color          : theme.palette.primary.main
      // },
      backgroundColor: theme.palette.common.white,
      color: theme.palette.primary.main
    },
    menuItemContentName: {
      '&:focus': {
        outline: 'none'
      },
      display: 'flex',
      flexDirection: 'column'
    },
    menuItemName: {
      fontSize: '1rem',
      fontWeight: 600,
      lineHeight: '1.5',
      minHeight: 'auto',
      padding: theme.spacing(1, 2)
    },
    menuLink: {
      '& > a': {
        color: theme.palette.grey[800],
        display: 'block',
        width: '100%'
      },
      '& > a:hover': {
        textDecoration: 'none'
      },
      '&:hover': {
        textDecoration: 'none'
      },
      padding: theme.spacing(1, 2),
      textDecoration: 'none',
      width: '100%'
    },
    notificationIcon: {
      '& svg': {
        fontSize: '1.75rem'
      },
      '&:hover': {
        backgroundColor: 'transparent',
        color: theme.palette.grey[500]
      },
      color: theme.palette.grey[600]
    },
    profileName: {
      alignItems: 'center',
      backgroundColor: theme.palette.grey[200],
      border: "2px solid ".concat(theme.palette.primary.main),
      borderRadius: '50%',
      color: theme.palette.grey[500],
      display: 'flex',
      fontSize: '0.75rem',
      height: 34,
      justifyContent: 'center',
      position: 'relative',
      width: 34
    },
    root: _defineProperty({
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'hidden',
      width: '100%'
    }, theme.breakpoints.down('sm'), {
      height: '100%',
      minHeight: '100vh'
    }),
    title: {
      color: theme.palette.primary.main,
      flexGrow: 1
    },
    toolbar: {
      display: 'flex',
      justifyContent: 'space-between',
      paddingRight: 24 // keep right padding when drawer closed

    },
    toolbarCenter: {
      display: 'flex',
      flex: 1,
      justifyContent: 'space-between' // padding       : theme.spacing(0, 1)

    },
    toolbarCenterLeft: {
      '& > a': {
        '&:first-child': {
          marginLeft: 0
        },
        marginLeft: theme.spacing(1)
      },
      padding: theme.spacing(0, 1)
    },
    toolbarCenterRight: {
      '& > a': {
        '&:last-child': {
          marginRight: 0
        },
        marginRight: theme.spacing(1)
      },
      padding: theme.spacing(0, 1)
    },
    topBar: {
      backgroundColor: theme.palette.common.white,
      boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.1)'
    },
    wrapperContent: (_wrapperContent = {}, _defineProperty(_wrapperContent, theme.breakpoints.down('sm'), {
      overflow: 'initial'
    }), _defineProperty(_wrapperContent, "borderRadius", 4), _defineProperty(_wrapperContent, "display", 'flex'), _defineProperty(_wrapperContent, "flex", 1), _defineProperty(_wrapperContent, "justifyContent", 'center'), _defineProperty(_wrapperContent, "overflow", 'hidden'), _defineProperty(_wrapperContent, "padding", theme.spacing(1)), _defineProperty(_wrapperContent, "position", 'relative'), _wrapperContent)
  };
}, {
  name: 'Dashboard'
});

var isExternalURL = function isExternalURL(str) {
  return new RegExp('^(https?:\\/\\/)?' + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + '((\\d{1,3}\\.){3}\\d{1,3}))' + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + '(\\?[;&a-z\\d%_.~+=-]*)?' + '(\\#[-a-z\\d_]*)?$', 'i').test(str);
};

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

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

function Dashboard(props) {
  var _props$user = props.user,
      user = _props$user === void 0 ? {} : _props$user,
      _props$userMenu = props.userMenu,
      userMenu = _props$userMenu === void 0 ? [] : _props$userMenu,
      _props$actions = props.actions,
      actions = _props$actions === void 0 ? {} : _props$actions,
      _props$logo = props.logo,
      logo = _props$logo === void 0 ? {} : _props$logo,
      _props$menus = props.menus,
      menus = _props$menus === void 0 ? [] : _props$menus,
      _props$menuTopLeft = props.menuTopLeft,
      menuTopLeft = _props$menuTopLeft === void 0 ? [] : _props$menuTopLeft,
      _props$menuTopRight = props.menuTopRight,
      menuTopRight = _props$menuTopRight === void 0 ? [] : _props$menuTopRight,
      children = props.children;
  var logout = actions.logout;
  var history = useHistory();
  var location = history.location;
  var classes = useStyles();

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isOpenDrawer = _useState2[0],
      setToggleDrawer = _useState2[1];

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      anchorEl = _useState4[0],
      setAnchorEl = _useState4[1];

  var _handleClickToggleDrawer = function _handleClickToggleDrawer() {
    return setToggleDrawer(!isOpenDrawer);
  };

  var _handleOpenMenu = function _handleOpenMenu(ev) {
    return setAnchorEl(ev.currentTarget);
  };

  var _handleCloseMenu = function _handleCloseMenu() {
    return setAnchorEl(null);
  };

  var _handlePreventRoute = function _handlePreventRoute(mUrl) {
    return function (ev) {
      if (location.pathname === mUrl) ev.preventDefault();
    };
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(AppBar, {
    className: classes.topBar,
    color: "default",
    position: "relative"
  }, /*#__PURE__*/React.createElement(Toolbar, {
    className: classes.toolbar
  }, /*#__PURE__*/React.createElement(IconButton, {
    "aria-label": "menu",
    className: classes.hiddenUpMobile,
    edge: "start",
    onClick: _handleClickToggleDrawer
  }, _ref), /*#__PURE__*/React.createElement(Link, {
    className: classes.logoCompany,
    component: RouterLink,
    to: "/"
  }, /*#__PURE__*/React.createElement("img", {
    alt: "Logo Main",
    src: logo && logo.source ? logo.source : ''
  })), /*#__PURE__*/React.createElement("div", {
    className: classes.toolbarCenter
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.toolbarCenterLeft
  }, menuTopLeft.map(function (item, index) {
    var auxProps = isExternalURL(item.url) ? {
      href: item.url
    } : {
      component: RouterLink,
      to: item.url
    };
    return item.type === 'button' ? /*#__PURE__*/React.createElement(Button, _extends({
      color: item.color ? item.color : 'default',
      key: "menu-top-left-".concat(index),
      target: item.target ? item.target : '_blank',
      variant: item.variant ? item.variant : 'text'
    }, auxProps), item.title) : item.type === 'link' ? /*#__PURE__*/React.createElement(Link, _extends({
      className: clsx(classes.linkLabel, Boolean(item.color) && classes["linkLabel".concat(capitalize(item.color || ''))]),
      color: item.color ? item.color : undefined,
      key: "menu-top-left-".concat(index),
      target: item.target,
      underline: "none"
    }, auxProps), item.title) : /*#__PURE__*/React.createElement("div", {
      key: "menu-top-left-".concat(index)
    }, item.title);
  })), /*#__PURE__*/React.createElement("div", {
    className: classes.toolbarCenterRight
  }, menuTopRight.map(function (item, index) {
    var auxProps = isExternalURL(item.url) ? {
      href: item.url
    } : {
      component: RouterLink,
      to: item.url
    };
    return item.type === 'button' ? /*#__PURE__*/React.createElement(Button, _extends({
      color: item.color ? item.color : 'default',
      key: "menu-top-right-".concat(index),
      variant: item.variant ? item.variant : 'text'
    }, auxProps), item.title) : item.type === 'link' ? /*#__PURE__*/React.createElement(Link, _extends({
      className: clsx(classes.linkLabel, Boolean(item.color) && classes["linkLabel".concat(capitalize(item.color || ''))]),
      color: item.color ? item.color : undefined,
      key: "menu-top-right-".concat(index),
      rel: item.target === '_blank' ? 'noopener' : undefined,
      target: item.target,
      underline: "none"
    }, auxProps), item.title) : /*#__PURE__*/React.createElement("div", {
      key: "menu-top-right-".concat(index)
    }, item.title);
  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
    "aria-controls": "simple-menu",
    "aria-haspopup": "true",
    className: classes.notificationIcon,
    color: "inherit",
    onClick: _handleOpenMenu
  }, /*#__PURE__*/React.createElement(AvatarUser, {
    user: user
  })), /*#__PURE__*/React.createElement(Menu, {
    anchorEl: anchorEl,
    anchorOrigin: {
      horizontal: 'right',
      vertical: 'bottom'
    },
    getContentAnchorEl: null,
    keepMounted: true,
    MenuListProps: {
      style: {
        padding: 0
      }
    },
    onClose: _handleCloseMenu,
    open: Boolean(anchorEl),
    transformOrigin: {
      horizontal: 'right',
      vertical: 'top'
    }
  }, /*#__PURE__*/React.createElement("li", {
    className: classes.menuItemContentName,
    tabIndex: -1
  }, /*#__PURE__*/React.createElement(Typography, {
    className: classes.menuItemName,
    variant: "inherit"
  }, user.firstName, " ", user.lastName), _ref2), userMenu.length ? userMenu.map(function (item, n) {
    return item.type === 'action' ? /*#__PURE__*/React.createElement(MenuItem, {
      className: classes.menuLink,
      key: n,
      onClick: logout
    }, item.title) : isExternalURL(item.url) ? /*#__PURE__*/React.createElement(MenuItem, {
      className: classes.menuLink,
      key: n
    }, /*#__PURE__*/React.createElement(Link, {
      component: "a",
      href: item.url,
      target: item.target ? item.target : '_blank'
    }, item.title)) : /*#__PURE__*/React.createElement(MenuItem, {
      className: classes.menuLink,
      key: n
    }, /*#__PURE__*/React.createElement(Link, {
      component: RouterLink,
      to: item.url
    }, item.title));
  }) : null)))), /*#__PURE__*/React.createElement("main", {
    className: classes.main
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.drawerContent
  }, /*#__PURE__*/React.createElement(Drawer, {
    classes: {
      paper: clsx(classes.drawerPaper, !isOpenDrawer && classes.drawerPaperClose)
    },
    open: isOpenDrawer,
    variant: "permanent"
  }, /*#__PURE__*/React.createElement(List, {
    disablePadding: true
  }, menus.map(function (item, index) {
    var linkProps = isExternalURL(item.url) ? {
      href: item.url
    } : {
      component: RouterLink,
      to: item.url
    };
    return /*#__PURE__*/React.createElement(ListItem, {
      button: true,
      className: clsx(classes.menuDashboardListItem, location.pathname === item.url && classes.menuDashboardListItemActive),
      disableGutters: true,
      key: index
    }, /*#__PURE__*/React.createElement(Link, _extends({
      className: classes.menuDashboardItem,
      color: "inherit",
      onClick: _handlePreventRoute(item.url),
      target: item.target,
      underline: "none"
    }, linkProps), item.icon ? /*#__PURE__*/React.createElement(ListItemIcon, {
      className: classes.drawerIcon
    }, item.icon) : null, /*#__PURE__*/React.createElement(ListItemText, {
      className: classes.drawerLabel,
      primary: item.title
    })));
  })))), /*#__PURE__*/React.createElement("div", {
    className: classes.wrapperContent
  }, children)));
}

process.env.NODE_ENV !== "production" ? Dashboard.propTypes = {
  actions: PropTypes.shape({
    logout: PropTypes.func
  }),
  classes: PropTypes.object,
  logo: PropTypes.shape({
    alt: PropTypes.string,
    source: PropTypes.string
  }),
  menuTopLeft: PropTypes.arrayOf(PropTypes.shape({
    color: PropTypes.string,
    target: PropTypes.string,
    title: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    variant: PropTypes.string
  })),
  menuTopRight: PropTypes.arrayOf(PropTypes.shape({
    color: PropTypes.string,
    target: PropTypes.string,
    title: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    variant: PropTypes.string
  })),
  menus: PropTypes.arrayOf(PropTypes.shape({
    icon: PropTypes.element,
    target: PropTypes.string,
    title: PropTypes.string.isRequired,
    // type  : PropTypes.string.isRequired,
    url: PropTypes.string.isRequired
  })),
  user: PropTypes.shape({
    firstName: PropTypes.string,
    lastName: PropTypes.string,
    photo: PropTypes.string
  }),
  userMenu: PropTypes.arrayOf(PropTypes.shape({
    action: PropTypes.string,
    target: PropTypes.string,
    title: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired
  }))
} : void 0;
Dashboard.muiName = 'Dashboard';
export default Dashboard;