@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.2

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

@@ -1,124 +1,111 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-
-// src/layout/components/Help/RenderContentPanel.tsx
-import { Image, Typography } from "antd";
-import React, { useContext, useEffect, useRef } from "react";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Image, Typography } from 'antd';
+import React, { useContext, useEffect, useRef } from 'react';
 import { ProHelpProvide } from "./HelpProvide";
 import { SelectKeyProvide } from "./ProHelpPanel";
-var HTMLRender = (props) => {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (ref.current)
-      ref.current.innerHTML = props.children;
+
+// HTML渲染组件，接收一个字符串形式的html作为props
+// 可选接收className作为组件的样式类名
+import { jsx as _jsx } from "react/jsx-runtime";
+var HTMLRender = function HTMLRender(props) {
+  var ref = useRef(null);
+
+  // 当html发生变化时，将其渲染到ref.current的innerHTML中
+  useEffect(function () {
+    if (ref.current) ref.current.innerHTML = props.children;
   }, [props.children]);
-  return /* @__PURE__ */ React.createElement("div", { ref, className: props.className || "inner-html" });
+  // 返回一个div元素作为容器，并传递ref和className作为props
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: props.className || 'inner-html'
+  });
 };
-var NavigationSwitch = (props) => {
-  const context = useContext(SelectKeyProvide);
-  return /* @__PURE__ */ React.createElement(Typography.Text, null, /* @__PURE__ */ React.createElement(
-    "a",
-    {
+var NavigationSwitch = function NavigationSwitch(props) {
+  var context = useContext(SelectKeyProvide);
+  return /*#__PURE__*/_jsx(Typography.Text, {
+    children: /*#__PURE__*/_jsx("a", {
       "data-testid": "navigation-switch",
-      onClick: () => {
+      onClick: function onClick() {
         context.setSelectedKey(props.selectKey);
-      }
-    },
-    props.children
-  ));
+      },
+      children: props.children
+    })
+  });
 };
-var RenderContentPanel = ({ dataSourceChildren, onInit }) => {
-  const { valueTypeMap } = useContext(ProHelpProvide);
-  const divRef = useRef(null);
-  useEffect(() => {
-    onInit == null ? void 0 : onInit(divRef.current);
+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);
   }, [dataSourceChildren]);
-  const itemRender = (item, index) => {
-    var _a;
+
+  /**
+   * itemRender 的定义
+   * @param {ProHelpDataSourceChildren} item
+   * @param {number} index
+   * @return {*}
+   */
+  var itemRender = function itemRender(item, index) {
+    // 自定义的渲染，优先级最高
     if (valueTypeMap.has(item.valueType)) {
-      return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, (_a = valueTypeMap.get(item.valueType)) == null ? void 0 : _a(item, index));
+      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)
+      }, index);
     }
