@krowdy-ui/views/esm/TopAppBar/TopAppBar.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";

/* eslint-disable react-hooks/exhaustive-deps */
import React from 'react';
import PropTypes from 'prop-types';
import { Link as RouterLink, useLocation } from 'react-router-dom';
import clsx from 'clsx';
import { makeStyles } from '@krowdy-ui/styles';
import { AppBar, Toolbar, IconButton, Link, Button, Menu, Typography, Divider, MenuItem } from '@krowdy-ui/core';
import { Menu as MenuIcon, Apps as AppsIcon } from '@material-ui/icons';
import AvatarUser from '../AvatarUser';
import { capitalize, isExternalURL } from '../utils';
var useStyles = 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: _defineProperty({}, 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.createElement(MenuIcon, null);

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

var _ref3 = /*#__PURE__*/React.createElement(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 = useLocation();
  var classes = useStyles();

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

  var _React$useState3 = React.useState(null),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      menuActive = _React$useState4[0],
      setMenuActive = _React$useState4[1];

  var _React$useState5 = React.useState('/'),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      urlLogo = _React$useState6[0],
      setUrlLogo = _React$useState6[1];

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

  var _handleOpenMenu = function _handleOpenMenu(ev, key) {
    setAnchorEl(_extends({}, anchorEl, _defineProperty({}, key, ev.currentTarget)));
    setMenuActive(key);
  };

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

  return /*#__PURE__*/React.createElement(AppBar, {
    className: classes.topBar,
    color: color,
    position: "relative"
  }, /*#__PURE__*/React.createElement(Toolbar, {
    className: classes.toolbar
  }, onHandleToggleDrawer ? /*#__PURE__*/React.createElement(IconButton, {
    "aria-label": "menu",
    className: clsx(!persistMenuIcon && classes.hiddenUpMobile),
    color: "inherit",
    edge: "start",
    onClick: onHandleToggleDrawer
  }, _ref) : null, /*#__PURE__*/React.createElement(Link, {
    className: classes.logoCompany,
    component: RouterLink,
    to: urlLogo
  }, /*#__PURE__*/React.createElement("img", {
    alt: logo.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 = item.url ? 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 || ''))], 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.createElement("div", {
      key: "menu-top-right-".concat(index)
    }, item.title);
  }))), menuTopRight.length ? /*#__PURE__*/React.createElement(Divider, {
    className: classes.customDivider,
    orientation: "vertical"
  }) : null, /*#__PURE__*/React.createElement("div", null, apps.length ? /*#__PURE__*/React.createElement(IconButton, {
    "aria-controls": "menu-apps",
    "aria-haspopup": "true",
    onClick: function onClick(ev) {
      return _handleOpenMenu(ev, 'apps');
    }
  }, _ref2) : null, /*#__PURE__*/React.createElement(IconButton, {
    "aria-controls": "menu-user",
    "aria-haspopup": "true",
    className: classes.notificationIcon,
    color: "inherit",
    onClick: function onClick(ev) {
      return _handleOpenMenu(ev, 'user');
    }
  }, /*#__PURE__*/React.createElement(AvatarUser, {
    size: "big",
    user: user
  })), /*#__PURE__*/React.createElement(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.createElement("li", {
    className: classes.menuItemContentName,
    key: "user-menu-1",
    tabIndex: -1
  }, /*#__PURE__*/React.createElement(Typography, {
    className: classes.menuItemName,
    variant: "inherit"
  }, user.firstName, " ", user.lastName), _ref3), userMenu.map(function (item, index) {
    return /*#__PURE__*/React.createElement(MenuItem, {
      className: classes.menuLink,
      key: "user-menu-2-".concat(index)
    }, isExternalURL(item.url) ? /*#__PURE__*/React.createElement(Link, {
      component: "a",
      href: item.url,
      target: item.target || '_blank'
    }, item.title) : /*#__PURE__*/React.createElement(Link, {
      component: RouterLink,
      to: item.url
    }, item.title));
  }), onHandleLogout ? /*#__PURE__*/React.createElement(MenuItem, {
    className: classes.menuLink,
    key: "user-menu-3",
    onClick: onHandleLogout
  }, "Cerrar Sesi\xF3n") : null] : menuActive === 'apps' ? apps.map(function (app, index) {
    return /*#__PURE__*/React.createElement(MenuItem, {
      className: classes.menuLink,
      key: "app-menu-".concat(index)
    }, /*#__PURE__*/React.createElement(Link, {
      component: "a",
      href: app.url,
      target: app.target || '_blank'
    }, app.title));
  }) : null))));
}

process.env.NODE_ENV !== "production" ? TopAppBar.propTypes = {
  apps: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string,
    url: PropTypes.string
  })),
  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'krowdy', 'error']),
  historyPath: PropTypes.string,
  logo: PropTypes.shape({
    alt: PropTypes.string,
    source: PropTypes.string
  }),
  menuTopLeft: PropTypes.arrayOf(PropTypes.shape({
    color: PropTypes.string,
    target: PropTypes.string,
    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
    type: PropTypes.string,
    url: PropTypes.string,
    variant: PropTypes.string
  })),
  menuTopRight: PropTypes.arrayOf(PropTypes.shape({
    color: PropTypes.string,
    target: PropTypes.string,
    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
    type: PropTypes.string,
    url: PropTypes.string,
    variant: PropTypes.string
  })),
  onHandleLogout: PropTypes.func,
  onHandleToggleDrawer: PropTypes.func,
  user: PropTypes.shape({
    firstName: PropTypes.string,
    lastName: PropTypes.string,
    photo: PropTypes.string
  }),
  userMenu: PropTypes.arrayOf(PropTypes.shape({
    target: PropTypes.string,
    title: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired
  }))
} : void 0;
export default TopAppBar;