@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/lib/layout/components/Header/style/header.js

@@ -1,64 +1,65 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../../provider");
-var genProLayoutHeaderStyle = function genProLayoutHeaderStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4;
-  return (0, _defineProperty2.default)({}, "".concat(token.proComponentsCls, "-layout"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-layout-header").concat(token.componentCls), {
-    height: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader) || 56,
-    lineHeight: "".concat(((_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.heightLayoutHeader) || 56, "px"),
-    // hitu 用了这个属性，不能删除哦 @南取
-    zIndex: 19,
-    width: '100%',
-    paddingBlock: 0,
-    paddingInline: 0,
-    borderBlockEnd: "1px solid ".concat(token.colorSplit),
-    backgroundColor: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorBgHeader) || 'rgba(255, 255, 255, 0.4)',
-    WebkitBackdropFilter: 'blur(8px)',
-    backdropFilter: 'blur(8px)',
-    transition: 'background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
-    '&-fixed-header': {
-      position: 'fixed',
-      insetBlockStart: 0,
-      width: '100%',
-      zIndex: 100,
-      insetInlineEnd: 0
-    },
-    '&-fixed-header-scroll': {
-      backgroundColor: ((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.header) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorBgScrollHeader) || 'rgba(255, 255, 255, 0.8)'
-    },
-    '&-header-actions': {
-      display: 'flex',
-      alignItems: 'center',
-      fontSize: '16',
-      cursor: 'pointer',
-      '& &-item': {
+const genProLayoutHeaderStyle = token => {
+  return {
+    [`${token.proComponentsCls}-layout`]: {
+      [`${token.antCls}-layout-header${token.componentCls}`]: {
+        height: token.layout?.header?.heightLayoutHeader || 56,
+        lineHeight: `${token.layout?.header?.heightLayoutHeader || 56}px`,
+        // hitu 用了这个属性，不能删除哦 @南取
+        zIndex: 19,
+        width: '100%',
         paddingBlock: 0,
-        paddingInline: 8,
-        '&:hover': {
-          color: token.colorText
+        paddingInline: 0,
+        borderBlockEnd: `1px solid ${token.colorSplit}`,
+        backgroundColor: token.layout?.header?.colorBgHeader || 'rgba(255, 255, 255, 0.4)',
+        WebkitBackdropFilter: 'blur(8px)',
+        backdropFilter: 'blur(8px)',
+        transition: 'background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+        '&-fixed-header': {
+          position: 'fixed',
+          insetBlockStart: 0,
+          width: '100%',
+          zIndex: 100,
+          insetInlineEnd: 0
+        },
+        '&-fixed-header-scroll': {
+          backgroundColor: token.layout?.header?.colorBgScrollHeader || 'rgba(255, 255, 255, 0.8)'
+        },
+        '&-header-actions': {
+          display: 'flex',
+          alignItems: 'center',
+          fontSize: '16',
+          cursor: 'pointer',
+          '& &-item': {
+            paddingBlock: 0,
+            paddingInline: 8,
+            '&:hover': {
+              color: token.colorText
+            }
+          }
+        },
+        '&-header-realDark': {
+          boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 65%)'
+        },
+        '&-header-actions-header-action': {
+          transition: 'width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
         }
       }
-    },
-    '&-header-realDark': {
-      boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 65%)'
-    },
-    '&-header-actions-header-action': {
-      transition: 'width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
     }
-  }));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProLayoutHeader', function (token) {
-    var ProLayoutHeaderToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProLayoutHeader', token => {
+    const ProLayoutHeaderToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProLayoutHeaderStyle(ProLayoutHeaderToken)];
   });
 }

package/lib/layout/components/Header/style/stylish.d.ts

@@ -8,6 +8,6 @@ export declare function useStylish(prefixCls: string, { stylish, proLayoutCollap
     stylish?: GenerateStyle<stylishToken>;
     proLayoutCollapsedWidth: number;
 }): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/lib/layout/components/Header/style/stylish.js

