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

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

@@ -1,6 +1,5 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { ConfigProvider, Popover } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { ProProvider } from "../../../provider";
 import { ProHelpContentPanel } from "./ProHelpContentPanel";
@@ -11,30 +10,33 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param popoverProps 要传递给 Drawer 组件的属性。
  * @param props 要传递给 ProHelpPanel 组件的属性。
  */
-export var ProHelpPopover = function ProHelpPopover(props) {
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var className = getPrefixCls('pro-help');
-  var _useContext2 = useContext(ProProvider),
-    hashId = _useContext2.hashId;
-  var _useStyle = useStyle(className),
-    wrapSSR = _useStyle.wrapSSR;
-  return wrapSSR( /*#__PURE__*/_jsx(Popover, _objectSpread(_objectSpread({
+export const ProHelpPopover = props => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const className = getPrefixCls('pro-help');
+  const {
+    hashId
+  } = useContext(ProProvider);
+  const {
+    wrapSSR
+  } = useStyle(className);
+  return wrapSSR( /*#__PURE__*/_jsx(Popover, {
     styles: {
       container: {
         padding: 0
       }
     },
     content: /*#__PURE__*/_jsx("div", {
-      className: classNames("".concat(className, "-popover-content"), hashId, props.popoverContextClassName),
+      className: clsx(`${className}-popover-content`, hashId, props.popoverContextClassName),
       children: /*#__PURE__*/_jsx(ProHelpContentPanel, {
         selectedKey: props.selectedKey
       })
-    })
-  }, props.popoverProps), {}, {
+    }),
+    ...props.popoverProps,
     children: /*#__PURE__*/_jsx("span", {
-      className: classNames("".concat(className, "-popover-text"), hashId, props.textClassName),
+      className: clsx(`${className}-popover-text`, hashId, props.textClassName),
       children: props.children
     })
-  })));
+  }));
 };

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

@@ -1,4 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Image, Typography } from 'antd';
 import React, { useContext, useEffect, useRef } from 'react';
 import { ProHelpProvide } from "./HelpProvide";
@@ -7,11 +6,11 @@ import { SelectKeyProvide } from "./ProHelpPanel";
 // HTML渲染组件，接收一个字符串形式的html作为props
 // 可选接收className作为组件的样式类名
 import { jsx as _jsx } from "react/jsx-runtime";
