🐛 bug: FooterToolbar should have a dom

src/BasicLayout.tsx

@@ -1,6 +1,6 @@
 import './BasicLayout.less';
 
-import React, { CSSProperties, useContext, useEffect } from 'react';
+import React, { CSSProperties, useContext, useEffect, useState } from 'react';
 import { BreadcrumbProps as AntdBreadcrumbProps } from 'antd/es/breadcrumb';
 import { Layout } from 'antd';
 import classNames from 'classnames';
@@ -416,6 +416,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
  onPageChange(props.location);
  }
  }, [stringify(props.location)]);
+ const [hasFooterToolbar, setHasFooterToolbar] = useState(false);
 
  useDocumentTitle(pageTitleInfo, props.title);
 
@@ -433,6 +434,9 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
  hasSiderMenu: !!siderMenuDom,
  hasHeader: !!headerDom,
  siderWidth: leftSiderWidth,
+ hasFooter: !!footerDom,
+ hasFooterToolbar,
+ setHasFooterToolbar,
  pageTitleInfo,
  }}
  >

src/FooterToolbar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, ReactNode } from 'react';
+import React, { useContext, useEffect, useMemo, ReactNode } from 'react';
 import { Space } from 'antd';
 import classNames from 'classnames';
 
@@ -48,6 +48,22 @@ const FooterToolbar: React.FC<FooterToolbarProps> = (props) => {
  </>
  );
 
