From 4286ce16c18c4856b2668efee5681f064093782d Mon Sep 17 00:00:00 2001 From: chenshuai Date: Sat, 5 Oct 2019 10:25:27 +0800 Subject: [PATCH 01/14] pure page header style --- components/page-header/demo/content.md | 6 ------ components/page-header/demo/responsive.md | 2 +- components/page-header/style/index.less | 12 ++++++------ 3 files changed, 7 insertions(+), 13 deletions(-) diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md index f00377604fa2..56fce528ba24 100644 --- a/components/page-header/demo/content.md +++ b/components/page-header/demo/content.md @@ -169,9 +169,3 @@ ReactDOM.render( mountNode, ); ``` - - diff --git a/components/page-header/demo/responsive.md b/components/page-header/demo/responsive.md index a82f3e04c6f0..efe5b0c42744 100644 --- a/components/page-header/demo/responsive.md +++ b/components/page-header/demo/responsive.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 6 iframe: 210 title: zh-CN: 响应式 diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md index 2ece3d07275b..a31cf59385bc 100644 --- a/components/page-header/index.en-US.md +++ b/components/page-header/index.en-US.md @@ -18,6 +18,7 @@ It can also be used as inter-page navigation when it is needed to make the user | --- | --- | --- | --- | --- | | title | custom title text | ReactNode | - | 3.14.0 | | subTitle | custom subTitle text | ReactNode | - | 3.14.0 | +| type | pageHeader type, will change background color | `'default' | 'pure'` | 'default' | 3.24.0 | | avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 | | backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `` | 3.14.0 | | tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index 5019c0e9614f..33c76c35e989 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -22,6 +22,7 @@ export interface PageHeaderProps { avatar?: AvatarProps; onBack?: (e: React.MouseEvent) => void; className?: string; + type?: 'pure' | 'default'; } const renderBack = ( @@ -89,12 +90,13 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => { const PageHeader: React.SFC = props => ( - {({ getPrefixCls }: ConfigConsumerProps) => { + {({ getPrefixCls, pageHeaderType }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, style, footer, children, + type, breadcrumb, className: customizeClassName, } = props; @@ -104,6 +106,7 @@ const PageHeader: React.SFC = props => ( const className = classnames(prefixCls, customizeClassName, { 'has-breadcrumb': breadcrumbDom, 'has-footer': footer, + pure: type || pageHeaderType, }); return ( diff --git a/components/page-header/index.zh-CN.md b/components/page-header/index.zh-CN.md index 78b0a6aa3f48..700f931439d9 100644 --- a/components/page-header/index.zh-CN.md +++ b/components/page-header/index.zh-CN.md @@ -18,6 +18,7 @@ subtitle: 页头 | --- | --- | --- | --- | --- | | title | 自定义标题文字 | ReactNode | - | 3.14.0 | | subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 | +| type | pageHeader 的类型，将会改变背景颜色 | `'default' | 'pure'` | 'default' | 3.24.0 | | avatar | 标题栏旁的头像 | [avatar props](/components/avatar/) | - | 3.22.0 | | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `` | 3.14.0 | | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 3d011db9218c..696189ea7545 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -5,10 +5,14 @@ .@{pageheader-prefix-cls} { .reset-component; - + background-color: @component-background; position: relative; padding: @page-header-padding-vertical @page-header-padding; + &.pure { + background-color: inherit; + } + &.has-breadcrumb { padding-top: @page-header-padding-breadcrumb; } From ce0279a5a8c51dc212ea92d9c23bb85620fd473f Mon Sep 17 00:00:00 2001 From: chenshuai Date: Sat, 5 Oct 2019 12:45:50 +0800 Subject: [PATCH 03/14] add prue demo --- .../__tests__/__snapshots__/demo.test.js.snap | 185 ++++++++++++++++++ 1 file changed, 185 insertions(+) diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap index 680e2981ba72..a8912f82a307 100644 --- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap +++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap @@ -695,6 +695,191 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = ` `; +exports[`renders ./components/page-header/demo/pure.md correctly 1`] = ` +
+
+
+
+
+ + + +
+
+ + Title + + + This is a subtitle + + + + + + +
+
+
+
+ + + + + + + + + + + + +
+ + Created + + + Lili Qu + + + + Association + + + + 421421 + + + + + Creation Time + + + 2017-01-10 + +
+ + Effective Time + + + 2017-10-10 + + + + Remarks + + + Gonghu Road, Xihu District, Hangzhou, Zhejiang, China + +
+
+
+
+
+
+`; + exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
Date: Sat, 5 Oct 2019 12:52:59 +0800 Subject: [PATCH 04/14] add config provider doc --- components/config-provider/index.en-US.md | 1 + components/config-provider/index.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 8dc6fcb5eb05..c552f0cb530d 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -43,3 +43,4 @@ Some component use dynamic style to support wave effect. You can config `csp` pr | getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` | 3.11.0 | | locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | 3.21.0 | | prefixCls | set prefix class | string | ant | 3.12.0 | +| pageHeaderType | Unify the type of pageHeader | string | ant | 3.12.0 | diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index f8e1936f1da3..ded66f8027aa 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -44,3 +44,4 @@ return ( | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body | 3.11.0 | | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | 3.21.0 | | prefixCls | 设置统一样式前缀 | string | ant | 3.12.0 | +| pageHeaderType | 统一设置 pageHeader 的 type | string | ant | 3.12.0 | From 83a5639430c53f074bb6a08bbe796e88f5b623b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Fri, 11 Oct 2019 12:20:23 +0800 Subject: [PATCH 05/14] fix lint --- components/page-header/demo/pure.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/page-header/demo/pure.md b/components/page-header/demo/pure.md index 6d16565e3780..bac030a635ac 100644 --- a/components/page-header/demo/pure.md +++ b/components/page-header/demo/pure.md @@ -14,7 +14,7 @@ title: In some cases, pageHeader does not require its own background color. ```jsx -import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd'; +import { PageHeader, Button, Descriptions } from 'antd'; ReactDOM.render(
Date: Sat, 12 Oct 2019 11:20:59 +0800 Subject: [PATCH 06/14] fix lint error --- components/page-header/style/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 696189ea7545..6d9e17ce52dc 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -5,9 +5,9 @@ .@{pageheader-prefix-cls} { .reset-component; - background-color: @component-background; position: relative; padding: @page-header-padding-vertical @page-header-padding; + background-color: @component-background; &.pure { background-color: inherit; From 594baa8fd604046a2a8deeb169dea405a3b0c4e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 14 Oct 2019 16:27:42 +0800 Subject: [PATCH 07/14] change pure to ghost --- components/config-provider/index.en-US.md | 2 +- components/config-provider/index.tsx | 1 + components/config-provider/index.zh-CN.md | 2 +- .../page-header/__tests__/__snapshots__/demo.test.js.snap | 4 ++-- components/page-header/demo/pure.md | 6 +++--- components/page-header/index.en-US.md | 2 +- components/page-header/index.tsx | 7 ++++--- components/page-header/index.zh-CN.md | 2 +- components/page-header/style/index.less | 2 +- 9 files changed, 15 insertions(+), 13 deletions(-) diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index c552f0cb530d..c0e16dc69aa5 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -43,4 +43,4 @@ Some component use dynamic style to support wave effect. You can config `csp` pr | getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` | 3.11.0 | | locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | 3.21.0 | | prefixCls | set prefix class | string | ant | 3.12.0 | -| pageHeaderType | Unify the type of pageHeader | string | ant | 3.12.0 | +| pageHeader | Unify the type of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { type: 'ghost'\|'default' } | 'default' | 3.24.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index dcabe08bf7f2..df8268649bbf 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -73,6 +73,7 @@ class ConfigProvider extends React.Component { } // set pageHeader type + // 防止设置为 null 报错 if (pageHeader && pageHeader.type) { config.pageHeader = pageHeader; } diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index ded66f8027aa..cb3fa6e87451 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -44,4 +44,4 @@ return ( | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body | 3.11.0 | | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | 3.21.0 | | prefixCls | 设置统一样式前缀 | string | ant | 3.12.0 | -| pageHeaderType | 统一设置 pageHeader 的 type | string | ant | 3.12.0 | +| pageHeader | 统一设置 pageHeader 的 type，参考 [pageHeader](<(/components/page-header)>) | { type: 'ghost' \| 'default' } | 'default' | 3.24.0 | diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap index a8912f82a307..6017d56afa3e 100644 --- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap +++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap @@ -697,10 +697,10 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = ` exports[`renders ./components/page-header/demo/pure.md correctly 1`] = `
window.history.back()} title="Title" subTitle="This is a subtitle" @@ -55,6 +55,6 @@ ReactDOM.render( diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md index a31cf59385bc..8c1ad2123c04 100644 --- a/components/page-header/index.en-US.md +++ b/components/page-header/index.en-US.md @@ -18,7 +18,7 @@ It can also be used as inter-page navigation when it is needed to make the user | --- | --- | --- | --- | --- | | title | custom title text | ReactNode | - | 3.14.0 | | subTitle | custom subTitle text | ReactNode | - | 3.14.0 | -| type | pageHeader type, will change background color | `'default' | 'pure'` | 'default' | 3.24.0 | +| type | pageHeader type, will change background color | `'default' | 'ghost'` | 'default' | 3.24.0 | | avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 | | backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `` | 3.14.0 | | tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index 33c76c35e989..69bedd7f82a8 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -22,7 +22,7 @@ export interface PageHeaderProps { avatar?: AvatarProps; onBack?: (e: React.MouseEvent) => void; className?: string; - type?: 'pure' | 'default'; + type?: 'ghost' | 'default'; } const renderBack = ( @@ -90,7 +90,7 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => { const PageHeader: React.SFC = props => ( - {({ getPrefixCls, pageHeaderType }: ConfigConsumerProps) => { + {({ getPrefixCls, pageHeader = { type: 'default' } }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, style, @@ -106,7 +106,8 @@ const PageHeader: React.SFC = props => ( const className = classnames(prefixCls, customizeClassName, { 'has-breadcrumb': breadcrumbDom, 'has-footer': footer, - pure: type || pageHeaderType, + // 防止设置为 null 报错 + ghost: type === 'ghost' || (pageHeader && pageHeader.type === 'ghost'), }); return ( diff --git a/components/page-header/index.zh-CN.md b/components/page-header/index.zh-CN.md index 700f931439d9..5d670617b3a9 100644 --- a/components/page-header/index.zh-CN.md +++ b/components/page-header/index.zh-CN.md @@ -18,7 +18,7 @@ subtitle: 页头 | --- | --- | --- | --- | --- | | title | 自定义标题文字 | ReactNode | - | 3.14.0 | | subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 | -| type | pageHeader 的类型，将会改变背景颜色 | `'default' | 'pure'` | 'default' | 3.24.0 | +| type | pageHeader 的类型，将会改变背景颜色 | `'default' | 'ghost'` | 'default' | 3.24.0 | | avatar | 标题栏旁的头像 | [avatar props](/components/avatar/) | - | 3.22.0 | | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `` | 3.14.0 | | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 6d9e17ce52dc..4bf3c451119a 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -9,7 +9,7 @@ padding: @page-header-padding-vertical @page-header-padding; background-color: @component-background; - &.pure { + &.ghost { background-color: inherit; } From a3ea40dbae3dc8b161f6261d954604f7ae10b1fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 14 Oct 2019 16:40:59 +0800 Subject: [PATCH 08/14] fix test --- components/config-provider/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index df8268649bbf..2196b43fb9ee 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -8,11 +8,7 @@ import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import { ConfigConsumer, ConfigContext, CSPConfig, ConfigConsumerProps } from './context'; -export { RenderEmptyHandler }; - -export interface CSPConfig { - nonce?: string; -} +export { RenderEmptyHandler, ConfigConsumer, CSPConfig, ConfigConsumerProps }; export const configConsumerProps = [ 'getPopupContainer', @@ -22,7 +18,7 @@ export const configConsumerProps = [ 'csp', 'autoInsertSpaceInButton', 'locale', - 'pageHeaderType', + 'pageHeader', ]; export interface ConfigProviderProps { From db23ebbb9c5f89dd3b72bafaff5ecd87383a1aec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 14 Oct 2019 17:37:09 +0800 Subject: [PATCH 09/14] default ghost is true --- components/config-provider/context.ts | 2 +- components/config-provider/index.en-US.md | 2 +- components/config-provider/index.tsx | 6 +++--- components/config-provider/index.zh-CN.md | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 14 +++++++------- .../__tests__/__snapshots__/index.test.js.snap | 4 ++-- components/page-header/demo/pure.md | 10 +++++----- components/page-header/demo/responsive.md | 3 +++ components/page-header/index.en-US.md | 2 +- components/page-header/index.tsx | 8 ++++---- components/page-header/index.zh-CN.md | 2 +- 11 files changed, 29 insertions(+), 26 deletions(-) diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 889fb6793387..da5c29dfbdfe 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -15,7 +15,7 @@ export interface ConfigConsumerProps { autoInsertSpaceInButton?: boolean; locale?: Locale; pageHeader?: { - type: 'ghost' | 'default'; + ghost: boolean; }; } diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index c0e16dc69aa5..14e3f2c75a0a 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -43,4 +43,4 @@ Some component use dynamic style to support wave effect. You can config `csp` pr | getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` | 3.11.0 | | locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | 3.21.0 | | prefixCls | set prefix class | string | ant | 3.12.0 | -| pageHeader | Unify the type of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { type: 'ghost'\|'default' } | 'default' | 3.24.0 | +| pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { ghost:boolean } | 'true' | 3.24.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 2196b43fb9ee..e28b6106ad4b 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -30,7 +30,7 @@ export interface ConfigProviderProps { autoInsertSpaceInButton?: boolean; locale?: Locale; pageHeader?: { - type: 'ghost' | 'default'; + ghost: boolean; }; } @@ -51,7 +51,7 @@ class ConfigProvider extends React.Component { csp, autoInsertSpaceInButton, locale, - pageHeader, + pageHeader = { ghost: true }, } = this.props; const config: ConfigConsumerProps = { @@ -70,7 +70,7 @@ class ConfigProvider extends React.Component { // set pageHeader type // 防止设置为 null 报错 - if (pageHeader && pageHeader.type) { + if (pageHeader && pageHeader.ghost) { config.pageHeader = pageHeader; } diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index cb3fa6e87451..d607213ba305 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -44,4 +44,4 @@ return ( | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body | 3.11.0 | | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | 3.21.0 | | prefixCls | 设置统一样式前缀 | string | ant | 3.12.0 | -| pageHeader | 统一设置 pageHeader 的 type，参考 [pageHeader](<(/components/page-header)>) | { type: 'ghost' \| 'default' } | 'default' | 3.24.0 | +| pageHeader | 统一设置 pageHeader 的 type，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | 3.24.0 | diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap index 6017d56afa3e..2fa4cdf552ce 100644 --- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap +++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap @@ -3,7 +3,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `

`; exports[`PageHeader pageHeader should support className 1`] = `
window.history.back()} title="Title" subTitle="This is a subtitle" diff --git a/components/page-header/demo/responsive.md b/components/page-header/demo/responsive.md index efe5b0c42744..1cc42426ef52 100644 --- a/components/page-header/demo/responsive.md +++ b/components/page-header/demo/responsive.md @@ -92,6 +92,9 @@ ReactDOM.render( tr:last-child td { padding-bottom: 0; } +.ant-statistic-content-value{ + font-size: 20px; +} #components-page-header-demo-responsive .content { display: flex; } diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md index 8c1ad2123c04..62338f194ad0 100644 --- a/components/page-header/index.en-US.md +++ b/components/page-header/index.en-US.md @@ -18,7 +18,7 @@ It can also be used as inter-page navigation when it is needed to make the user | --- | --- | --- | --- | --- | | title | custom title text | ReactNode | - | 3.14.0 | | subTitle | custom subTitle text | ReactNode | - | 3.14.0 | -| type | pageHeader type, will change background color | `'default' | 'ghost'` | 'default' | 3.24.0 | +| type | pageHeader type, will change background color | boolean | true | 3.24.0 | | avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 | | backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `` | 3.14.0 | | tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index 69bedd7f82a8..b3b642e457ad 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -22,7 +22,7 @@ export interface PageHeaderProps { avatar?: AvatarProps; onBack?: (e: React.MouseEvent) => void; className?: string; - type?: 'ghost' | 'default'; + ghost?: boolean; } const renderBack = ( @@ -90,13 +90,13 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => { const PageHeader: React.SFC = props => ( - {({ getPrefixCls, pageHeader = { type: 'default' } }: ConfigConsumerProps) => { + {({ getPrefixCls, pageHeader = { ghost: true } }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, style, footer, children, - type, + ghost = true, breadcrumb, className: customizeClassName, } = props; @@ -107,7 +107,7 @@ const PageHeader: React.SFC = props => ( 'has-breadcrumb': breadcrumbDom, 'has-footer': footer, // 防止设置为 null 报错 - ghost: type === 'ghost' || (pageHeader && pageHeader.type === 'ghost'), + ghost: ghost || (pageHeader && ghost === undefined && pageHeader.ghost), }); return ( diff --git a/components/page-header/index.zh-CN.md b/components/page-header/index.zh-CN.md index 5d670617b3a9..d1f2e26b4b9c 100644 --- a/components/page-header/index.zh-CN.md +++ b/components/page-header/index.zh-CN.md @@ -18,7 +18,7 @@ subtitle: 页头 | --- | --- | --- | --- | --- | | title | 自定义标题文字 | ReactNode | - | 3.14.0 | | subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 | -| type | pageHeader 的类型，将会改变背景颜色 | `'default' | 'ghost'` | 'default' | 3.24.0 | +| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true | 3.24.0 | | avatar | 标题栏旁的头像 | [avatar props](/components/avatar/) | - | 3.22.0 | | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `` | 3.14.0 | | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | From 8ebd1891a7be199a02c73b2c275e29607888f8f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 14 Oct 2019 18:58:55 +0800 Subject: [PATCH 10/14] fix review style --- components/page-header/demo/pure.md | 2 +- components/page-header/demo/responsive.md | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/page-header/demo/pure.md b/components/page-header/demo/pure.md index 63057020c6d6..0ebe266289cf 100644 --- a/components/page-header/demo/pure.md +++ b/components/page-header/demo/pure.md @@ -55,6 +55,6 @@ ReactDOM.render( diff --git a/components/page-header/demo/responsive.md b/components/page-header/demo/responsive.md index 1cc42426ef52..19808eae1a24 100644 --- a/components/page-header/demo/responsive.md +++ b/components/page-header/demo/responsive.md @@ -92,8 +92,9 @@ ReactDOM.render( tr:last-child td { padding-bottom: 0; } -.ant-statistic-content-value{ +.ant-statistic-content{ font-size: 20px; + line-height: 28px; } #components-page-header-demo-responsive .content { display: flex; From 4a4d9d2a6940f947e192aa4cb4caa41015414452 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 14 Oct 2019 19:29:19 +0800 Subject: [PATCH 11/14] fix review warning --- components/drawer/index.tsx | 1 + .../__tests__/__snapshots__/demo.test.js.snap | 14 +++++++------- .../__tests__/__snapshots__/index.test.js.snap | 4 ++-- components/page-header/demo/{pure.md => ghost.md} | 5 +++-- components/page-header/demo/responsive.md | 2 +- components/page-header/index.tsx | 2 +- components/page-header/style/index.less | 2 +- 7 files changed, 16 insertions(+), 14 deletions(-) rename components/page-header/demo/{pure.md => ghost.md} (85%) diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 9d17d0d2287f..0d178cb19175 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -257,6 +257,7 @@ class Drawer extends React.Component

`; -exports[`renders ./components/page-header/demo/pure.md correctly 1`] = ` +exports[`renders ./components/page-header/demo/ghost.md correctly 1`] = `
@@ -883,7 +883,7 @@ exports[`renders ./components/page-header/demo/pure.md correctly 1`] = ` exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
`; exports[`PageHeader pageHeader should support className 1`] = `
#components-page-header-demo-pure .code-box-demo .ant-page-header { border: none; + } diff --git a/components/page-header/demo/responsive.md b/components/page-header/demo/responsive.md index 19808eae1a24..f6ee817b0e21 100644 --- a/components/page-header/demo/responsive.md +++ b/components/page-header/demo/responsive.md @@ -92,7 +92,7 @@ ReactDOM.render( tr:last-child td { padding-bottom: 0; } -.ant-statistic-content{ +.ant-statistic-content { font-size: 20px; line-height: 28px; } diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index b3b642e457ad..f15ae234b946 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -107,7 +107,7 @@ const PageHeader: React.SFC = props => ( 'has-breadcrumb': breadcrumbDom, 'has-footer': footer, // 防止设置为 null 报错 - ghost: ghost || (pageHeader && ghost === undefined && pageHeader.ghost), + [`${prefixCls}-ghost`]: ghost || (pageHeader && ghost === undefined && pageHeader.ghost), }); return ( diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 4bf3c451119a..1d5944d04aa8 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -9,7 +9,7 @@ padding: @page-header-padding-vertical @page-header-padding; background-color: @component-background; - &.ghost { + &-ghost { background-color: inherit; } From bae3484cc8113cf3daef0a0ae70096054cccf726 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 14 Oct 2019 19:41:43 +0800 Subject: [PATCH 12/14] use online style --- .../__tests__/__snapshots__/demo.test.js.snap | 5 +++++ components/page-header/demo/actions.md | 3 +++ components/page-header/demo/basic.md | 15 ++++++++------- components/page-header/demo/breadcrumb.md | 9 ++++++++- components/page-header/demo/content.md | 3 +++ components/page-header/demo/ghost.md | 7 ------- components/page-header/demo/responsive.md | 3 +++ 7 files changed, 30 insertions(+), 15 deletions(-) diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap index 7879ef13d2f7..01d609f569e5 100644 --- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap +++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap @@ -4,6 +4,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
window.history.back()} title="Title" subTitle="This is a subtitle" diff --git a/components/page-header/demo/basic.md b/components/page-header/demo/basic.md index 2c8c9eda5455..8eb9a1cccbd4 100644 --- a/components/page-header/demo/basic.md +++ b/components/page-header/demo/basic.md @@ -17,13 +17,14 @@ Standard header, suitable for use in scenarios that require a brief description. import { PageHeader } from 'antd'; ReactDOM.render( - null} title="Title" subTitle="This is a subtitle" />, + null} + title="Title" + subTitle="This is a subtitle" + />, mountNode, ); ``` - - diff --git a/components/page-header/demo/responsive.md b/components/page-header/demo/responsive.md index f6ee817b0e21..27599e28cf5e 100644 --- a/components/page-header/demo/responsive.md +++ b/components/page-header/demo/responsive.md @@ -64,6 +64,9 @@ const Content = ({ children, extra }) => { ReactDOM.render(
window.history.back()} title="Title" subTitle="This is a subtitle" From 563ef2914d09483627db5027cb69b99566804c3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Tue, 15 Oct 2019 10:59:02 +0800 Subject: [PATCH 13/14] remove defualt and remove comment --- components/config-provider/index.tsx | 7 +++---- components/page-header/index.tsx | 14 ++++++++++---- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index e28b6106ad4b..617b68346354 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -51,7 +51,7 @@ class ConfigProvider extends React.Component { csp, autoInsertSpaceInButton, locale, - pageHeader = { ghost: true }, + pageHeader, } = this.props; const config: ConfigConsumerProps = { @@ -64,13 +64,12 @@ class ConfigProvider extends React.Component { if (getPopupContainer) { config.getPopupContainer = getPopupContainer; } + if (renderEmpty) { config.renderEmpty = renderEmpty; } - // set pageHeader type - // 防止设置为 null 报错 - if (pageHeader && pageHeader.ghost) { + if (pageHeader) { config.pageHeader = pageHeader; } diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index f15ae234b946..01d322d4f6f2 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -90,24 +90,30 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => { const PageHeader: React.SFC = props => ( - {({ getPrefixCls, pageHeader = { ghost: true } }: ConfigConsumerProps) => { + {({ getPrefixCls, pageHeader }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, style, footer, children, - ghost = true, breadcrumb, className: customizeClassName, } = props; + let ghost: undefined | boolean = true; + + // Use `ghost` from `props` or from `ConfigProvider` instead. + if ('ghost' in props) { + ghost = props.ghost; + } else if (pageHeader && 'ghost' in pageHeader) { + ghost = pageHeader.ghost; + } const prefixCls = getPrefixCls('page-header', customizePrefixCls); const breadcrumbDom = breadcrumb && breadcrumb.routes ? renderBreadcrumb(breadcrumb) : null; const className = classnames(prefixCls, customizeClassName, { 'has-breadcrumb': breadcrumbDom, 'has-footer': footer, - // 防止设置为 null 报错 - [`${prefixCls}-ghost`]: ghost || (pageHeader && ghost === undefined && pageHeader.ghost), + [`${prefixCls}-ghost`]: ghost, }); return ( From b99c5d53e9e8589840bec3fbba65658f9bd1e562 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Tue, 15 Oct 2019 11:22:17 +0800 Subject: [PATCH 14/14] add test --- .../__snapshots__/components.test.js.snap | 54 +++++++++++++++++++ .../__tests__/components.test.js | 14 ++++- 2 files changed, 67 insertions(+), 1 deletion(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index aa65056d65b6..f3a84984c840 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -8430,6 +8430,60 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
`; +exports[`ConfigProvider components PageHeader configProvider 1`] = ` +
+
+
+ + pageHeader + +
+
+
+`; + +exports[`ConfigProvider components PageHeader normal 1`] = ` +
+
+
+ + pageHeader + +
+
+
+`; + +exports[`ConfigProvider components PageHeader prefixCls 1`] = ` +
+
+
+ + pageHeader + +
+
+
+`; + exports[`ConfigProvider components Pagination configProvider 1`] = `
    { // configProvider it('configProvider', () => { expect( - render({renderComponent({})}), + render( + + {renderComponent({})} + , + ), ).toMatchSnapshot(); }); }); @@ -368,6 +373,13 @@ describe('ConfigProvider', () => {
)); + // PageHeader + testPair('PageHeader', props => ( +
+ +
+ )); + // Popconfirm testPair('Popconfirm', props => (