@ant-design/pro-components 3.1.0-0 → 3.1.1-1

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

@@ -1,14 +1,10 @@
 "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.SelectKeyProvide = exports.ProHelpPanel = 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 _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _antd = require("antd");
@@ -19,10 +15,9 @@ var _ProHelpContentPanel = require("./ProHelpContentPanel");
 var _Search = require("./Search");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["title", "variant", "onClose", "footer", "height", "extraRender"];
-var SelectKeyProvide = exports.SelectKeyProvide = /*#__PURE__*/_react.default.createContext({
+const SelectKeyProvide = exports.SelectKeyProvide = /*#__PURE__*/_react.default.createContext({
   selectedKey: undefined,
-  setSelectedKey: function setSelectedKey() {}
+  setSelectedKey: () => {}
 });
 /**
  * ProHelpPanel 组件是一个帮助中心面板组件，具有可折叠的左侧菜单和右侧帮助内容区域。
@@ -31,95 +26,92 @@ var SelectKeyProvide = exports.SelectKeyProvide = /*#__PURE__*/_react.default.cr
  * @param param0
  * @returns
  */
-var ProHelpPanel = exports.ProHelpPanel = function ProHelpPanel(_ref) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5;
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? '帮助中心' : _ref$title,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
-    onClose = _ref.onClose,
-    footer = _ref.footer,
-    height = _ref.height,
-    extraRender = _ref.extraRender,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var className = getPrefixCls('pro-help');
-  var _useStyle = (0, _style.useStyle)(className),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var _useContext2 = (0, _react.useContext)(_HelpProvide.ProHelpProvide),
-    dataSource = _useContext2.dataSource;
-  var _useMergedState = (0, _util.useMergedState)(undefined, {
-      defaultValue: props.defaultSelectedKey,
-      value: props.selectedKey,
-      onChange: props.onSelectedKeyChange
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    selectedKey = _useMergedState2[0],
-    setSelectedKey = _useMergedState2[1];
-  var _useState = (0, _react.useState)(''),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    openKey = _useState2[0],
-    setOpenKey = _useState2[1];
-  var _useContext3 = (0, _react.useContext)(_provider.ProProvider),
-    token = _useContext3.token;
-  var _useMergedState3 = (0, _util.useMergedState)(true, {
-      value: props.showLeftPanel,
-      onChange: props.onShowLeftPanelChange
-    }),
-    _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
-    showLeftPanel = _useMergedState4[0],
-    setShowLeftPanel = _useMergedState4[1];
-  var dataSourceKeyMap = (0, _react.useMemo)(function () {
-    var map = new Map();
-    dataSource.forEach(function (page) {
-      var _page$children;
+const ProHelpPanel = ({
+  title = '帮助中心',
+  variant = 'outlined',
+  onClose,
+  footer,
+  height,
+  extraRender,
+  ...props
+}) => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const className = getPrefixCls('pro-help');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(className);
+  const {
+    dataSource
+  } = (0, _react.useContext)(_HelpProvide.ProHelpProvide);
+  const [selectedKey, setSelectedKeyInner] = (0, _util.useControlledState)(props.defaultSelectedKey ?? undefined, props.selectedKey);
+  const setSelectedKey = (0, _react.useCallback)(updater => {
+    setSelectedKeyInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onSelectedKeyChange?.(next);
+      return next;
+    });
+  }, [props.onSelectedKeyChange]);
+  const [openKey, setOpenKey] = (0, _react.useState)('');
+  const {
+    token
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const [showLeftPanel, setShowLeftPanelInner] = (0, _util.useControlledState)(true, props.showLeftPanel);
+  const setShowLeftPanel = (0, _react.useCallback)(updater => {
+    setShowLeftPanelInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onShowLeftPanelChange?.(next);
+      return next;
+    });
+  }, [props.onShowLeftPanelChange]);
+  const dataSourceKeyMap = (0, _react.useMemo)(() => {
+    const map = new Map();
+    dataSource.forEach(page => {
       map.set(page.key, page);
-      (_page$children = page.children) === null || _page$children === void 0 || _page$children.forEach(function (item) {
-        map.set(item.key || item.title, (0, _objectSpread2.default)({
-          parentKey: page.key
-        }, item));
+      page.children?.forEach(item => {
+        map.set(item.key || item.title, {
+          parentKey: page.key,
+          ...item
+        });
       });
     });
     return map;
   }, [dataSource]);
-  var parentKey = (0, _react.useMemo)(function () {
-    var _dataSourceKeyMap$get;
-    return (_dataSourceKeyMap$get = dataSourceKeyMap.get(selectedKey)) === null || _dataSourceKeyMap$get === void 0 ? void 0 : _dataSourceKeyMap$get.parentKey;
-  }, [dataSourceKeyMap, selectedKey]);
-  var defaultExtraActions = {
+  const parentKey = (0, _react.useMemo)(() => dataSourceKeyMap.get(selectedKey)?.parentKey, [dataSourceKeyMap, selectedKey]);
+  const defaultExtraActions = {
     collapsePanelAction: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(className, "-actions-item ").concat(hashId).trim(),
+      className: `${className}-actions-item ${hashId}`.trim(),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ProfileOutlined, {
         title: "collapse panel",
-        onClick: function onClick() {
+        onClick: () => {
           setShowLeftPanel(!showLeftPanel);
         }
       })
     }),
     helpSelectAction: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.ProHelpSelect, {
-      iconClassName: "".concat(className, "-actions-item"),
-      className: "".concat(hashId, " ").concat(className, "-actions-input"),
+      iconClassName: `${className}-actions-item`,
+      className: `${hashId} ${className}-actions-input`,
       value: selectedKey,
-      onChange: function onChange(value, item) {
+      onChange: (value, item) => {
         setSelectedKey(value);
-        setOpenKey(item === null || item === void 0 ? void 0 : item.dataItemKey);
+        setOpenKey(item?.dataItemKey);
       }
     }),
     closeAction: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(className, "-actions-item ").concat(hashId).trim(),
+      className: `${className}-actions-item ${hashId}`.trim(),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {
         title: "close panel",
-        onClick: function onClick() {
-          onClose === null || onClose === void 0 || onClose();
+        onClick: () => {
+          onClose?.();
         }
       })
     })
   };
-  var extraDomList = function extraDomList() {
+  const extraDomList = () => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(className, "-actions ").concat(hashId).trim(),
+      className: `${className}-actions ${hashId}`.trim(),
       children: extraRender ? extraRender(defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, defaultExtraActions.closeAction) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, onClose ? defaultExtraActions.closeAction : null]
       })
@@ -145,9 +137,9 @@ var ProHelpPanel = exports.ProHelpPanel = function ProHelpPanel(_ref) {
       size: "small",
       extra: extraDomList(),
       children: [showLeftPanel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "".concat(hashId, " ").concat(className, "-left-panel "),
+        className: `${hashId} ${className}-left-panel `,
         style: {
-          height: height
+          height
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
           theme: {
@@ -162,35 +154,36 @@ var ProHelpPanel = exports.ProHelpPanel = function ProHelpPanel(_ref) {
                 itemBorderRadius: token.borderRadius,
                 activeBarWidth: 0,
                 activeBarBorderWidth: 0,
-                itemSelectedBg: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorBgMenuItemSelected) || 'rgba(0, 0, 0, 0.04)',
-                itemActiveBg: ((_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorBgMenuItemHover) || 'rgba(0, 0, 0, 0.04)',
-                itemColor: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorTextMenu) || 'rgba(0, 0, 0, 0.65)',
-                itemHoverColor: ((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.sider) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextMenuActive) || 'rgba(0, 0, 0, 0.85)',
-                itemSelectedColor: ((_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.sider) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorTextMenuSelected) || 'rgba(0, 0, 0, 1)',
+                itemSelectedBg: token.layout?.sider?.colorBgMenuItemSelected || 'rgba(0, 0, 0, 0.04)',
+                itemActiveBg: token.layout?.sider?.colorBgMenuItemHover || 'rgba(0, 0, 0, 0.04)',
+                itemColor: token.layout?.sider?.colorTextMenu || 'rgba(0, 0, 0, 0.65)',
+                itemHoverColor: token.layout?.sider?.colorTextMenuActive || 'rgba(0, 0, 0, 0.85)',
+                itemSelectedColor: token.layout?.sider?.colorTextMenuSelected || 'rgba(0, 0, 0, 1)',
                 itemBg: 'transparent',
                 subMenuItemBg: 'transparent',
-                popupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated,
-                darkPopupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated
+                popupBg: token?.colorBgElevated,
+                darkPopupBg: token?.colorBgElevated
               }
             }
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Menu, {
-            className: "".concat(hashId, " ").concat(className, "-left-panel-menu"),
+            className: `${hashId} ${className}-left-panel-menu`,
             openKeys: [parentKey, openKey],
-            onOpenChange: function onOpenChange(keys) {
+            onOpenChange: keys => {
               setOpenKey(keys.at(-1) || '');
             },
             selectedKeys: selectedKey ? [selectedKey] : [],
-            onSelect: function onSelect(_ref2) {
-              var selectedKeys = _ref2.selectedKeys;
+            onSelect: ({
+              selectedKeys
+            }) => {
               setSelectedKey(selectedKeys.at(-1) || '');
             },
             mode: "inline",
-            items: dataSource.map(function (item) {
+            items: dataSource.map(item => {
               return {
                 key: item.key,
                 label: item.title,
-                children: item.children.map(function (child) {
+                children: item.children.map(child => {
                   return {
                     key: child.key,
                     label: child.title
@@ -201,22 +194,21 @@ var ProHelpPanel = exports.ProHelpPanel = function ProHelpPanel(_ref) {
           })
         })
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "".concat(hashId, " ").concat(className, "-content-panel"),
+        className: `${hashId} ${className}-content-panel`,
         style: {
-          height: height
+          height
         },
         children: [selectedKey ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProHelpContentPanel.ProHelpContentPanel, {
           parentItem: dataSourceKeyMap.get(parentKey),
-          className: "".concat(className, "-content-render"),
+          className: `${className}-content-render`,
           selectedKey: selectedKey,
-          onScroll: function onScroll(key) {
-            return setSelectedKey(key);
-          }
+          onScroll: key => setSelectedKey(key)
         }) : null, footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(hashId, " ").concat(className, "-footer"),
+          className: `${hashId} ${className}-footer`,
           children: footer
         }) : null]
       })]
     })
   }));
-};
+};
+exports.ProHelpPanel = ProHelpPanel;

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

@@ -1,14 +1,12 @@
 "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.ProHelpPopover = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _ProHelpContentPanel = require("./ProHelpContentPanel");
@@ -19,30 +17,34 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @param popoverProps 要传递给 Drawer 组件的属性。
  * @param props 要传递给 ProHelpPanel 组件的属性。
  */
-var ProHelpPopover = exports.ProHelpPopover = function ProHelpPopover(props) {
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var className = getPrefixCls('pro-help');
-  var _useContext2 = (0, _react.useContext)(_provider.ProProvider),
-    hashId = _useContext2.hashId;
-  var _useStyle = (0, _style.useStyle)(className),
-    wrapSSR = _useStyle.wrapSSR;
-  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+const ProHelpPopover = props => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const className = getPrefixCls('pro-help');
+  const {
+    hashId
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const {
+    wrapSSR
+  } = (0, _style.useStyle)(className);
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
     styles: {
       container: {
         padding: 0
       }
     },
     content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)("".concat(className, "-popover-content"), hashId, props.popoverContextClassName),
+      className: (0, _clsx.clsx)(`${className}-popover-content`, hashId, props.popoverContextClassName),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProHelpContentPanel.ProHelpContentPanel, {
         selectedKey: props.selectedKey
       })
-    })
-  }, props.popoverProps), {}, {
+    }),
+    ...props.popoverProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _classnames.default)("".concat(className, "-popover-text"), hashId, props.textClassName),
+      className: (0, _clsx.clsx)(`${className}-popover-text`, hashId, props.textClassName),
       children: props.children
     })
