diff --git a/src/BasicLayout.tsx b/src/BasicLayout.tsx index e986ae7a..cd0a293a 100644 --- a/src/BasicLayout.tsx +++ b/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 = (props) => { onPageChange(props.location); } }, [stringify(props.location)]); + const [hasFooterToolbar, setHasFooterToolbar] = useState(false); useDocumentTitle(pageTitleInfo, props.title); @@ -433,6 +434,9 @@ const BasicLayout: React.FC = (props) => { hasSiderMenu: !!siderMenuDom, hasHeader: !!headerDom, siderWidth: leftSiderWidth, + hasFooter: !!footerDom, + hasFooterToolbar, + setHasFooterToolbar, pageTitleInfo, }} > diff --git a/src/FooterToolbar/index.tsx b/src/FooterToolbar/index.tsx index 8fbaecf5..7b4dbd45 100644 --- a/src/FooterToolbar/index.tsx +++ b/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 = (props) => { ); + /** + * 告诉 props 是否存在 footerBar + */ + useEffect(() => { + if (!value || !value?.setHasFooterToolbar) { + return () => {}; + } + value?.setHasFooterToolbar(true); + return () => { + if (!value || !value?.setHasFooterToolbar) { + return; + } + value?.setHasFooterToolbar(false); + }; + }, []); + return (
= (props) => {
{children}
- {footer && ( + {value.hasFooterToolbar && (
{ hasHeader?: boolean; siderWidth?: number; isChildrenLayout?: boolean; + hasFooterToolbar?: boolean; + hasFooter?: boolean; + setHasFooterToolbar?: React.Dispatch>; pageTitleInfo?: { title: string; id: string; diff --git a/tests/__tests__/__snapshots__/pageContainer.test.tsx.snap b/tests/__tests__/__snapshots__/pageContainer.test.tsx.snap index b5034ef0..3aad7d19 100644 --- a/tests/__tests__/__snapshots__/pageContainer.test.tsx.snap +++ b/tests/__tests__/__snapshots__/pageContainer.test.tsx.snap @@ -60,6 +60,320 @@ exports[`PageContainer ⚡️ support footer 1`] = `
`; +exports[`PageContainer 🐲 FooterToolbar should know width 1`] = ` +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + Ant Design Pro + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`PageContainer 🐲 footer is null, do not render footerToolbar 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+`; + +exports[`PageContainer 🐲 footer is null, do not render footerToolbar 2`] = ` +
+
+
+
+
+
+
+
+`; + +exports[`PageContainer 🐲 footer should know width 1`] = ` +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + Ant Design Pro + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+`; + exports[`PageContainer 💄 base use 1`] = `
{ it('if copyright and links falsy both, should not to render nothing', () => { const wrapper = mount(); - expect(wrapper.find('.ant-pro-global-footer').exists()).toBeFalsy(); }); }); diff --git a/tests/__tests__/pageContainer.test.tsx b/tests/__tests__/pageContainer.test.tsx index c0cd68b5..e5c09427 100644 --- a/tests/__tests__/pageContainer.test.tsx +++ b/tests/__tests__/pageContainer.test.tsx @@ -104,7 +104,7 @@ describe('PageContainer', () => { ); await waitForComponentToPaint(wrapper); - expect(wrapper.find('.ant-pro-footer-bar').props().style.width).toBe( + expect(wrapper?.find('.ant-pro-footer-bar')?.props()?.style?.width).toBe( 'calc(100% - 208px)', ); wrapper.setProps({ @@ -113,7 +113,7 @@ describe('PageContainer', () => { await waitForComponentToPaint(wrapper); - expect(wrapper.find('.ant-pro-footer-bar').props().style.width).toBe( + expect(wrapper?.find('.ant-pro-footer-bar')?.props()?.style?.width).toBe( 'calc(100% - 48px)', ); @@ -121,9 +121,10 @@ describe('PageContainer', () => { layout: 'top', }); - expect(wrapper.find('.ant-pro-footer-bar').props().style.width).toBe( + expect(wrapper?.find('.ant-pro-footer-bar')?.props()?.style?.width).toBe( '100%', ); + expect(wrapper.render()).toMatchSnapshot(); }); it('🐲 FooterToolbar should know width', async () => { @@ -140,7 +141,7 @@ describe('PageContainer', () => { ); await waitForComponentToPaint(wrapper); - expect(wrapper.find('.ant-pro-footer-bar').props().style.width).toBe( + expect(wrapper?.find('.ant-pro-footer-bar')?.props()?.style?.width).toBe( 'calc(100% - 208px)', ); wrapper.setProps({ @@ -149,7 +150,7 @@ describe('PageContainer', () => { await waitForComponentToPaint(wrapper); - expect(wrapper.find('.ant-pro-footer-bar').props().style.width).toBe( + expect(wrapper.find('.ant-pro-footer-bar')?.props()?.style?.width).toBe( 'calc(100% - 48px)', ); @@ -157,8 +158,29 @@ describe('PageContainer', () => { layout: 'top', }); - expect(wrapper.find('.ant-pro-footer-bar').props().style.width).toBe( + expect(wrapper.find('.ant-pro-footer-bar')?.props()?.style?.width).toBe( '100%', ); + expect(wrapper.render()).toMatchSnapshot(); + }); + + it('🐲 footer is null, do not render footerToolbar ', async () => { + const wrapper = mount( + + qixian + , + ]} + />, + ); + await waitForComponentToPaint(wrapper); + expect(wrapper.render()).toMatchSnapshot(); + + wrapper.setProps({ + footer: undefined, + }); + await waitForComponentToPaint(wrapper); + expect(wrapper.render()).toMatchSnapshot(); }); });