@@ -1,22 +1,25 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStylish = useStylish;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _provider = require("../../../../provider");
-function useStylish(prefixCls, _ref) {
-  var stylish = _ref.stylish,
-    proLayoutCollapsedWidth = _ref.proLayoutCollapsedWidth;
-  return (0, _provider.useStyle)('ProLayoutHeaderStylish', function (token) {
-    var stylishToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
-      proLayoutCollapsedWidth: proLayoutCollapsedWidth
-    });
+function useStylish(prefixCls, {
+  stylish,
+  proLayoutCollapsedWidth
+}) {
+  return (0, _provider.useStyle)('ProLayoutHeaderStylish', token => {
+    const stylishToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      proLayoutCollapsedWidth
+    };
     if (!stylish) return [];
-    return [(0, _defineProperty2.default)({}, "div".concat(token.proComponentsCls, "-layout"), (0, _defineProperty2.default)({}, "".concat(stylishToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(stylishToken)))];
+    return [{
+      [`div${token.proComponentsCls}-layout`]: {
+        [`${stylishToken.componentCls}`]: stylish?.(stylishToken)
+      }
+    }];
   });
 }

package/lib/layout/components/Help/AsyncContentPanel.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AsyncContentPanel = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _antd = require("antd");
 var _react = require("react");
 var _HelpProvide = require("./HelpProvide");
@@ -15,24 +13,20 @@ var _jsxRuntime = require("react/jsx-runtime");
  * 异步加载内容的面板组件
  * @param item 指向当前面板的 ProHelpDataSource
  */
-var AsyncContentPanel = exports.AsyncContentPanel = function AsyncContentPanel(_ref) {
-  var item = _ref.item,
-    _onInit = _ref.onInit;
-  var _useContext = (0, _react.useContext)(_HelpProvide.ProHelpProvide),
-    onLoadContext = _useContext.onLoadContext; // 获取上下文中的 onLoadContext
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1]; // 加载状态
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    content = _useState4[0],
-    setContent = _useState4[1]; // 内容数据
+const AsyncContentPanel = ({
+  item,
+  onInit
+}) => {
+  const {
+    onLoadContext
+  } = (0, _react.useContext)(_HelpProvide.ProHelpProvide); // 获取上下文中的 onLoadContext
+  const [loading, setLoading] = (0, _react.useState)(false); // 加载状态
+  const [content, setContent] = (0, _react.useState)(); // 内容数据
 
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!item.key) return; // 如果没有key则返回
     setLoading(true); // 开始加载
-    onLoadContext === null || onLoadContext === void 0 || onLoadContext(item.key, item).then(function (res) {
+    onLoadContext?.(item.key, item).then(res => {
       // 调用加载方法
       setLoading(false); // 加载完成
       setContent(res); // 设置内容数据
@@ -58,9 +52,10 @@ var AsyncContentPanel = exports.AsyncContentPanel = function AsyncContentPanel(_
 
   // 加载完成后，渲染内容面板
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderContentPanel.RenderContentPanel, {
-    onInit: function onInit(ref) {
-      _onInit === null || _onInit === void 0 || _onInit(ref);
+    onInit: ref => {
+      onInit?.(ref);
     },
     dataSourceChildren: content
   });
-};
+};
+exports.AsyncContentPanel = AsyncContentPanel;

package/lib/layout/components/Help/HelpProvide.js

@@ -55,7 +55,7 @@ var _react = _interopRequireDefault(require("react"));
  * 该上下文对象通常用于在 React 组件树中共享数据，即可以通过在组件中使用 ProHelpProvide.Provider 包裹一组组件，
  * 将 dataSource 和 valueTypeMap 数据源传递给这些组件，这些组件即可从上下文中获取 dataSource 数据源，实现数据的共享和传递。
  */
-var ProHelpProvide = exports.ProHelpProvide = /*#__PURE__*/_react.default.createContext({
+const ProHelpProvide = exports.ProHelpProvide = /*#__PURE__*/_react.default.createContext({
   dataSource: [],
   valueTypeMap: new Map()
 });

package/lib/layout/components/Help/ProHelpContentPanel.js

@@ -1,16 +1,11 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ProHelpContentPanel = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _utils = require("../../../utils");
@@ -24,24 +19,27 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @param ProHelpContentPanelProps
  * @returns
  */
-var ProHelpContentPanel = exports.ProHelpContentPanel = function ProHelpContentPanel(_ref) {
-  var className = _ref.className,
-    parentItem = _ref.parentItem,
-    selectedKey = _ref.selectedKey,
-    onScroll = _ref.onScroll;
-  var _useContext = (0, _react.useContext)(_HelpProvide.ProHelpProvide),
-    dataSource = _useContext.dataSource;
-  var _useContext2 = (0, _react.useContext)(_provider.ProProvider),
-    hashId = _useContext2.hashId;
+const ProHelpContentPanel = ({
+  className,
+  parentItem,
+  selectedKey,
+  onScroll
+}) => {
+  const {
+    dataSource
+  } = (0, _react.useContext)(_HelpProvide.ProHelpProvide);
+  const {
+    hashId
+  } = (0, _react.useContext)(_provider.ProProvider);
   // 记录每个面板的滚动高度
-  var scrollHeightMap = (0, _react.useRef)(new Map());
-  var divRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    if (!selectedKey || !(parentItem !== null && parentItem !== void 0 && parentItem.infiniteScrollFull)) return;
-    var div = scrollHeightMap.current.get(selectedKey);
-    if (div !== null && div !== void 0 && div.offsetTop && divRef.current) {
-      if (Math.abs(divRef.current.scrollTop - (div === null || div === void 0 ? void 0 : div.offsetTop) + 40) > (div === null || div === void 0 ? void 0 : div.clientHeight)) {
-        divRef.current.scrollTop = (div === null || div === void 0 ? void 0 : div.offsetTop) - 40;
+  const scrollHeightMap = (0, _react.useRef)(new Map());
+  const divRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!selectedKey || !parentItem?.infiniteScrollFull) return;
+    const div = scrollHeightMap.current.get(selectedKey);
+    if (div?.offsetTop && divRef.current) {
+      if (Math.abs(divRef.current.scrollTop - div?.offsetTop + 40) > div?.clientHeight) {
+        divRef.current.scrollTop = div?.offsetTop - 40;
       }
     }
   }, [selectedKey]);
@@ -49,42 +47,26 @@ var ProHelpContentPanel = exports.ProHelpContentPanel = function ProHelpContentP
   /**
    * debounce（防抖）处理滚动事件，并根据滚动位置来实现找到当前列表的 key
    */
-  var onScrollEvent = (0, _utils.useDebounceFn)( /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
-      var dom, list;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            dom = e === null || e === void 0 ? void 0 : e.target; // 根据滚动位置来找到当前列表的 key
-            list = Array.from(scrollHeightMap.current.entries()).find(function (_ref3) {
-              var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-                value = _ref4[1];
-              if ((dom === null || dom === void 0 ? void 0 : dom.scrollTop) < value.offsetTop) {
-                return true;
-              }
-              return false;
-            });
-            if (list) {
-              _context.next = 4;
-              break;
-            }
-            return _context.abrupt("return");
-          case 4:
-            // 如果获取的 key 和当前 key 不同丢弃掉
-            if (list.at(0) !== selectedKey) {
-              // 如果不同，则触发 onScroll 事件
-              onScroll === null || onScroll === void 0 || onScroll(list.at(0));
-            }
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), 200);
+  const onScrollEvent = (0, _utils.useDebounceFn)(async e => {
+    const dom = e?.target;
+
+    // 根据滚动位置来找到当前列表的 key
+    const list = Array.from(scrollHeightMap.current.entries()).find(([, value]) => {
+      if (dom?.scrollTop < value.offsetTop) {
+        return true;
+      }
+      return false;
+    });
+    if (!list) {
+      return;
+    }
+
+    // 如果获取的 key 和当前 key 不同丢弃掉
+    if (list.at(0) !== selectedKey) {
+      // 如果不同，则触发 onScroll 事件
+      onScroll?.(list.at(0));
+    }
+  }, 200);
 
   /**
    * 当 parentItem 组件中的 infiniteScrollFull 属性变化时
@@ -92,67 +74,65 @@ var ProHelpContentPanel = exports.ProHelpContentPanel = function ProHelpContentP
    * 如果为假值，则停止监听滚动事件并取消防抖处理。
    * 在监听滚动事件时，可以实现分页（瀑布流）效果。同时，该代码还会根据 selectedKey 的变化来触发跳转
    */
-  (0, _react.useEffect)(function () {
-    var _divRef$current;
-    if (!(parentItem !== null && parentItem !== void 0 && parentItem.infiniteScrollFull)) return;
+  (0, _react.useEffect)(() => {
+    if (!parentItem?.infiniteScrollFull) return;
     onScrollEvent.cancel();
-    (_divRef$current = divRef.current) === null || _divRef$current === void 0 || _divRef$current.addEventListener('scroll', onScrollEvent.run, false);
-    return function () {
-      var _divRef$current2;
+    divRef.current?.addEventListener('scroll', onScrollEvent.run, false);
+    return () => {
       onScrollEvent.cancel();
-      (_divRef$current2 = divRef.current) === null || _divRef$current2 === void 0 || _divRef$current2.removeEventListener('scroll', onScrollEvent.run, false);
+      divRef.current?.removeEventListener('scroll', onScrollEvent.run, false);
     };
-  }, [parentItem === null || parentItem === void 0 ? void 0 : parentItem.infiniteScrollFull, selectedKey]);
+  }, [parentItem?.infiniteScrollFull, selectedKey]);
 
   /**
    * 生成一个  Map  能根据 key 找到所有的 index
    */
-  var dataSourceMap = (0, _react.useMemo)(function () {
-    var map = new Map();
-    dataSource.forEach(function (page) {
-      page.children.forEach(function (item) {
-        map.set(item.key || item.title, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+  const dataSourceMap = (0, _react.useMemo)(() => {
+    const map = new Map();
+    dataSource.forEach(page => {
+      page.children.forEach(item => {
+        map.set(item.key || item.title, {
+          ...item,
           parentKey: page.key
-        }));
+        });
       });
     });
     return map;
   }, [dataSource]);
-  var renderItem = function renderItem(item) {
-    if (item !== null && item !== void 0 && item.asyncLoad) {
+  const renderItem = item => {
+    if (item?.asyncLoad) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames.default)(className, hashId),
+        className: (0, _clsx.clsx)(className, hashId),
         id: item.title,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsyncContentPanel.AsyncContentPanel, {
           item: item,
-          onInit: function onInit(ref) {
+          onInit: ref => {
             if (!scrollHeightMap.current) return;
             scrollHeightMap.current.set(item.key, ref);
           }
-        }, item === null || item === void 0 ? void 0 : item.key)
+        }, item?.key)
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)(className, hashId),
+      className: (0, _clsx.clsx)(className, hashId),
       id: item.title,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderContentPanel.RenderContentPanel, {
-        onInit: function onInit(ref) {
+        onInit: ref => {
           if (!scrollHeightMap.current) return;
           scrollHeightMap.current.set(item.key, ref);
         },
-        dataSourceChildren: (item === null || item === void 0 ? void 0 : item.children) || []
+        dataSourceChildren: item?.children || []
       })
     });
   };
   if (parentItem && parentItem.infiniteScrollFull) {
-    var _parentItem$children;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: divRef,
-      className: (0, _classnames.default)("".concat(className, "-infinite-scroll"), hashId),
+      className: (0, _clsx.clsx)(`${className}-infinite-scroll`, hashId),
       style: {
         overflow: 'auto'
       },
-      children: (_parentItem$children = parentItem.children) === null || _parentItem$children === void 0 ? void 0 : _parentItem$children.map(function (item) {
+      children: parentItem.children?.map(item => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
           children: renderItem(item)
         }, item.key);
@@ -160,4 +140,5 @@ var ProHelpContentPanel = exports.ProHelpContentPanel = function ProHelpContentP
     });
   }
   return renderItem(dataSourceMap.get(selectedKey));
-};
+};
+exports.ProHelpContentPanel = ProHelpContentPanel;

package/lib/layout/components/Help/ProHelpDrawer.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { DrawerProps } from 'antd';
+import React from 'react';
 import type { ProHelpPanelProps } from './ProHelpPanel';
 export type ProHelpDrawerProps = {
     /**

package/lib/layout/components/Help/ProHelpDrawer.js

@@ -1,35 +1,33 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ProHelpDrawer = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _util = require("@rc-component/util");
 var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
 var _ProHelpPanel = require("./ProHelpPanel");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["drawerProps"];
 /**
  * 渲染一个抽屉，其中显示了一个 ProHelpPanel。
  * @param drawerProps 要传递给 Drawer 组件的属性。
  * @param props 要传递给 ProHelpPanel 组件的属性。
  */
-var ProHelpDrawer = exports.ProHelpDrawer = function ProHelpDrawer(_ref) {
-  var drawerProps = _ref.drawerProps,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useMergedState = (0, _util.useMergedState)(false, {
-      value: drawerProps.open,
-      onChange: drawerProps.afterOpenChange
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    drawerOpen = _useMergedState2[0],
-    setDrawerOpen = _useMergedState2[1];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Drawer, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    width: 720,
+const ProHelpDrawer = ({
+  drawerProps,
+  ...props
+}) => {
+  const [drawerOpen, setDrawerOpenInner] = (0, _util.useControlledState)(false, drawerProps.open);
+  const setDrawerOpen = (0, _react.useCallback)(updater => {
+    setDrawerOpenInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      drawerProps.afterOpenChange?.(next);
+      return next;
+    });
+  }, [drawerProps.afterOpenChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Drawer, {
     closeIcon: null,
     styles: {
       header: {
@@ -39,20 +37,19 @@ var ProHelpDrawer = exports.ProHelpDrawer = function ProHelpDrawer(_ref) {
         padding: 0
       }
     },
-    maskClosable: true
-  }, drawerProps), {}, {
+    maskClosable: true,
+    ...drawerProps,
+    size: drawerProps.size ?? 720,
     open: drawerOpen,
-    onClose: function onClose() {
-      return setDrawerOpen(false);
-    },
-    afterOpenChange: function afterOpenChange(open) {
+    onClose: () => setDrawerOpen(false),
+    afterOpenChange: open => {
       setDrawerOpen(open);
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProHelpPanel.ProHelpPanel, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-      onClose: function onClose() {
-        return setDrawerOpen(false);
-      },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProHelpPanel.ProHelpPanel, {
+      ...props,
+      onClose: () => setDrawerOpen(false),
       variant: "borderless"
-    }))
-  }));
-};
+    })
+  });
+};
+exports.ProHelpDrawer = ProHelpDrawer;

package/lib/layout/components/Help/ProHelpModal.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { ModalProps } from 'antd';
+import React from 'react';
 import type { ProHelpPanelProps } from './ProHelpPanel';
 export type ProHelpModalProps = {
     /**

package/lib/layout/components/Help/ProHelpModal.js

@@ -1,35 +1,34 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ProHelpModal = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _util = require("@rc-component/util");
 var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
 var _ProHelpPanel = require("./ProHelpPanel");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["modalProps"];
 /**
  * 渲染一个模态对话框，其中显示了一个 ProHelpPanel。
  * @param modalProps 要传递给 Modal 组件的属性。
  * @param props 要传递给 ProHelpPanel 组件的属性。
  */
-var ProHelpModal = exports.ProHelpModal = function ProHelpModal(_ref) {
-  var modalProps = _ref.modalProps,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useMergedState = (0, _util.useMergedState)(false, {
-      value: modalProps === null || modalProps === void 0 ? void 0 : modalProps.open,
-      onChange: modalProps === null || modalProps === void 0 ? void 0 : modalProps.afterClose
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    modalOpen = _useMergedState2[0],
-    setModalOpen = _useMergedState2[1];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    onCancel: function onCancel() {
+const ProHelpModal = ({
+  modalProps,
+  ...props
+}) => {
+  const [modalOpen, setModalOpenInner] = (0, _util.useControlledState)(false, modalProps?.open);
+  const setModalOpen = (0, _react.useCallback)(updater => {
+    setModalOpenInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      modalProps?.afterClose?.();
+      return next;
+    });
+  }, [modalProps?.afterClose]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Modal, {
+    onCancel: () => {
       setModalOpen(false);
     },
     styles: {
@@ -42,14 +41,13 @@ var ProHelpModal = exports.ProHelpModal = function ProHelpModal(_ref) {
     footer: null,
     width: 720,
     open: modalOpen,
-    maskClosable: true
-  }, modalProps), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProHelpPanel.ProHelpPanel, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      height: 648
-    }, props), {}, {
-      onClose: function onClose() {
-        return setModalOpen(false);
-      }
-    }))
-  }));
-};
+    maskClosable: true,
+    ...modalProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProHelpPanel.ProHelpPanel, {
+      height: 648,
+      ...props,
+      onClose: () => setModalOpen(false)
+    })
+  });
+};
+exports.ProHelpModal = ProHelpModal;