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

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

@@ -1,45 +1,12 @@
-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/PageContainer/index.tsx
-import {
-  Affix,
-  Breadcrumb,
-  ConfigProvider,
-  Tabs,
-  Watermark
-} from "antd";
-import classNames from "classnames";
-import React, { useContext, useEffect, useMemo } from "react";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+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"];
+import { Affix, Breadcrumb, ConfigProvider, Tabs, Watermark } from 'antd';
+import classNames from 'classnames';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { ProConfigProvider, ProProvider } from "../../../provider";
 import { RouteContext } from "../../context/RouteContext";
 import { FooterToolbar } from "../FooterToolbar";
@@ -48,107 +15,109 @@ import { PageHeader } from "../PageHeader";
 import { PageLoading } from "../PageLoading";
 import { useStyle } from "./style";
 import { useStylish } from "./style/stylish";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 function genLoading(spinProps) {
-  if (typeof spinProps === "object") {
+  if (_typeof(spinProps) === 'object') {
     return spinProps;
   }
-  return { spinning: spinProps };
+  return {
+    spinning: spinProps
+  };
 }
-var renderFooter = ({
-  tabList,
-  tabActiveKey,
-  onTabChange,
-  hashId,
-  tabBarExtraContent,
-  tabProps,
-  prefixedClassName
-}) => {
+
+/**
+ * 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;
   if (Array.isArray(tabList) || tabBarExtraContent) {
-    return /* @__PURE__ */ React.createElement(
-      Tabs,
-      __spreadValues({
-        className: `${prefixedClassName}-tabs ${hashId}`.trim(),
-        activeKey: tabActiveKey,
-        onChange: (key) => {
-          if (onTabChange) {
-            onTabChange(key);
-          }
-        },
-        tabBarExtraContent,
-        items: tabList == null ? void 0 : tabList.map((item, index) => {
-          var _a;
-          return __spreadProps(__spreadValues({
-            label: item.tab
-          }, item), {
-            key: ((_a = item.key) == null ? void 0 : _a.toString()) || (index == null ? void 0 : index.toString())
-          });
-        })
-      }, tabProps)
-    );
+    return /*#__PURE__*/_jsx(Tabs, _objectSpread({
+      className: "".concat(prefixedClassName, "-tabs ").concat(hashId).trim(),
+      activeKey: tabActiveKey,
+      onChange: function 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 _objectSpread(_objectSpread({
+          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));
   }
   return null;
 };
-var renderPageHeader = (content, extraContent, prefixedClassName, hashId) => {
+var renderPageHeader = function renderPageHeader(content, extraContent, prefixedClassName, hashId) {
   if (!content && !extraContent) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement("div", { className: `${prefixedClassName}-detail ${hashId}`.trim() }, /* @__PURE__ */ React.createElement("div", { className: `${prefixedClassName}-main ${hashId}`.trim() }, /* @__PURE__ */ React.createElement("div", { className: `${prefixedClassName}-row ${hashId}`.trim() }, content && /* @__PURE__ */ React.createElement("div", { className: `${prefixedClassName}-content ${hashId}`.trim() }, content), extraContent && /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `${prefixedClassName}-extraContent ${hashId}`.trim()
-    },
-    extraContent
-  ))));
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(prefixedClassName, "-detail ").concat(hashId).trim(),
+    children: /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixedClassName, "-main ").concat(hashId).trim(),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "".concat(prefixedClassName, "-row ").concat(hashId).trim(),
+        children: [content && /*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixedClassName, "-content ").concat(hashId).trim(),
+          children: content
+        }), extraContent && /*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixedClassName, "-extraContent ").concat(hashId).trim(),
+          children: extraContent
+        })]
+      })
+    })
+  });
 };
-var ProBreadcrumb = (props) => {
-  const value = useContext(RouteContext);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        height: "100%",
-        display: "flex",
-        alignItems: "center"
-      }
+
+/**
+ * 配置与面包屑相同，只是增加了自动根据路由计算面包屑的功能。此功能必须要在 ProLayout 中使用。
+ *
+ * @param props
+ * @returns
+ */
+var ProBreadcrumb = function ProBreadcrumb(props) {
+  var value = useContext(RouteContext);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center'
     },
-    /* @__PURE__ */ React.createElement(
-      Breadcrumb,
-      __spreadValues(__spreadValues(__spreadValues({}, value == null ? void 0 : value.breadcrumb), value == null ? void 0 : value.breadcrumbProps), props)
-    )
-  );
+    children: /*#__PURE__*/_jsx(Breadcrumb, _objectSpread(_objectSpread(_objectSpread({}, value === null || value === void 0 ? void 0 : value.breadcrumb), value === null || value === void 0 ? void 0 : value.breadcrumbProps), props))
+  });
 };