-    if (item.valueType === "html") {
-      return /* @__PURE__ */ React.createElement(
-        HTMLRender,
-        __spreadValues({
-          key: index
-        }, item.children)
-      );
+    if (item.valueType === 'html') {
+      return /*#__PURE__*/_jsx(HTMLRender, _objectSpread({}, item.children), index);
     }
-    if (item.valueType === "h1") {
-      return /* @__PURE__ */ React.createElement(
-        Typography.Title,
-        {
-          key: index,
-          style: {
-            marginTop: 0
-          },
-          level: 3
+    if (item.valueType === 'h1') {
+      return /*#__PURE__*/_jsx(Typography.Title, {
+        style: {
+          marginTop: 0
         },
-        item.children
-      );
+        level: 3,
+        children: item.children
+      }, index);
     }
-    if (item.valueType === "h2") {
-      return /* @__PURE__ */ React.createElement(
-        Typography.Title,
-        {
-          key: index,
-          style: {
-            marginTop: 20
-          },
-          level: 5
+    if (item.valueType === 'h2') {
+      return /*#__PURE__*/_jsx(Typography.Title, {
+        style: {
+          marginTop: 20
         },
-        item.children
-      );
+        level: 5,
+        children: item.children
+      }, index);
     }
-    if (item.valueType === "image") {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: index,
-          style: {
-            marginBlock: 12
-          }
+    if (item.valueType === 'image') {
+      return /*#__PURE__*/_jsx("div", {
+        style: {
+          marginBlock: 12
         },
-        /* @__PURE__ */ React.createElement(Image, __spreadValues({}, item.children))
-      );
+        children: /*#__PURE__*/_jsx(Image, _objectSpread({}, item.children))
+      }, index);
     }
-    if (item.valueType === "inlineLink") {
-      return /* @__PURE__ */ React.createElement(Typography.Text, { key: index }, /* @__PURE__ */ React.createElement("a", __spreadValues({}, item.children)));
+    if (item.valueType === 'inlineLink') {
+      return /*#__PURE__*/_jsx(Typography.Text, {
+        children: /*#__PURE__*/_jsx("a", _objectSpread({}, item.children))
+      }, index);
     }
-    if (item.valueType === "link") {
-      return /* @__PURE__ */ React.createElement("div", { key: index }, /* @__PURE__ */ React.createElement(Typography.Text, { key: index }, /* @__PURE__ */ React.createElement(
-        "a",
-        __spreadValues({}, item.children)
-      )));
+    if (item.valueType === 'link') {
+      return /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(Typography.Text, {
+          children: /*#__PURE__*/_jsx("a", _objectSpread({}, item.children))
+        }, index)
+      }, index);
     }
-    if (item.valueType === "navigationSwitch") {
-      return /* @__PURE__ */ React.createElement(
-        NavigationSwitch,
-        __spreadValues({
-          key: index
-        }, item.children)
-      );
+    if (item.valueType === 'navigationSwitch') {
+      return /*#__PURE__*/_jsx(NavigationSwitch, _objectSpread({}, item.children), index);
     }
-    return /* @__PURE__ */ React.createElement(Typography.Text, { key: index }, item.children);
+    return /*#__PURE__*/_jsx(Typography.Text, {
+      children: item.children
+    }, index);
   };
-  return /* @__PURE__ */ React.createElement("div", { ref: divRef }, dataSourceChildren == null ? void 0 : dataSourceChildren.map(itemRender));
-};
-export {
-  RenderContentPanel
-};
+  return /*#__PURE__*/_jsx("div", {
+    ref: divRef,
+    children: dataSourceChildren === null || dataSourceChildren === void 0 ? void 0 : dataSourceChildren.map(itemRender)
+  });
+};

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

@@ -1,187 +1,152 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-// src/layout/components/Help/Search.tsx
-import { SearchOutlined } from "@ant-design/icons";
-import { ConfigProvider, Select } from "antd";
-import classNames from "classnames";
-import React, { useContext, useState } from "react";
+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 React, { useContext, useState } from 'react';
 import { ProProvider, useStyle } from "../../../provider";
 import { useDebounceFn } from "../../../utils";
 import { ProHelpProvide } from "./HelpProvide";
-var 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");
-  const { wrapSSR } = useStyle("Highlight", (token) => {
-    return {
-      [`.${lightCls}`]: {
+
+/**
+ * 在一段文本中高亮显示指定的关键词，将文本和匹配项分别处理并放入数组中，最终返回包含高亮文本的组件。
+ * 在组件中使用了正则表达式来匹配关键词。
+ * 在渲染文本时，使用了React.createElement来创建元素。
+ */
+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');
+
+  // css
+  var _useStyle = useStyle('Highlight', function (token) {
+      return _defineProperty(_defineProperty({}, ".".concat(lightCls), {
         color: token.colorPrimary
-      },
-      [`.${optionCls}`]: {
-        flex: "auto",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        textOverflow: "ellipsis"
-      }
-    };
-  });
+      }), ".".concat(optionCls), {
+        flex: 'auto',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+      });
+    }),
+    wrapSSR = _useStyle.wrapSSR;
   if (!words.length || !words[0]) {
-    return wrapSSR(
-      React.createElement(
-        "div",
-        {
-          title: label,
-          className: optionCls
-        },
-        label
-      )
-    );
+    return wrapSSR( /*#__PURE__*/React.createElement('div', {
+      title: label,
+      className: optionCls
+    }, label));
   }
-  const matchKeywordsRE = new RegExp(
-    words.map((word) => word.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&")).join("|"),
-    "gi"
-  );
-  let matchText = label;
-  const elements = [];
+
+  // 创建正则表达式匹配关键词
+  var matchKeywordsRE = new RegExp(words.map(function (word) {
+    return word.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+  }).join('|'), 'gi');
+  var matchText = label;
+  var elements = [];
+
+  // 遍历匹配的文本，将匹配项和非匹配项分别处理并放入elements数组中
   while (matchText.length) {
-    const match = matchKeywordsRE.exec(matchText);
+    var match = matchKeywordsRE.exec(matchText);
     if (!match) {
       elements.push(matchText);
       break;
     }
-    const start = match.index;
-    const matchLength = match[0].length + start;
-    elements.push(
-      matchText.slice(0, start),
-      React.createElement(
-        "span",
-        {
-          className: lightCls
-        },
-        matchText.slice(start, matchLength)
-      )
-    );
+    var start = match.index;
+    var 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(
-    React.createElement(
-      "div",
-      {
-        title: label,
-        className: optionCls
-      },
-      ...elements
-    )
-  );
+  return wrapSSR( /*#__PURE__*/React.createElement.apply(React, ['div', {
+    title: label,
+    className: optionCls
+  }].concat(elements)));
 };
-var ProHelpSelect = (_a) => {
-  var _b = _a, { iconClassName } = _b, props = __objRest(_b, ["iconClassName"]);
-  var _a2;
-  const { dataSource } = useContext(ProHelpProvide);
-  const [keyWord, setKeyWork] = useState((_a2 = props.defaultValue) != null ? _a2 : "");
-  const { hashId } = useContext(ProProvider);
-  const debounceSetKeyWork = useDebounceFn((key) => __async(void 0, null, function* () {
-    return setKeyWork(key);
-  }), 20);
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, !open ? /* @__PURE__ */ React.createElement("div", { className: classNames(iconClassName, hashId) }, /* @__PURE__ */ React.createElement(
-    SearchOutlined,
-    {
-      title: "search panel",
-      onClick: () => {
-        setOpen(true);
-      }
-    }
-  )) : null, open ? /* @__PURE__ */ React.createElement(
-    Select,
-    __spreadProps(__spreadValues({
+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];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!open ? /*#__PURE__*/_jsx("div", {
+      className: classNames(iconClassName, hashId),
+      children: /*#__PURE__*/_jsx(SearchOutlined, {
+        title: "search panel",
+        onClick: function onClick() {
+          setOpen(true);
+        }
+      })
+    }) : null, open ? /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
       placeholder: "please input search text",
       showSearch: true,
-      onBlur: () => {
+      onBlur: function onBlur() {
         setOpen(false);
       },
       size: "small"
-    }, props), {
-      onSearch: (value) => {
+    }, props), {}, {
+      onSearch: function onSearch(value) {
         debounceSetKeyWork.cancel();
         debounceSetKeyWork.run(value);
       },
-      filterOption: (input, option) => {
-        var _a3;
-        return ((_a3 = option == null ? void 0 : option.title) != null ? _a3 : "").toLowerCase().includes(input.toLowerCase());
+      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());
       },
       popupMatchSelectWidth: false,
-      options: dataSource.map((item) => {
-        var _a3;
+      options: dataSource.map(function (item) {
+        var _item$children;
         return {
-          label: /* @__PURE__ */ React.createElement(
-            Highlight,
-            {
-              label: item.title,
-              words: keyWord ? [keyWord] : []
-            }
-          ),
+          label: /*#__PURE__*/_jsx(Highlight, {
+            label: item.title,
+            words: keyWord ? [keyWord] : []
+          }),
           title: item.title,
           value: item.key,
-          options: (_a3 = item.children) == null ? void 0 : _a3.map((sunItem) => {
+          options: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (sunItem) {
             return {
-              label: /* @__PURE__ */ React.createElement(
-                Highlight,
-                {
-                  label: sunItem.title,
-                  words: keyWord ? [keyWord] : []
-                }
-              ),
+              label: /*#__PURE__*/_jsx(Highlight, {
+                label: sunItem.title,
+                words: keyWord ? [keyWord] : []
+              }),
               title: sunItem.title,
               value: sunItem.key,
               dataItemKey: item.key
@@ -189,10 +154,6 @@ var ProHelpSelect = (_a) => {
           })
         };
       })
-    })
-  ) : null);
-};
-export {
-  Highlight,
-  ProHelpSelect
-};
+    })) : null]
+  });
+};

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

