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

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

@@ -1,124 +1,118 @@
-"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/FoldMenu/index.tsx
+var FoldMenu_exports = {};
+__export(FoldMenu_exports, {
+  default: () => FoldMenu_default
 });
-exports.default = void 0;
-require("antd/es/tooltip/style");
-var _tooltip = _interopRequireDefault(require("antd/es/tooltip"));
-require("antd/es/popover/style");
-var _popover = _interopRequireDefault(require("antd/es/popover"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactRouterDom = require("react-router-dom");
-var _index = require("../../index");
-var _SideMenu = _interopRequireDefault(require("../SideMenu"));
-var _index2 = require("../../../../index");
-var _utils = require("../../../../utils");
-var FoldMenu = function FoldMenu(props) {
-  var style = props.style,
-    dataSource = props.dataSource;
-  var menus = dataSource.menus,
-    iconfontUrl = dataSource.iconfontUrl,
-    notice = dataSource.notice,
-    collapsed = dataSource.collapsed,
-    headerHeight = dataSource.headerHeight;
-  var pathNamePrefix = "/".concat(window.location.pathname.split('/')[1]);
-  var noticeCls = (0, _classnames.default)({
-    'pro-layout-menu-tooltip': true,
-    'pro-layout-menu-tooltip-has-notice': notice,
-    'pro-layout-menu-tooltip-nav-open': collapsed
+module.exports = __toCommonJS(FoldMenu_exports);
+var import_react = require("react");
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_react_router_dom = require("react-router-dom");
+var import__ = require("../../index");
+var import_SideMenu = __toESM(require("../SideMenu"));
+var import__2 = require("../../../../index");
+var import_utils = require("../../../../utils");
+var FoldMenu = (props) => {
+  const { style, dataSource } = props;
+  const { menus, iconfontUrl, notice, collapsed, headerHeight } = dataSource;
+  const pathNamePrefix = `/${window.location.pathname.split("/")[1]}`;
+  const noticeCls = (0, import_classnames.default)({
+    "pro-layout-menu-tooltip": true,
+    "pro-layout-menu-tooltip-has-notice": notice,
+    "pro-layout-menu-tooltip-nav-open": collapsed
   });
-  var _useContext = (0, _react.useContext)(_index2.LayoutContext),
-    selectedPath = _useContext.selectedPath,
-    onSelected = _useContext.onSelected;
-  return (0, _jsxRuntime.jsx)("div", {
-    className: "pro-layout-menu-fold",
-    style: (0, _objectSpread2.default)({}, style),
-    children: (0, _jsxRuntime.jsx)("ul", {
-      className: "pro-layout-menu-fold-list",
-      style: (0, _objectSpread2.default)({}, style),
-      children: menus.map(function (item, index) {
-        var _url$split;
-        var id = item.id,
-          url = item.url,
-          name = item.name,
-          icon = item.icon,
-          imgUrl = item.imgUrl,
-          imgActiveUrl = item.imgActiveUrl,
-          hideInMenu = item.hideInMenu,
-          children = item.children;
-        var toPath = item.redirectUrl || item.url;
-        // 隐藏菜单
-        if (hideInMenu) {
-          return null;
+  const { selectedPath, onSelected } = (0, import_react.useContext)(import__2.LayoutContext);
+  return /* @__PURE__ */ React.createElement("div", { className: "pro-layout-menu-fold", style: { ...style } }, /* @__PURE__ */ React.createElement("ul", { className: "pro-layout-menu-fold-list", style: { ...style } }, menus.map((item, index) => {
+    var _a;
+    const { id, url, name, icon, imgUrl, imgActiveUrl, hideInMenu, children } = item;
+    const toPath = item.redirectUrl || item.url;
+    if (hideInMenu) {
+      return null;
+    }
+    const selectedMenu = (0, import_utils.getUrlParams)("activeMenu");
+    const currentKeyIdPath = (0, import_utils.getPathNameKey)({
+      menus,
+      pathName: selectedMenu || selectedPath || window.location.pathname
+      // 优先匹配URL中定位菜单
+    }) || [];
+    const cls = (0, import_classnames.default)({
+      active: currentKeyIdPath.includes(id)
+    });
+    const hasChildrenMenu = Array.isArray(children) && children.length;
+    const LiNode = /* @__PURE__ */ React.createElement(
+      "li",
+      {
+        key: `${id}-${name}`,
+        id: (_a = url == null ? void 0 : url.split("/")) == null ? void 0 : _a[1],
+        className: `${cls} pro-layout-menu-fold-li`
+      },
+      /* @__PURE__ */ React.createElement("div", null, imgUrl ? /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          className: "pro-layout-icon",
+          src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
+          alt: "icon"
         }
-        var selectedMenu = (0, _utils.getUrlParams)('activeMenu');
-        // 取第一级
-        var currentKeyIdPath = (0, _utils.getPathNameKey)({
-          menus: menus,
-          pathName: selectedMenu || selectedPath || window.location.pathname // 优先匹配URL中定位菜单
-        }) || [];
-        var cls = (0, _classnames.default)({
-          active: currentKeyIdPath.includes(id)
-        });
-        // 是否包含子级菜单
-        var hasChildrenMenu = Array.isArray(children) && children.length;
-        // 一级li Dom节点
-        var LiNode = (0, _jsxRuntime.jsx)("li", {
-          id: url === null || url === void 0 ? void 0 : (_url$split = url.split('/')) === null || _url$split === void 0 ? void 0 : _url$split[1],
-          className: "".concat(cls, " pro-layout-menu-fold-li"),
-          children: (0, _jsxRuntime.jsxs)("div", {
-            children: [imgUrl ? (0, _jsxRuntime.jsx)("img", {
-              className: "pro-layout-icon",
-              src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
-              alt: "icon"
-            }) : (0, _jsxRuntime.jsx)(_index.Icon, {
-              type: icon || '',
-              iconfontUrl: iconfontUrl || ''
-            }), (0, _jsxRuntime.jsx)("h2", {
-              children: name
-            })]
-          })
-        }, "".concat(id, "-").concat(name));
-        return hasChildrenMenu ? (0, _jsxRuntime.jsx)(_popover.default, {
-          mouseEnterDelay: 0,
-          content: (0, _jsxRuntime.jsx)(_SideMenu.default, {
-            dataSource: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, dataSource), {}, {
-              menus: item
-            })
-          }),
-          color: "#fff",
-          overlayClassName: noticeCls,
-          overlayInnerStyle: {
+      ) : /* @__PURE__ */ React.createElement(import__.Icon, { type: icon || "", iconfontUrl: iconfontUrl || "" }), /* @__PURE__ */ React.createElement("h2", null, name))
+    );
+    return hasChildrenMenu ? /* @__PURE__ */ React.createElement(
+      import_antd.Popover,
+      {
+        key: `${id}-${name}`,
+        mouseEnterDelay: 0,
+        content: /* @__PURE__ */ React.createElement(import_SideMenu.default, { dataSource: { ...dataSource, menus: item } }),
+        color: "#fff",
+        classNames: {
+          root: noticeCls
+        },
+        styles: {
+          body: {
             marginTop: headerHeight - 48,
-            height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0), "px)")
-          },
-          placement: "rightTop",
-          children: LiNode
-        }, "".concat(id, "-").concat(name)) : !collapsed ? (0, _jsxRuntime.jsx)(_tooltip.default, {
-          placement: "right",
-          title: name,
-          children: (0, _jsxRuntime.jsx)("span", {
-            onClick: function onClick() {
-              onSelected({
-                selectedPath: toPath
-              });
-            },
-            children: (0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
-              to: toPath,
-              children: LiNode
-            }, toPath)
-          })
-        }, toPath) : (0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
-          to: toPath,
-          children: LiNode
-        }, toPath);
-      })
-    })
-  });
+            height: `calc(100vh - ${headerHeight + (notice ? 32 : 0)}px)`
+          }
+        },
+        placement: "rightTop"
+      },
+      LiNode
+    ) : !collapsed ? /* @__PURE__ */ React.createElement(import_antd.Tooltip, { placement: "right", title: name, key: toPath }, /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        onClick: () => {
+          onSelected({
+            selectedPath: toPath
+          });
+        }
+      },
+      /* @__PURE__ */ React.createElement(import_react_router_dom.Link, { to: toPath, key: toPath }, LiNode)
+    )) : /* @__PURE__ */ React.createElement(import_react_router_dom.Link, { to: toPath, key: toPath }, LiNode);
+  })));
 };
