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

React components that implement Google's Material Design.

"use strict";

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

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

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

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

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

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

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

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

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

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

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

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

var _AvatarUser = _interopRequireDefault(require("../AvatarUser"));

var _utils = require("../utils");

/* eslint-disable react-hooks/exhaustive-deps */
var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    customDivider: {
      background: theme.palette.grey[300],
      height: 24,
      margin: theme.spacing(0, 1),
      padding: 0
    },
    flexCenter: {
      alignItems: 'center',
      display: 'flex'
    },
    hiddenUpMobile: (0, _defineProperty2["default"])({}, theme.breakpoints.up('md'), {
      display: 'none'
    }),
    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)'
        }
      },
      position: 'relative'
    },
    linkLabelActive: {
      '&:after': {
        transform: 'scaleX(1)'
      },
      color: theme.palette.primary.main
    },
    linkLabelSecondary: {
      '&:after': {
        backgroundColor: theme.palette.secondary.main
      }
    },
    logoCompany: {
      '& > img': {
        maxHeight: 50,
        maxWidth: 115
      },
      alignItems: 'center',
      cursor: 'pointer',
      display: 'flex',
      justifyContent: 'center',
      margin: theme.spacing(0, 2),
      position: 'relative'
    },
    menuItemContentName: {
      '&:focus': {
        outline: 'none'
      },
      display: 'flex',
      flexDirection: 'column'
    },
    menuItemName: {
      fontSize: '1rem',
      fontWeight: 600,
      lineHeight: 1.5,
      padding: theme.spacing(.75, 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],
      padding: theme.spacing(1)
    },
    toolbarCenter: {
      display: 'flex',
      flex: 1,
      justifyContent: 'space-between'
    },
    toolbarCenterLeft: {
      '& > a, & > div': {
        '&:first-child': {
          marginLeft: 0
        },
        display: 'inline',
        marginLeft: theme.spacing(1)
      },
      padding: theme.spacing(0, 1)
    },
    toolbarCenterRight: {
      '& > a, & > div': {
        '&:last-child': {
          marginRight: 0
        },
        display: 'inline',
        marginRight: theme.spacing(1)
      },
      padding: theme.spacing(0, 1)
    },
    topBar: {
      boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.1)'
    }
  };
}, {
  name: 'TopAppBar'
});

var _ref = /*#__PURE__*/_react["default"].createElement(_icons.Menu, null);

var _ref2 = /*#__PURE__*/_react["default"].createElement(_icons.Apps, null);

var _ref3 = /*#__PURE__*/_react["default"].createElement(_core.Divider, null);

