🔥feat: new pageheader style

components/page-header/__tests__/index.test.js

@@ -63,4 +63,26 @@ describe('PageHeader', () => {
     const wrapper = render(<PageHeader title={false} />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('breadcrumbs and back icon can only have one', () => {
+    const routes = [
+      {
+        path: 'index',
+        breadcrumbName: 'First-level Menu',
+      },
+      {
+        path: 'first',
+        breadcrumbName: 'Second-level Menu',
+      },
+      {
+        path: 'second',
+        breadcrumbName: 'Third-level Menu',
+      },
+    ];
+    const wrapper = mount(<PageHeader title="Title" onBack={() => true} breadcrumb={{ routes }} />);
+    expect(wrapper.find('.ant-breadcrumb')).toHaveLength(0);
+
+    wrapper.setProps({ onBack: undefined });
+    expect(wrapper.find('.ant-breadcrumb')).toHaveLength(1);
+  });
 });

components/page-header/demo/actions.md

@@ -1,8 +1,8 @@
 ---
-order: 5
+order: 4
 title:
-  zh-CN: 复杂的例子
-  en-US: Complex example
+  zh-CN: 组合起来的例子
+  en-US: Compose example
 ---
 
 ## zh-CN
@@ -14,107 +14,72 @@ title:
 Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page.
 
 ```jsx
-import { PageHeader, Tag, Tabs, Button, Statistic, Row, Col } from 'antd';
-
-const { TabPane } = Tabs;
-
-const Description = ({ term, children, span = 12 }) => (
-  <Col span={span}>
-    <div className="description">
-      <div className="term">{term}</div>
-      <div className="detail">{children}</div>
-    </div>
-  </Col>
-);
-
-const content = (
-  <Row>
-    <Description term="Created">Lili Qu</Description>
-    <Description term="Association">
-      <a>421421</a>
-    </Description>
-    <Description term="Creation Time">2017-01-10</Description>
-    <Description term="Effective Time">2017-10-10</Description>
-    <Description term="Remarks" span={24}>
-      Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-    </Description>
-  </Row>
-);
-
-const extraContent = (
-  <Row>
-    <Col span={12}>
-      <Statistic title="Status" value="Pending" />
-    </Col>
-    <Col span={12}>
-      <Statistic title="Price" prefix="$" value={568.08} />
-    </Col>
-  </Row>
-);
+import { PageHeader, Tag, Button, Statistic, Descriptions } from 'antd';
 
 ReactDOM.render(
-  <PageHeader
-    onBack={() => window.history.back()}
-    title="Title"
-    subTitle="This is a subtitle"
-    tags={<Tag color="red">Warning</Tag>}
-    extra={[
-      <Button key="3">Operation</Button>,
-      <Button key="2">Operation</Button>,
-      <Button key="1" type="primary">
-        Primary
-      </Button>,
-    ]}
-    footer={
-      <Tabs defaultActiveKey="1">
-        <TabPane tab="Details" key="1" />
-        <TabPane tab="Rule" key="2" />
-      </Tabs>
-    }
-  >
-    <div className="wrap">
-      <div className="content padding">{content}</div>
-      <div className="extraContent">{extraContent}</div>
-    </div>
-  </PageHeader>,
+  <div>
+    <PageHeader
+      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>
+    <br />
+    <PageHeader
+      onBack={() => window.history.back()}
+      title="Title"
+      tags={<Tag color="blue">Running</Tag>}
+      subTitle="This is a subtitle"
+      extra={[
+        <Button key="3">Operation</Button>,
+        <Button key="2">Operation</Button>,
+        <Button key="1" type="primary">
+          Primary
+        </Button>,
+      ]}
+    >
+      <div
+        style={{
+          display: 'flex',
+        }}
+      >
+        <Statistic title="Status" value="Pending" />
+        <Statistic
+          title="Price"
+          prefix="$"
+          value={568.08}
+          style={{
+            margin: '0 32px',
+          }}
+        />
+        <Statistic title="Balance" prefix="$" value={3345.08} />
+      </div>
+    </PageHeader>
+  </div>,
   mountNode,
 );
 ```
 
 <style>
-#components-page-header-demo-actions .wrap {
-  display: flex;
-}
-#components-page-header-demo-actions .content {
-  flex: 1;
-}
-#components-page-header-demo-actions .extraContent {
-  min-width: 240px;
-  text-align: right;
-}
-#components-page-header-demo-actions .content.padding {
-  padding-left: 40px;
-}
-#components-page-header-demo-actions .content .description {
-  display: table;
-}
-#components-page-header-demo-actions .description .term {
-  display: table-cell;
-  margin-right: 8px;
-  padding-bottom: 8px;
-  white-space: nowrap;
-  line-height: 20px;
-}
-#components-page-header-demo-actions .description .term:after {
-  position: relative;
-  top: -0.5px;
-  margin: 0 8px 0 2px;
-  content: ":";
-}
-#components-page-header-demo-actions .description .detail {
-  display: table-cell;
-  padding-bottom: 8px;
-  width: 100%;
-  line-height: 20px;
+tr:last-child td {
+  padding-bottom: 0;
 }
 </style>

components/page-header/demo/breadcrumb.md

@@ -31,5 +31,8 @@ const routes = [
   },
 ];
 
-ReactDOM.render(<PageHeader title="Title" breadcrumb={{ routes }} />, mountNode);
+ReactDOM.render(
+  <PageHeader title="Title" breadcrumb={{ routes }} subTitle="This is a subtitle" />,
+  mountNode,
+);
 ```