-  })));
-};
+  }));
+};
+exports.ProHelpPopover = ProHelpPopover;

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

@@ -1,12 +1,10 @@
 "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.RenderContentPanel = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _antd = require("antd");
 var _react = _interopRequireWildcard(require("react"));
 var _HelpProvide = require("./HelpProvide");
@@ -14,11 +12,11 @@ var _ProHelpPanel = require("./ProHelpPanel");
 var _jsxRuntime = require("react/jsx-runtime");
 // HTML渲染组件，接收一个字符串形式的html作为props
 // 可选接收className作为组件的样式类名
-var HTMLRender = function HTMLRender(props) {
-  var ref = (0, _react.useRef)(null);
+const HTMLRender = props => {
+  const ref = (0, _react.useRef)(null);
 
   // 当html发生变化时，将其渲染到ref.current的innerHTML中
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (ref.current) ref.current.innerHTML = props.children;
   }, [props.children]);
   // 返回一个div元素作为容器，并传递ref和className作为props
@@ -27,26 +25,28 @@ var HTMLRender = function HTMLRender(props) {
     className: props.className || 'inner-html'
   });
 };
-var NavigationSwitch = function NavigationSwitch(props) {
-  var context = (0, _react.useContext)(_ProHelpPanel.SelectKeyProvide);
+const NavigationSwitch = props => {
+  const context = (0, _react.useContext)(_ProHelpPanel.SelectKeyProvide);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Typography.Text, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
       "data-testid": "navigation-switch",
-      onClick: function onClick() {
+      onClick: () => {
         context.setSelectedKey(props.selectKey);
       },
       children: props.children
     })
   });
 };
