@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/es/ProLayout/components/Layout/Icon/Icon.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
 var customCache = new Set();
 var Icon = function Icon(props) {
   // @ts-ignore
@@ -19,13 +20,14 @@ var Icon = function Icon(props) {
   useEffect(function () {
     loadSymbol(iconfontUrl);
   }, []);
-  return /*#__PURE__*/React.createElement("svg", {
+  return _jsx("svg", {
     className: "pro-layout-icon",
     "aria-hidden": "true",
     onClick: onClick,
-    style: style
-  }, /*#__PURE__*/React.createElement("use", {
-    xlinkHref: "#icon-".concat(type)
-  }));
+    style: style,
+    children: _jsx("use", {
+      xlinkHref: "#icon-".concat(type)
+    })
+  });
 };
 export default Icon;

package/es/ProLayout/components/Layout/Menu/FoldMenu/index.d.ts

@@ -1,3 +1,3 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 declare const FoldMenu: FC<any>;
 export default FoldMenu;

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

@@ -3,11 +3,13 @@ import _Tooltip from "antd/es/tooltip";
 import "antd/es/popover/style";
 import _Popover from "antd/es/popover";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React from 'react';
-import { Link } from 'react-router-dom';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
 import classnames from 'classnames';
+import { Link } from 'react-router-dom';
 import { Icon } from '../../index';
 import SideMenu from '../SideMenu';
+import { LayoutContext } from '../../../../index';
 import { getUrlParams, getPathNameKey } from '../../../../utils';
 var FoldMenu = function FoldMenu(props) {
   var style = props.style,
@@ -23,76 +25,85 @@ var FoldMenu = function FoldMenu(props) {
     'pro-layout-menu-tooltip-has-notice': notice,
     'pro-layout-menu-tooltip-nav-open': collapsed
   });
-  return /*#__PURE__*/React.createElement("div", {
+  var _useContext = useContext(LayoutContext),
+    selectedPath = _useContext.selectedPath;
+  return _jsx("div", {
     className: "pro-layout-menu-fold",
-    style: _objectSpread({}, style)
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: "pro-layout-menu-fold-list",
-    style: _objectSpread({}, style)
-  }, 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;
-    // 隐藏菜单
-    if (hideInMenu) {
-      return null;
-    }
-    var selectedMenu = getUrlParams('activeMenu');
-    // 取第一级
-    var currentKeyIdPath = getPathNameKey({
-      menus: menus,
-      pathName: selectedMenu || window.location.pathname // 优先匹配URL中定位菜单
-    }) || [];
-    var cls = classnames({
-      active: currentKeyIdPath.includes(id)
-    });
-    // 是否包含子级菜单
-    var hasChildrenMenu = Array.isArray(children) && children.length;
-    // 一级li Dom节点
-    var LiNode = /*#__PURE__*/React.createElement("li", {
-      key: "".concat(id, "-").concat(name),
-      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")
-    }, /*#__PURE__*/React.createElement("div", null, imgUrl ? /*#__PURE__*/React.createElement("img", {
-      className: "pro-layout-icon",
-      src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
-      alt: "icon"
-    }) : /*#__PURE__*/React.createElement(Icon, {
-      type: icon || '',
-      iconfontUrl: iconfontUrl || ''
-    }), /*#__PURE__*/React.createElement("h2", null, name)));
-    return hasChildrenMenu ? /*#__PURE__*/React.createElement(_Popover, {
-      key: "".concat(id, "-").concat(name),
-      mouseEnterDelay: 0,
-      content: /*#__PURE__*/React.createElement(SideMenu, {
-        dataSource: _objectSpread(_objectSpread({}, dataSource), {}, {
-          menus: item
-        })
-      }),
-      color: "#fff",
-      overlayClassName: noticeCls,
-      overlayInnerStyle: {
-        marginTop: headerHeight - 48,
-        height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0), "px)")
-      },
-      placement: "rightTop"
-    }, LiNode) : !collapsed ? /*#__PURE__*/React.createElement(_Tooltip, {
-      placement: "right",
-      title: name,
-      key: item.redirectUrl || item.url
-    }, /*#__PURE__*/React.createElement(Link, {
-      to: item.redirectUrl || item.url,
-      key: item.redirectUrl || item.url
-    }, LiNode)) : /*#__PURE__*/React.createElement(Link, {
-      to: item.redirectUrl || item.url,
-      key: item.redirectUrl || item.url
-    }, LiNode);
-  })));
+    style: _objectSpread({}, style),
+    children: _jsx("ul", {
+      className: "pro-layout-menu-fold-list",
+      style: _objectSpread({}, 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;
+        }
+        var selectedMenu = getUrlParams('activeMenu');
+        // 取第一级
+        var currentKeyIdPath = getPathNameKey({
+          menus: menus,
+          pathName: selectedMenu || selectedPath || window.location.pathname // 优先匹配URL中定位菜单
+        }) || [];
+        var cls = classnames({
+          active: currentKeyIdPath.includes(id)
+        });
+        // 是否包含子级菜单
+        var hasChildrenMenu = Array.isArray(children) && children.length;
+        // 一级li Dom节点
+        var LiNode = _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: _jsxs("div", {
+            children: [imgUrl ? _jsx("img", {
+              className: "pro-layout-icon",
+              src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
+              alt: "icon"
+            }) : _jsx(Icon, {
+              type: icon || '',
+              iconfontUrl: iconfontUrl || ''
+            }), _jsx("h2", {
+              children: name
+            })]
+          })
+        }, "".concat(id, "-").concat(name));
+        return hasChildrenMenu ? _jsx(_Popover, {
+          mouseEnterDelay: 0,
+          content: _jsx(SideMenu, {
+            dataSource: _objectSpread(_objectSpread({}, dataSource), {}, {
+              menus: item
+            })
+          }),
+          color: "#fff",
+          overlayClassName: noticeCls,
+          overlayInnerStyle: {
+            marginTop: headerHeight - 48,
+            height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0), "px)")
+          },
+          placement: "rightTop",
+          children: LiNode
+        }, "".concat(id, "-").concat(name)) : !collapsed ? _jsx(_Tooltip, {
+          placement: "right",
+          title: name,
+          children: _jsx(Link, {
+            to: toPath,
+            children: LiNode
+          }, toPath)
+        }, toPath) : _jsx(Link, {
+          to: toPath,
+          children: LiNode
+        }, toPath);
+      })
+    })
+  });
 };
 export default FoldMenu;

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

