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

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

@@ -1,51 +1,49 @@
 "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.ProHelpSelect = exports.Highlight = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _utils = require("../../../utils");
 var _HelpProvide = require("./HelpProvide");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["iconClassName"];
 /**
  * 在一段文本中高亮显示指定的关键词，将文本和匹配项分别处理并放入数组中，最终返回包含高亮文本的组件。
  * 在组件中使用了正则表达式来匹配关键词。
  * 在渲染文本时，使用了React.createElement来创建元素。
  */
-var Highlight = exports.Highlight = function Highlight(_ref) {
-  var label = _ref.label,
-    words = _ref.words;
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var lightCls = getPrefixCls('pro-help-search-list-item-content-light');
-  var optionCls = getPrefixCls('pro-help-search-list-item-content');
+const Highlight = ({
+  label,
+  words
+}) => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const lightCls = getPrefixCls('pro-help-search-list-item-content-light');
+  const optionCls = getPrefixCls('pro-help-search-list-item-content');
 
   // css
-  var _useStyle = (0, _provider.useStyle)('Highlight', function (token) {
-      return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(lightCls), {
+  const {
+    wrapSSR
+  } = (0, _provider.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.default.createElement('div', {
       title: label,
@@ -54,91 +52,67 @@ var Highlight = exports.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.default.createElement('span', {
       className: lightCls
     }, matchText.slice(start, matchLength)));
     matchText = matchText.slice(matchLength);
   }
-  return wrapSSR( /*#__PURE__*/_react.default.createElement.apply(_react.default, ['div', {
+  return wrapSSR( /*#__PURE__*/_react.default.createElement('div', {
     title: label,
     className: optionCls
-  }].concat(elements)));
+  }, ...elements));
 };
-var ProHelpSelect = exports.ProHelpSelect = function ProHelpSelect(_ref3) {
-  var _props$defaultValue;
-  var iconClassName = _ref3.iconClassName,
-    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-  var _useContext2 = (0, _react.useContext)(_HelpProvide.ProHelpProvide),
-    dataSource = _useContext2.dataSource;
-  var _useState = (0, _react.useState)((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : ''),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    keyWord = _useState2[0],
-    setKeyWork = _useState2[1];
-  var _useContext3 = (0, _react.useContext)(_provider.ProProvider),
-    hashId = _useContext3.hashId;
-  var debounceSetKeyWork = (0, _utils.useDebounceFn)( /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(key) {
-      return (0, _regeneratorRuntime2.default)().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 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    open = _useState4[0],
-    setOpen = _useState4[1];
+exports.Highlight = Highlight;
+const ProHelpSelect = ({
+  iconClassName,
+  ...props
+}) => {
+  const {
+    dataSource
+  } = (0, _react.useContext)(_HelpProvide.ProHelpProvide);
+  const [keyWord, setKeyWork] = (0, _react.useState)(props.defaultValue ?? '');
+  const {
+    hashId
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const debounceSetKeyWork = (0, _utils.useDebounceFn)(async key => setKeyWork(key), 20);
+  const [open, setOpen] = (0, _react.useState)(false);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [!open ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)(iconClassName, hashId),
+      className: (0, _clsx.clsx)(iconClassName, hashId),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchOutlined, {
         title: "search panel",
-        onClick: function onClick() {
+        onClick: () => {
           setOpen(true);
         }
       })
-    }) : null, open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Select, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    }) : null, open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.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__*/(0, _jsxRuntime.jsx)(Highlight, {
             label: item.title,
@@ -146,7 +120,7 @@ var ProHelpSelect = exports.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__*/(0, _jsxRuntime.jsx)(Highlight, {
                 label: sunItem.title,
@@ -159,6 +133,7 @@ var ProHelpSelect = exports.ProHelpSelect = function ProHelpSelect(_ref3) {
           })
         };
       })
-    })) : null]
+    }) : null]
   });
-};
+};
+exports.ProHelpSelect = ProHelpSelect;

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

@@ -12,17 +12,16 @@ var _exportNames = {
 exports.ProHelp = void 0;
 Object.defineProperty(exports, "ProHelpProvide", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _HelpProvide.ProHelpProvide;
   }
 });
 Object.defineProperty(exports, "ProHelpSelect", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Search.ProHelpSelect;
   }
 });
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _HelpProvide = require("./HelpProvide");
 var _Search = require("./Search");
@@ -34,7 +33,7 @@ Object.keys(_ProHelpContentPanel).forEach(function (key) {
   if (key in exports && exports[key] === _ProHelpContentPanel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _ProHelpContentPanel[key];
     }
   });
@@ -46,7 +45,7 @@ Object.keys(_ProHelpDrawer).forEach(function (key) {
   if (key in exports && exports[key] === _ProHelpDrawer[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _ProHelpDrawer[key];
     }
   });
@@ -58,7 +57,7 @@ Object.keys(_ProHelpModal).forEach(function (key) {
   if (key in exports && exports[key] === _ProHelpModal[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _ProHelpModal[key];
     }
   });
@@ -70,7 +69,7 @@ Object.keys(_ProHelpPanel).forEach(function (key) {
   if (key in exports && exports[key] === _ProHelpPanel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _ProHelpPanel[key];
     }
   });
@@ -82,7 +81,7 @@ Object.keys(_ProHelpPopover).forEach(function (key) {
   if (key in exports && exports[key] === _ProHelpPopover[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _ProHelpPopover[key];
     }
   });
@@ -94,24 +93,24 @@ Object.keys(_RenderContentPanel).forEach(function (key) {
   if (key in exports && exports[key] === _RenderContentPanel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _RenderContentPanel[key];
     }
   });
 });
-var _excluded = ["dataSource", "valueTypeMap", "onLoadContext"];
-var ProHelp = exports.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const ProHelp = ({
+  dataSource,
+  valueTypeMap = new Map(),
+  onLoadContext,
+  ...props
+}) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpProvide.ProHelpProvide.Provider, {
     value: {
-      onLoadContext: onLoadContext,
-      dataSource: dataSource,
-      valueTypeMap: valueTypeMap
+      onLoadContext,
+      dataSource,
+      valueTypeMap
     },
     children: props.children
   });
-};
+};
+exports.ProHelp = ProHelp;

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

@@ -1,16 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.actionsInputAnimal = void 0;
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _cssinjs = require("@ant-design/cssinjs");
 var _provider = require("../../../provider");
-var actionsInputAnimal = exports.actionsInputAnimal = new _cssinjs.Keyframes('actionsInputAnimal', {
+const actionsInputAnimal = exports.actionsInputAnimal = new _cssinjs.Keyframes('actionsInputAnimal', {
   '0%': {
     width: '0px'
   },
@@ -21,88 +18,97 @@ var actionsInputAnimal = exports.actionsInputAnimal = new _cssinjs.Keyframes('ac
     width: '120px'
   }
 });
-var genProHelpStyle = function genProHelpStyle(token) {
-  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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'
+      }
     }
-  });
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProHelp', function (token) {
-    var ProLayoutHeaderToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProHelp', token => {
+    const ProLayoutHeaderToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProHelpStyle(ProLayoutHeaderToken)];
   });
 }