+ /**
+ * 告诉 props 是否存在 footerBar
+ */
+ useEffect(() => {
+ if (!value || !value?.setHasFooterToolbar) {
+ return () => {};
+ }
+ value?.setHasFooterToolbar(true);
+ return () => {
+ if (!value || !value?.setHasFooterToolbar) {
+ return;
+ }
+ value?.setHasFooterToolbar(false);
+ };
+ }, []);
+
  return (
  <div
  className={classNames(className, `${baseClassName}`)}

src/PageContainer/index.tsx

@@ -157,7 +157,7 @@ const PageContainer: React.FC<PageContainerProps> = (props) => {
  <div className={`${prefixedClassName}-children-content`}>
  {children}
  </div>
- {footer && (
+ {value.hasFooterToolbar && (
  <div
  style={{
  height: 48,

src/RouteContext.tsx

@@ -13,6 +13,9 @@ export interface RouteContextType extends Partial<PureSettings> {
  hasHeader?: boolean;
  siderWidth?: number;
  isChildrenLayout?: boolean;
+ hasFooterToolbar?: boolean;
+ hasFooter?: boolean;
+ setHasFooterToolbar?: React.Dispatch<React.SetStateAction<boolean>>;
  pageTitleInfo?: {
  title: string;
  id: string;

tests/__tests__/__snapshots__/pageContainer.test.tsx.snap

@@ -60,6 +60,320 @@ exports[`PageContainer ⚡️ support footer 1`] = `
 </div>
 `;
 
+exports[`PageContainer 🐲 FooterToolbar should know width 1`] = `
+<div
+ class="ant-design-pro ant-pro-basicLayout screen-md ant-pro-basicLayout-top-menu"
+>
+ <section
+ class="ant-layout ant-layout-has-sider"
+ style="min-height: 100%;"
+ >
+ <section
+ class="ant-layout"
+ style="position: relative;"
+ >
+ <header
+ class="ant-layout-header ant-pro-top-menu"
+ style="padding: 0px; height: 48px; line-height: 48px; width: 100%; z-index: 9;"
+ >
+ <div
+ class="ant-pro-top-nav-header"
+ >
+ <div
+ class="ant-pro-top-nav-header-main "
+ >
+ <div
+ class="ant-pro-top-nav-header-main-left"
+ >
+ <div
+ class="ant-pro-top-nav-header-logo"
+ id="logo"
+ >
+ <a>
+ <img
+ alt="logo"
+ src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg"
+ />
+ <h1>
+ Ant Design Pro
+ </h1>
+ </a>
+ </div>
+ </div>
+ <div
+ class="ant-pro-top-nav-header-menu"
+ style="flex: 1;"
+ >
+ <ul
+ class="ant-menu top-nav-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
+ role="menu"
+ />
+ </div>
+ </div>
+ </div>
+ </header>
+ <main
+ class="ant-layout-content ant-pro-basicLayout-content ant-pro-basicLayout-has-header"
+ >
+ <div
+ class="ant-pro-page-container"
+ >
+ <div
+ class="ant-pro-page-container-warp"
+ >
+ <div
+ class="ant-page-header ant-page-header-ghost"
+ >
+ <div
+ class="ant-page-header-heading"
+ >
+ <div
+ class="ant-page-header-heading-left"
+ >
+ <span
+ class="ant-page-header-heading-title"
+ title="Ant Design Pro"
+ >
+ Ant Design Pro
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ class="ant-pro-grid-content"
+ >
+ <div
+ class="ant-pro-grid-content-children"
+ >
+ <div>
+ <div
+ class="ant-pro-page-container-children-content"
+ >
+ <div
+ class="ant-pro-footer-bar"
+ style="width: 100%;"
+ >
+ <div
+ class="ant-pro-footer-bar-left"
+ />
+ <div
+ class="ant-pro-footer-bar-right"
+ >
+ <div
+ class="ant-space ant-space-horizontal ant-space-align-center"
+ >
+ <div
+ class="ant-space-item"
+ >
+ <button
+ type="button"
+ >
+ qixian
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ style="height: 48px; margin-top: 24px;"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+ </section>
+ </section>
+</div>
+`;
+
+exports[`PageContainer 🐲 footer is null, do not render footerToolbar 1`] = `
+<div
+ class="ant-pro-page-container"
+>
+ <div
+ class="ant-pro-page-container-warp"
+ >
+ <div
+ class="ant-page-header ant-page-header-ghost"
+ />
+ </div>
+ <div
+ class="ant-pro-grid-content"
+ >
+ <div
+ class="ant-pro-grid-content-children"
+ />
+ </div>
+ <div
+ class="ant-pro-footer-bar"
+ >
+ <div
+ class="ant-pro-footer-bar-left"
+ />
+ <div
+ class="ant-pro-footer-bar-right"
+ >
+ <div
+ class="ant-space ant-space-horizontal ant-space-align-center"
+ >
+ <div
+ class="ant-space-item"
+ >
+ <button
+ type="button"
+ >
+ qixian
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`PageContainer 🐲 footer is null, do not render footerToolbar 2`] = `
+<div
+ class="ant-pro-page-container"
+>
+ <div
+ class="ant-pro-page-container-warp"
+ >
+ <div
+ class="ant-page-header ant-page-header-ghost"
+ />
+ </div>
+ <div
+ class="ant-pro-grid-content"
+ >
+ <div
+ class="ant-pro-grid-content-children"
+ />
+ </div>
+</div>
+`;
+
+exports[`PageContainer 🐲 footer should know width 1`] = `
+<div
+ class="ant-design-pro ant-pro-basicLayout screen-md ant-pro-basicLayout-top-menu"
+>
+ <section
+ class="ant-layout ant-layout-has-sider"
+ style="min-height: 100%;"
+ >
+ <section
+ class="ant-layout"
+ style="position: relative;"
+ >
+ <header
+ class="ant-layout-header ant-pro-top-menu"
+ style="padding: 0px; height: 48px; line-height: 48px; width: 100%; z-index: 9;"
+ >
+ <div
+ class="ant-pro-top-nav-header"
+ >
+ <div
+ class="ant-pro-top-nav-header-main "
+ >
+ <div
+ class="ant-pro-top-nav-header-main-left"
+ >
+ <div
+ class="ant-pro-top-nav-header-logo"
+ id="logo"
+ >
+ <a>
+ <img
+ alt="logo"
+ src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg"
+ />
+ <h1>
+ Ant Design Pro
+ </h1>
+ </a>
+ </div>
+ </div>
+ <div
+ class="ant-pro-top-nav-header-menu"
+ style="flex: 1;"
+ >
+ <ul
+ class="ant-menu top-nav-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
+ role="menu"
+ />
+ </div>
+ </div>
+ </div>
+ </header>
+ <main
+ class="ant-layout-content ant-pro-basicLayout-content ant-pro-basicLayout-has-header"
+ >
+ <div
+ class="ant-pro-page-container"
+ >
+ <div
+ class="ant-pro-page-container-warp"
+ >
+ <div
+ class="ant-page-header ant-page-header-ghost"
+ >
+ <div
+ class="ant-page-header-heading"
+ >
+ <div
+ class="ant-page-header-heading-left"
+ >
+ <span
+ class="ant-page-header-heading-title"
+ title="Ant Design Pro"
+ >
+ Ant Design Pro
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ class="ant-pro-grid-content"
+ >
+ <div
+ class="ant-pro-grid-content-children"
+ />
+ </div>
+ <div
+ class="ant-pro-footer-bar"
+ style="width: 100%;"
+ >
+ <div
+ class="ant-pro-footer-bar-left"
+ />
+ <div
+ class="ant-pro-footer-bar-right"
+ >
+ <div
+ class="ant-space ant-space-horizontal ant-space-align-center"
+ >
+ <div
+ class="ant-space-item"
+ >
+ <button
+ type="button"
+ >
+ qixian
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+ </section>
+ </section>
+</div>
+`;
+
 exports[`PageContainer 💄 base use 1`] = `
 <div
  class="ant-pro-page-container"