From 338018eba3837e7edf8e25d8d4443b47723a391c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Tue, 15 Oct 2019 11:46:12 +0800 Subject: [PATCH] feat: Pageheader new style and props (#19100) * pure page header style * add type props * add prue demo * add config provider doc * fix lint * fix lint error * change pure to ghost * fix test * default ghost is true * fix review style * fix review warning * use online style * remove defualt and remove comment * add test --- .../__snapshots__/components.test.js.snap | 54 +++++ .../__tests__/components.test.js | 14 +- components/config-provider/context.ts | 3 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 10 + components/config-provider/index.zh-CN.md | 1 + components/drawer/index.tsx | 1 + .../__tests__/__snapshots__/demo.test.js.snap | 202 +++++++++++++++++- .../__snapshots__/index.test.js.snap | 4 +- components/page-header/demo/actions.md | 5 +- components/page-header/demo/basic.md | 15 +- components/page-header/demo/breadcrumb.md | 11 +- components/page-header/demo/content.md | 11 +- components/page-header/demo/ghost.md | 54 +++++ components/page-header/demo/responsive.md | 11 +- components/page-header/index.en-US.md | 1 + components/page-header/index.tsx | 12 +- components/page-header/index.zh-CN.md | 1 + components/page-header/style/index.less | 18 +- 19 files changed, 393 insertions(+), 36 deletions(-) create mode 100644 components/page-header/demo/ghost.md 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`] = `
)); + // PageHeader + testPair('PageHeader', props => ( +
+ +
+ )); + // Popconfirm testPair('Popconfirm', props => (
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 37f2426cccd0..da5c29dfbdfe 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -14,6 +14,9 @@ export interface ConfigConsumerProps { csp?: CSPConfig; autoInsertSpaceInButton?: boolean; locale?: Locale; + pageHeader?: { + ghost: boolean; + }; } export const ConfigContext = createReactContext({ diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 8dc6fcb5eb05..14e3f2c75a0a 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 | +| 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 92a30c37fd06..617b68346354 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -18,6 +18,7 @@ export const configConsumerProps = [ 'csp', 'autoInsertSpaceInButton', 'locale', + 'pageHeader', ]; export interface ConfigProviderProps { @@ -28,6 +29,9 @@ export interface ConfigProviderProps { csp?: CSPConfig; autoInsertSpaceInButton?: boolean; locale?: Locale; + pageHeader?: { + ghost: boolean; + }; } class ConfigProvider extends React.Component { @@ -47,6 +51,7 @@ class ConfigProvider extends React.Component { csp, autoInsertSpaceInButton, locale, + pageHeader, } = this.props; const config: ConfigConsumerProps = { @@ -59,10 +64,15 @@ class ConfigProvider extends React.Component { if (getPopupContainer) { config.getPopupContainer = getPopupContainer; } + if (renderEmpty) { config.renderEmpty = renderEmpty; } + if (pageHeader) { + config.pageHeader = pageHeader; + } + return ( diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index f8e1936f1da3..d607213ba305 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 | +| pageHeader | 统一设置 pageHeader 的 type，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | 3.24.0 | 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/ghost.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`] = `
`; exports[`PageHeader pageHeader should support className 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, ); ``` - -