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

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

@@ -1,17 +1,12 @@
 "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.ProPageHeader = exports.ProBreadcrumb = exports.PageContainer = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _RouteContext = require("../../context/RouteContext");
@@ -22,10 +17,8 @@ var _PageLoading = require("../PageLoading");
 var _style = require("./style");
 var _stylish = require("./style/stylish");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["title", "content", "pageHeaderRender", "header", "prefixedClassName", "extraContent", "childrenContentStyle", "style", "prefixCls", "hashId", "value", "breadcrumbRender"],
-  _excluded2 = ["children", "loading", "className", "style", "footer", "affixProps", "token", "fixedHeader", "breadcrumbRender", "footerToolBarProps", "childrenContentStyle"];
 function genLoading(spinProps) {
-  if ((0, _typeof2.default)(spinProps) === 'object') {
+  if (typeof spinProps === 'object') {
     return spinProps;
   }
   return {
@@ -37,51 +30,50 @@ function genLoading(spinProps) {
  * Render Footer tabList In order to be compatible with the old version of the PageHeader basically
  * all the functions are implemented.
  */
-var renderFooter = function renderFooter(_ref) {
-  var tabList = _ref.tabList,
-    tabActiveKey = _ref.tabActiveKey,
-    onTabChange = _ref.onTabChange,
-    hashId = _ref.hashId,
-    tabBarExtraContent = _ref.tabBarExtraContent,
-    tabProps = _ref.tabProps,
-    prefixedClassName = _ref.prefixedClassName;
+const renderFooter = ({
+  tabList,
+  tabActiveKey,
+  onTabChange,
+  hashId,
+  tabBarExtraContent,
+  tabProps,
+  prefixedClassName
+}) => {
   if (Array.isArray(tabList) || tabBarExtraContent) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, (0, _objectSpread2.default)({
-      className: "".concat(prefixedClassName, "-tabs ").concat(hashId).trim(),
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
+      className: `${prefixedClassName}-tabs ${hashId}`.trim(),
       activeKey: tabActiveKey,
-      onChange: function onChange(key) {
+      onChange: key => {
         if (onTabChange) {
           onTabChange(key);
         }
       },
       tabBarExtraContent: tabBarExtraContent,
-      items: tabList === null || tabList === void 0 ? void 0 : tabList.map(function (item, index) {
-        var _item$key;
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({
-          label: item.tab
-        }, item), {}, {
-          key: ((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) || (index === null || index === void 0 ? void 0 : index.toString())
-        });
-      })
-    }, tabProps));
+      items: tabList?.map((item, index) => ({
+        label: item.tab,
+        ...item,
+        key: item.key?.toString() || index?.toString()
+      })),
+      ...tabProps
+    });
   }
   return null;
 };
-var renderPageHeader = function renderPageHeader(content, extraContent, prefixedClassName, hashId) {
+const renderPageHeader = (content, extraContent, prefixedClassName, hashId) => {
   if (!content && !extraContent) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "".concat(prefixedClassName, "-detail ").concat(hashId).trim(),
+    className: `${prefixedClassName}-detail ${hashId}`.trim(),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(prefixedClassName, "-main ").concat(hashId).trim(),
+      className: `${prefixedClassName}-main ${hashId}`.trim(),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "".concat(prefixedClassName, "-row ").concat(hashId).trim(),
+        className: `${prefixedClassName}-row ${hashId}`.trim(),
         children: [content && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefixedClassName, "-content ").concat(hashId).trim(),
+          className: `${prefixedClassName}-content ${hashId}`.trim(),
           children: content
         }), extraContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefixedClassName, "-extraContent ").concat(hashId).trim(),
+          className: `${prefixedClassName}-extraContent ${hashId}`.trim(),
           children: extraContent
         })]
       })
@@ -95,33 +87,39 @@ var renderPageHeader = function renderPageHeader(content, extraContent, prefixed
  * @param props
  * @returns
  */
-var ProBreadcrumb = exports.ProBreadcrumb = function ProBreadcrumb(props) {
-  var value = (0, _react.useContext)(_RouteContext.RouteContext);
+const ProBreadcrumb = props => {
+  const value = (0, _react.useContext)(_RouteContext.RouteContext);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
       height: '100%',
       display: 'flex',
       alignItems: 'center'
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Breadcrumb, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, value === null || value === void 0 ? void 0 : value.breadcrumb), value === null || value === void 0 ? void 0 : value.breadcrumbProps), props))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Breadcrumb, {
+      ...value?.breadcrumb,
+      ...value?.breadcrumbProps,
+      ...props
+    })
   });
 };
