Skip to content

Commit

Permalink
improve(ui): PageContainer style when only having title
Browse files Browse the repository at this point in the history
  • Loading branch information
@dengfuping
dengfuping committed Sep 12, 2024
1 parent b5fd779 commit af942a6
Show file tree
Hide file tree
Showing 5 changed files with 257 additions and 2 deletions.
214 changes: 214 additions & 0 deletions packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -982,3 +982,217 @@ exports[`PageContainer > extra and footer 1`] = `
</div>
</div>
`;

exports[`PageContainer > title 1`] = `
<div
class="ant-pro-page-container ant-pro-page-container-with-footer"
>
<div
class="ant-page-header ant-pro-page-container-warp-page-header ant-page-header-ghost"
>
<div
class="ant-page-header-heading "
>
<div
class="ant-page-header-heading-left"
>
<span
class="ant-page-header-heading-title"
title="页面标题"
>
页面标题
</span>
</div>
</div>
</div>
<div
class="ant-pro-grid-content"
>
<div
class="ant-pro-grid-content-children"
>
<div
class="ant-pro-page-container-children-container"
>
<div
class="ant-card"
>
<div
class="ant-card-body"
>
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-header"
>
<div
class="ant-descriptions-title"
>
基本信息
</div>
</div>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
创建人
</span>
<span
class="ant-descriptions-item-content"
>
<span
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
>
曲丽丽
</span>
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
电话号码
</span>
<span
class="ant-descriptions-item-content"
>
<span
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
>
1810000000
</span>
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
地址
</span>
<span
class="ant-descriptions-item-content"
>
<span
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
>
浙江省杭州市西湖区工专路
</span>
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
关联表单
</span>
<span
class="ant-descriptions-item-content"
>
<span
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
>
<a>
421421
</a>
</span>
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
创建时间
</span>
<span
class="ant-descriptions-item-content"
>
<span
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
>
2017-01-10
</span>
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
备注
</span>
<span
class="ant-descriptions-item-content"
>
<span
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
>
这是备注
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
6 changes: 6 additions & 0 deletions packages/ui/src/PageContainer/__tests__/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { render } from '@testing-library/react';
import BasicDemo from '../demo/basic';
import ExtraAndFooterDemo from '../demo/extra-footer';
import TitleCompatibleDemo from '../demo/title';

describe('PageContainer', () => {
it('basic', () => {
Expand All @@ -13,4 +14,9 @@ describe('PageContainer', () => {
const { asFragment } = render(<ExtraAndFooterDemo />);
expect(asFragment().firstChild).toMatchSnapshot();
});

it('title', () => {
const { asFragment } = render(<TitleCompatibleDemo />);
expect(asFragment().firstChild).toMatchSnapshot();
});
});
29 changes: 29 additions & 0 deletions packages/ui/src/PageContainer/demo/title.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* iframe: 600
*/
import React from 'react';
import { Button, Card, Descriptions } from '@oceanbase/design';
import { PageContainer } from '@oceanbase/ui';

export default () => {
return (
<PageContainer
ghost={false}
title="页面标题"
footer={[<Button>重置</Button>, <Button type="primary">提交</Button>]}
>
<Card bordered={false}>
<Descriptions title="基本信息">
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
<Descriptions.Item label="电话号码">1810000000</Descriptions.Item>
<Descriptions.Item label="地址">浙江省杭州市西湖区工专路</Descriptions.Item>
<Descriptions.Item label="关联表单">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
<Descriptions.Item label="备注">这是备注</Descriptions.Item>
</Descriptions>
</Card>
</PageContainer>
);
};
6 changes: 4 additions & 2 deletions packages/ui/src/PageContainer/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@ nav:

<code src="./demo/with-tabs.tsx" iframe="600" title="和 Tabs 组合使用"></code>

<code src="./demo/extra-footer.tsx" title="页头和页脚操作区" description="位于页头和页脚操作区的组件尺寸为 `large`，字体大小为 `middle`。" debug></code>

<code src="./demo/header-less.tsx" iframe="600" title="无 PageHeader" description="头部内容为空"></code>

<code src="./demo/empty.tsx" title="空页面"></code>

<code src="./demo/extra-footer.tsx" title="页头和页脚操作区" description="位于页头和页脚操作区的组件尺寸为 `large`，字体大小为 `middle`。" debug></code>

<code src="./demo/title.tsx" title="title 属性" description="样式需要符合预期" debug></code>

## 与路由搭配使用

由于 PageContainer 内置的面包屑导航跳转依赖路由能力，需要通过 ConfigProvider 全局注入 `navigate` 函数才会生效。
Expand Down
4 changes: 4 additions & 0 deletions packages/ui/src/PageContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export interface PageContainerProps extends AntPageContainerProps {
const PageContainer = ({
prefixCls: customizePrefixCls,
className,
/* compatible with title prop */
title,
header,
content,
extraContent,
Expand Down Expand Up @@ -83,6 +85,7 @@ const PageContainer = ({
},
};
const noHasHeader =
!title &&
['title', 'subTitle', 'extra', 'tags', 'avatar', 'backIcon', 'breadcrumb'].every(
item => !newHeader?.[item]
) &&
Expand All @@ -102,6 +105,7 @@ const PageContainer = ({
<AntPageContainer
prefixCls={customizePrefixCls}
className={pageContainerCls}
title={title}
header={newHeader}
content={content}
extraContent={extraContent}
Expand Down

0 comments on commit af942a6

Please sign in to comment.