From 296f5ad77a487786a8d6b5e46e5a7fda134d4f53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 13 Jul 2020 14:37:46 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20bug:=20FooterToolbar=20should=20?= =?UTF-8?q?have=20a=20dom=20(#558)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BasicLayout.tsx | 6 +- src/FooterToolbar/index.tsx | 18 +- src/PageContainer/index.tsx | 2 +- src/RouteContext.tsx | 3 + .../__snapshots__/pageContainer.test.tsx.snap | 314 ++++++++++++++++++ tests/__tests__/footer.test.tsx | 1 - tests/__tests__/pageContainer.test.tsx | 34 +- 7 files changed, 368 insertions(+), 10 deletions(-) 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(); }); });