-var memoRenderPageHeader = (props) => {
-  var _b;
-  const _a = props, {
-    title,
-    content,
-    pageHeaderRender,
-    header,
-    prefixedClassName,
-    extraContent,
-    childrenContentStyle,
-    style,
-    prefixCls,
-    hashId,
-    value,
-    breadcrumbRender
-  } = _a, restProps = __objRest(_a, [
-    "title",
-    "content",
-    "pageHeaderRender",
-    "header",
-    "prefixedClassName",
-    "extraContent",
-    "childrenContentStyle",
-    "style",
-    "prefixCls",
-    "hashId",
-    "value",
-    "breadcrumbRender"
-  ]);
-  const getBreadcrumbRender = () => {
+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 = _objectWithoutProperties(props, _excluded);
+  var getBreadcrumbRender = function getBreadcrumbRender() {
     if (!breadcrumbRender) {
-      return void 0;
+      return undefined;
     }
     return breadcrumbRender;
   };
@@ -156,185 +125,169 @@ var memoRenderPageHeader = (props) => {
     return null;
   }
   if (pageHeaderRender) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, " ", pageHeaderRender(__spreadValues(__spreadValues({}, props), value)));
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [" ", pageHeaderRender(_objectSpread(_objectSpread({}, props), value))]
+    });
   }
-  let pageHeaderTitle = title;
+  var pageHeaderTitle = title;
   if (!title && title !== false) {
     pageHeaderTitle = value.title;
   }
-  const pageHeaderProps = __spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, value), {
+  var pageHeaderProps = _objectSpread(_objectSpread(_objectSpread({}, value), {}, {
     title: pageHeaderTitle
-  }), restProps), {
-    footer: renderFooter(__spreadProps(__spreadValues({}, restProps), {
-      hashId,
-      breadcrumbRender,
-      prefixedClassName
+  }, restProps), {}, {
+    footer: renderFooter(_objectSpread(_objectSpread({}, restProps), {}, {
+      hashId: hashId,
+      breadcrumbRender: breadcrumbRender,
+      prefixedClassName: prefixedClassName
     }))
-  }), header);
-  const { breadcrumb } = pageHeaderProps;
-  const noHasBreadCrumb = (!breadcrumb || !(breadcrumb == null ? void 0 : breadcrumb.itemRender) && !((_b = breadcrumb == null ? void 0 : breadcrumb.items) == null ? void 0 : _b.length)) && !breadcrumbRender;
-  if ([
-    "title",
-    "subTitle",
-    "extra",
-    "tags",
-    "footer",
-    "avatar",
-    "backIcon"
-  ].every((item) => !pageHeaderProps[item]) && noHasBreadCrumb && !content && !extraContent) {
+  }, 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) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(
-    PageHeader,
-    __spreadProps(__spreadValues({}, pageHeaderProps), {
-      className: `${prefixedClassName}-warp-page-header ${hashId}`.trim(),
-      breadcrumb: breadcrumbRender === false ? void 0 : __spreadValues(__spreadValues({}, pageHeaderProps.breadcrumb), value.breadcrumbProps),
-      breadcrumbRender: getBreadcrumbRender(),
-      prefixCls
-    }),
-    (header == null ? void 0 : header.children) || renderPageHeader(content, extraContent, prefixedClassName, hashId)
-  );
+  return /*#__PURE__*/_jsx(PageHeader, _objectSpread(_objectSpread({}, pageHeaderProps), {}, {
+    className: "".concat(prefixedClassName, "-warp-page-header ").concat(hashId).trim(),
+    breadcrumb: breadcrumbRender === false ? undefined : _objectSpread(_objectSpread({}, pageHeaderProps.breadcrumb), value.breadcrumbProps),
+    breadcrumbRender: getBreadcrumbRender(),
+    prefixCls: prefixCls,
+    children: (header === null || header === void 0 ? void 0 : header.children) || renderPageHeader(content, extraContent, prefixedClassName, hashId)
+  }));
 };
