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

@fle-ui/pro-layout

import "@fle-ui/next/es/menu/style";
import _Menu from "@fle-ui/next/es/menu";
import "@fle-ui/next/es/layout/style";
import _Layout from "@fle-ui/next/es/layout";
import "@fle-ui/next/es/tooltip/style";
import _Tooltip from "@fle-ui/next/es/tooltip";
import "@fle-ui/next/es/config-provider/style";
import _ConfigProvider from "@fle-ui/next/es/config-provider";
var _excluded = ["prefixCls", "menuList", "styleType", "siderWidth", "offsetTop", "offsetLeft", "leftMenuItems", "onLeftMenuApply", "defaultSelectedKey", "appProps"];

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

/*
 * @Author: your name
 * @Date: 2021-11-09 14:37:51
 * @LastEditTime: 2021-12-22 17:37:40
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /fle-ui-pro-components/packages/layout/src/components/proMenu/index.tsx
 */
import React, { useContext, useState, useEffect } from 'react';
import PropContext from '@fle-ui/pro-context';
import classnames from 'classnames';
import './index.less';

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 = useContext(_ConfigProvider.ConfigContext);
  var getPrefixCls = prefixCls !== null && prefixCls !== void 0 ? prefixCls : context.getPrefixCls('pro');
  var baseClassName = "".concat(getPrefixCls, "-menu");

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

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

  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.createElement("div", {
        className: "".concat(baseClassName, "-menu-wrapper")
      }, leftMenuItems && leftMenuItems.map(function (info, index) {
        return /*#__PURE__*/React.createElement(_Tooltip, {
          placement: "right",
          title: info.name,
          key: index
        }, /*#__PURE__*/React.createElement("div", {
          className: classnames("".concat(baseClassName, "-menu"), _defineProperty({}, "".concat(baseClassName, "-menu-active"), selectedKey === index)),
          key: info.key || index,
          onClick: function onClick() {
            return handleLeftMenuClick(info, index);
          }
        }, /*#__PURE__*/React.createElement("span", {
          className: "".concat(baseClassName, "-menu-icon")
        }, info.icon), /*#__PURE__*/React.createElement("span", {
          className: "".concat(baseClassName, "-menu-item")
        }, info.initials)));
      }));
    };

    var appIconDom = (appProps === null || appProps === void 0 ? void 0 : appProps.icon) && /*#__PURE__*/React.createElement("div", {
      className: "".concat(baseClassName, "-left-icon"),
      onClick: appProps === null || appProps === void 0 ? void 0 : appProps.onClick
    }, /*#__PURE__*/React.createElement("img", {
      src: appProps === null || appProps === void 0 ? void 0 : appProps.icon
    }));
    return /*#__PURE__*/React.createElement(_Layout.Sider, {
      theme: "dark",
      width: 64,
      className: "".concat(baseClassName, "-left"),
      style: {
        height: '100%'
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(baseClassName, "-left-toggle")
    }), (appProps === null || appProps === void 0 ? void 0 : appProps.tips) ? /*#__PURE__*/React.createElement(_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.createElement(_Menu, _extends({
      ref: ref,
      mode: "inline",
      className: baseClassName
    }, otherProps, {
      items: menuChild
    }));

    if (styleType === 'layout') {
      return /*#__PURE__*/React.createElement(_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.createElement("div", {
        className: "".concat(baseClassName, "-sider-app")
      }, /*#__PURE__*/React.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.createElement("div", {
        className: "".concat(baseClassName, "-sider-app-subName")
      }, /*#__PURE__*/React.createElement("span", null, appProps === null || appProps === void 0 ? void 0 : appProps.appSubName))), MenuDom);
    }

    return MenuDom;
  }

  return null;
};

export default /*#__PURE__*/React.forwardRef(ProMenu);