@@ -11,8 +11,8 @@
 
     div {
       display        : flex;
-      align-items    : top;
-      justify-content: left;
+      align-items    : center;
+      justify-content: center;
       color          : var(--zaui-text, #343434);
 
       .pro-layout-icon {
@@ -45,10 +45,10 @@
 
     h2 {
       display     : inline-block;
-      padding-left: 8px;
+      padding-left: var(--zaui-space-size-sm, 8px);
       color       : var(--zaui-base-bg, #ffffff);
       font-weight : normal;
-      font-size   : 14px;
+      font-size   : var(--zaui-font-size-md, 14px);
     }
 
     &.active {
@@ -81,7 +81,7 @@
 .pro-layout-menu-tooltip.ant-popover-placement-rightBottom,
 .pro-layout-menu-tooltip.ant-popover-placement-rightTop {
   position    : fixed;
-  z-index     : 1051;
+  z-index     : 1001;
   left        : 49px !important;
   padding-left: 0
 }
@@ -95,6 +95,6 @@
 }
 
 .pro-layout-menu-tooltip .ant-popover-content .ant-popover-inner {
-  padding      : 0;
-  // box-shadow: 0 0 0
-}
+  padding   : 0;
+  box-shadow: 2px 0px 5px 0px rgba(0, 55, 93, 0.1);
+}

package/es/ProLayout/components/Layout/Menu/OpenMenu/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { OpenMenuPropsType } from './propsType';
-declare const OpenMenu: (props: OpenMenuPropsType) => React.JSX.Element;
+declare const OpenMenu: (props: OpenMenuPropsType) => JSX.Element;
 export default OpenMenu;

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

@@ -2,16 +2,18 @@ import "antd/es/menu/style";
 import _Menu from "antd/es/menu";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useMemo } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useEffect, useContext } from 'react';
 import { useDeepCompareEffect, useSetState } from 'ahooks';
 import { CaretDownOutlined } from '@ant-design/icons';
-import { useHistory } from 'react-router-dom';
 import classnames from 'classnames';
+import { Link } from 'react-router-dom';
 import { cloneDeep } from 'lodash';
+import { LayoutContext } from '../../../../index';
 import { getIdsByPathName } from '../../../../utils';
 import { Icon } from '../../index';
 var OpenMenu = function OpenMenu(props) {
-  var _getIdsByPathName, _history$location, _history$location$que;
+  var _getIdsByPathName;
   var className = props.className,
     dataSource = props.dataSource,
     style = props.style,
@@ -21,22 +23,27 @@ var OpenMenu = function OpenMenu(props) {
   var _ref = dataSource || {},
     menus = _ref.menus,
     sideMenu = _ref.sideMenu;
+  var linkRef = useRef(null);
   // 通过URL匹配对应的ID用于回显
   var _useSetState = useSetState({
       selectedKeys: [],
-      openKeys: []
+      openKeys: [],
+      router: ''
     }),
     _useSetState2 = _slicedToArray(_useSetState, 2),
     _useSetState2$ = _useSetState2[0],
     selectedKeys = _useSetState2$.selectedKeys,
     openKeys = _useSetState2$.openKeys,
+    router = _useSetState2$.router,
     setState = _useSetState2[1];
-  var history = useHistory();
+  var query = new URLSearchParams(window.location.search);
+  var _useContext = useContext(LayoutContext),
+    onSelected = _useContext.onSelected;
   var cls = classnames(_defineProperty({
     'pro-layout-open-menu': true
   }, "".concat(className), className));
   // 默认激活菜单优先取activeMenu中，默认取pathName进行匹配
-  var selectKeyIdPath = ((_getIdsByPathName = getIdsByPathName(menus, history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : (_history$location$que = _history$location.query) === null || _history$location$que === void 0 ? void 0 : _history$location$que.activeMenu)) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(function (item) {
+  var selectKeyIdPath = ((_getIdsByPathName = getIdsByPathName(menus, query.get('activeMenu'))) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(function (item) {
     return String(item);
   })) || [];
   var itemsTransform = useMemo(function () {
@@ -50,23 +57,28 @@ var OpenMenu = function OpenMenu(props) {
         // 是否是第一级菜单，展开模式一级菜单有icon, 收起模式二级菜单有icon
         var isFirstMenu = item.keyIdPath.length === 1 || sideMenu && item.keyIdPath.length === 2;
         // 第一级菜单显示icon
-        item.label = /*#__PURE__*/React.createElement("div", {
+        item.label = _jsxs("div", {
           className: classnames({
             '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 ? /*#__PURE__*/React.createElement(Icon, {
-          type: item.icon || '',
-          iconfontUrl: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.iconfontUrl) || ''
-        }) : /*#__PURE__*/React.createElement("span", {
-          className: classnames({
-            'pro-layout-icon': true,
-            'pro-layout-icon-empty': isFirstMenu
-          })
-        })), /*#__PURE__*/React.createElement("h2", null, item.name));
+          }),
+          children: [_jsx(_Fragment, {
+            children: item.imgUrl && isFirstMenu ? _jsx("img", {
+              className: "pro-layout-icon",
+              src: selectKeyIdPath[0] === String(item.id) ? item.imgActiveUrl || item.imgUrl : item.imgUrl,
+              alt: "icon"
+            }) : item.icon && isFirstMenu ? _jsx(Icon, {
+              type: item.icon || '',
+              iconfontUrl: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.iconfontUrl) || ''
+            }) : _jsx("span", {
+              className: classnames({
+                'pro-layout-icon': true,
+                'pro-layout-icon-empty': isFirstMenu
+              })
+            })
+          }), _jsx("h2", {
+            children: item.name
+          })]
+        });
         item.key = String(item.id);
         item.router = item.redirectUrl || item.router || item.url;
         Object.keys(item).filter(function (keyItem) {
@@ -110,35 +122,49 @@ var OpenMenu = function OpenMenu(props) {
       });
     }
   }, [sideMenu]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cls,
-    style: style
-  }, /*#__PURE__*/React.createElement(_Menu, {
-    mode: "inline",
-    theme: theme,
-    selectedKeys: selectedKeys,
-    openKeys: openKeys,
-    items: itemsTransform,
-    inlineIndent: 14,
-    expandIcon: /*#__PURE__*/React.createElement(CaretDownOutlined, null),
-    onOpenChange: function onOpenChange(openKeys) {
-      setState({
-        openKeys: openKeys
-      });
-    },
-    onClick: function onClick(_ref2) {
-      var _item$props;
-      var item = _ref2.item,
-        keyPath = _ref2.keyPath;
-      setState({
-        selectedKeys: keyPath
-      });
-      history.push(item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.router);
-    },
-    style: {
-      height: dataSource.sideMenu ? 'auto' : "calc(100vh - ".concat((dataSource === null || dataSource === void 0 ? void 0 : dataSource.height) || 0, "px)"),
-      color: 'red'
+  useEffect(function () {
+    // 路由变更，且不再demo文档中
+    if (router && !window.location.href.includes('~demos/prolayout')) {
+      linkRef.current.click();
     }
-  }));
+  }, [router]);
+  return _jsxs("div", {
+    className: cls,
+    style: style,
+    children: [_jsx(_Menu, {
+      mode: "inline",
+      // @ts-ignore
+      theme: theme,
+      selectedKeys: selectedKeys,
+      openKeys: openKeys,
+      items: itemsTransform,
+      inlineIndent: 14,
+      expandIcon: _jsx(CaretDownOutlined, {}),
+      onOpenChange: function onOpenChange(openKeys) {
+        setState({
+          openKeys: openKeys
+        });
+      },
+      onClick: function onClick(_ref2) {
+        var _item$props, _item$props2;
+        var item = _ref2.item,
+          keyPath = _ref2.keyPath;
+        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
+        });
+        onSelected({
+          selectedPath: item === null || item === void 0 ? void 0 : (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.router
+        });
+      },
+      style: {
+        height: dataSource.sideMenu ? 'auto' : "calc(100vh - ".concat((dataSource === null || dataSource === void 0 ? void 0 : dataSource.height) || 0, "px)"),
+        color: 'red'
+      }
+    }), _jsx(Link, {
+      to: router,
+      ref: linkRef
+    })]
+  });
 };
 export default OpenMenu;

package/es/ProLayout/components/Layout/Menu/OpenMenu/propsType.d.ts

@@ -6,9 +6,11 @@ export interface OpenMenuPropsType {
         /** 是否是折叠模式的菜单 */
         sideMenu?: boolean;
     };
+    theme: string;
     [key: string]: any;
 }
 export interface StatePropsType {
     selectedKeys: string[];
     openKeys: string[];
+    router: string;
 }

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