-var PageContainerBase = (props) => {
-  var _b, _c, _d;
-  const _a = props, {
-    children,
-    loading = false,
-    className,
-    style,
-    footer,
-    affixProps,
-    token: propsToken,
-    fixedHeader,
-    breadcrumbRender,
-    footerToolBarProps,
-    childrenContentStyle
-  } = _a, restProps = __objRest(_a, [
-    "children",
-    "loading",
-    "className",
-    "style",
-    "footer",
-    "affixProps",
-    "token",
-    "fixedHeader",
-    "breadcrumbRender",
-    "footerToolBarProps",
-    "childrenContentStyle"
-  ]);
-  const value = useContext(RouteContext);
-  useEffect(() => {
-    var _a2;
-    if (!value || !(value == null ? void 0 : value.setHasPageContainer)) {
-      return () => {
-      };
+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 = _objectWithoutProperties(props, _excluded2);
+  var value = useContext(RouteContext);
+  /** 告诉 props 是否存在 footerBar */
+  useEffect(function () {
+    var _value$setHasPageCont;
+    if (!value || !(value !== null && value !== void 0 && value.setHasPageContainer)) {
+      return function () {};
     }
-    (_a2 = value == null ? void 0 : value.setHasPageContainer) == null ? void 0 : _a2.call(value, (num) => num + 1);
-    return () => {
-      var _a3;
-      (_a3 = value == null ? void 0 : value.setHasPageContainer) == null ? void 0 : _a3.call(value, (num) => num - 1);
+    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;
+      });
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const { token } = useContext(ProProvider);
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = props.prefixCls || getPrefixCls("pro");
-  const basePageContainer = `${prefixCls}-page-container`;
-  const { wrapSSR, hashId } = useStyle(basePageContainer, propsToken);
-  const stylish = useStylish(
-    `${basePageContainer}.${basePageContainer}-stylish`,
-    {
-      stylish: props.stylish
-    }
-  );
-  const memoBreadcrumbRender = useMemo(() => {
-    var _a2;
-    if (breadcrumbRender == false)
-      return false;
-    return breadcrumbRender || ((_a2 = restProps == null ? void 0 : restProps.header) == null ? void 0 : _a2.breadcrumbRender);
-  }, [breadcrumbRender, (_b = restProps == null ? void 0 : restProps.header) == null ? void 0 : _b.breadcrumbRender]);
-  const pageHeaderDom = memoRenderPageHeader(__spreadProps(__spreadValues({}, restProps), {
+  var _useContext = useContext(ProProvider),
+    token = _useContext.token;
+  var _useContext2 = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext2.getPrefixCls;
+  var prefixCls = props.prefixCls || getPrefixCls('pro');
+  var basePageContainer = "".concat(prefixCls, "-page-container");
+  var _useStyle = useStyle(basePageContainer, propsToken),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var stylish = useStylish("".concat(basePageContainer, ".").concat(basePageContainer, "-stylish"), {
+    stylish: props.stylish
+  });
+  var memoBreadcrumbRender = useMemo(function () {
+    var _restProps$header;
+    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(_objectSpread(_objectSpread({}, restProps), {}, {
     breadcrumbRender: memoBreadcrumbRender,
     ghost: true,
-    hashId,
-    prefixCls: void 0,
+    hashId: hashId,
+    prefixCls: undefined,
     prefixedClassName: basePageContainer,
-    value
+    value: value
   }));
-  const loadingDom = useMemo(() => {
-    if (React.isValidElement(loading)) {
+  var loadingDom = useMemo(function () {
+    // 当loading时一个合法的ReactNode时，说明用户使用了自定义loading,直接返回改自定义loading
+    if ( /*#__PURE__*/React.isValidElement(loading)) {
       return loading;
     }
-    if (typeof loading === "boolean" && !loading) {
+    // 当传递过来的是布尔值，并且为false时，说明不需要显示loading,返回null
+    if (typeof loading === 'boolean' && !loading) {
       return null;
     }
-    const spinProps = genLoading(loading);
-    return spinProps.spinning ? /* @__PURE__ */ React.createElement(PageLoading, __spreadValues({}, spinProps)) : null;
+    // 如非上述两种情况，那么要么用户传了一个true,要么用户传了loading配置，使用genLoading生成loading配置后返回PageLoading
+    var spinProps = genLoading(loading);
+    // 如果传的是loading配置，但spinning传的是false，也不需要显示loading
+    return spinProps.spinning ? /*#__PURE__*/_jsx(PageLoading, _objectSpread({}, spinProps)) : null;
   }, [loading]);
-  const content = useMemo(() => {
-    return children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classNames(
-          hashId,
-          `${basePageContainer}-children-container`,
-          {
-            [`${basePageContainer}-children-container-no-header`]: !pageHeaderDom
-          }
-        ),
-        style: childrenContentStyle
-      },
-      children
-    )) : null;
+  var content = useMemo(function () {
+    return children ? /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx("div", {
+        className: classNames(hashId, "".concat(basePageContainer, "-children-container"), _defineProperty({}, "".concat(basePageContainer, "-children-container-no-header"), !pageHeaderDom)),
+        style: childrenContentStyle,
+        children: children
+      })
+    }) : null;
   }, [children, basePageContainer, childrenContentStyle, hashId]);
-  const renderContentDom = useMemo(() => {
-    const dom = loadingDom || content;
+  var renderContentDom = useMemo(function () {
+    // 只要loadingDom非空我们就渲染loadingDom,否则渲染内容
+    var dom = loadingDom || content;
     if (props.waterMarkProps || value.waterMarkProps) {
-      const waterMarkProps = __spreadValues(__spreadValues({}, value.waterMarkProps), props.waterMarkProps);
-      return /* @__PURE__ */ React.createElement(Watermark, __spreadValues({}, waterMarkProps), dom);
+      var waterMarkProps = _objectSpread(_objectSpread({}, value.waterMarkProps), props.waterMarkProps);
+      return /*#__PURE__*/_jsx(Watermark, _objectSpread(_objectSpread({}, waterMarkProps), {}, {
+        children: dom
+      }));
     }
     return dom;
   }, [props.waterMarkProps, value.waterMarkProps, loadingDom, content]);
-  const containerClassName = classNames(basePageContainer, hashId, className, {
-    [`${basePageContainer}-with-footer`]: footer,
-    [`${basePageContainer}-with-affix`]: fixedHeader && pageHeaderDom,
-    [`${basePageContainer}-stylish`]: !!restProps.stylish
-  });
-  return wrapSSR(
-    stylish.wrapSSR(
-      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style, className: containerClassName }, fixedHeader && pageHeaderDom ? (
-        // 在 hasHeader 且 fixedHeader 的情况下，才需要设置高度
-        /* @__PURE__ */ React.createElement(
-          Affix,
-          __spreadProps(__spreadValues({
-            offsetTop: value.hasHeader && value.fixedHeader ? (_d = (_c = token.layout) == null ? void 0 : _c.header) == null ? void 0 : _d.heightLayoutHeader : 1
-          }, affixProps), {
-            className: `${basePageContainer}-affix ${hashId}`.trim()
-          }),
-          /* @__PURE__ */ React.createElement("div", { className: `${basePageContainer}-warp ${hashId}`.trim() }, pageHeaderDom)
-        )
-      ) : pageHeaderDom, renderContentDom && /* @__PURE__ */ React.createElement(GridContent, null, renderContentDom)), footer && /* @__PURE__ */ React.createElement(
-        FooterToolbar,
-        __spreadValues({
-          stylish: restProps.footerStylish,
-          prefixCls
-        }, footerToolBarProps),
-        footer
-      ))
-    )
-  );
+  var containerClassName = classNames(basePageContainer, hashId, className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(basePageContainer, "-with-footer"), footer), "".concat(basePageContainer, "-with-affix"), fixedHeader && pageHeaderDom), "".concat(basePageContainer, "-stylish"), !!restProps.stylish));
+  return wrapSSR(stylish.wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: style,
+      className: containerClassName,
+      children: [fixedHeader && pageHeaderDom ?
+      /*#__PURE__*/
+      // 在 hasHeader 且 fixedHeader 的情况下，才需要设置高度
+      _jsx(Affix, _objectSpread(_objectSpread({
+        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(),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "".concat(basePageContainer, "-warp ").concat(hashId).trim(),
+          children: pageHeaderDom
+        })
+      })) : pageHeaderDom, renderContentDom && /*#__PURE__*/_jsx(GridContent, {
+        children: renderContentDom
+      })]
+    }), footer && /*#__PURE__*/_jsx(FooterToolbar, _objectSpread(_objectSpread({
+      stylish: restProps.footerStylish,
+      prefixCls: prefixCls
+    }, footerToolBarProps), {}, {
+      children: footer
+    }))]
+  })));
 };
-var PageContainer = (props) => {
-  return /* @__PURE__ */ React.createElement(ProConfigProvider, { needDeps: true }, /* @__PURE__ */ React.createElement(PageContainerBase, __spreadValues({}, props)));
+var PageContainer = function PageContainer(props) {
+  return /*#__PURE__*/_jsx(ProConfigProvider, {
+    needDeps: true,
+    children: /*#__PURE__*/_jsx(PageContainerBase, _objectSpread({}, props))
+  });
 };
-var ProPageHeader = (props) => {
-  const value = useContext(RouteContext);
-  return memoRenderPageHeader(__spreadProps(__spreadValues({}, props), {
-    hashId: "",
-    value
+var ProPageHeader = function ProPageHeader(props) {
+  var value = useContext(RouteContext);
+  return memoRenderPageHeader(_objectSpread(_objectSpread({}, props), {}, {
+    hashId: '',
+    value: value
   }));
 };
-export {
-  PageContainer,
-  ProBreadcrumb,
-  ProPageHeader
-};
+export { PageContainer, ProBreadcrumb, ProPageHeader };