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

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _reactRouterDom = require("react-router-dom");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _clsx = _interopRequireDefault(require("clsx"));

var _styles = require("@krowdy-ui/styles");

var _icons = require("@material-ui/icons");

var _core = require("@krowdy-ui/core");

var _views = require("@krowdy-ui/views");

var _capitalize = _interopRequireDefault(require("../utils/capitalize"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var drawerWidth = 210;
var drawerWidthMin = 56;
var useStyles = (0, _styles.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: (0, _defineProperty2["default"])({}, 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 = {}, (0, _defineProperty2["default"])(_main, theme.breakpoints.down('sm'), {
      overflow: 'auto'
    }), (0, _defineProperty2["default"])(_main, "backgroundColor", theme.palette.grey[200]), (0, _defineProperty2["default"])(_main, "display", 'flex'), (0, _defineProperty2["default"])(_main, "flex", 1), (0, _defineProperty2["default"])(_main, "height", '100%'), (0, _defineProperty2["default"])(_main, "overflow", 'hidden'), (0, _defineProperty2["default"])(_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: (0, _defineProperty2["default"])({
      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 = {}, (0, _defineProperty2["default"])(_wrapperContent, theme.breakpoints.down('sm'), {
      overflow: 'initial'
    }), (0, _defineProperty2["default"])(_wrapperContent, "borderRadius", 4), (0, _defineProperty2["default"])(_wrapperContent, "display", 'flex'), (0, _defineProperty2["default"])(_wrapperContent, "flex", 1), (0, _defineProperty2["default"])(_wrapperContent, "justifyContent", 'center'), (0, _defineProperty2["default"])(_wrapperContent, "overflow", 'hidden'), (0, _defineProperty2["default"])(_wrapperContent, "padding", theme.spacing(1)), (0, _defineProperty2["default"])(_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["default"].createElement(_icons.Menu, null);

var _ref2 = /*#__PURE__*/_react["default"].createElement(_core.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 = (0, _reactRouterDom.useHistory)();
  var location = history.location;
  var classes = useStyles();

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      isOpenDrawer = _useState2[0],
      setToggleDrawer = _useState2[1];

  var _useState3 = (0, _react.useState)(null),
      _useState4 = (0, _slicedToArray2["default"])(_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["default"].createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react["default"].createElement(_core.AppBar, {
    className: classes.topBar,
    color: "default",
    position: "relative"
  }, /*#__PURE__*/_react["default"].createElement(_core.Toolbar, {
    className: classes.toolbar
  }, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    "aria-label": "menu",
    className: classes.hiddenUpMobile,
    edge: "start",
    onClick: _handleClickToggleDrawer
  }, _ref), /*#__PURE__*/_react["default"].createElement(_core.Link, {
    className: classes.logoCompany,
    component: _reactRouterDom.Link,
    to: "/"
  }, /*#__PURE__*/_react["default"].createElement("img", {
    alt: "Logo Main",
    src: logo && logo.source ? logo.source : ''
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.toolbarCenter
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.toolbarCenterLeft
  }, menuTopLeft.map(function (item, index) {
    var auxProps = isExternalURL(item.url) ? {
      href: item.url
    } : {
      component: _reactRouterDom.Link,
      to: item.url
    };
    return item.type === 'button' ? /*#__PURE__*/_react["default"].createElement(_core.Button, (0, _extends2["default"])({
      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["default"].createElement(_core.Link, (0, _extends2["default"])({
      className: (0, _clsx["default"])(classes.linkLabel, Boolean(item.color) && classes["linkLabel".concat((0, _capitalize["default"])(item.color || ''))]),
      color: item.color ? item.color : undefined,
      key: "menu-top-left-".concat(index),
      target: item.target,
      underline: "none"
    }, auxProps), item.title) : /*#__PURE__*/_react["default"].createElement("div", {
      key: "menu-top-left-".concat(index)
    }, item.title);
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.toolbarCenterRight
  }, menuTopRight.map(function (item, index) {
    var auxProps = isExternalURL(item.url) ? {
      href: item.url
    } : {
      component: _reactRouterDom.Link,
      to: item.url
    };
    return item.type === 'button' ? /*#__PURE__*/_react["default"].createElement(_core.Button, (0, _extends2["default"])({
      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["default"].createElement(_core.Link, (0, _extends2["default"])({
      className: (0, _clsx["default"])(classes.linkLabel, Boolean(item.color) && classes["linkLabel".concat((0, _capitalize["default"])(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["default"].createElement("div", {
      key: "menu-top-right-".concat(index)
    }, item.title);
  }))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    "aria-controls": "simple-menu",
    "aria-haspopup": "true",
    className: classes.notificationIcon,
    color: "inherit",
    onClick: _handleOpenMenu
  }, /*#__PURE__*/_react["default"].createElement(_views.AvatarUser, {
    user: user
  })), /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement("li", {
    className: classes.menuItemContentName,
    tabIndex: -1
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.menuItemName,
    variant: "inherit"
  }, user.firstName, " ", user.lastName), _ref2), userMenu.length ? userMenu.map(function (item, n) {
    return item.type === 'action' ? /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
      className: classes.menuLink,
      key: n,
      onClick: logout
    }, item.title) : isExternalURL(item.url) ? /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
      className: classes.menuLink,
      key: n
    }, /*#__PURE__*/_react["default"].createElement(_core.Link, {
      component: "a",
      href: item.url,
      target: item.target ? item.target : '_blank'
    }, item.title)) : /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
      className: classes.menuLink,
      key: n
    }, /*#__PURE__*/_react["default"].createElement(_core.Link, {
      component: _reactRouterDom.Link,
      to: item.url
    }, item.title));
  }) : null)))), /*#__PURE__*/_react["default"].createElement("main", {
    className: classes.main
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.drawerContent
  }, /*#__PURE__*/_react["default"].createElement(_core.Drawer, {
    classes: {
      paper: (0, _clsx["default"])(classes.drawerPaper, !isOpenDrawer && classes.drawerPaperClose)
    },
    open: isOpenDrawer,
    variant: "permanent"
  }, /*#__PURE__*/_react["default"].createElement(_core.List, {
    disablePadding: true
  }, menus.map(function (item, index) {
    var linkProps = isExternalURL(item.url) ? {
      href: item.url
    } : {
      component: _reactRouterDom.Link,
      to: item.url
    };
    return /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
      button: true,
      className: (0, _clsx["default"])(classes.menuDashboardListItem, location.pathname === item.url && classes.menuDashboardListItemActive),
      disableGutters: true,
      key: index
    }, /*#__PURE__*/_react["default"].createElement(_core.Link, (0, _extends2["default"])({
      className: classes.menuDashboardItem,
      color: "inherit",
      onClick: _handlePreventRoute(item.url),
      target: item.target,
      underline: "none"
    }, linkProps), item.icon ? /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
      className: classes.drawerIcon
    }, item.icon) : null, /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
      className: classes.drawerLabel,
      primary: item.title
    })));
  })))), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.wrapperContent
  }, children)));
}

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