@zat-design/sisyphus-react 3.13.14-deta.2 → 4.0.0-beta.3

package/lib/ProLayout/components/Layout/Menu/OpenMenu/index.js

@@ -1,105 +1,111 @@
-"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// src/ProLayout/components/Layout/Menu/OpenMenu/index.tsx
+var OpenMenu_exports = {};
+__export(OpenMenu_exports, {
+  default: () => OpenMenu_default
 });
-exports.default = void 0;
-require("antd/es/menu/style");
-var _menu = _interopRequireDefault(require("antd/es/menu"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _ahooks = require("ahooks");
-var _icons = require("@ant-design/icons");
-var _classnames2 = _interopRequireDefault(require("classnames"));
-var _reactRouterDom = require("react-router-dom");
-var _index = require("../../../../index");
-var _utils = require("../../../../utils");
-var _index2 = require("../../index");
-var OpenMenu = function OpenMenu(props) {
-  var _getIdsByPathName;
-  var className = props.className,
-    dataSource = props.dataSource,
-    style = props.style,
-    _props$theme = props.theme,
-    theme = _props$theme === void 0 ? 'dark' : _props$theme;
-  var _ref = dataSource || {},
-    menus = _ref.menus,
-    sideMenu = _ref.sideMenu;
-  var linkRef = (0, _react.useRef)(null);
-  // 通过URL匹配对应的ID用于回显
-  var _useSetState = (0, _ahooks.useSetState)({
-      selectedKeys: [],
-      openKeys: [],
-      router: ''
-    }),
-    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
-    _useSetState2$ = _useSetState2[0],
-    selectedKeys = _useSetState2$.selectedKeys,
-    openKeys = _useSetState2$.openKeys,
-    router = _useSetState2$.router,
-    setState = _useSetState2[1];
-  var query = new URLSearchParams(window.location.search);
-  var _useContext = (0, _react.useContext)(_index.LayoutContext),
-    onSelected = _useContext.onSelected,
-    target = _useContext.target;
-  var cls = (0, _classnames2.default)((0, _defineProperty2.default)({
-    'pro-layout-open-menu': true
-  }, "".concat(className), className));
-  // 默认激活菜单优先取activeMenu中，默认取pathName进行匹配
-  var selectKeyIdPath = ((_getIdsByPathName = (0, _utils.getIdsByPathName)(menus, query.get('activeMenu'))) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(function (item) {
-    return String(item);
-  })) || [];
-  var itemsTransform = (0, _react.useMemo)(function () {
-    var result = (0, _cloneDeep2.default)(menus);
+module.exports = __toCommonJS(OpenMenu_exports);
+var import_react = require("react");
+var import_antd = require("antd");
+var import_ahooks = require("ahooks");
+var import_icons = require("@ant-design/icons");
+var import_classnames = __toESM(require("classnames"));
+var import_react_router_dom = require("react-router-dom");
+var import_lodash = require("lodash");
+var import__ = require("../../../../index");
+var import_utils = require("../../../../utils");
+var import__2 = require("../../index");
+var OpenMenu = (props) => {
+  var _a;
+  const { className, dataSource, style, theme = "dark" } = props;
+  const { menus, sideMenu } = dataSource || {};
+  const linkRef = (0, import_react.useRef)(null);
+  const [{ selectedKeys, openKeys, router }, setState] = (0, import_ahooks.useSetState)({
+    selectedKeys: [],
+    openKeys: [],
+    router: ""
+  });
+  const query = new URLSearchParams(window.location.search);
+  const { onSelected, target } = (0, import_react.useContext)(import__.LayoutContext);
+  const cls = (0, import_classnames.default)({
+    "pro-layout-open-menu": true,
+    [`${className}`]: className
+  });
+  const selectKeyIdPath = ((_a = (0, import_utils.getIdsByPathName)(menus, query.get("activeMenu"))) == null ? void 0 : _a.map((item) => String(item))) || [];
+  const itemsTransform = (0, import_react.useMemo)(() => {
+    const result = (0, import_lodash.cloneDeep)(menus);
     if (!Array.isArray(result) || !result.length) {
       return [];
     }
-    var _menuDeep = function menuDeep(data) {
-      data.forEach(function (item) {
-        var _item$keyIdPath, _item$keyIdPath2, _item$children;
-        // 是否是第一级菜单，展开模式一级菜单有icon, 收起模式二级菜单有icon
-        var isFirstMenu = ((_item$keyIdPath = item.keyIdPath) === null || _item$keyIdPath === void 0 ? void 0 : _item$keyIdPath.length) === 1 || sideMenu && ((_item$keyIdPath2 = item.keyIdPath) === null || _item$keyIdPath2 === void 0 ? void 0 : _item$keyIdPath2.length) === 2;
-        // 第一级菜单显示icon
-        item.label = (0, _jsxRuntime.jsxs)("div", {
-          className: (0, _classnames2.default)({
-            'pro-layout-open-menu-lv1': isFirstMenu
-          }),
-          children: [(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: item.imgUrl && isFirstMenu ? (0, _jsxRuntime.jsx)("img", {
+    const menuDeep = (data) => {
+      data.forEach((item) => {
+        var _a2, _b, _c;
+        const isFirstMenu = ((_a2 = item.keyIdPath) == null ? void 0 : _a2.length) === 1 || sideMenu && ((_b = item.keyIdPath) == null ? void 0 : _b.length) === 2;
+        item.label = /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)({
+              "pro-layout-open-menu-lv1": isFirstMenu
+            })
+          },
+          /* @__PURE__ */ React.createElement(React.Fragment, null, item.imgUrl && isFirstMenu ? /* @__PURE__ */ React.createElement(
+            "img",
+            {
               className: "pro-layout-icon",
               src: selectKeyIdPath[0] === String(item.id) ? item.imgActiveUrl || item.imgUrl : item.imgUrl,
               alt: "icon"
-            }) : item.icon && isFirstMenu ? (0, _jsxRuntime.jsx)(_index2.Icon, {
-              type: item.icon || '',
-              iconfontUrl: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.iconfontUrl) || ''
-            }) : (0, _jsxRuntime.jsx)("span", {
-              className: (0, _classnames2.default)({
-                'pro-layout-icon': true,
-                'pro-layout-icon-empty': isFirstMenu
+            }
+          ) : item.icon && isFirstMenu ? /* @__PURE__ */ React.createElement(import__2.Icon, { type: item.icon || "", iconfontUrl: (dataSource == null ? void 0 : dataSource.iconfontUrl) || "" }) : /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              className: (0, import_classnames.default)({
+                "pro-layout-icon": true,
+                "pro-layout-icon-empty": isFirstMenu || !item.icon && !item.imgUrl
               })
-            })
-          }), (0, _jsxRuntime.jsx)("h2", {
-            children: item.name
-          })]
-        });
+            }
+          )),
+          /* @__PURE__ */ React.createElement("h2", null, item.name)
+        );
         item.key = String(item.id);
         item.router = item.redirectUrl || item.router || item.url;
-        Object.keys(item).filter(function (keyItem) {
-          return !['label', 'key', 'children', 'onTitleClick', 'router'].includes(keyItem);
-        }).forEach(function (_keyItem) {
+        Object.keys(item).filter(
+          (keyItem) => !["label", "key", "children", "onTitleClick", "router"].includes(keyItem)
+        ).forEach((_keyItem) => {
           delete item[_keyItem];
         });
-        if (Array.isArray(item === null || item === void 0 ? void 0 : item.children) && (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0) {
-          var _item = item === null || item === void 0 ? void 0 : item.children[0];
-          // 移除不需要显示的菜单
-          if ((_item === null || _item === void 0 ? void 0 : _item.hideInMenu) || ['TAB', 'QUERY', 'BUTTON'].includes(_item === null || _item === void 0 ? void 0 : _item.type)) {
+        if (Array.isArray(item == null ? void 0 : item.children) && ((_c = item == null ? void 0 : item.children) == null ? void 0 : _c.length) > 0) {
+          const _item = item == null ? void 0 : item.children[0];
+          if ((_item == null ? void 0 : _item.hideInMenu) || ["TAB", "QUERY", "BUTTON"].includes(_item == null ? void 0 : _item.type)) {
             delete item.children;
           } else {
-            _menuDeep(item.children);
+            menuDeep(item.children);
           }
         } else {
           delete item.children;
@@ -107,10 +113,10 @@ var OpenMenu = function OpenMenu(props) {
       });
       return data;
     };
-    _menuDeep(result);
+    menuDeep(result);
     return result;
   }, [dataSource]);
-  (0, _ahooks.useDeepCompareEffect)(function () {
+  (0, import_ahooks.useDeepCompareEffect)(() => {
     if (Array.isArray(selectKeyIdPath) && selectKeyIdPath.length) {
       setState({
         selectedKeys: selectKeyIdPath,
@@ -118,65 +124,53 @@ var OpenMenu = function OpenMenu(props) {
       });
     }
   }, [menus, selectKeyIdPath]);
-  // 折叠模式默认展开全部菜单
-  (0, _ahooks.useDeepCompareEffect)(function () {
+  (0, import_ahooks.useDeepCompareEffect)(() => {
     if (sideMenu) {
-      var keys = menus.map(function (item) {
-        return String(item.id);
-      });
+      const keys = menus.map((item) => String(item.id));
       setState({
         openKeys: keys
       });
     }
   }, [sideMenu]);
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: cls,
-    style: style,
-    children: [(0, _jsxRuntime.jsx)(_menu.default, {
+  return /* @__PURE__ */ React.createElement("div", { className: cls, style }, /* @__PURE__ */ React.createElement(
+    import_antd.Menu,
+    {
       mode: "inline",
-      // @ts-ignore
-      theme: theme,
-      selectedKeys: selectedKeys,
-      openKeys: openKeys,
+      theme,
+      selectedKeys,
+      openKeys,
       items: itemsTransform,
       inlineIndent: 14,
-      expandIcon: (0, _jsxRuntime.jsx)(_icons.CaretDownOutlined, {}),
-      onOpenChange: function onOpenChange(openKeys) {
+      expandIcon: /* @__PURE__ */ React.createElement(import_icons.CaretDownOutlined, null),
+      onOpenChange: (openKeys2) => {
         setState({
-          openKeys: openKeys
+          openKeys: openKeys2
         });
       },
-      onClick: function onClick(_ref2) {
-        var _item$props, _item$props2;
-        var item = _ref2.item,
-          keyPath = _ref2.keyPath;
+      onClick: ({ item, keyPath }) => {
+        var _a2, _b, _c;
         setState({
           selectedKeys: keyPath,
-          router: item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.router
+          router: (_a2 = item == null ? void 0 : item.props) == null ? void 0 : _a2.router
         });
         onSelected({
-          selectedPath: item === null || item === void 0 ? void 0 : (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.router
+          selectedPath: (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.router
         });
         if (target) {
-          var _item$props3;
-          window.open(item === null || item === void 0 ? void 0 : (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.router, target);
+          window.open((_c = item == null ? void 0 : item.props) == null ? void 0 : _c.router, target);
         } else {
-          setTimeout(function () {
-            // 路由变更，且不再demo文档中
-            if (!window.location.href.includes('~demos/prolayout')) {
+          setTimeout(() => {
+            if (!window.location.href.includes("~demos/prolayout")) {
               linkRef.current.click();
             }
           }, 100);
         }
       },
       style: {
-        height: dataSource.sideMenu ? 'auto' : "calc(100vh - ".concat((dataSource === null || dataSource === void 0 ? void 0 : dataSource.height) || 0, "px)"),
-        color: 'red'
+        height: dataSource.sideMenu ? "auto" : `calc(100vh - ${(dataSource == null ? void 0 : dataSource.height) || 0}px)`,
+        color: "red"
       }
-    }), (0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
-      to: router,
-      ref: linkRef
-    })]
-  });
+    }
+  ), /* @__PURE__ */ React.createElement(import_react_router_dom.Link, { to: router, ref: linkRef }));
 };
-var _default = exports.default = OpenMenu;
+var OpenMenu_default = OpenMenu;

package/lib/ProLayout/components/Layout/Menu/OpenMenu/propsType.js

@@ -1,5 +1,17 @@
-"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+// src/ProLayout/components/Layout/Menu/OpenMenu/propsType.ts
+var propsType_exports = {};
+module.exports = __toCommonJS(propsType_exports);

package/lib/ProLayout/components/Layout/Menu/OpenMenu/style/index.less

@@ -1,9 +1,10 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
-
 .pro-layout-open-menu {
   color: #fff;
 
+  .@{ant-prefix}-menu-root > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu > .@{ant-prefix}-menu-item-only-child  {
+    padding-left: 16px !important;
+  }
+
   .@{ant-prefix}-menu-root {
     overflow-y: auto !important;
 
@@ -15,12 +16,17 @@
     & > .@{ant-prefix}-menu-submenu {
       .@{ant-prefix}-menu-sub {
         background: #1a202d;
+        .@{ant-prefix}-menu-submenu.@{ant-prefix}-menu-submenu-inline{
+          .@{ant-prefix}-menu-submenu-title{
+            padding-left: 16px !important;
+          }
+        }
       }
 
       & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title,
       & > .@{ant-prefix}-menu-item-only-child,
       & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-item-only-child {
-        padding-left: 16px !important;
+        padding-left: 16px;
       }
     }
 
@@ -42,7 +48,7 @@
     }
 
     .@{ant-prefix}-menu-item {
-      padding-left: 30px !important;
+      padding-left: 24px !important;
 
       &::after {
         display: none;
@@ -95,7 +101,7 @@
     height: auto !important;
     min-height: 48px;
     margin: 0;
-    padding: 12px 0;
+    padding: 8px 0;
     line-height: initial !important;
     white-space: pre-wrap;
   }

package/lib/ProLayout/components/Layout/Menu/SideMenu/index.js

@@ -1,46 +1,63 @@
-"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// src/ProLayout/components/Layout/Menu/SideMenu/index.tsx
+var SideMenu_exports = {};
+__export(SideMenu_exports, {
+  default: () => SideMenu_default
 });
-exports.default = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _ahooks = require("ahooks");
-var _OpenMenu = _interopRequireDefault(require("../OpenMenu"));
-var SideMenu = function SideMenu(props) {
-  var dataSource = props.dataSource;
-  var ref = (0, _react.useRef)(null);
-  var size = (0, _ahooks.useSize)(ref);
-  var menus = dataSource.menus,
-    iconfontUrl = dataSource.iconfontUrl,
-    notice = dataSource.notice,
-    collapsed = dataSource.collapsed,
-    headerHeight = dataSource.headerHeight;
-  var cls = (0, _classnames.default)({
-    'pro-layout-sider-menu': true
-  });
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: cls,
-    children: [(0, _jsxRuntime.jsx)("h2", {
-      ref: ref,
-      children: (menus === null || menus === void 0 ? void 0 : menus.name) || ''
-    }), (0, _jsxRuntime.jsx)("div", {
-      children: (0, _jsxRuntime.jsx)(_OpenMenu.default, {
-        className: "pro-layout-sider-menu-list",
-        theme: "light",
-        dataSource: {
-          menus: (menus === null || menus === void 0 ? void 0 : menus.children) || [],
-          iconfontUrl: iconfontUrl,
-          sideMenu: true
-        },
-        style: {
-          height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0) + ((size === null || size === void 0 ? void 0 : size.height) || 0), "px)")
-        }
-      })
-    })]
+module.exports = __toCommonJS(SideMenu_exports);
+var import_react = require("react");
+var import_classnames = __toESM(require("classnames"));
+var import_ahooks = require("ahooks");
+var import_OpenMenu = __toESM(require("../OpenMenu"));
+var SideMenu = (props) => {
+  const { dataSource } = props;
+  const ref = (0, import_react.useRef)(null);
+  const size = (0, import_ahooks.useSize)(ref);
+  const { menus, iconfontUrl, notice, collapsed, headerHeight } = dataSource;
+  const cls = (0, import_classnames.default)({
+    "pro-layout-sider-menu": true
   });
+  return /* @__PURE__ */ React.createElement("div", { className: cls }, /* @__PURE__ */ React.createElement("h2", { ref }, (menus == null ? void 0 : menus.name) || ""), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    import_OpenMenu.default,
+    {
+      className: "pro-layout-sider-menu-list",
+      theme: "light",
+      dataSource: {
+        menus: (menus == null ? void 0 : menus.children) || [],
+        iconfontUrl,
+        sideMenu: true
+      },
+      style: {
+        height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + ((size == null ? void 0 : size.height) || 0)}px)`
+      }
+    }
+  )));
 };
-var _default = exports.default = SideMenu;
+var SideMenu_default = SideMenu;

package/lib/ProLayout/components/Layout/Menu/SideMenu/style/index.less

@@ -1,5 +1,5 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
+/* @root-entry-name: 'default'; */
+/* @import (reference) '~antd/es/style/themes/index.less'; */
 
 .pro-layout-sider-menu {
   width: 220px;
@@ -61,7 +61,7 @@
             display: none;
 
             & ~ h2 {
-              margin-left: var(--zaui-space-size-md, 16px);
+              margin-left: 32px;
             }
           }
         }
@@ -93,12 +93,16 @@
           color: #909090;
         }
 
+ 
+
         .@{ant-prefix}-menu-submenu-title,
         &.@{ant-prefix}-menu-root > .@{ant-prefix}-menu-item-only-child,
         &.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item {
           min-height: 40px;
-          padding-top: 10px;
-          padding-bottom: 10px;
+          padding-top: 8px;
+          padding-bottom: 8px;
+          width: 100%;
+          border-radius: 0;
         }
       }
     }