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

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

@@ -1,257 +1,216 @@
-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;
-};
-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/ProHelpPanel.tsx
-import { CloseOutlined, ProfileOutlined } from "@ant-design/icons";
-import { Card, ConfigProvider, Menu } from "antd";
-import useMergedState from "rc-util/lib/hooks/useMergedState";
-import React, { useContext, useMemo, useState } from "react";
+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 = ["title", "variant", "onClose", "footer", "height", "extraRender"];
+import { CloseOutlined, ProfileOutlined } from '@ant-design/icons';
+import { useMergedState } from '@rc-component/util';
+import { Card, ConfigProvider, Menu } from 'antd';
+import React, { useContext, useMemo, useState } from 'react';
 import { ProProvider, isNeedOpenHash } from "../../../provider";
-import { coverToNewToken } from "../../../utils";
 import { ProHelpProvide } from "./HelpProvide";
 import { ProHelpContentPanel } from "./ProHelpContentPanel";
 import { ProHelpSelect } from "./Search";
 import { useStyle } from "./style";
-var SelectKeyProvide = React.createContext({
-  selectedKey: void 0,
-  setSelectedKey: () => {
-  }
+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 SelectKeyProvide = /*#__PURE__*/React.createContext({
+  selectedKey: undefined,
+  setSelectedKey: function setSelectedKey() {}
 });
-var ProHelpPanel = (_a) => {
-  var _b = _a, {
-    title = "帮助中心",
-    variant = "outlined",
-    onClose,
-    footer,
-    height,
-    extraRender
-  } = _b, props = __objRest(_b, [
-    "title",
-    "variant",
-    "onClose",
-    "footer",
-    "height",
-    "extraRender"
-  ]);
-  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const className = getPrefixCls("pro-help");
-  const { wrapSSR, hashId } = useStyle(className);
-  const { dataSource } = useContext(ProHelpProvide);
-  const [selectedKey, setSelectedKey] = useMergedState(
-    void 0,
-    {
+/**
+ * ProHelpPanel 组件是一个帮助中心面板组件，具有可折叠的左侧菜单和右侧帮助内容区域。
+ * 左侧菜单显示了帮助文档的目录结构，右侧帮助内容区域显示了用户选中的帮助文档内容。
+ * 在左侧菜单中，用户可以通过点击目录来选择并显示相应的文档内容。
+ * @param param0
+ * @returns
+ */
+export var 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 = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var className = getPrefixCls('pro-help');
+  var _useStyle = useStyle(className),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var _useContext2 = useContext(ProHelpProvide),
+    dataSource = _useContext2.dataSource;
+  var _useMergedState = useMergedState(undefined, {
       defaultValue: props.defaultSelectedKey,
       value: props.selectedKey,
       onChange: props.onSelectedKeyChange
-    }
-  );
-  const [openKey, setOpenKey] = useState("");
-  const { token } = useContext(ProProvider);
-  const [showLeftPanel, setShowLeftPanel] = useMergedState(true, {
-    value: props.showLeftPanel,
-    onChange: props.onShowLeftPanelChange
-  });
-  const dataSourceKeyMap = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    dataSource.forEach((page) => {
-      var _a3;
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    selectedKey = _useMergedState2[0],
+    setSelectedKey = _useMergedState2[1];
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    openKey = _useState2[0],
+    setOpenKey = _useState2[1];
+  var _useContext3 = useContext(ProProvider),
+    token = _useContext3.token;
+  var _useMergedState3 = useMergedState(true, {
+      value: props.showLeftPanel,
+      onChange: props.onShowLeftPanelChange
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    showLeftPanel = _useMergedState4[0],
+    setShowLeftPanel = _useMergedState4[1];
+  var dataSourceKeyMap = useMemo(function () {
+    var map = new Map();
+    dataSource.forEach(function (page) {
+      var _page$children;
       map.set(page.key, page);
-      (_a3 = page.children) == null ? void 0 : _a3.forEach((item) => {
-        map.set(item.key || item.title, __spreadValues({
+      (_page$children = page.children) === null || _page$children === void 0 || _page$children.forEach(function (item) {
+        map.set(item.key || item.title, _objectSpread({
           parentKey: page.key
         }, item));
       });
     });
     return map;
   }, [dataSource]);
-  const parentKey = useMemo(
-    () => {
-      var _a3;
-      return (_a3 = dataSourceKeyMap.get(selectedKey)) == null ? void 0 : _a3.parentKey;
-    },
-    [dataSourceKeyMap, selectedKey]
-  );
-  const defaultExtraActions = {
-    collapsePanelAction: /* @__PURE__ */ React.createElement("div", { className: `${className}-actions-item ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(
-      ProfileOutlined,
-      {
+  var parentKey = 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 = {
+    collapsePanelAction: /*#__PURE__*/_jsx("div", {
+      className: "".concat(className, "-actions-item ").concat(hashId).trim(),
+      children: /*#__PURE__*/_jsx(ProfileOutlined, {
         title: "collapse panel",
-        onClick: () => {
+        onClick: function onClick() {
           setShowLeftPanel(!showLeftPanel);
         }
+      })
+    }),
+    helpSelectAction: /*#__PURE__*/_jsx(ProHelpSelect, {
+      iconClassName: "".concat(className, "-actions-item"),
+      className: "".concat(hashId, " ").concat(className, "-actions-input"),
+      value: selectedKey,
+      onChange: function onChange(value, item) {
+        setSelectedKey(value);
+        setOpenKey(item === null || item === void 0 ? void 0 : item.dataItemKey);
       }
-    )),
-    helpSelectAction: /* @__PURE__ */ React.createElement(
-      ProHelpSelect,
-      {
-        iconClassName: `${className}-actions-item`,
-        className: `${hashId} ${className}-actions-input`,
-        value: selectedKey,
-        onChange: (value, item) => {
-          setSelectedKey(value);
-          setOpenKey(item == null ? void 0 : item.dataItemKey);
-        }
-      }
-    ),
-    closeAction: /* @__PURE__ */ React.createElement("div", { className: `${className}-actions-item ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(
-      CloseOutlined,
-      {
+    }),
+    closeAction: /*#__PURE__*/_jsx("div", {
+      className: "".concat(className, "-actions-item ").concat(hashId).trim(),
+      children: /*#__PURE__*/_jsx(CloseOutlined, {
         title: "close panel",
-        onClick: () => {
-          onClose == null ? void 0 : onClose();
+        onClick: function onClick() {
+          onClose === null || onClose === void 0 || onClose();
         }
-      }
-    ))
+      })
+    })
   };
-  const extraDomList = () => {
-    return /* @__PURE__ */ React.createElement("div", { className: `${className}-actions ${hashId}`.trim() }, extraRender ? extraRender(
-      defaultExtraActions.collapsePanelAction,
-      defaultExtraActions.helpSelectAction,
-      defaultExtraActions.closeAction
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, onClose ? defaultExtraActions.closeAction : null));
+  var extraDomList = function extraDomList() {
+    return /*#__PURE__*/_jsx("div", {
+      className: "".concat(className, "-actions ").concat(hashId).trim(),
+      children: extraRender ? extraRender(defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, defaultExtraActions.closeAction) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, onClose ? defaultExtraActions.closeAction : null]
+      })
+    });
   };
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement(
-      SelectKeyProvide.Provider,
-      {
-        value: {
-          selectedKey,
-          setSelectedKey
+  return wrapSSR( /*#__PURE__*/_jsx(SelectKeyProvide.Provider, {
+    value: {
+      selectedKey: selectedKey,
+      setSelectedKey: setSelectedKey
+    },
+    children: /*#__PURE__*/_jsxs(Card, {
+      variant: variant,
+      title: title,
+      styles: {
+        body: {
+          display: 'flex',
+          padding: 0,
+          margin: 0,
+          height: '100%',
+          width: '100%'
         }
       },
-      /* @__PURE__ */ React.createElement(
-        Card,
-        {
-          variant,
-          title,
-          styles: {
-            body: {
-              display: "flex",
-              padding: 0,
-              margin: 0,
-              height: "100%",
-              width: "100%"
-            }
-          },
-          size: "small",
-          extra: extraDomList()
+      size: "small",
+      extra: extraDomList(),
+      children: [showLeftPanel ? /*#__PURE__*/_jsx("div", {
+        className: "".concat(hashId, " ").concat(className, "-left-panel "),
+        style: {
+          height: height
         },
-        showLeftPanel ? /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `${hashId} ${className}-left-panel `,
-            style: {
-              height
+        children: /*#__PURE__*/_jsx(ConfigProvider, {
+          theme: {
+            hashed: isNeedOpenHash(),
+            token: {
+              lineHeight: 1.2,
+              fontSize: 12,
+              controlHeightLG: 26
+            },
+            components: {
+              Menu: {
+                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)',
+                itemBg: 'transparent',
+                subMenuItemBg: 'transparent',
+                popupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated,
+                darkPopupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated
+              }
             }
           },
-          /* @__PURE__ */ React.createElement(
-            ConfigProvider,
-            {
-              theme: {
-                hashed: isNeedOpenHash(),
-                token: {
-                  lineHeight: 1.2,
-                  fontSize: 12,
-                  controlHeightLG: 26
-                },
-                components: {
-                  Menu: coverToNewToken({
-                    radiusItem: token.borderRadius,
-                    colorActiveBarWidth: 0,
-                    colorActiveBarBorderSize: 0,
-                    colorItemBgSelected: ((_b2 = (_a2 = token.layout) == null ? void 0 : _a2.sider) == null ? void 0 : _b2.colorBgMenuItemSelected) || "rgba(0, 0, 0, 0.04)",
-                    colorItemBgActive: ((_d = (_c = token.layout) == null ? void 0 : _c.sider) == null ? void 0 : _d.colorBgMenuItemHover) || "rgba(0, 0, 0, 0.04)",
-                    colorItemText: ((_f = (_e = token.layout) == null ? void 0 : _e.sider) == null ? void 0 : _f.colorTextMenu) || "rgba(0, 0, 0, 0.65)",
-                    colorItemTextHover: ((_h = (_g = token.layout) == null ? void 0 : _g.sider) == null ? void 0 : _h.colorTextMenuActive) || "rgba(0, 0, 0, 0.85)",
-                    colorItemTextSelected: ((_j = (_i = token.layout) == null ? void 0 : _i.sider) == null ? void 0 : _j.colorTextMenuSelected) || "rgba(0, 0, 0, 1)",
-                    colorItemBg: "transparent",
-                    colorSubItemBg: "transparent",
-                    popupBg: token == null ? void 0 : token.colorBgElevated,
-                    darkPopupBg: token == null ? void 0 : token.colorBgElevated
-                  })
-                }
-              }
+          children: /*#__PURE__*/_jsx(Menu, {
+            className: "".concat(hashId, " ").concat(className, "-left-panel-menu"),
+            openKeys: [parentKey, openKey],
+            onOpenChange: function onOpenChange(keys) {
+              setOpenKey(keys.at(-1) || '');
             },
-            /* @__PURE__ */ React.createElement(
-              Menu,
-              {
-                className: `${hashId} ${className}-left-panel-menu`,
-                openKeys: [parentKey, openKey],
-                onOpenChange: (keys) => {
-                  setOpenKey(keys.at(-1) || "");
-                },
-                selectedKeys: selectedKey ? [selectedKey] : [],
-                onSelect: ({ selectedKeys }) => {
-                  setSelectedKey(selectedKeys.at(-1) || "");
-                },
-                mode: "inline",
-                items: dataSource.map((item) => {
+            selectedKeys: selectedKey ? [selectedKey] : [],
+            onSelect: function onSelect(_ref2) {
+              var selectedKeys = _ref2.selectedKeys;
+              setSelectedKey(selectedKeys.at(-1) || '');
+            },
+            mode: "inline",
+            items: dataSource.map(function (item) {
+              return {
+                key: item.key,
+                label: item.title,
+                children: item.children.map(function (child) {
                   return {
-                    key: item.key,
-                    label: item.title,
-                    children: item.children.map((child) => {
-                      return {
-                        key: child.key,
-                        label: child.title
-                      };
-                    })
+                    key: child.key,
+                    label: child.title
                   };
                 })
-              }
-            )
-          )
-        ) : null,
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `${hashId} ${className}-content-panel`,
-            style: {
-              height
-            }
-          },
-          selectedKey ? /* @__PURE__ */ React.createElement(
-            ProHelpContentPanel,
-            {
-              parentItem: dataSourceKeyMap.get(parentKey),
-              className: `${className}-content-render`,
-              selectedKey,
-              onScroll: (key) => setSelectedKey(key)
-            }
-          ) : null,
-          footer ? /* @__PURE__ */ React.createElement("div", { className: `${hashId} ${className}-footer` }, footer) : null
-        )
-      )
-    )
-  );
-};
-export {
-  ProHelpPanel,
-  SelectKeyProvide
-};
+              };
+            })
+          })
+        })
+      }) : null, /*#__PURE__*/_jsxs("div", {
+        className: "".concat(hashId, " ").concat(className, "-content-panel"),
+        style: {
+          height: height
+        },
+        children: [selectedKey ? /*#__PURE__*/_jsx(ProHelpContentPanel, {
+          parentItem: dataSourceKeyMap.get(parentKey),
+          className: "".concat(className, "-content-render"),
+          selectedKey: selectedKey,
+          onScroll: function onScroll(key) {
+            return setSelectedKey(key);
+          }
+        }) : null, footer ? /*#__PURE__*/_jsx("div", {
+          className: "".concat(hashId, " ").concat(className, "-footer"),
+          children: footer
+        }) : null]
+      })]
+    })
+  }));
+};

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

@@ -1,67 +1,40 @@
-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/ProHelpPopover.tsx
-import { ConfigProvider, Popover } from "antd";
-import classNames from "classnames";
-import React, { useContext } from "react";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { ConfigProvider, Popover } from 'antd';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
 import { ProProvider } from "../../../provider";
 import { ProHelpContentPanel } from "./ProHelpContentPanel";
 import { useStyle } from "./style";
-var ProHelpPopover = (props) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const className = getPrefixCls("pro-help");
-  const { hashId } = useContext(ProProvider);
-  const { wrapSSR } = useStyle(className);
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement(
-      Popover,
-      __spreadValues({
-        styles: {
-          body: {
-            padding: 0
-          }
-        },
-        content: /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classNames(
-              `${className}-popover-content`,
-              hashId,
-              props.popoverContextClassName
-            )
-          },
-          /* @__PURE__ */ React.createElement(ProHelpContentPanel, { selectedKey: props.selectedKey })
-        )
-      }, props.popoverProps),
-      /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: classNames(
-            `${className}-popover-text`,
-            hashId,
-            props.textClassName
-          )
-        },
-        props.children
-      )
-    )
-  );
-};
-export {
-  ProHelpPopover
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 渲染一个弹出式提示框，其中显示了一个ProHelpContentPanel，展示帮助文案的详情
+ * @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({
+    styles: {
+      body: {
+        padding: 0
+      }
+    },
+    content: /*#__PURE__*/_jsx("div", {
+      className: classNames("".concat(className, "-popover-content"), hashId, props.popoverContextClassName),
+      children: /*#__PURE__*/_jsx(ProHelpContentPanel, {
+        selectedKey: props.selectedKey
+      })
+    })
+  }, props.popoverProps), {}, {
+    children: /*#__PURE__*/_jsx("span", {
+      className: classNames("".concat(className, "-popover-text"), hashId, props.textClassName),
+      children: props.children
+    })
+  })));
+};