Skip to content
This repository has been archived by the owner on Aug 11, 2020. It is now read-only.

Commit

Permalink
πŸ› bug: FooterToolbar should have a dom (#558)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenshuai2144
chenshuai2144 authored Jul 13, 2020
1 parent 5ec50ae commit 296f5ad
Show file tree
Hide file tree
Showing 7 changed files with 368 additions and 10 deletions.
6 changes: 5 additions & 1 deletion src/BasicLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);

Expand All @@ -433,6 +434,9 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
hasSiderMenu: !!siderMenuDom,
hasHeader: !!headerDom,
siderWidth: leftSiderWidth,
hasFooter: !!footerDom,
hasFooterToolbar,
setHasFooterToolbar,
pageTitleInfo,
}}
>
Expand Down
18 changes: 17 additions & 1 deletion src/FooterToolbar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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}`)}
Expand Down
2 changes: 1 addition & 1 deletion src/PageContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ const PageContainer: React.FC<PageContainerProps> = (props) => {
<div className={`${prefixedClassName}-children-content`}>
{children}
</div>
{footer && (
{value.hasFooterToolbar && (
<div
style={{
height: 48,
Expand Down
3 changes: 3 additions & 0 deletions src/RouteContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
314 changes: 314 additions & 0 deletions tests/__tests__/__snapshots__/pageContainer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading

0 comments on commit 296f5ad

Please sign in to comment.