@scripty/react-navigations/lib/FlyoutUserWithIcons.js

lightweight react navigation components.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

require("./Flyout.scss");

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

var PropTypes = _interopRequireWildcard(require("prop-types"));

var _Icon = require("./Icon");

var _AntdIcons = require("./AntdIcons");

var _helper = require("./helper");

var _Avatar = require("./Avatar");

var FlyoutUserWithIcons = function FlyoutUserWithIcons(props) {
  var routes = props.routes,
      onClick = props.onClick,
      selectedKeys = props.selectedKeys,
      user = props.user;
  var loggedIn = user.loggedIn;

  var onItemClick = function onItemClick(key, selectedKeys) {
    onClick(key, selectedKeys);
  };

  var renderMenuItem = function renderMenuItem(_ref) {
    var key = _ref.key,
        label = _ref.label,
        path = _ref.path,
        exact = _ref.exact,
        selectedKeys = _ref.selectedKeys,
        icon = _ref.icon;
    return /*#__PURE__*/_react["default"].createElement("li", {
      key: key
    }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
      onClick: onItemClick.bind(null, key, selectedKeys),
      exact: exact,
      to: path
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: 'icon'
    }, icon), " ", label));
  };

  var renderMenu = function renderMenu(routes) {
    var parentPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
    var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
    var user = arguments.length > 3 ? arguments[3] : undefined;
    return routes.map(function (route) {
      var key = route.key,
          label = route.label,
          path = route.path,
          url = route.url,
          icon = route.icon,
          submenu = route.submenu,
          exact = route.exact;
      var currentPath = parentPath + path;
      var antIcon = (0, _AntdIcons.getAntdIcon)(icon);
      selectedKeys = (0, _helper.getSelectedKeys)(routes, window.location, parentPath);
      var isActive = selectedKeys.includes(key);
      var activeClass = isActive ? 'dropbtn active' : 'dropbtn';

      if (submenu) {
        var expandIcon = /*#__PURE__*/_react["default"].createElement(_Icon.IconExpandRight, null);

        var item = 'item';

        if (index === 0) {
          expandIcon = '';

          if (loggedIn) {
            label = /*#__PURE__*/_react["default"].createElement(_Avatar.Avatar, {
              user: user
            });
            expandIcon = /*#__PURE__*/_react["default"].createElement(_Icon.IconExpandDown, null);
          }

          item = 'item-' + index;
        }

        index = index + 1;
        return /*#__PURE__*/_react["default"].createElement("li", {
          key: key,
          className: 'dropdown'
        }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
          onClick: onItemClick.bind(null, key, selectedKeys),
          className: activeClass,
          to: currentPath
        }, /*#__PURE__*/_react["default"].createElement("span", {
          className: 'icon'
        }, antIcon), " ", label, " ", /*#__PURE__*/_react["default"].createElement("span", {
          className: 'arrow'
        }, expandIcon)), user.loggedIn ? /*#__PURE__*/_react["default"].createElement("ul", {
          className: item
        }, renderMenu(submenu, currentPath, index, user)) : null);
      }

      return renderMenuItem({
        key: key,
        label: label,
        path: currentPath,
        url: url,
        icon: antIcon,
        exact: exact,
        selectedKeys: selectedKeys
      });
    });
  };

  return /*#__PURE__*/_react["default"].createElement("nav", {
    className: 'flyout'
  }, /*#__PURE__*/_react["default"].createElement("ul", null, renderMenu(routes, '', 0, user)));
};

exports.FlyoutUserWithIcons = FlyoutUserWithIcons;
FlyoutUserWithIcons.defaultProps = {
  onClick: function onClick() {},
  routes: [],
  color: {
    backgroundColor: '',
    backgroundHoverColor: '',
    fontColor: '',
    fontHoverColor: ''
  },
  selectedKeys: [],
  width: '100%',
  height: '59px',
  style: {},
  user: {
    loggedIn: false
  }
};
FlyoutUserWithIcons.propTypes = {
  routes: PropTypes.array,
  onClick: PropTypes.func,
  color: PropTypes.object,
  selectedKeys: PropTypes.array,
  width: PropTypes.string,
  height: PropTypes.string,
  style: PropTypes.object,
  user: PropTypes.object
};