-var HTMLRender = function HTMLRender(props) {
-  var ref = useRef(null);
+const HTMLRender = props => {
+  const ref = useRef(null);
 
   // 当html发生变化时，将其渲染到ref.current的innerHTML中
-  useEffect(function () {
+  useEffect(() => {
     if (ref.current) ref.current.innerHTML = props.children;
   }, [props.children]);
   // 返回一个div元素作为容器，并传递ref和className作为props
@@ -20,26 +19,28 @@ var HTMLRender = function HTMLRender(props) {
     className: props.className || 'inner-html'
   });
 };
-var NavigationSwitch = function NavigationSwitch(props) {
-  var context = useContext(SelectKeyProvide);
+const NavigationSwitch = props => {
+  const context = useContext(SelectKeyProvide);
   return /*#__PURE__*/_jsx(Typography.Text, {
     children: /*#__PURE__*/_jsx("a", {
       "data-testid": "navigation-switch",
-      onClick: function onClick() {
+      onClick: () => {
         context.setSelectedKey(props.selectKey);
       },
       children: props.children
     })
   });
 };
-export var RenderContentPanel = function RenderContentPanel(_ref) {
-  var dataSourceChildren = _ref.dataSourceChildren,
-    onInit = _ref.onInit;
-  var _useContext = useContext(ProHelpProvide),
-    valueTypeMap = _useContext.valueTypeMap;
-  var divRef = useRef(null);
-  useEffect(function () {
-    onInit === null || onInit === void 0 || onInit(divRef.current);
+export const RenderContentPanel = ({
+  dataSourceChildren,
+  onInit
+}) => {
+  const {
+    valueTypeMap
+  } = useContext(ProHelpProvide);
+  const divRef = useRef(null);
+  useEffect(() => {
+    onInit?.(divRef.current);
   }, [dataSourceChildren]);
 
   /**
@@ -48,16 +49,17 @@ export var RenderContentPanel = function RenderContentPanel(_ref) {
    * @param {number} index
    * @return {*}
    */
-  var itemRender = function itemRender(item, index) {
+  const itemRender = (item, index) => {
     // 自定义的渲染，优先级最高
     if (valueTypeMap.has(item.valueType)) {
-      var _valueTypeMap$get;
       return /*#__PURE__*/_jsx(React.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__*/_jsx(HTMLRender, _objectSpread({}, item.children), index);
+      return /*#__PURE__*/_jsx(HTMLRender, {
+        ...item.children
+      }, index);
     }
     if (item.valueType === 'h1') {
       return /*#__PURE__*/_jsx(Typography.Title, {
@@ -82,23 +84,31 @@ export var RenderContentPanel = function RenderContentPanel(_ref) {
         style: {
           marginBlock: 12
         },
-        children: /*#__PURE__*/_jsx(Image, _objectSpread({}, item.children))
+        children: /*#__PURE__*/_jsx(Image, {
+          ...item.children
+        })
       }, index);
     }
     if (item.valueType === 'inlineLink') {
       return /*#__PURE__*/_jsx(Typography.Text, {
-        children: /*#__PURE__*/_jsx("a", _objectSpread({}, item.children))
+        children: /*#__PURE__*/_jsx("a", {
+          ...item.children
+        })
       }, index);
     }
     if (item.valueType === 'link') {
       return /*#__PURE__*/_jsx("div", {
         children: /*#__PURE__*/_jsx(Typography.Text, {
-          children: /*#__PURE__*/_jsx("a", _objectSpread({}, item.children))
+          children: /*#__PURE__*/_jsx("a", {
+            ...item.children
+          })
         }, index)
       }, index);
     }
     if (item.valueType === 'navigationSwitch') {
-      return /*#__PURE__*/_jsx(NavigationSwitch, _objectSpread({}, item.children), index);
+      return /*#__PURE__*/_jsx(NavigationSwitch, {
+        ...item.children
+      }, index);
     }
     return /*#__PURE__*/_jsx(Typography.Text, {
       children: item.children
@@ -106,6 +116,6 @@ export var RenderContentPanel = function RenderContentPanel(_ref) {
   };
   return /*#__PURE__*/_jsx("div", {
     ref: divRef,
-    children: dataSourceChildren === null || dataSourceChildren === void 0 ? void 0 : dataSourceChildren.map(itemRender)
+    children: dataSourceChildren?.map(itemRender)
   });
 };

package/es/layout/components/Help/Search.js

@@ -1,13 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["iconClassName"];
 import { SearchOutlined } from '@ant-design/icons';
 import { ConfigProvider, Select } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useState } from 'react';
 import { ProProvider, useStyle } from "../../../provider";
 import { useDebounceFn } from "../../../utils";
@@ -21,26 +14,32 @@ import { ProHelpProvide } from "./HelpProvide";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var Highlight = function Highlight(_ref) {
-  var label = _ref.label,
-    words = _ref.words;
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var lightCls = getPrefixCls('pro-help-search-list-item-content-light');
-  var optionCls = getPrefixCls('pro-help-search-list-item-content');
+export const Highlight = ({
+  label,
+  words
+}) => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const lightCls = getPrefixCls('pro-help-search-list-item-content-light');
+  const optionCls = getPrefixCls('pro-help-search-list-item-content');
 
   // css
-  var _useStyle = useStyle('Highlight', function (token) {
-      return _defineProperty(_defineProperty({}, ".".concat(lightCls), {
+  const {
+    wrapSSR
+  } = useStyle('Highlight', token => {
+    return {
+      [`.${lightCls}`]: {
         color: token.colorPrimary
-      }), ".".concat(optionCls), {
+      },
+      [`.${optionCls}`]: {
         flex: 'auto',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
-      });
-    }),
-    wrapSSR = _useStyle.wrapSSR;
+      }
+    };
+  });
   if (!words.length || !words[0]) {
     return wrapSSR( /*#__PURE__*/React.createElement('div', {
       title: label,
@@ -49,91 +48,66 @@ export var Highlight = function Highlight(_ref) {
   }
 
   // 创建正则表达式匹配关键词
-  var matchKeywordsRE = new RegExp(words.map(function (word) {
-    return word.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
-  }).join('|'), 'gi');
-  var matchText = label;
-  var elements = [];
+  const matchKeywordsRE = new RegExp(words.map(word => word.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')).join('|'), 'gi');
+  let matchText = label;
+  const elements = [];
 
   // 遍历匹配的文本，将匹配项和非匹配项分别处理并放入elements数组中
   while (matchText.length) {
-    var match = matchKeywordsRE.exec(matchText);
+    const match = matchKeywordsRE.exec(matchText);
     if (!match) {
       elements.push(matchText);
       break;
     }
-    var start = match.index;
-    var matchLength = match[0].length + start;
+    const start = match.index;
+    const matchLength = match[0].length + start;
     elements.push(matchText.slice(0, start), /*#__PURE__*/React.createElement('span', {
       className: lightCls
     }, matchText.slice(start, matchLength)));
     matchText = matchText.slice(matchLength);
   }
-  return wrapSSR( /*#__PURE__*/React.createElement.apply(React, ['div', {
+  return wrapSSR( /*#__PURE__*/React.createElement('div', {
     title: label,
     className: optionCls
-  }].concat(elements)));
+  }, ...elements));
 };
-export var ProHelpSelect = function ProHelpSelect(_ref3) {
-  var _props$defaultValue;
-  var iconClassName = _ref3.iconClassName,
-    props = _objectWithoutProperties(_ref3, _excluded);
-  var _useContext2 = useContext(ProHelpProvide),
-    dataSource = _useContext2.dataSource;
-  var _useState = useState((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : ''),
-    _useState2 = _slicedToArray(_useState, 2),
-    keyWord = _useState2[0],
-    setKeyWork = _useState2[1];
-  var _useContext3 = useContext(ProProvider),
-    hashId = _useContext3.hashId;
-  var debounceSetKeyWork = useDebounceFn( /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            return _context.abrupt("return", setKeyWork(key));
-          case 1:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref4.apply(this, arguments);
-    };
-  }(), 20);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    open = _useState4[0],
-    setOpen = _useState4[1];
+export const ProHelpSelect = ({
+  iconClassName,
+  ...props
+}) => {
+  const {
+    dataSource
+  } = useContext(ProHelpProvide);
+  const [keyWord, setKeyWork] = useState(props.defaultValue ?? '');
+  const {
+    hashId
+  } = useContext(ProProvider);
+  const debounceSetKeyWork = useDebounceFn(async key => setKeyWork(key), 20);
+  const [open, setOpen] = useState(false);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [!open ? /*#__PURE__*/_jsx("div", {
-      className: classNames(iconClassName, hashId),
+      className: clsx(iconClassName, hashId),
       children: /*#__PURE__*/_jsx(SearchOutlined, {
         title: "search panel",
-        onClick: function onClick() {
+        onClick: () => {
           setOpen(true);
         }
       })
-    }) : null, open ? /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
+    }) : null, open ? /*#__PURE__*/_jsx(Select, {
       placeholder: "please input search text",
       showSearch: true,
-      onBlur: function onBlur() {
+      onBlur: () => {
         setOpen(false);
       },
-      size: "small"
-    }, props), {}, {
-      onSearch: function onSearch(value) {
+      size: "small",
+      ...props,
+      onSearch: value => {
         debounceSetKeyWork.cancel();
         debounceSetKeyWork.run(value);
       },
-      filterOption: function filterOption(input, option) {
-        var _option$title;
-        return ((_option$title = option === null || option === void 0 ? void 0 : option.title) !== null && _option$title !== void 0 ? _option$title : '').toLowerCase().includes(input.toLowerCase());
-      },
+      filterOption: (input, option) => (option?.title ?? '').toLowerCase().includes(input.toLowerCase()),
       popupMatchSelectWidth: false,
-      options: dataSource.map(function (item) {
-        var _item$children;
+      options: dataSource.map(item => {
         return {
           label: /*#__PURE__*/_jsx(Highlight, {
             label: item.title,
@@ -141,7 +115,7 @@ export var ProHelpSelect = function ProHelpSelect(_ref3) {
           }),
           title: item.title,
           value: item.key,
-          options: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (sunItem) {
+          options: item.children?.map(sunItem => {
             return {
               label: /*#__PURE__*/_jsx(Highlight, {
                 label: sunItem.title,
@@ -154,6 +128,6 @@ export var ProHelpSelect = function ProHelpSelect(_ref3) {
           })
         };
       })
-    })) : null]
+    }) : null]
   });
 };

package/es/layout/components/Help/index.js

@@ -1,5 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["dataSource", "valueTypeMap", "onLoadContext"];
 import React from 'react';
 import { ProHelpProvide } from "./HelpProvide";
 import { ProHelpSelect } from "./Search";
@@ -11,17 +9,17 @@ export * from "./ProHelpPanel";
 export * from "./ProHelpPopover";
 export * from "./RenderContentPanel";
 export { ProHelpProvide, ProHelpSelect };
-export var ProHelp = function ProHelp(_ref) {
-  var dataSource = _ref.dataSource,
-    _ref$valueTypeMap = _ref.valueTypeMap,
-    valueTypeMap = _ref$valueTypeMap === void 0 ? new Map() : _ref$valueTypeMap,
-    onLoadContext = _ref.onLoadContext,
-    props = _objectWithoutProperties(_ref, _excluded);
+export const ProHelp = ({
+  dataSource,
+  valueTypeMap = new Map(),
+  onLoadContext,
+  ...props
+}) => {
   return /*#__PURE__*/_jsx(ProHelpProvide.Provider, {
     value: {
-      onLoadContext: onLoadContext,
-      dataSource: dataSource,
-      valueTypeMap: valueTypeMap
+      onLoadContext,
+      dataSource,
+      valueTypeMap
     },
     children: props.children
   });

package/es/layout/components/Help/style.js

@@ -1,8 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Keyframes } from '@ant-design/cssinjs';
 import { useStyle as useAntdStyle } from "../../../provider";
-export var actionsInputAnimal = new Keyframes('actionsInputAnimal', {
+export const actionsInputAnimal = new Keyframes('actionsInputAnimal', {
   '0%': {
     width: '0px'
   },
@@ -13,88 +11,97 @@ export var actionsInputAnimal = new Keyframes('actionsInputAnimal', {
     width: '120px'
   }
 });
-var genProHelpStyle = function genProHelpStyle(token) {
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(token.componentCls, "-popover-text"), {
-    color: token.colorPrimary,
-    cursor: 'pointer',
-    boxSizing: 'border-box'
-  }), "".concat(token.componentCls, "-popover-content"), {
-    maxWidth: 300,
-    height: '600px',
-    maxHeight: 'calc(100vh - 200px)',
-    overflow: 'auto',
-    paddingInline: 20,
-    paddingBlockStart: 24,
-    paddingBlockEnd: 32,
-    boxSizing: 'border-box'
-  }), "".concat(token.componentCls, "-left-panel"), {
-    overflow: 'auto',
-    boxSizing: 'border-box',
-    borderInlineEnd: "".concat(token === null || token === void 0 ? void 0 : token.lineWidth, "px solid ").concat(token === null || token === void 0 ? void 0 : token.colorBorderSecondary),
-    minHeight: '648px',
-    minWidth: 190,
-    maxWidth: 190,
-    '&-menu': {
-      width: 190,
+const genProHelpStyle = token => {
+  return {
+    [`${token.componentCls}-popover-text`]: {
+      color: token.colorPrimary,
+      cursor: 'pointer',
+      boxSizing: 'border-box'
+    },
+    [`${token.componentCls}-popover-content`]: {
+      maxWidth: 300,
+      height: '600px',
+      maxHeight: 'calc(100vh - 200px)',
+      overflow: 'auto',
+      paddingInline: 20,
+      paddingBlockStart: 24,
+      paddingBlockEnd: 32,
+      boxSizing: 'border-box'
+    },
+    [`${token.componentCls}-left-panel`]: {
+      overflow: 'auto',
       boxSizing: 'border-box',
+      borderInlineEnd: `${token?.lineWidth}px solid ${token?.colorBorderSecondary}`,
+      minHeight: '648px',
       minWidth: 190,
-      height: 'calc(100% - 40px)',
-      marginBlock: 20
-    }
-  }), "".concat(token.componentCls, "-content-panel"), {
-    minWidth: '200px',
-    overflow: 'auto',
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    boxSizing: 'border-box',
-    minHeight: '648px',
-    img: {
-      width: '100%'
-    }
-  }), "".concat(token.componentCls, "-content-render"), {
-    paddingBlock: 20,
-    paddingInline: 24,
-    flex: 1
-  }), "".concat(token.componentCls, "-content-footer"), {
-    padding: 8
-  }), "".concat(token.componentCls, "-actions"), {
-    display: 'flex',
-    boxSizing: 'border-box',
-    gap: token.marginSM,
-    '&-item': {
+      maxWidth: 190,
+      '&-menu': {
+        width: 190,
+        boxSizing: 'border-box',
+        minWidth: 190,
+        height: 'calc(100% - 40px)',
+        marginBlock: 20
+      }
+    },
+    [`${token.componentCls}-content-panel`]: {
+      minWidth: '200px',
+      overflow: 'auto',
+      flex: 1,
       display: 'flex',
+      flexDirection: 'column',
       boxSizing: 'border-box',
-      alignItems: 'center',
-      justifyItems: 'center',
-      padding: 4,
-      height: 24,
-      minWidth: 24,
-      cursor: 'pointer',
-      borderRadius: token.borderRadius,
-      '&:hover': {
-        backgroundColor: token.colorBgTextHover
+      minHeight: '648px',
+      img: {
+        width: '100%'
       }
     },
-    '&-input': {
-      margin: 0,
-      maxWidth: 120,
-      padding: 0,
-      width: '120px',
+    [`${token.componentCls}-content-render`]: {
+      paddingBlock: 20,
+      paddingInline: 24,
+      flex: 1
+    },
+    [`${token.componentCls}-content-footer`]: {
+      padding: 8
+    },
+    [`${token.componentCls}-actions`]: {
+      display: 'flex',
       boxSizing: 'border-box',
-      borderRadius: token.borderRadius,
-      backgroundColor: token.colorBgTextHover,
-      animationName: actionsInputAnimal,
-      animationDuration: '0.1s',
-      animationTimingFunction: 'linear'
+      gap: token.marginSM,
+      '&-item': {
+        display: 'flex',
+        boxSizing: 'border-box',
+        alignItems: 'center',
+        justifyItems: 'center',
+        padding: 4,
+        height: 24,
+        minWidth: 24,
+        cursor: 'pointer',
+        borderRadius: token.borderRadius,
+        '&:hover': {
+          backgroundColor: token.colorBgTextHover
+        }
+      },
+      '&-input': {
+        margin: 0,
+        maxWidth: 120,
+        padding: 0,
+        width: '120px',
+        boxSizing: 'border-box',
+        borderRadius: token.borderRadius,
+        backgroundColor: token.colorBgTextHover,
+        animationName: actionsInputAnimal,
+        animationDuration: '0.1s',
+        animationTimingFunction: 'linear'
+      }
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProHelp', function (token) {
-    var ProLayoutHeaderToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProHelp', token => {
+    const ProLayoutHeaderToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProHelpStyle(ProLayoutHeaderToken)];
   });
 }