-var memoRenderPageHeader = function memoRenderPageHeader(props) {
-  var _breadcrumb$items;
-  var title = props.title,
-    content = props.content,
-    pageHeaderRender = props.pageHeaderRender,
-    header = props.header,
-    prefixedClassName = props.prefixedClassName,
-    extraContent = props.extraContent,
-    childrenContentStyle = props.childrenContentStyle,
-    style = props.style,
-    prefixCls = props.prefixCls,
-    hashId = props.hashId,
-    value = props.value,
-    breadcrumbRender = props.breadcrumbRender,
-    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var getBreadcrumbRender = function getBreadcrumbRender() {
+exports.ProBreadcrumb = ProBreadcrumb;
+const memoRenderPageHeader = props => {
+  const {
+    title,
+    content,
+    pageHeaderRender,
+    header,
+    prefixedClassName,
+    extraContent,
+    childrenContentStyle,
+    style,
+    prefixCls,
+    hashId,
+    value,
+    breadcrumbRender,
+    ...restProps
+  } = props;
+  const getBreadcrumbRender = () => {
     if (!breadcrumbRender) {
       return undefined;
     }
@@ -132,97 +130,103 @@ var memoRenderPageHeader = function memoRenderPageHeader(props) {
   }
   if (pageHeaderRender) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [" ", pageHeaderRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), value))]
+      children: [" ", pageHeaderRender({
+        ...props,
+        ...value
+      })]
     });
   }
-  var pageHeaderTitle = title;
+  let pageHeaderTitle = title;
   if (!title && title !== false) {
     pageHeaderTitle = value.title;
   }
-  var pageHeaderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
-    title: pageHeaderTitle
-  }, restProps), {}, {
-    footer: renderFooter((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
-      hashId: hashId,
-      breadcrumbRender: breadcrumbRender,
-      prefixedClassName: prefixedClassName
-    }))
-  }, header);
-  var _ref2 = pageHeaderProps,
-    breadcrumb = _ref2.breadcrumb;
-  var noHasBreadCrumb = (!breadcrumb || !(breadcrumb !== null && breadcrumb !== void 0 && breadcrumb.itemRender) && !(breadcrumb !== null && breadcrumb !== void 0 && (_breadcrumb$items = breadcrumb.items) !== null && _breadcrumb$items !== void 0 && _breadcrumb$items.length)) && !breadcrumbRender;
-  if (['title', 'subTitle', 'extra', 'tags', 'footer', 'avatar', 'backIcon'].every(function (item) {
-    return !pageHeaderProps[item];
-  }) && noHasBreadCrumb && !content && !extraContent) {
+  const pageHeaderProps = {
+    ...value,
+    title: pageHeaderTitle,
+    ...restProps,
+    footer: renderFooter({
+      ...restProps,
+      hashId,
+      breadcrumbRender,
+      prefixedClassName
+    }),
+    ...header
+  };
+  const {
+    breadcrumb
+  } = pageHeaderProps;
+  const noHasBreadCrumb = (!breadcrumb || !breadcrumb?.itemRender && !breadcrumb?.items?.length) && !breadcrumbRender;
+  if (['title', 'subTitle', 'extra', 'tags', 'footer', 'avatar', 'backIcon'].every(item => !pageHeaderProps[item]) && noHasBreadCrumb && !content && !extraContent) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageHeader.PageHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageHeaderProps), {}, {
-    className: "".concat(prefixedClassName, "-warp-page-header ").concat(hashId).trim(),
-    breadcrumb: breadcrumbRender === false ? undefined : (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageHeaderProps.breadcrumb), value.breadcrumbProps),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageHeader.PageHeader, {
+    ...pageHeaderProps,
+    className: `${prefixedClassName}-warp-page-header ${hashId}`.trim(),
+    breadcrumb: breadcrumbRender === false ? undefined : {
+      ...pageHeaderProps.breadcrumb,
+      ...value.breadcrumbProps
+    },
     breadcrumbRender: getBreadcrumbRender(),
     prefixCls: prefixCls,
-    children: (header === null || header === void 0 ? void 0 : header.children) || renderPageHeader(content, extraContent, prefixedClassName, hashId)
-  }));
+    children: header?.children || renderPageHeader(content, extraContent, prefixedClassName, hashId)
+  });
 };