@@ -37,6 +37,10 @@
 
     .ant-menu-item {
       padding-left: 30px !important;
+
+      &::after {
+        display: none;
+      }
     }
 
   }
@@ -51,6 +55,11 @@
   .ant-menu-submenu-title {
     &:hover {
       background: var(--ant-primary-8, #003eb3);
+
+      h2 {
+        color: #fff;
+      }
+
     }
   }
 
@@ -62,6 +71,10 @@
     .ant-menu-item-only-child {
       &:hover {
         background: var(--ant-primary-8, #003eb3);
+
+        h2 {
+          color: #fff;
+        }
       }
     }
   }
@@ -101,17 +114,15 @@
       }
 
       h2 {
-        flex-grow       : 1;
-        margin-bottom   : 0;
-        opacity         : 1;
-        color           : #fff;
-        transition      : opacity .3s cubic-bezier(.645, .045, .355, 1), margin .3s, color .3s;
-        display         : inline-block;
-        padding-left    : 12px;
-        color           : #CACACA;
-        // color        : var(--zaui-base-bg, #fff);
-        font-weight     : 400;
-        font-size       : 14px;
+        flex-grow    : 1;
+        margin-bottom: 0;
+        opacity      : 1;
+        transition   : opacity .3s cubic-bezier(.645, .045, .355, 1), margin .3s, color .3s;
+        display      : inline-block;
+        padding-left : 12px;
+        color        : #CACACA;
+        font-weight  : 400;
+        font-size    : var(--zaui-font-size-md, 14px);
       }
     }
 
