@orca-fe/pocket/lib/menu-layout/MenuLayout.js

UI components by orca-team

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _prefixClassnames = _interopRequireDefault(require("prefix-classnames"));
var _reactRouter = require("react-router");
var _hooks = require("@orca-fe/hooks");
var _classnames = _interopRequireDefault(require("classnames"));
var _Menu = _interopRequireDefault(require("./Menu"));
var _menuUtils = require("./menuUtils");
var _BreadcrumbContext = require("../custom-breadcrumb/BreadcrumbContext");
var _MenuLayout = _interopRequireDefault(require("./MenuLayout.style"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["className", "wrapperClassName", "wrapperStyle", "menu", "headerExtra", "children", "useTopMenu", "toggleOnItemClick", "collapsible", "collapse", "showHeader", "mainMenuSide", "themeHeader", "themeSide", "title", "logo", "pathname", "onItemClick", "defaultOpenKeys", "openKeys", "classPrefix", "defaultOpenAll"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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; }
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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // 菜单展开按钮
var iconMenuPathExpand = 'M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480' + 'c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784' + 'c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56' + 'c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z';

// 菜单收起按钮
var iconMenuPathCollapse = 'M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480' + 'c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784' + 'c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56' + 'c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 000-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0014.4 7z';
var eArr = [];
var MenuLayout = function MenuLayout(props) {
  var _checkedMenu;
  var _defaultOpenKeys = props.defaultOpenKeys;
  var _useControllableProps = (0, _hooks.useControllableProps)(props, {
      collapse: false,
      openKeys: _defaultOpenKeys !== null && _defaultOpenKeys !== void 0 ? _defaultOpenKeys : []
    }),
    _useControllableProps2 = _slicedToArray(_useControllableProps, 2),
    _useControllableProps3 = _useControllableProps2[0],
    _useControllableProps4 = _useControllableProps3.className,
    className = _useControllableProps4 === void 0 ? '' : _useControllableProps4,
    _useControllableProps5 = _useControllableProps3.wrapperClassName,
    wrapperClassName = _useControllableProps5 === void 0 ? '' : _useControllableProps5,
    _useControllableProps6 = _useControllableProps3.wrapperStyle,
    wrapperStyle = _useControllableProps6 === void 0 ? {} : _useControllableProps6,
    _useControllableProps7 = _useControllableProps3.menu,
    menu = _useControllableProps7 === void 0 ? eArr : _useControllableProps7,
    headerExtra = _useControllableProps3.headerExtra,
    children = _useControllableProps3.children,
    _useControllableProps8 = _useControllableProps3.useTopMenu,
    _useTopMenu = _useControllableProps8 === void 0 ? true : _useControllableProps8,
    toggleOnItemClick = _useControllableProps3.toggleOnItemClick,
    _useControllableProps9 = _useControllableProps3.collapsible,
    collapsible = _useControllableProps9 === void 0 ? true : _useControllableProps9,
    _collapse = _useControllableProps3.collapse,
    _useControllableProps10 = _useControllableProps3.showHeader,
    showHeader = _useControllableProps10 === void 0 ? true : _useControllableProps10,
    _useControllableProps11 = _useControllableProps3.mainMenuSide,
    mainMenuSide = _useControllableProps11 === void 0 ? 'left' : _useControllableProps11,
    _useControllableProps12 = _useControllableProps3.themeHeader,
    themeHeader = _useControllableProps12 === void 0 ? 'dark' : _useControllableProps12,
    _useControllableProps13 = _useControllableProps3.themeSide,
    themeSide = _useControllableProps13 === void 0 ? 'dark' : _useControllableProps13,
    _useControllableProps14 = _useControllableProps3.title,
    title = _useControllableProps14 === void 0 ? 'Menu Layout' : _useControllableProps14,
    logo = _useControllableProps3.logo,
    _pathname = _useControllableProps3.pathname,
    onItemClick = _useControllableProps3.onItemClick,
    defaultOpenKeys = _useControllableProps3.defaultOpenKeys,
    _openKeys = _useControllableProps3.openKeys,
    _useControllableProps15 = _useControllableProps3.classPrefix,
    classPrefix = _useControllableProps15 === void 0 ? 'orca-menu' : _useControllableProps15,
    _useControllableProps16 = _useControllableProps3.defaultOpenAll,
    defaultOpenAll = _useControllableProps16 === void 0 ? false : _useControllableProps16,
    otherProps = _objectWithoutProperties(_useControllableProps3, _excluded),
    changeProps = _useControllableProps2[1];
  var styles = (0, _MenuLayout.default)();
  var openKeys = (0, _react.useMemo)(function () {
    return Array.isArray(_openKeys) ? function () {
      var res = {};
      _openKeys.forEach(function (key) {
        res[key] = true;
      });
      return res;
    }() : _openKeys;
  }, [_openKeys]);
  var px = (0, _prefixClassnames.default)("".concat(classPrefix, "-layout"));

  // 如果 collapsible 为 false，则一定不能收起
  var collapse = collapsible ? _collapse : false;
  var location = (0, _reactRouter.useLocation)();
  // 判断取用哪个 pathname
  var pathname = _pathname != null ? _pathname : location.pathname;
  var checkedMenuIndex = (0, _react.useMemo)(function () {
    return (0, _menuUtils.findSelectedMenuIndexTraverse)(pathname, menu);
  }, [menu, pathname]);
  var checkedMenu = (0, _react.useMemo)(function () {
    return (0, _menuUtils.findSelectedMenu)(pathname, menu);
  }, [menu, pathname]);

  // 主菜单是否在左侧
  var mainSideLeft = mainMenuSide === 'left';

  // 是否使用顶部菜单？
  var useTopMenu = _useTopMenu && !mainSideLeft;
  var sideMenu = menu;
  // 如果包含顶部菜单，则侧边菜单为当前选中的一级菜单下的子菜单
  if (useTopMenu) {
    var _ref;
    sideMenu = (_ref = checkedMenuIndex.length > 0 ? menu[checkedMenuIndex[0]].children : undefined) !== null && _ref !== void 0 ? _ref : [];
  }
  var headerCheckedKey = checkedMenuIndex.length > 0 ? menu[checkedMenuIndex[0]].key : undefined;
  var titleDiv = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: styles.title,
    children: title
  });
  var logoDiv = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)(styles.logoContainer, _defineProperty({}, styles.leftSide, mainSideLeft)),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: styles.logo,
      children: logo || /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: {
          width: 30,
          height: 30,
          backgroundColor: 'rgba(125,125,125,0.3)',
          borderRadius: '50%'
        }
      })
    }), titleDiv]
  });

  // 侧边栏收缩按钮
  var collapseSwitchDiv = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: styles.collapseHandle,
    onClick: function onClick() {
      return changeProps({
        collapse: !collapse
      });
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
      className: (0, _classnames.default)(styles.collapseHandleIcon, _defineProperty({}, styles.collapsed, collapse)),
      viewBox: "64 64 896 896",
      focusable: "false",
      "data-icon": "menu",
      width: "1em",
      height: "1em",
      fill: "currentColor",
      "aria-hidden": "true",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
        d: collapse ? iconMenuPathCollapse : iconMenuPathExpand
      })
    })
  });

  /* 顶栏 */
  var header = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "".concat(styles.header, " ").concat(px("theme-".concat(themeHeader))),
    children: [!mainSideLeft && logoDiv, mainSideLeft && collapsible && collapseSwitchDiv, useTopMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
      classPrefix: classPrefix,
      className: styles.headerMenu,
      menu: menu,
      theme: themeHeader,
      checked: headerCheckedKey,
      toggleOnItemClick: toggleOnItemClick,
      onItemClick: onItemClick
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        flex: 1
      }
    }), headerExtra]
  });
  var matchedItem = checkedMenu.length ? checkedMenu[checkedMenu.length - 1] : undefined;
  var _ref2 = matchedItem || {},
    itemStyle = _ref2.style;
  var content = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "".concat(styles.content, " ").concat(wrapperClassName),
    style: _objectSpread(_objectSpread({}, wrapperStyle), itemStyle),
    children: children
  });
  var sideMenuDiv = sideMenu.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)(styles.sideMenuContainer, px("theme-".concat(themeSide)), _defineProperty(_defineProperty({}, styles.topSplitter, useTopMenu), styles.collapsed, collapse)),
    children: [mainSideLeft && logoDiv, !mainSideLeft && collapsible && collapseSwitchDiv, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
      classPrefix: classPrefix,
      className: styles.sideMenu,
      collapsed: collapse,
      menu: sideMenu,
      theme: themeSide,
      checked: (_checkedMenu = checkedMenu[checkedMenu.length - 1]) === null || _checkedMenu === void 0 ? void 0 : _checkedMenu.key,
      toggleOnItemClick: toggleOnItemClick,
      direction: "vertical",
      onItemClick: onItemClick,
      defaultOpenAll: defaultOpenAll,
      openKeys: openKeys,
      onOpenKeysChange: function onOpenKeysChange(openKeys) {
        return changeProps({
          openKeys: openKeys
        });
      }
    })]
  });
  var center = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: styles.center,
    children: [mainSideLeft ? showHeader && header : sideMenuDiv, content]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
    className: "".concat((0, _classnames.default)(styles.root, _defineProperty({}, styles.mainSideLeft, mainSideLeft)), " ").concat(className)
  }, otherProps), {}, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_BreadcrumbContext.BreadCrumbProvider, {
      menu: menu,
      pathname: pathname,
      children: [mainSideLeft ? sideMenuDiv : header, center]
    })
  }));
};
var _default = exports.default = MenuLayout;