add type props

ant-design · Oct 10, 2019 · a48811b · a48811b
1 parent c881680
commit a48811b
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 6 deletions.
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -22,6 +22,7 @@ export interface ConfigConsumerProps {
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
   locale?: Locale;
+  pageHeaderType?: 'pure' | 'default';
 }
 
 export const configConsumerProps = [
@@ -32,6 +33,7 @@ export const configConsumerProps = [
   'csp',
   'autoInsertSpaceInButton',
   'locale',
+  'pageHeaderType',
 ];
 
 export interface ConfigProviderProps {
@@ -42,6 +44,7 @@ export interface ConfigProviderProps {
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
   locale?: Locale;
+  pageHeaderType?: 'pure' | 'default';
 }
 
 const ConfigContext = createReactContext<ConfigConsumerProps>({
@@ -74,6 +77,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       csp,
       autoInsertSpaceInButton,
       locale,
+      pageHeaderType,
     } = this.props;
 
     const config: ConfigConsumerProps = {
@@ -90,6 +94,11 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       config.renderEmpty = renderEmpty;
     }
 
+    // set pageHeader type
+    if (pageHeaderType) {
+      config.pageHeaderType = pageHeaderType;
+    }
+
     return (
       <ConfigContext.Provider value={config}>
         <LocaleProvider locale={locale || legacyLocale} _ANT_MARK__={ANT_MARK}>

diff --git a/components/page-header/demo/actions.md b/components/page-header/demo/actions.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title:
   zh-CN: 多种形态的 PageHeader
   en-US: Various forms of PageHeader

diff --git a/components/page-header/demo/breadcrumb.md b/components/page-header/demo/breadcrumb.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
   zh-CN: 带面包屑页头
   en-US: Use with breadcrumbs

diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 title:
   zh-CN: 组合示例
   en-US: Complete example

diff --git a/components/page-header/demo/pure.md b/components/page-header/demo/pure.md
@@ -0,0 +1,60 @@
+---
+order: 2
+title:
+  zh-CN: 纯净模式，没有白底
+  en-US: Pure mode, no white background
+---
+
+## zh-CN
+
+在某些情况下，pageHeader 不需要自己的背景颜色。
+
+## en-US
+
+In some cases, pageHeader does not require its own background color.
+
+```jsx
+import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd';
+
+ReactDOM.render(
+  <div
+    style={{
+      backgroundColor: '#eee',
+      padding: 24,
+    }}
+  >
+    <PageHeader
+      type="pure"
+      onBack={() => window.history.back()}
+      title="Title"
+      subTitle="This is a subtitle"
+      extra={[
+        <Button key="3">Operation</Button>,
+        <Button key="2">Operation</Button>,
+        <Button key="1" type="primary">
+          Primary
+        </Button>,
+      ]}
+    >
+      <Descriptions size="small" column={3}>
+        <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
+        <Descriptions.Item label="Association">
+          <a>421421</a>
+        </Descriptions.Item>
+        <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
+        <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
+        <Descriptions.Item label="Remarks">
+          Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
+        </Descriptions.Item>
+      </Descriptions>
+    </PageHeader>
+  </div>,
+  mountNode,
+);
+```
+
+<style>
+#components-page-header-demo-pure .code-box-demo .ant-page-header {
+  border: 1px solid #1890ff;
+}
+</style>
diff --git 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
@@ -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 | `<Icon type="arrow-left" />` | 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
@@ -22,6 +22,7 @@ export interface PageHeaderProps {
   avatar?: AvatarProps;
   onBack?: (e: React.MouseEvent<HTMLDivElement>) => void;
   className?: string;
+  type?: 'pure' | 'default';
 }
 
 const renderBack = (
@@ -89,12 +90,13 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => {
 
 const PageHeader: React.SFC<PageHeaderProps> = props => (
   <ConfigConsumer>
-    {({ getPrefixCls }: ConfigConsumerProps) => {
+    {({ getPrefixCls, pageHeaderType }: ConfigConsumerProps) => {
       const {
         prefixCls: customizePrefixCls,
         style,
         footer,
         children,
+        type,
         breadcrumb,
         className: customizeClassName,
       } = props;
@@ -104,6 +106,7 @@ const PageHeader: React.SFC<PageHeaderProps> = 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
@@ -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 | `<Icon type="arrow-left" />` | 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
@@ -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;
   }