-var RenderContentPanel = exports.RenderContentPanel = function RenderContentPanel(_ref) {
-  var dataSourceChildren = _ref.dataSourceChildren,
-    onInit = _ref.onInit;
-  var _useContext = (0, _react.useContext)(_HelpProvide.ProHelpProvide),
-    valueTypeMap = _useContext.valueTypeMap;
-  var divRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    onInit === null || onInit === void 0 || onInit(divRef.current);
+const RenderContentPanel = ({
+  dataSourceChildren,
+  onInit
+}) => {
+  const {
+    valueTypeMap
+  } = (0, _react.useContext)(_HelpProvide.ProHelpProvide);
+  const divRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    onInit?.(divRef.current);
   }, [dataSourceChildren]);
 
   /**
@@ -55,16 +55,17 @@ var RenderContentPanel = exports.RenderContentPanel = function RenderContentPane
    * @param {number} index
    * @return {*}
    */
-  var itemRender = function itemRender(item, index) {
+  const itemRender = (item, index) => {
     // 自定义的渲染，优先级最高
     if (valueTypeMap.has(item.valueType)) {
-      var _valueTypeMap$get;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
-        children: (_valueTypeMap$get = valueTypeMap.get(item.valueType)) === null || _valueTypeMap$get === void 0 ? void 0 : _valueTypeMap$get(item, index)
+        children: valueTypeMap.get(item.valueType)?.(item, index)
       }, index);
     }
     if (item.valueType === 'html') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(HTMLRender, (0, _objectSpread2.default)({}, item.children), index);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(HTMLRender, {
+        ...item.children
+      }, index);
     }
     if (item.valueType === 'h1') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Typography.Title, {
@@ -89,23 +90,31 @@ var RenderContentPanel = exports.RenderContentPanel = function RenderContentPane
         style: {
           marginBlock: 12
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Image, (0, _objectSpread2.default)({}, item.children))
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Image, {
+          ...item.children
+        })
       }, index);
     }
     if (item.valueType === 'inlineLink') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Typography.Text, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", (0, _objectSpread2.default)({}, item.children))
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          ...item.children
+        })
       }, index);
     }
     if (item.valueType === 'link') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Typography.Text, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", (0, _objectSpread2.default)({}, item.children))
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            ...item.children
+          })
         }, index)
       }, index);
     }
     if (item.valueType === 'navigationSwitch') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavigationSwitch, (0, _objectSpread2.default)({}, item.children), index);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavigationSwitch, {
+        ...item.children
+      }, index);
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Typography.Text, {
       children: item.children
@@ -113,6 +122,7 @@ var RenderContentPanel = exports.RenderContentPanel = function RenderContentPane
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: divRef,
-    children: dataSourceChildren === null || dataSourceChildren === void 0 ? void 0 : dataSourceChildren.map(itemRender)
+    children: dataSourceChildren?.map(itemRender)
   });
-};
+};
+exports.RenderContentPanel = RenderContentPanel;