From 7a9aad7c397cc7526e45e8f643cfff532b6ec812 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= Date: Fri, 14 Oct 2022 10:33:06 +0800 Subject: [PATCH] fix(layout): Support for multiple PageContainers to be used together --- packages/layout/src/ProLayout.tsx | 5 +- packages/layout/src/WrapContent.tsx | 6 +- .../src/components/PageContainer/index.tsx | 4 +- packages/layout/src/context/RouteContext.tsx | 4 +- tests/layout/pageContainer.test.tsx | 65 +++++++++++++++++++ 5 files changed, 76 insertions(+), 8 deletions(-) diff --git a/packages/layout/src/ProLayout.tsx b/packages/layout/src/ProLayout.tsx index 5809e4b467f9..2fc039057f43 100644 --- a/packages/layout/src/ProLayout.tsx +++ b/packages/layout/src/ProLayout.tsx @@ -615,7 +615,10 @@ const BaseProLayout: React.FC = (props) => { }, [location.pathname, location.pathname?.search]); const [hasFooterToolbar, setHasFooterToolbar] = useState(false); - const [hasPageContainer, setHasPageContainer] = useState(false); + /** + * 使用number是因为多标签页的时候有多个 PageContainer，只有有任意一个就应该展示这个className + */ + const [hasPageContainer, setHasPageContainer] = useState(0); useDocumentTitle(pageTitleInfo, props.title || false); const bgImgStyleList = useMemo(() => { if (bgLayoutImgList && bgLayoutImgList.length > 0) { diff --git a/packages/layout/src/WrapContent.tsx b/packages/layout/src/WrapContent.tsx index adbf83bc5974..d592215b698a 100644 --- a/packages/layout/src/WrapContent.tsx +++ b/packages/layout/src/WrapContent.tsx @@ -5,7 +5,7 @@ import type { CSSProperties } from 'react'; import React from 'react'; const WrapContent: React.FC<{ - hasPageContainer?: boolean; + hasPageContainer?: number; isChildrenLayout?: boolean; prefixCls?: string; style?: CSSProperties; @@ -16,11 +16,11 @@ const WrapContent: React.FC<{ hasHeader: boolean; }> = (props) => { const { hashId } = useToken(); - const { style, prefixCls, children, hasPageContainer } = props; + const { style, prefixCls, children, hasPageContainer = 0 } = props; const contentClassName = classNames(`${prefixCls}-content`, hashId, { [`${prefixCls}-has-header`]: props.hasHeader, - [`${prefixCls}-content-has-page-container`]: hasPageContainer, + [`${prefixCls}-content-has-page-container`]: hasPageContainer > 0, }); const ErrorComponent = props.ErrorBoundary || ErrorBoundary; diff --git a/packages/layout/src/components/PageContainer/index.tsx b/packages/layout/src/components/PageContainer/index.tsx index f2a983816f5b..1bcb81624774 100644 --- a/packages/layout/src/components/PageContainer/index.tsx +++ b/packages/layout/src/components/PageContainer/index.tsx @@ -295,9 +295,9 @@ const PageContainer: React.FC = (props) => { if (!value || !value?.setHasPageContainer) { return () => {}; } - value?.setHasPageContainer?.(true); + value?.setHasPageContainer?.((num) => num + 1); return () => { - value?.setHasPageContainer?.(false); + value?.setHasPageContainer?.((num) => num - 1); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/packages/layout/src/context/RouteContext.tsx b/packages/layout/src/context/RouteContext.tsx index 4d136bf2e23f..809d118daaca 100644 --- a/packages/layout/src/context/RouteContext.tsx +++ b/packages/layout/src/context/RouteContext.tsx @@ -17,9 +17,9 @@ export type RouteContextType = { isChildrenLayout?: boolean; hasFooterToolbar?: boolean; hasFooter?: boolean; - hasPageContainer?: boolean; + hasPageContainer?: number; setHasFooterToolbar?: React.Dispatch>; - setHasPageContainer?: React.Dispatch>; + setHasPageContainer?: React.Dispatch>; pageTitleInfo?: { title: string; id: string; diff --git a/tests/layout/pageContainer.test.tsx b/tests/layout/pageContainer.test.tsx index 2ead76eb0420..a7712ba5524a 100644 --- a/tests/layout/pageContainer.test.tsx +++ b/tests/layout/pageContainer.test.tsx @@ -1,6 +1,7 @@ import type { ProLayoutProps } from '@ant-design/pro-components'; import { FooterToolbar, PageContainer, ProLayout } from '@ant-design/pro-components'; import { render as libraryRender } from '@testing-library/react'; +import { Button } from 'antd'; import { mount, render } from 'enzyme'; import React, { useEffect, useMemo, useState } from 'react'; import { act } from 'react-dom/test-utils'; @@ -26,6 +27,70 @@ describe('PageContainer', () => { expect(html.find('.ant-page-header').exists()).toBeFalsy(); }); + it('💄 has PageContainer className', async () => { + const Demo = () => { + const [state, setState] = useState(0); + return ( + + + {state > 0 && state < 3 ? ( + + qixian + + ) : null} + {state > 1 && state < 4 ? ( + + qixian2 + + ) : null} + + ); + }; + const html = libraryRender(); + + expect( + !!html.baseElement.querySelector('.ant-pro-layout-content-has-page-container'), + ).toBeFalsy(); + + await act(async () => { + (await html.findByText('切 换'))?.click?.(); + }); + + expect( + !!html.baseElement.querySelector('.ant-pro-layout-content-has-page-container'), + ).toBeTruthy(); + + await act(async () => { + (await html.findByText('切 换'))?.click?.(); + }); + + expect( + !!html.baseElement.querySelector('.ant-pro-layout-content-has-page-container'), + ).toBeTruthy(); + + await act(async () => { + (await html.findByText('切 换'))?.click?.(); + }); + + expect( + !!html.baseElement.querySelector('.ant-pro-layout-content-has-page-container'), + ).toBeTruthy(); + + await act(async () => { + (await html.findByText('切 换'))?.click?.(); + }); + + expect( + !!html.baseElement.querySelector('ant-pro-layout-content-has-page-container'), + ).toBeFalsy(); + }); + it('💄 pageContainer support breadcrumbRender', async () => { const html = mount(
这里是面包屑
}>content,