function TopAppBar(props) {
  var _props$apps = props.apps,
      apps = _props$apps === void 0 ? [] : _props$apps,
      _props$color = props.color,
      color = _props$color === void 0 ? 'inherit' : _props$color,
      _props$logo = props.logo,
      logo = _props$logo === void 0 ? {} : _props$logo,
      _props$menuTopLeft = props.menuTopLeft,
      menuTopLeft = _props$menuTopLeft === void 0 ? [] : _props$menuTopLeft,
      _props$menuTopRight = props.menuTopRight,
      menuTopRight = _props$menuTopRight === void 0 ? [] : _props$menuTopRight,
      onHandleLogout = props.onHandleLogout,
      onHandleToggleDrawer = props.onHandleToggleDrawer,
      _props$persistMenuIco = props.persistMenuIcon,
      persistMenuIcon = _props$persistMenuIco === void 0 ? false : _props$persistMenuIco,
      historyPath = props.historyPath,
      _props$user = props.user,
      user = _props$user === void 0 ? {} : _props$user,
      _props$userMenu = props.userMenu,
      userMenu = _props$userMenu === void 0 ? [] : _props$userMenu;
  var location = (0, _reactRouterDom.useLocation)();
  var classes = useStyles();

  var _React$useState = _react["default"].useState({
    apps: null,
    user: null
  }),
      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
      anchorEl = _React$useState2[0],
      setAnchorEl = _React$useState2[1];

  var _React$useState3 = _react["default"].useState(null),
      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
      menuActive = _React$useState4[0],
      setMenuActive = _React$useState4[1];

  var _React$useState5 = _react["default"].useState('/'),
      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
      urlLogo = _React$useState6[0],
      setUrlLogo = _React$useState6[1];

  _react["default"].useEffect(function () {
    if (historyPath) if (location.pathname.includes(historyPath)) setUrlLogo(location.pathname);
  }, [historyPath, location.pathname]);

  var _handleOpenMenu = function _handleOpenMenu(ev, key) {
    setAnchorEl((0, _extends3["default"])({}, anchorEl, (0, _defineProperty2["default"])({}, key, ev.currentTarget)));
    setMenuActive(key);
  };

  var _handleCloseMenu = function _handleCloseMenu() {
    setAnchorEl({
      apps: null,
      user: null
    });
    setMenuActive(null);
  };

  return /*#__PURE__*/_react["default"].createElement(_core.AppBar, {
    className: classes.topBar,
    color: color,
    position: "relative"
  }, /*#__PURE__*/_react["default"].createElement(_core.Toolbar, {
    className: classes.toolbar
  }, onHandleToggleDrawer ? /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    "aria-label": "menu",
    className: (0, _clsx["default"])(!persistMenuIcon && classes.hiddenUpMobile),
    color: "inherit",
    edge: "start",
    onClick: onHandleToggleDrawer
  }, _ref) : null, /*#__PURE__*/_react["default"].createElement(_core.Link, {
    className: classes.logoCompany,
    component: _reactRouterDom.Link,
    to: urlLogo
  }, /*#__PURE__*/_react["default"].createElement("img", {
    alt: logo.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 = (0, _utils.isExternalURL)(item.url) ? {
      href: item.url
    } : {
      component: _reactRouterDom.Link,
      to: item.url
    };
    return item.type === 'button' ? /*#__PURE__*/_react["default"].createElement(_core.Button, (0, _extends3["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, _extends3["default"])({
      className: (0, _clsx["default"])(classes.linkLabel, Boolean(item.color) && classes["linkLabel".concat((0, _utils.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["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 = item.url ? (0, _utils.isExternalURL)(item.url) ? {
      href: item.url
    } : {
      component: _reactRouterDom.Link,
      to: item.url
    } : {};
    return item.type === 'button' ? /*#__PURE__*/_react["default"].createElement(_core.Button, (0, _extends3["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, _extends3["default"])({
      className: (0, _clsx["default"])(classes.linkLabel, Boolean(item.color) && classes["linkLabel".concat((0, _utils.capitalize)(item.color || ''))], item.url === location.pathname && classes.linkLabelActive),
      color: item.color ? item.color : 'inherit',
      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);
  }))), menuTopRight.length ? /*#__PURE__*/_react["default"].createElement(_core.Divider, {
    className: classes.customDivider,
    orientation: "vertical"
  }) : null, /*#__PURE__*/_react["default"].createElement("div", null, apps.length ? /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    "aria-controls": "menu-apps",
    "aria-haspopup": "true",
    onClick: function onClick(ev) {
      return _handleOpenMenu(ev, 'apps');
    }
  }, _ref2) : null, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    "aria-controls": "menu-user",
    "aria-haspopup": "true",
    className: classes.notificationIcon,
    color: "inherit",
    onClick: function onClick(ev) {
      return _handleOpenMenu(ev, 'user');
    }
  }, /*#__PURE__*/_react["default"].createElement(_AvatarUser["default"], {
    size: "big",
    user: user
  })), /*#__PURE__*/_react["default"].createElement(_core.Menu, {
    anchorEl: anchorEl[menuActive],
    anchorOrigin: {
      horizontal: 'right',
      vertical: 'bottom'
    },
    getContentAnchorEl: null // keepMounted
    ,
    MenuListProps: {
      style: {
        padding: 0
      }
    },
    onClose: _handleCloseMenu,
    open: Boolean(anchorEl[menuActive]),
    transformOrigin: {
      horizontal: 'right',
      vertical: 'top'
    }
  }, menuActive === 'user' ? [/*#__PURE__*/_react["default"].createElement("li", {
    className: classes.menuItemContentName,
    key: "user-menu-1",
    tabIndex: -1
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.menuItemName,
    variant: "inherit"
  }, user.firstName, " ", user.lastName), _ref3), userMenu.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
      className: classes.menuLink,
      key: "user-menu-2-".concat(index)
    }, (0, _utils.isExternalURL)(item.url) ? /*#__PURE__*/_react["default"].createElement(_core.Link, {
      component: "a",
      href: item.url,
      target: item.target || '_blank'
    }, item.title) : /*#__PURE__*/_react["default"].createElement(_core.Link, {
      component: _reactRouterDom.Link,
      to: item.url
    }, item.title));
  }), onHandleLogout ? /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
    className: classes.menuLink,
    key: "user-menu-3",
    onClick: onHandleLogout
  }, "Cerrar Sesi\xF3n") : null] : menuActive === 'apps' ? apps.map(function (app, index) {
    return /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
      className: classes.menuLink,
      key: "app-menu-".concat(index)
    }, /*#__PURE__*/_react["default"].createElement(_core.Link, {
      component: "a",
      href: app.url,
      target: app.target || '_blank'
    }, app.title));
  }) : null))));
}

process.env.NODE_ENV !== "production" ? TopAppBar.propTypes = {
  apps: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    title: _propTypes["default"].string,
    url: _propTypes["default"].string
  })),
  color: _propTypes["default"].oneOf(['default', 'inherit', 'primary', 'secondary', 'krowdy', 'error']),
  historyPath: _propTypes["default"].string,
  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"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]).isRequired,
    type: _propTypes["default"].string,
    url: _propTypes["default"].string,
    variant: _propTypes["default"].string
  })),
  menuTopRight: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    color: _propTypes["default"].string,
    target: _propTypes["default"].string,
    title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]).isRequired,
    type: _propTypes["default"].string,
    url: _propTypes["default"].string,
    variant: _propTypes["default"].string
  })),
  onHandleLogout: _propTypes["default"].func,
  onHandleToggleDrawer: _propTypes["default"].func,
  user: _propTypes["default"].shape({
    firstName: _propTypes["default"].string,
    lastName: _propTypes["default"].string,
    photo: _propTypes["default"].string
  }),
  userMenu: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    target: _propTypes["default"].string,
    title: _propTypes["default"].string.isRequired,
    type: _propTypes["default"].string.isRequired,
    url: _propTypes["default"].string.isRequired
  }))
} : void 0;
var _default = TopAppBar;
exports["default"] = _default;