-var _default = exports.default = FoldMenu;
+var FoldMenu_default = FoldMenu;

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

@@ -1,38 +1,37 @@
-@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-menu-fold-list {
   padding-top: 4px;
-  overflow-y : auto;
+  overflow-y: auto;
 
   li {
-    width        : 100%;
-    min-height   : 48px;
-    padding      : 12px;
-    overflow     : hidden;
+    width: 100%;
+    min-height: 48px;
+    padding: 12px;
+    overflow: hidden;
     text-overflow: ellipsis;
 
     div {
-      display        : flex;
-      align-items    : center;
+      display: flex;
+      align-items: center;
       justify-content: center;
-      color          : var(--zaui-text, #343434);
+      color: var(--zaui-text, #343434);
 
       .pro-layout-icon {
-        flex     : 0 0 20px;
-        width    : 20px;
-        height   : 20px;
+        flex: 0 0 20px;
+        width: 20px;
         min-width: 20px;
-        color    : #fff;
+        height: 20px;
+        color: #fff;
       }
 
       h2 {
-        flex-grow    : 1;
-        margin-bottom: 0;
-        opacity      : 1;
-        transition   : opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-          margin 0.3s, color 0.3s;
         display: none;
+        flex-grow: 1;
+        margin-bottom: 0;
+        opacity: 1;
+        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
       }
     }
 
@@ -42,20 +41,20 @@
 
     i {
       display: inline-block;
-      width  : 19px;
-      color  : #909090;
+      width: 19px;
+      color: #909090;
     }
 
     h2 {
-      display     : inline-block;
+      display: inline-block;
       padding-left: var(--zaui-space-size-sm, 8px);
-      color       : var(--zaui-base-bg, #ffffff);
-      font-weight : normal;
-      font-size   : var(--zaui-font-size-md, 14px);
+      color: var(--zaui-base-bg, #ffffff);
+      font-weight: normal;
+      font-size: var(--zaui-font-size-md, 14px);
     }
 
     &.active {
-      background-color: var(--zaui-brand, #006AFF);
+      background-color: var(--zaui-brand, #006aff);
 
       a {
         h2 {
@@ -67,37 +66,41 @@
 }
 
 .pro-layout-menu-tooltip {
-  top       : 48px !important;
-  transform : none !important;
-  transition: none !important
+  top: 48px !important;
+  transform: none !important;
+  transition: none !important;
 }
 
 .pro-layout-menu-tooltip.pro-layout-menu-tooltip-has-notice {
-  top: 80px !important
+  top: 80px !important;
 }
 
 .pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightBottom,
 .pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightTop {
-  left: 220px !important
+  left: 220px !important;
 }
 
 .pro-layout-menu-tooltip.@{ant-prefix}-popover-placement-rightBottom,
 .pro-layout-menu-tooltip.@{ant-prefix}-popover-placement-rightTop {
-  position    : fixed;
-  z-index     : 1001;
-  left        : 49px !important;
-  padding-left: 0
+  position: fixed;
+  left: 49px !important;
+  z-index: 99;
+  padding-left: 0;
+
+  .@{ant-prefix}-popover-arrow {
+    display: none;
+  }
 }
 
 .pro-layout-menu-tooltip .@{ant-prefix}-popover-inner-content {
-  padding: 0
+  padding: 0;
 }
 
-.pro-layout-menu-tooltip .@{ant-prefix}-popover-content>.@{ant-prefix}-popover-arrow {
-  display: none
+.pro-layout-menu-tooltip .@{ant-prefix}-popover-content > .@{ant-prefix}-popover-arrow {
+  display: none;
 }
 
 .pro-layout-menu-tooltip .@{ant-prefix}-popover-content .@{ant-prefix}-popover-inner {
-  padding   : 0;
+  padding: 0;
   box-shadow: 2px 0px 5px 0px rgba(0, 55, 93, 0.1);
 }