-var PageContainerBase = function PageContainerBase(props) {
-  var _restProps$header2, _token$layout;
-  var children = props.children,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    className = props.className,
-    style = props.style,
-    footer = props.footer,
-    affixProps = props.affixProps,
-    propsToken = props.token,
-    fixedHeader = props.fixedHeader,
-    breadcrumbRender = props.breadcrumbRender,
-    footerToolBarProps = props.footerToolBarProps,
-    childrenContentStyle = props.childrenContentStyle,
-    restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
-  var value = (0, _react.useContext)(_RouteContext.RouteContext);
+const PageContainerBase = props => {
+  const {
+    children,
+    loading = false,
+    className,
+    style,
+    footer,
+    affixProps,
+    token: propsToken,
+    fixedHeader,
+    breadcrumbRender,
+    footerToolBarProps,
+    childrenContentStyle,
+    ...restProps
+  } = props;
+  const value = (0, _react.useContext)(_RouteContext.RouteContext);
   /** 告诉 props 是否存在 footerBar */
-  (0, _react.useEffect)(function () {
-    var _value$setHasPageCont;
-    if (!value || !(value !== null && value !== void 0 && value.setHasPageContainer)) {
-      return function () {};
+  (0, _react.useEffect)(() => {
+    if (!value || !value?.setHasPageContainer) {
+      return () => {};
     }
-    value === null || value === void 0 || (_value$setHasPageCont = value.setHasPageContainer) === null || _value$setHasPageCont === void 0 || _value$setHasPageCont.call(value, function (num) {
-      return num + 1;
-    });
-    return function () {
-      var _value$setHasPageCont2;
-      value === null || value === void 0 || (_value$setHasPageCont2 = value.setHasPageContainer) === null || _value$setHasPageCont2 === void 0 || _value$setHasPageCont2.call(value, function (num) {
-        return num - 1;
-      });
+    value?.setHasPageContainer?.(num => num + 1);
+    return () => {
+      value?.setHasPageContainer?.(num => num - 1);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var _useContext = (0, _react.useContext)(_provider.ProProvider),
-    token = _useContext.token;
-  var _useContext2 = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext2.getPrefixCls;
-  var prefixCls = props.prefixCls || getPrefixCls('pro');
-  var basePageContainer = "".concat(prefixCls, "-page-container");
-  var _useStyle = (0, _style.useStyle)(basePageContainer, propsToken),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var stylish = (0, _stylish.useStylish)("".concat(basePageContainer, ".").concat(basePageContainer, "-stylish"), {
+  const {
+    token
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = props.prefixCls || getPrefixCls('pro');
+  const basePageContainer = `${prefixCls}-page-container`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(basePageContainer, propsToken);
+  const stylish = (0, _stylish.useStylish)(`${basePageContainer}.${basePageContainer}-stylish`, {
     stylish: props.stylish
   });
-  var memoBreadcrumbRender = (0, _react.useMemo)(function () {
-    var _restProps$header;
+  const memoBreadcrumbRender = (0, _react.useMemo)(() => {
     if (breadcrumbRender == false) return false;
-    return breadcrumbRender || (restProps === null || restProps === void 0 || (_restProps$header = restProps.header) === null || _restProps$header === void 0 ? void 0 : _restProps$header.breadcrumbRender);
-  }, [breadcrumbRender, restProps === null || restProps === void 0 || (_restProps$header2 = restProps.header) === null || _restProps$header2 === void 0 ? void 0 : _restProps$header2.breadcrumbRender]);
-  var pageHeaderDom = memoRenderPageHeader((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+    return breadcrumbRender || restProps?.header?.breadcrumbRender;
+  }, [breadcrumbRender, restProps?.header?.breadcrumbRender]);
+  const pageHeaderDom = memoRenderPageHeader({
+    ...restProps,
     breadcrumbRender: memoBreadcrumbRender,
     ghost: true,
-    hashId: hashId,
+    hashId,
     prefixCls: undefined,
     prefixedClassName: basePageContainer,
-    value: value
-  }));
-  var loadingDom = (0, _react.useMemo)(function () {
+    value
+  });
+  const loadingDom = (0, _react.useMemo)(() => {
     // 当loading时一个合法的ReactNode时，说明用户使用了自定义loading,直接返回改自定义loading
     if ( /*#__PURE__*/_react.default.isValidElement(loading)) {
       return loading;
@@ -232,31 +236,43 @@ var PageContainerBase = function PageContainerBase(props) {
       return null;
     }
     // 如非上述两种情况，那么要么用户传了一个true,要么用户传了loading配置，使用genLoading生成loading配置后返回PageLoading
-    var spinProps = genLoading(loading);
+    const spinProps = genLoading(loading);
     // 如果传的是loading配置，但spinning传的是false，也不需要显示loading
-    return spinProps.spinning ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageLoading.PageLoading, (0, _objectSpread2.default)({}, spinProps)) : null;
+    return spinProps.spinning ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageLoading.PageLoading, {
+      ...spinProps
+    }) : null;
   }, [loading]);
-  var content = (0, _react.useMemo)(function () {
+  const content = (0, _react.useMemo)(() => {
     return children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames.default)(hashId, "".concat(basePageContainer, "-children-container"), (0, _defineProperty2.default)({}, "".concat(basePageContainer, "-children-container-no-header"), !pageHeaderDom)),
+        className: (0, _clsx.clsx)(hashId, `${basePageContainer}-children-container`, {
+          [`${basePageContainer}-children-container-no-header`]: !pageHeaderDom
+        }),
         style: childrenContentStyle,
         children: children
       })
     }) : null;
   }, [children, basePageContainer, childrenContentStyle, hashId]);
-  var renderContentDom = (0, _react.useMemo)(function () {
+  const renderContentDom = (0, _react.useMemo)(() => {
     // 只要loadingDom非空我们就渲染loadingDom,否则渲染内容
-    var dom = loadingDom || content;
+    const dom = loadingDom || content;
     if (props.waterMarkProps || value.waterMarkProps) {
-      var waterMarkProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value.waterMarkProps), props.waterMarkProps);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Watermark, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, waterMarkProps), {}, {
+      const waterMarkProps = {
+        ...value.waterMarkProps,
+        ...props.waterMarkProps
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Watermark, {
+        ...waterMarkProps,
         children: dom
-      }));
+      });
     }
     return dom;
   }, [props.waterMarkProps, value.waterMarkProps, loadingDom, content]);
-  var containerClassName = (0, _classnames.default)(basePageContainer, hashId, className, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(basePageContainer, "-with-footer"), footer), "".concat(basePageContainer, "-with-affix"), fixedHeader && pageHeaderDom), "".concat(basePageContainer, "-stylish"), !!restProps.stylish));
+  const containerClassName = (0, _clsx.clsx)(basePageContainer, hashId, className, {
+    [`${basePageContainer}-with-footer`]: footer,
+    [`${basePageContainer}-with-affix`]: fixedHeader && pageHeaderDom,
+    [`${basePageContainer}-stylish`]: !!restProps.stylish
+  });
   return wrapSSR(stylish.wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: style,
@@ -264,35 +280,40 @@ var PageContainerBase = function PageContainerBase(props) {
       children: [fixedHeader && pageHeaderDom ?
       /*#__PURE__*/
       // 在 hasHeader 且 fixedHeader 的情况下，才需要设置高度
-      (0, _jsxRuntime.jsx)(_antd.Affix, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        offsetTop: value.hasHeader && value.fixedHeader ? (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader : 1
-      }, affixProps), {}, {
-        className: "".concat(basePageContainer, "-affix ").concat(hashId).trim(),
+      (0, _jsxRuntime.jsx)(_antd.Affix, {
+        offsetTop: value.hasHeader && value.fixedHeader ? token.layout?.header?.heightLayoutHeader : 1,
+        ...affixProps,
+        className: `${basePageContainer}-affix ${hashId}`.trim(),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(basePageContainer, "-warp ").concat(hashId).trim(),
+          className: `${basePageContainer}-warp ${hashId}`.trim(),
           children: pageHeaderDom
         })
-      })) : pageHeaderDom, renderContentDom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContent.GridContent, {
+      }) : pageHeaderDom, renderContentDom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContent.GridContent, {
         children: renderContentDom
       })]
-    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterToolbar.FooterToolbar, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterToolbar.FooterToolbar, {
       stylish: restProps.footerStylish,
-      prefixCls: prefixCls
-    }, footerToolBarProps), {}, {
+      prefixCls: prefixCls,
+      ...footerToolBarProps,
       children: footer
-    }))]
+    })]
   })));
 };
-var PageContainer = exports.PageContainer = function PageContainer(props) {
+const PageContainer = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
     needDeps: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PageContainerBase, (0, _objectSpread2.default)({}, props))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PageContainerBase, {
+      ...props
+    })
   });
 };
-var ProPageHeader = exports.ProPageHeader = function ProPageHeader(props) {
-  var value = (0, _react.useContext)(_RouteContext.RouteContext);
-  return memoRenderPageHeader((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+exports.PageContainer = PageContainer;
+const ProPageHeader = props => {
+  const value = (0, _react.useContext)(_RouteContext.RouteContext);
+  return memoRenderPageHeader({
+    ...props,
     hashId: '',
-    value: value
-  }));
-};
+    value
+  });
+};
+exports.ProPageHeader = ProPageHeader;