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
ant-design · Oct 15, 2019 · 338018e · 338018e
1 parent e75fa03
commit 338018e
Show file tree

Hide file tree

Showing 19 changed files with 393 additions and 36 deletions.
diff --git 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`] = `
 </div>
 `;
 
+exports[`ConfigProvider components PageHeader configProvider 1`] = `
+<div>
+  <div
+    class="config-page-header"
+  >
+    <div
+      class="config-page-header-heading"
+    >
+      <span
+        class="config-page-header-heading-title"
+      >
+        pageHeader
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider components PageHeader normal 1`] = `
+<div>
+  <div
+    class="ant-page-header ant-page-header-ghost"
+  >
+    <div
+      class="ant-page-header-heading"
+    >
+      <span
+        class="ant-page-header-heading-title"
+      >
+        pageHeader
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider components PageHeader prefixCls 1`] = `
+<div>
+  <div
+    class="prefix-PageHeader prefix-PageHeader-ghost"
+  >
+    <div
+      class="prefix-PageHeader-heading"
+    >
+      <span
+        class="prefix-PageHeader-heading-title"
+      >
+        pageHeader
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ConfigProvider components Pagination configProvider 1`] = `
 <div>
   <ul

diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js
@@ -31,6 +31,7 @@ import Mention from '../../mention';
 import Menu from '../../menu';
 import Modal from '../../modal';
 import Pagination from '../../pagination';
+import PageHeader from '../../page-header';
 import Popconfirm from '../../popconfirm';
 import Popover from '../../popover';
 import Progress from '../../progress';
@@ -74,7 +75,11 @@ describe('ConfigProvider', () => {
         // configProvider
         it('configProvider', () => {
           expect(
-            render(<ConfigProvider prefixCls="config">{renderComponent({})}</ConfigProvider>),
+            render(
+              <ConfigProvider pageHeader={{ ghost: false }} prefixCls="config">
+                {renderComponent({})}
+              </ConfigProvider>,
+            ),
           ).toMatchSnapshot();
         });
       });
@@ -368,6 +373,13 @@ describe('ConfigProvider', () => {
       </div>
     ));
 
+    // PageHeader
+    testPair('PageHeader', props => (
+      <div>
+        <PageHeader title="pageHeader" {...props} />
+      </div>
+    ));
+
     // Popconfirm
     testPair('Popconfirm', props => (
       <div>

diff --git 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<ConfigConsumerProps>({

diff --git 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
@@ -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<ConfigProviderProps> {
@@ -47,6 +51,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       csp,
       autoInsertSpaceInButton,
       locale,
+      pageHeader,
     } = this.props;
 
     const config: ConfigConsumerProps = {
@@ -59,10 +64,15 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
     if (getPopupContainer) {
       config.getPopupContainer = getPopupContainer;
     }
+
     if (renderEmpty) {
       config.renderEmpty = renderEmpty;
     }
 
+    if (pageHeader) {
+      config.pageHeader = pageHeader;
+    }
+
     return (
       <ConfigContext.Provider value={config}>
         <LocaleProvider locale={locale || legacyLocale} _ANT_MARK__={ANT_MARK}>

diff --git 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
@@ -257,6 +257,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
             'getPrefixCls',
             'renderEmpty',
             'csp',
+            'pageHeader',
             'autoInsertSpaceInButton',
           ])}
           {...offsetStyle}