@fle-ui/pro-layout/lib/components/proMenu/index.js

@fle-ui/pro-layout

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

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

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

var _next = require("@fle-ui/next");

var _proContext = _interopRequireDefault(require("@fle-ui/pro-context"));

var _classnames2 = _interopRequireDefault(require("classnames"));

require("./index.less");

var _excluded = ["prefixCls", "menuList", "styleType", "siderWidth", "offsetTop", "offsetLeft", "leftMenuItems", "onLeftMenuApply", "defaultSelectedKey", "appProps"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var ProMenu = function ProMenu(props, ref) {
  var prefixCls = props.prefixCls,
      _props$menuList = props.menuList,
      menuList = _props$menuList === void 0 ? [] : _props$menuList,
      styleType = props.styleType,
      siderWidth = props.siderWidth,
      _props$offsetTop = props.offsetTop,
      offsetTop = _props$offsetTop === void 0 ? 0 : _props$offsetTop,
      _props$offsetLeft = props.offsetLeft,
      offsetLeft = _props$offsetLeft === void 0 ? 0 : _props$offsetLeft,
      leftMenuItems = props.leftMenuItems,
      onLeftMenuApply = props.onLeftMenuApply,
      _props$defaultSelecte = props.defaultSelectedKey,
      defaultSelectedKey = _props$defaultSelecte === void 0 ? [0] : _props$defaultSelecte,
      appProps = props.appProps,
      otherProps = _objectWithoutProperties(props, _excluded); // @ts-ignore


  var context = (0, _react.useContext)(_next.ConfigProvider.ConfigContext);
  var getPrefixCls = prefixCls !== null && prefixCls !== void 0 ? prefixCls : context.getPrefixCls('pro');
  var baseClassName = "".concat(getPrefixCls, "-menu");

  var _useState = (0, _react.useState)(0),
      _useState2 = _slicedToArray(_useState, 2),
      selectedKey = _useState2[0],
      setSelectedKey = _useState2[1];

  var _useContext = (0, _react.useContext)(_proContext.default),
      _useContext$isAuthPag = _useContext.isAuthPage,
      isAuthPage = _useContext$isAuthPag === void 0 ? function () {} : _useContext$isAuthPag,
      isAuthInfo = _useContext.isAuthInfo;

  (0, _react.useEffect)(function () {
    if (defaultSelectedKey.length > 0 && defaultSelectedKey[0] !== selectedKey) {
      setSelectedKey(defaultSelectedKey[0]);
    }
  }, [defaultSelectedKey]);

  var isComponentEmpty = function isComponentEmpty() {
    var componentList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
    return !componentList || Array.isArray(componentList) && (componentList === null || componentList === void 0 ? void 0 : componentList.every(function (item) {
      return item === null || !item;
    }));
  };

  var formatMenu = function formatMenu(menu, isShowIcon) {
    return menu === null || menu === void 0 ? void 0 : menu.map(function (menuItem) {
      var _menuItem$children;

      if (menuItem.isHidden) {
        return null;
      }

      if (isAuthInfo && (menuItem === null || menuItem === void 0 ? void 0 : menuItem.authKey) && !isAuthPage(menuItem === null || menuItem === void 0 ? void 0 : menuItem.authKey, menuItem === null || menuItem === void 0 ? void 0 : menuItem.isAuth)) {
        return null;
      }

      var items = {
        key: menuItem.key,
        label: menuItem.name,
        title: menuItem.name,
        disabled: !!menuItem.disabled
      };

      if (isShowIcon && !!menuItem.icon) {
        items['icon'] = menuItem.icon;
      }

      if (Object.prototype.toString.call(menuItem.children) === '[object Array]' && !!((_menuItem$children = menuItem.children) === null || _menuItem$children === void 0 ? void 0 : _menuItem$children.length) && !isComponentEmpty(menuItem.children)) {
        items['children'] = formatMenu(menuItem.children);
      }

      return items;
    });
  };

  if (styleType && styleType === 'left') {
    var handleLeftMenuClick = function handleLeftMenuClick(info, key) {
      setSelectedKey(key);
      onLeftMenuApply && onLeftMenuApply(info);
    };

    var renderItem = function renderItem() {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(baseClassName, "-menu-wrapper")
      }, leftMenuItems && leftMenuItems.map(function (info, index) {
        return /*#__PURE__*/_react.default.createElement(_next.Tooltip, {
          placement: "right",
          title: info.name,
          key: index
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _classnames2.default)("".concat(baseClassName, "-menu"), _defineProperty({}, "".concat(baseClassName, "-menu-active"), selectedKey === index)),
          key: info.key || index,
          onClick: function onClick() {
            return handleLeftMenuClick(info, index);
          }
        }, /*#__PURE__*/_react.default.createElement("span", {
          className: "".concat(baseClassName, "-menu-icon")
        }, info.icon), /*#__PURE__*/_react.default.createElement("span", {
          className: "".concat(baseClassName, "-menu-item")
        }, info.initials)));
      }));
    };

    var appIconDom = (appProps === null || appProps === void 0 ? void 0 : appProps.icon) && /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(baseClassName, "-left-icon"),
      onClick: appProps === null || appProps === void 0 ? void 0 : appProps.onClick
    }, /*#__PURE__*/_react.default.createElement("img", {
      src: appProps === null || appProps === void 0 ? void 0 : appProps.icon
    }));

    return /*#__PURE__*/_react.default.createElement(_next.Layout.Sider, {
      theme: "dark",
      width: 64,
      className: "".concat(baseClassName, "-left"),
      style: {
        height: '100%'
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(baseClassName, "-left-toggle")
    }), (appProps === null || appProps === void 0 ? void 0 : appProps.tips) ? /*#__PURE__*/_react.default.createElement(_next.Tooltip, {
      placement: "right",
      title: appProps === null || appProps === void 0 ? void 0 : appProps.tips
    }, appIconDom) : appIconDom, renderItem());
  }

  if (menuList && (menuList === null || menuList === void 0 ? void 0 : menuList.length)) {
    var menuChild = formatMenu(menuList, true);

    if (isComponentEmpty(menuChild)) {
      return null;
    } // const MenuDom = <div></div>


    var MenuDom = /*#__PURE__*/_react.default.createElement(_next.Menu, _extends({
      ref: ref,
      mode: "inline",
      className: baseClassName
    }, otherProps, {
      items: menuChild
    }));

    if (styleType === 'layout') {
      return /*#__PURE__*/_react.default.createElement(_next.Layout.Sider, {
        theme: "light",
        width: siderWidth,
        className: "".concat(baseClassName, "-sider"),
        style: {
          top: offsetTop,
          left: offsetLeft,
          height: "calc(100% - ".concat(offsetTop, "px)")
        }
      }, (appProps === null || appProps === void 0 ? void 0 : appProps.appName) && /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(baseClassName, "-sider-app")
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(baseClassName, "-sider-app-name")
      }, appProps === null || appProps === void 0 ? void 0 : appProps.appName), (appProps === null || appProps === void 0 ? void 0 : appProps.appSubName) && /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(baseClassName, "-sider-app-subName")
      }, /*#__PURE__*/_react.default.createElement("span", null, appProps === null || appProps === void 0 ? void 0 : appProps.appSubName))), MenuDom);
    }

    return MenuDom;
  }

  return null;
};

var _default = /*#__PURE__*/_react.default.forwardRef(ProMenu);

exports.default = _default;