@@ -177,4 +188,4 @@
     }
 
   }
-}
+}

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

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import classnames from 'classnames';
 import { useSize } from 'ahooks';
 import OpenMenu from '../OpenMenu';
@@ -14,21 +15,25 @@ var SideMenu = function SideMenu(props) {
   var cls = classnames({
     'pro-layout-sider-menu': true
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: cls
-  }, /*#__PURE__*/React.createElement("h2", {
-    ref: ref
-  }, (menus === null || menus === void 0 ? void 0 : menus.name) || ''), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OpenMenu, {
-    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)")
-    }
-  })));
+  return _jsxs("div", {
+    className: cls,
+    children: [_jsx("h2", {
+      ref: ref,
+      children: (menus === null || menus === void 0 ? void 0 : menus.name) || ''
+    }), _jsx("div", {
+      children: _jsx(OpenMenu, {
+        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)")
+        }
+      })
+    })]
+  });
 };
 export default SideMenu;

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

@@ -5,7 +5,7 @@
   h2 {
     margin-bottom: 0;
     padding      : 16px 16px 8px;
-    color        : #343434;
+    color        : var(--zaui-text, #343434);
     color        : var(--zaui-text);
     font-weight  : 500;
     font-size    : var(--zaui-font-size-lg, 16px);
@@ -51,14 +51,14 @@
             display: none;
 
             &~h2 {
-              margin-left: 16px;
+              margin-left: var(--zaui-space-size-md, 16px);
             }
           }
         }
 
         .pro-layout-icon {
           fill : currentColor;
-          color: #343434 !important;
+          color: var(--zaui-text, #343434) !important;
         }
 
         &.ant-menu-sub {
@@ -72,6 +72,7 @@
         .ant-menu-submenu-title:hover,
         .ant-menu-item:hover {
           background-color: #f2f2f2;
+          color           : #fff;
         }
 
         .ant-menu-item {
@@ -94,4 +95,4 @@
   }
 
 
-}
+}