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

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

@@ -1,154 +1,155 @@
-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 __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/ProHelpContentPanel.tsx
-import classNames from "classnames";
-import React, { useContext, useEffect, useMemo, useRef } from "react";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import classNames from 'classnames';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import { ProProvider } from "../../../provider";
 import { useDebounceFn } from "../../../utils";
 import { AsyncContentPanel } from "./AsyncContentPanel";
 import { ProHelpProvide } from "./HelpProvide";
 import { RenderContentPanel } from "./RenderContentPanel";
-var ProHelpContentPanel = ({
-  className,
-  parentItem,
-  selectedKey,
-  onScroll
-}) => {
-  var _a;
-  const { dataSource } = useContext(ProHelpProvide);
-  const { hashId } = useContext(ProProvider);
-  const scrollHeightMap = useRef(/* @__PURE__ */ new Map());
-  const divRef = useRef(null);
-  useEffect(() => {
-    if (!selectedKey || !(parentItem == null ? void 0 : parentItem.infiniteScrollFull))
-      return;
-    const div = scrollHeightMap.current.get(selectedKey);
-    if ((div == null ? void 0 : div.offsetTop) && divRef.current) {
-      if (Math.abs(divRef.current.scrollTop - (div == null ? void 0 : div.offsetTop) + 40) > (div == null ? void 0 : div.clientHeight)) {
-        divRef.current.scrollTop = (div == null ? void 0 : div.offsetTop) - 40;
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 控制具体的帮助文档显示组件
+ * selectedKey 来展示对应的内容。它会根据不同的item.valueType值来展示不同的内容，包括标题、图片、超链接等。
+ * @param ProHelpContentPanelProps
+ * @returns
+ */
+export var ProHelpContentPanel = function ProHelpContentPanel(_ref) {
+  var className = _ref.className,
+    parentItem = _ref.parentItem,
+    selectedKey = _ref.selectedKey,
+    onScroll = _ref.onScroll;
+  var _useContext = useContext(ProHelpProvide),
+    dataSource = _useContext.dataSource;
+  var _useContext2 = useContext(ProProvider),
+    hashId = _useContext2.hashId;
+  // 记录每个面板的滚动高度
+  var scrollHeightMap = useRef(new Map());
+  var divRef = useRef(null);
+  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;
       }
     }
   }, [selectedKey]);
-  const onScrollEvent = useDebounceFn((e) => __async(void 0, null, function* () {
-    const dom = e == null ? void 0 : e.target;
-    const list = Array.from(scrollHeightMap.current.entries()).find(
-      ([, value]) => {
-        if ((dom == null ? void 0 : dom.scrollTop) < value.offsetTop) {
-          return true;
+
+  /**
+   * debounce（防抖）处理滚动事件，并根据滚动位置来实现找到当前列表的 key
+   */
+  var onScrollEvent = useDebounceFn( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
+      var dom, list;
+      return _regeneratorRuntime().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 = _slicedToArray(_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();
         }
-        return false;
-      }
-    );
-    if (!list) {
-      return;
-    }
-    if (list.at(0) !== selectedKey) {
-      onScroll == null ? void 0 : onScroll(list.at(0));
-    }
-  }), 200);
-  useEffect(() => {
-    var _a2;
-    if (!(parentItem == null ? void 0 : parentItem.infiniteScrollFull))
-      return;
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), 200);
+
+  /**
+   * 当 parentItem 组件中的 infiniteScrollFull 属性变化时
+   * 如果该属性为真值，则开始监听滚动事件；
+   * 如果为假值，则停止监听滚动事件并取消防抖处理。
+   * 在监听滚动事件时，可以实现分页（瀑布流）效果。同时，该代码还会根据 selectedKey 的变化来触发跳转
+   */
+  useEffect(function () {
+    var _divRef$current;
+    if (!(parentItem !== null && parentItem !== void 0 && parentItem.infiniteScrollFull)) return;
     onScrollEvent.cancel();
-    (_a2 = divRef.current) == null ? void 0 : _a2.addEventListener("scroll", onScrollEvent.run, false);
-    return () => {
-      var _a3;
+    (_divRef$current = divRef.current) === null || _divRef$current === void 0 || _divRef$current.addEventListener('scroll', onScrollEvent.run, false);
+    return function () {
+      var _divRef$current2;
       onScrollEvent.cancel();
-      (_a3 = divRef.current) == null ? void 0 : _a3.removeEventListener("scroll", onScrollEvent.run, false);
+      (_divRef$current2 = divRef.current) === null || _divRef$current2 === void 0 || _divRef$current2.removeEventListener('scroll', onScrollEvent.run, false);
     };
-  }, [parentItem == null ? void 0 : parentItem.infiniteScrollFull, selectedKey]);
-  const dataSourceMap = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    dataSource.forEach((page) => {
-      page.children.forEach((item) => {
-        map.set(item.key || item.title, __spreadProps(__spreadValues({}, item), { parentKey: page.key }));
+  }, [parentItem === null || parentItem === void 0 ? void 0 : parentItem.infiniteScrollFull, selectedKey]);
+
+  /**
+   * 生成一个  Map  能根据 key 找到所有的 index
+   */
+  var dataSourceMap = useMemo(function () {
+    var map = new Map();
+    dataSource.forEach(function (page) {
+      page.children.forEach(function (item) {
+        map.set(item.key || item.title, _objectSpread(_objectSpread({}, item), {}, {
+          parentKey: page.key
+        }));
       });
     });
     return map;
   }, [dataSource]);
-  const renderItem = (item) => {
-    if (item == null ? void 0 : item.asyncLoad) {
-      return /* @__PURE__ */ React.createElement("div", { className: classNames(className, hashId), id: item.title }, /* @__PURE__ */ React.createElement(
-        AsyncContentPanel,
-        {
-          key: item == null ? void 0 : item.key,
-          item,
-          onInit: (ref) => {
-            if (!scrollHeightMap.current)
-              return;
+  var renderItem = function renderItem(item) {
+    if (item !== null && item !== void 0 && item.asyncLoad) {
+      return /*#__PURE__*/_jsx("div", {
+        className: classNames(className, hashId),
+        id: item.title,
+        children: /*#__PURE__*/_jsx(AsyncContentPanel, {
+          item: item,
+          onInit: function onInit(ref) {
+            if (!scrollHeightMap.current) return;
             scrollHeightMap.current.set(item.key, ref);
           }
-        }
-      ));
+        }, item === null || item === void 0 ? void 0 : item.key)
+      });
     }
-    return /* @__PURE__ */ React.createElement("div", { className: classNames(className, hashId), id: item.title }, /* @__PURE__ */ React.createElement(
-      RenderContentPanel,
-      {
-        onInit: (ref) => {
-          if (!scrollHeightMap.current)
-            return;
+    return /*#__PURE__*/_jsx("div", {
+      className: classNames(className, hashId),
+      id: item.title,
+      children: /*#__PURE__*/_jsx(RenderContentPanel, {
+        onInit: function onInit(ref) {
+          if (!scrollHeightMap.current) return;
           scrollHeightMap.current.set(item.key, ref);
         },
-        dataSourceChildren: (item == null ? void 0 : item.children) || []
-      }
-    ));
+        dataSourceChildren: (item === null || item === void 0 ? void 0 : item.children) || []
+      })
+    });
   };
   if (parentItem && parentItem.infiniteScrollFull) {
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref: divRef,
-        className: classNames(`${className}-infinite-scroll`, hashId),
-        style: {
-          overflow: "auto"
-        }
+    var _parentItem$children;
+    return /*#__PURE__*/_jsx("div", {
+      ref: divRef,
+      className: classNames("".concat(className, "-infinite-scroll"), hashId),
+      style: {
+        overflow: 'auto'
       },
-      (_a = parentItem.children) == null ? void 0 : _a.map((item) => {
-        return /* @__PURE__ */ React.createElement(React.Fragment, { key: item.key }, renderItem(item));
+      children: (_parentItem$children = parentItem.children) === null || _parentItem$children === void 0 ? void 0 : _parentItem$children.map(function (item) {
+        return /*#__PURE__*/_jsx(React.Fragment, {
+          children: renderItem(item)
+        }, item.key);
       })
-    );
+    });
   }
   return renderItem(dataSourceMap.get(selectedKey));
-};
-export {
-  ProHelpContentPanel
-};
+};

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

@@ -1,79 +1,51 @@
-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;
-};
-
-// src/layout/components/Help/ProHelpDrawer.tsx
-import { Drawer } from "antd";
-import useMergedState from "rc-util/lib/hooks/useMergedState";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["drawerProps"];
+import { Drawer } from 'antd';
+import { useMergedState } from 'rc-util';
 import { ProHelpPanel } from "./ProHelpPanel";
-var ProHelpDrawer = (_a) => {
-  var _b = _a, {
-    drawerProps
-  } = _b, props = __objRest(_b, [
-    "drawerProps"
-  ]);
-  const [drawerOpen, setDrawerOpen] = useMergedState(false, {
-    value: drawerProps.open,
-    onChange: drawerProps.afterOpenChange
-  });
-  return /* @__PURE__ */ React.createElement(
-    Drawer,
-    __spreadProps(__spreadValues({
-      width: 720,
-      closeIcon: null,
-      styles: {
-        header: {
-          display: "none"
-        },
-        body: {
-          padding: 0
-        }
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 渲染一个抽屉，其中显示了一个 ProHelpPanel。
+ * @param drawerProps 要传递给 Drawer 组件的属性。
+ * @param props 要传递给 ProHelpPanel 组件的属性。
+ */
+export var ProHelpDrawer = function ProHelpDrawer(_ref) {
+  var drawerProps = _ref.drawerProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useMergedState = useMergedState(false, {
+      value: drawerProps.open,
+      onChange: drawerProps.afterOpenChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    drawerOpen = _useMergedState2[0],
+    setDrawerOpen = _useMergedState2[1];
+  return /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
+    width: 720,
+    closeIcon: null,
+    styles: {
+      header: {
+        display: 'none'
       },
-      maskClosable: true
-    }, drawerProps), {
-      open: drawerOpen,
-      onClose: () => setDrawerOpen(false),
-      afterOpenChange: (open) => {
-        setDrawerOpen(open);
+      body: {
+        padding: 0
       }
-    }),
-    /* @__PURE__ */ React.createElement(
-      ProHelpPanel,
-      __spreadProps(__spreadValues({}, props), {
-        onClose: () => setDrawerOpen(false),
-        variant: "borderless"
-      })
-    )
-  );
-};
-export {
-  ProHelpDrawer
-};
+    },
+    maskClosable: true
+  }, drawerProps), {}, {
+    open: drawerOpen,
+    onClose: function onClose() {
+      return setDrawerOpen(false);
+    },
+    afterOpenChange: function afterOpenChange(open) {
+      setDrawerOpen(open);
+    },
+    children: /*#__PURE__*/_jsx(ProHelpPanel, _objectSpread(_objectSpread({}, props), {}, {
+      onClose: function onClose() {
+        return setDrawerOpen(false);
+      },
+      variant: "borderless"
+    }))
+  }));
+};

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

@@ -1,77 +1,48 @@
-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;
-};
-
-// src/layout/components/Help/ProHelpModal.tsx
-import { Modal } from "antd";
-import useMergedState from "rc-util/lib/hooks/useMergedState";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["modalProps"];
+import { Modal } from 'antd';
+import { useMergedState } from 'rc-util';
 import { ProHelpPanel } from "./ProHelpPanel";
-var ProHelpModal = (_a) => {
-  var _b = _a, {
-    modalProps
-  } = _b, props = __objRest(_b, [
-    "modalProps"
-  ]);
-  const [modalOpen, setModalOpen] = useMergedState(false, {
-    value: modalProps == null ? void 0 : modalProps.open,
-    onChange: modalProps == null ? void 0 : modalProps.afterClose
-  });
-  return /* @__PURE__ */ React.createElement(
-    Modal,
-    __spreadValues({
-      onCancel: () => {
-        setModalOpen(false);
-      },
-      styles: {
-        body: {
-          margin: -24
-        }
-      },
-      centered: true,
-      closable: false,
-      footer: null,
-      width: 720,
-      open: modalOpen,
-      maskClosable: true
-    }, modalProps),
-    /* @__PURE__ */ React.createElement(
-      ProHelpPanel,
-      __spreadProps(__spreadValues({
-        height: 648
-      }, props), {
-        onClose: () => setModalOpen(false)
-      })
-    )
-  );
-};
-export {
-  ProHelpModal
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 渲染一个模态对话框，其中显示了一个 ProHelpPanel。
+ * @param modalProps 要传递给 Modal 组件的属性。
+ * @param props 要传递给 ProHelpPanel 组件的属性。
+ */
+export var ProHelpModal = function ProHelpModal(_ref) {
+  var modalProps = _ref.modalProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useMergedState = useMergedState(false, {
+      value: modalProps === null || modalProps === void 0 ? void 0 : modalProps.open,
+      onChange: modalProps === null || modalProps === void 0 ? void 0 : modalProps.afterClose
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    modalOpen = _useMergedState2[0],
+    setModalOpen = _useMergedState2[1];
+  return /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
+    onCancel: function onCancel() {
+      setModalOpen(false);
+    },
+    styles: {
+      body: {
+        margin: -24
+      }
+    },
+    centered: true,
+    closable: false,
+    footer: null,
+    width: 720,
+    open: modalOpen,
+    maskClosable: true
+  }, modalProps), {}, {
+    children: /*#__PURE__*/_jsx(ProHelpPanel, _objectSpread(_objectSpread({
+      height: 648
+    }, props), {}, {
+      onClose: function onClose() {
+        return setModalOpen(false);
+      }
+    }))
+  }));
+};