@zat-design/sisyphus-react 4.0.0-beta.3 → 4.0.0-beta.5

package/es/ProLayout/index.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "antd/es/message/style";
+import _message from "antd/es/message";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { message } from 'antd';
 import { createContext } from 'react';
 import classNames from 'classnames';
 import { useSetState, useToggle, useDeepCompareEffect } from 'ahooks';
@@ -14,15 +14,17 @@ import { transformMenus } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var LayoutContext = /*#__PURE__*/createContext(undefined);
-var ProLayout = function ProLayout(props) {
+var ProLayout = props => {
   var _Object$keys;
   var children = props.children,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
     _props$pure = props.pure,
     pure = _props$pure === void 0 ? false : _props$pure,
-    headerHeight = props.headerHeight,
-    contentStyle = props.contentStyle,
+    _props$headerHeight = props.headerHeight,
+    headerHeight = _props$headerHeight === void 0 ? 48 : _props$headerHeight,
+    _props$contentStyle = props.contentStyle,
+    contentStyle = _props$contentStyle === void 0 ? {} : _props$contentStyle,
     _props$waterMarkProps = props.waterMarkProps,
     waterMarkProps = _props$waterMarkProps === void 0 ? {} : _props$waterMarkProps,
     headerNotice = props.headerNotice,
@@ -30,9 +32,21 @@ var ProLayout = function ProLayout(props) {
     dataSource = props.dataSource,
     _props$pathPrefix = props.pathPrefix,
     pathPrefix = _props$pathPrefix === void 0 ? '' : _props$pathPrefix,
-    theme = props.theme,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'dark' : _props$theme,
     target = props.target,
-    onCollapsedChange = props.onCollapsedChange;
+    onCollapsedChange = props.onCollapsedChange,
+    _props$collapsed = props.collapsed,
+    propsCollapsed = _props$collapsed === void 0 ? false : _props$collapsed,
+    onMenuClick = props.onMenuClick,
+    headerTitleRender = props.headerTitleRender,
+    headerContentRender = props.headerContentRender,
+    rightContentRender = props.rightContentRender,
+    title = props.title,
+    logo = props.logo,
+    iconfontUrl = props.iconfontUrl,
+    sideMenuFooterRender = props.sideMenuFooterRender,
+    sideMenuHeaderRender = props.sideMenuHeaderRender;
   var _useSetState = useSetState({
       notice: headerNotice || noticeIn,
       menus: [],
@@ -50,12 +64,12 @@ var ProLayout = function ProLayout(props) {
     _useToggle2$ = _useToggle2[1],
     toggle = _useToggle2$.toggle,
     set = _useToggle2$.set;
-  useDeepCompareEffect(function () {
-    set(props.collapsed || false);
-  }, [props.collapsed]);
-  useDeepCompareEffect(function () {
+  useDeepCompareEffect(() => {
+    set(propsCollapsed || false);
+  }, [propsCollapsed]);
+  useDeepCompareEffect(() => {
     if (Array.isArray(dataSource) && !dataSource.length) {
-      return message.warning('Warning: Missing menu data source, or menu data source is not an array');
+      return _message.warning('Warning: Missing menu data source, or menu data source is not an array');
     }
     var userData = transformMenus(dataSource, pathPrefix);
     // 确保 menus 始终是一个数组
@@ -68,7 +82,7 @@ var ProLayout = function ProLayout(props) {
   /**
    * 关闭提示框
    */
-  var onCancelNotice = function onCancelNotice() {
+  var onCancelNotice = () => {
     setState({
       notice: null
     });
@@ -81,28 +95,54 @@ var ProLayout = function ProLayout(props) {
     'pro-layout-row-left-pure': typeof pure !== 'boolean' && (pure === null || pure === void 0 ? void 0 : pure.leftMenu)
   });
   var noticeHeight = notice ? 32 : 0;
+
+  // 为Header组件创建专门的props对象
+  var headerProps = {
+    headerHeight,
+    pure,
+    headerTitleRender,
+    headerContentRender,
+    rightContentRender,
+    title,
+    logo
+  };
+
+  // 为Notice组件创建专门的props对象
+  var noticeProps = {
+    headerHeight,
+    notice,
+    onCancel: onCancelNotice
+  };
+
+  // 为Menu组件创建专门的props对象
+  var menuProps = {
+    headerHeight,
+    dataSource: Array.isArray(menus) ? {
+      menus
+    } : menus,
+    iconfontUrl,
+    collapsed,
+    notice,
+    onToggle: () => {
+      toggle();
+      onCollapsedChange && onCollapsedChange(!collapsed);
+    },
+    pure,
+    theme,
+    sideMenuFooterRender,
+    sideMenuHeaderRender,
+    onMenuClick
+  };
   var layoutDom = /*#__PURE__*/_jsxs("div", {
-    className: classNames(_defineProperty({
+    className: classNames({
       'pro-layout': true,
       'pro-layout-dark': theme === 'dark',
-      'pro-layout-light': theme === 'light'
-    }, "".concat(className), className)),
-    children: [/*#__PURE__*/_jsx(Header, _objectSpread({}, props)), /*#__PURE__*/_jsx(Notice, _objectSpread(_objectSpread({}, props), {}, {
-      notice: notice,
-      onCancel: onCancelNotice
-    })), /*#__PURE__*/_jsxs("div", {
+      'pro-layout-light': theme === 'light',
+      [`${className}`]: className
+    }),
+    children: [/*#__PURE__*/_jsx(Header, _objectSpread({}, headerProps)), /*#__PURE__*/_jsx(Notice, _objectSpread({}, noticeProps)), /*#__PURE__*/_jsxs("div", {
       className: contentCls,
-      children: [/*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({}, props), {}, {
-        dataSource: Array.isArray(menus) ? {
-          menus: menus
-        } : menus,
-        notice: notice,
-        collapsed: collapsed,
-        onToggle: function onToggle() {
-          toggle();
-          onCollapsedChange && onCollapsedChange(!collapsed);
-        }
-      })), /*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx(Menu, _objectSpread({}, menuProps)), /*#__PURE__*/_jsx("div", {
         className: "pro-layout-content",
         style: _objectSpread(_objectSpread({}, contentStyle), {}, {
           marginTop: headerHeight + noticeHeight
@@ -115,8 +155,8 @@ var ProLayout = function ProLayout(props) {
   });
   return /*#__PURE__*/_jsx(LayoutContext.Provider, {
     value: {
-      selectedPath: selectedPath,
-      target: target,
+      selectedPath,
+      target,
       onSelected: setState
     },
     children: !((_Object$keys = Object.keys(waterMarkProps)) !== null && _Object$keys !== void 0 && _Object$keys.length) ? layoutDom : /*#__PURE__*/_jsx(ProWaterMark, _objectSpread(_objectSpread({}, waterMarkProps), {}, {
@@ -124,17 +164,6 @@ var ProLayout = function ProLayout(props) {
     }))
   });
 };
-ProLayout.defaultProps = {
-  menus: [],
-  iconfontUrl: '',
-  title: '',
-  collapsed: false,
-  routerMatch: 'id',
-  pure: false,
-  theme: 'dark',
-  headerHeight: 48,
-  contentStyle: {}
-};
 
 // 下一版本会移除
 ProLayout.ProCollapse = ProCollapse;

package/es/ProLayout/propTypes.d.ts

@@ -180,6 +180,15 @@ export interface ProLayoutType {
      * @default -
      */
     onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * @description 菜单点击回调事件，返回命中的菜单项数据和完整路径
+     * @default -
+     */
+    onMenuClick?: (params: {
+        item: MenusType | null;
+        key: string;
+        keyPath: string[];
+    }) => void;
     /**
      * @description 规定在何处打开被链接文档
      * @default "_self"

package/es/ProLayout/style/index.less

@@ -1,5 +1,3 @@
-/* @root-entry-name: 'default'; */
-/* @import (reference) '~antd/es/style/themes/index.less'; */
 
 @import '../components/Layout/index.less';
 @import '../components/ProCollapse/style/index.less';

package/es/ProLayout/utils/index.d.ts

@@ -34,3 +34,10 @@ export declare const getPathNameKey: ({ menus, pathName, }: {
     menus: any[];
     pathName: string;
 }) => any;
+/**
+ * 根据key查找完整的菜单项数据
+ * @param menus 菜单数据数组
+ * @param key 要查找的菜单项key
+ * @returns 找到的菜单项数据或null
+ */
+export declare const findMenuItemByKey: (menus: any[], key: string) => any;

package/es/ProLayout/utils/index.js

@@ -1,5 +1,5 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 /* eslint-disable prefer-destructuring */
 /* eslint-disable no-mixed-operators */
 import { isPlainObject } from 'lodash';
@@ -9,13 +9,13 @@ import { isPlainObject } from 'lodash';
  * @param activeMenu  上一次激活url地址
  * @return result
  */
-export var getIdsByPathName = function getIdsByPathName(menus, activeMenu) {
+export var getIdsByPathName = (menus, activeMenu) => {
   var _pathName = window.location.pathname;
   if (activeMenu) {
     _pathName = activeMenu;
   }
   var result;
-  var menuDeep = function menuDeep(menuDeepItem) {
+  var menuDeep = menuDeepItem => {
     for (var i = 0; i <= menuDeepItem.length - 1; i++) {
       var item = menuDeepItem[i];
       // 只包含一级菜单时，解决URL：/endorsement/demo/123无法选中问题
@@ -41,29 +41,29 @@ export var getIdsByPathName = function getIdsByPathName(menus, activeMenu) {
  * @param menuData 菜单数据源
  * @returns []
  */
-export var transformMenu = function transformMenu(menuData, pathPrefix) {
-  var data = _toConsumableArray(menuData);
-  var menuDeep = function menuDeep(menuDeepItem) {
+export var transformMenu = (menuData, pathPrefix) => {
+  var data = [...menuData];
+  var menuDeep = menuDeepItem => {
     if (!Array.isArray(menuDeepItem) || !menuDeepItem.length) {
       return [];
     }
-    menuDeepItem.forEach(function (item, index) {
+    menuDeepItem.forEach((item, index) => {
       var _item$keyUrlPath, _item$keyIdPath, _item$children;
       item.code = item.code || item.id;
-      item.url = "".concat(pathPrefix).concat(item.url);
-      item.redirectUrl = item !== null && item !== void 0 && item.redirectUrl ? "".concat(pathPrefix).concat(item.redirectUrl) : '';
+      item.url = `${pathPrefix}${item.url}`;
+      item.redirectUrl = item !== null && item !== void 0 && item.redirectUrl ? `${pathPrefix}${item.redirectUrl}` : '';
       // 拼接父级url与id数据
       if (item !== null && item !== void 0 && (_item$keyUrlPath = item.keyUrlPath) !== null && _item$keyUrlPath !== void 0 && _item$keyUrlPath.length) {
         item.keyUrlPath.push(item.redirectUrl || item.url);
         // 去重解决重复问题
-        item.keyUrlPath = _toConsumableArray(new Set(item.keyUrlPath));
+        item.keyUrlPath = [...new Set(item.keyUrlPath)];
       } else {
         item.keyUrlPath = [item.redirectUrl || item.url];
       }
       if (item !== null && item !== void 0 && (_item$keyIdPath = item.keyIdPath) !== null && _item$keyIdPath !== void 0 && _item$keyIdPath.length) {
         item.keyIdPath.push(item.id);
         // 去重解决重复问题
-        item.keyIdPath = _toConsumableArray(new Set(item.keyIdPath));
+        item.keyIdPath = [...new Set(item.keyIdPath)];
       } else {
         item.keyIdPath = [item.id];
       }
@@ -72,9 +72,9 @@ export var transformMenu = function transformMenu(menuData, pathPrefix) {
       }
       if (Array.isArray(item === null || item === void 0 ? void 0 : item.children) && item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
         // 给children注入keyUrlPath，keyIdPath
-        item.children.forEach(function (childrenItem) {
-          childrenItem.keyUrlPath = _toConsumableArray(item.keyUrlPath);
-          childrenItem.keyIdPath = _toConsumableArray(item.keyIdPath);
+        item.children.forEach(childrenItem => {
+          childrenItem.keyUrlPath = [...item.keyUrlPath];
+          childrenItem.keyIdPath = [...item.keyIdPath];
         });
         menuDeep(item.children);
       }
@@ -89,7 +89,7 @@ export var transformMenu = function transformMenu(menuData, pathPrefix) {
  * @param data 菜单数据源
  * @returns []
  */
-export var transformMenus = function transformMenus(data, pathPrefix) {
+export var transformMenus = (data, pathPrefix) => {
   if (isPlainObject(data)) {
     // @ts-ignore
     if (!Array.isArray(data === null || data === void 0 ? void 0 : data.menus)) {
@@ -134,11 +134,11 @@ export function getUrlParams(name) {
  * @param pathName  url地址
  * @param routerMatch  匹配模式id & url
  */
-export var getPathNameKey = function getPathNameKey(_ref) {
+export var getPathNameKey = _ref => {
   var menus = _ref.menus,
     pathName = _ref.pathName;
   var result;
-  var menuDeep = function menuDeep(menuDeepItem) {
+  var menuDeep = menuDeepItem => {
     if (!Array.isArray(menuDeepItem) || !menuDeepItem.length) {
       return [];
     }
@@ -162,4 +162,33 @@ export var getPathNameKey = function getPathNameKey(_ref) {
   };
   menuDeep(menus);
   return result;
+};
+
+/**
+ * 根据key查找完整的菜单项数据
+ * @param menus 菜单数据数组
+ * @param key 要查找的菜单项key
+ * @returns 找到的菜单项数据或null
+ */
+export var findMenuItemByKey = (menus, key) => {
+  // eslint-disable-next-line no-restricted-syntax
+  var _iterator = _createForOfIteratorHelper(menus),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var item = _step.value;
+      if (String(item.id) === key) {
+        return item;
+      }
+      if (Array.isArray(item.children) && item.children.length) {
+        var found = findMenuItemByKey(item.children, key);
+        if (found) return found;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return null;
 };

package/es/ProSelect/components/AdaptiveTooltip.js

@@ -1,16 +1,17 @@
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Tooltip } from 'antd';
 import { useEffect, useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var AdaptiveTooltip = function AdaptiveTooltip(_ref) {
+var AdaptiveTooltip = _ref => {
   var children = _ref.children;
   var _useState = useState('right'),
     _useState2 = _slicedToArray(_useState, 2),
     placement = _useState2[0],
     setPlacement = _useState2[1];
-  useEffect(function () {
-    var handleResize = function handleResize() {
+  useEffect(() => {
+    var handleResize = () => {
       var tooltipElement = document.getElementById('adaptive-tooltip');
       if (tooltipElement) {
         var boundingRect = tooltipElement.getBoundingClientRect();
@@ -24,16 +25,14 @@ var AdaptiveTooltip = function AdaptiveTooltip(_ref) {
     };
     window.addEventListener('resize', handleResize);
     handleResize();
-    return function () {
+    return () => {
       window.removeEventListener('resize', handleResize);
     };
   }, [children]);
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(_Tooltip, {
     placement: placement,
     title: /*#__PURE__*/_jsx("div", {
-      onMouseDown: function onMouseDown(e) {
-        return e.stopPropagation();
-      },
+      onMouseDown: e => e.stopPropagation(),
       children: children
     }),
     id: "adaptive-tooltip",