@@ -1,49 +1,28 @@
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/layout/components/Help/index.tsx
-import React from "react";
+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";
+import { jsx as _jsx } from "react/jsx-runtime";
 export * from "./ProHelpContentPanel";
 export * from "./ProHelpDrawer";
 export * from "./ProHelpModal";
 export * from "./ProHelpPanel";
 export * from "./ProHelpPopover";
 export * from "./RenderContentPanel";
-var ProHelp = (_a) => {
-  var _b = _a, {
-    dataSource,
-    valueTypeMap = /* @__PURE__ */ new Map(),
-    onLoadContext
-  } = _b, props = __objRest(_b, [
-    "dataSource",
-    "valueTypeMap",
-    "onLoadContext"
-  ]);
-  return /* @__PURE__ */ React.createElement(
-    ProHelpProvide.Provider,
-    {
-      value: { onLoadContext, dataSource, valueTypeMap }
+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);
+  return /*#__PURE__*/_jsx(ProHelpProvide.Provider, {
+    value: {
+      onLoadContext: onLoadContext,
+      dataSource: dataSource,
+      valueTypeMap: valueTypeMap
     },
-    props.children
-  );
-};
-export {
-  ProHelp,
-  ProHelpProvide,
-  ProHelpSelect
-};
+    children: props.children
+  });
+};