Skip to content

Commit 7a40fef

Browse files
mortalYoungmortalYoung
authored
feat(descriptions): add descriptions (#530)
1 parent 4aca82b commit 7a40fef

File tree

7 files changed

+246
-0
lines changed

7 files changed

+246
-0
lines changed

‎src/descriptions/__tests__/__snapshots__/descriptions.test.tsx.snap‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test Descriptions match snapshot: As same as antd's Descriptions 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="ant-descriptions ant-descriptions-bordered"
7+
>
8+
<div
9+
class="ant-descriptions-view"
10+
>
11+
<table>
12+
<tbody>
13+
<tr
14+
class="ant-descriptions-row"
15+
>
16+
<th
17+
class="ant-descriptions-item-label"
18+
colspan="1"
19+
>
20+
<span>
21+
名称
22+
</span>
23+
</th>
24+
<td
25+
class="ant-descriptions-item-content"
26+
colspan="1"
27+
>
28+
<span>
29+
我是 dt-react-component 组件库
30+
</span>
31+
</td>
32+
<th
33+
class="ant-descriptions-item-label"
34+
colspan="1"
35+
>
36+
<span>
37+
描述
38+
</span>
39+
</th>
40+
<td
41+
class="ant-descriptions-item-content"
42+
colspan="1"
43+
>
44+
<span>
45+
<div
46+
style="width: 0px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; min-width: 100%;"
47+
>
48+
很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行
49+
</div>
50+
</span>
51+
</td>
52+
</tr>
53+
</tbody>
54+
</table>
55+
</div>
56+
</div>
57+
</DocumentFragment>
58+
`;
59+
60+
exports[`Test Descriptions match snapshot: Fixed table layout 1`] = `
61+
<DocumentFragment>
62+
<div
63+
class="ant-descriptions ant-descriptions-bordered dtc-descriptions__fixed"
64+
>
65+
<div
66+
class="ant-descriptions-view"
67+
>
68+
<table>
69+
<tbody>
70+
<tr
71+
class="ant-descriptions-row"
72+
>
73+
<th
74+
class="ant-descriptions-item-label"
75+
colspan="1"
76+
>
77+
<span>
78+
名称
79+
</span>
80+
</th>
81+
<td
82+
class="ant-descriptions-item-content"
83+
colspan="1"
84+
>
85+
<span>
86+
我是 dt-react-component 组件库
87+
</span>
88+
</td>
89+
<th
90+
class="ant-descriptions-item-label"
91+
colspan="1"
92+
>
93+
<span>
94+
描述
95+
</span>
96+
</th>
97+
<td
98+
class="ant-descriptions-item-content"
99+
colspan="1"
100+
>
101+
<span>
102+
<div
103+
style="width: 0px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; min-width: 100%;"
104+
>
105+
很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行
106+
</div>
107+
</span>
108+
</td>
109+
</tr>
110+
</tbody>
111+
</table>
112+
</div>
113+
</div>
114+
</DocumentFragment>
115+
`;

‎src/descriptions/__tests__/descriptions.test.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
4+
import Descriptions from '..';
5+
6+
const TestDescriptions = ({ fixed }: { fixed?: boolean }) => {
7+
return (
8+
<Descriptions bordered column={2} tableLayout={fixed ? 'fixed' : 'auto'}>
9+
<Descriptions.Item label="名称">我是 dt-react-component 组件库</Descriptions.Item>
10+
<Descriptions.Item label="描述">
11+
<div
12+
style={{
13+
width: 0,
14+
textOverflow: 'ellipsis',
15+
overflow: 'hidden',
16+
whiteSpace: 'nowrap',
17+
minWidth: '100%',
18+
}}
19+
>
20+
很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行
21+
</div>
22+
</Descriptions.Item>
23+
</Descriptions>
24+
);
25+
};
26+
27+
describe('Test Descriptions', () => {
28+
it('match snapshot', () => {
29+
expect(render(<TestDescriptions />).asFragment()).toMatchSnapshot(
30+
"As same as antd's Descriptions"
31+
);
32+
33+
expect(render(<TestDescriptions fixed />).asFragment()).toMatchSnapshot(
34+
'Fixed table layout'
35+
);
36+
});
37+
});

‎src/descriptions/demos/basic.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { useState } from 'react';
2+
import { Space, Switch } from 'antd';
3+
import { Descriptions, EllipsisText } from 'dt-react-component';
4+
5+
export default function Basic() {
6+
const [fixed, setFixed] = useState(true);
7+
return (
8+
<Space size={8} direction="vertical">
9+
<Switch
10+
checkedChildren="fixed"
11+
unCheckedChildren="auto"
12+
checked={fixed}
13+
onChange={setFixed}
14+
/>
15+
<Descriptions bordered column={2} tableLayout={fixed ? 'fixed' : 'auto'}>
16+
<Descriptions.Item label="名称">
17+
<EllipsisText value="我是 dt-react-component 组件库" maxWidth={120} />
18+
</Descriptions.Item>
19+
<Descriptions.Item label="描述">
20+
<div
21+
style={{
22+
width: 0,
23+
textOverflow: 'ellipsis',
24+
overflow: 'hidden',
25+
whiteSpace: 'nowrap',
26+
minWidth: '100%',
27+
}}
28+
>
29+
很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行
30+
</div>
31+
</Descriptions.Item>
32+
</Descriptions>
33+
</Space>
34+
);
35+
}

‎src/descriptions/index.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: Descriptions 描述列表
3+
group: 组件
4+
toc: content
5+
demo:
6+
cols: 1
7+
---
8+
9+
# Descriptions 描述列表
10+
11+
## 何时使用
12+
13+
展示多个只读字段的组合。(支持设置 table-layout 为 fixed)
14+
15+
## 示例
16+
17+
<code src='./demos/basic.tsx' title="设置 tableLayout"></code>
18+
19+
### API
20+
21+
| 参数 | 说明 | 类型 | 默认值 |
22+
| ----------- | ---- | ------------------- | ------ |
23+
| tableLayout | - | `'auto' \| 'fixed'` | 'auto' |
24+
25+
## FAQ
26+
27+
### 为什么要把 table-layout 设置为 fixed？
28+
29+
参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout#fixed) 中关于 `table-layout` 的相关描述可以看出，当我们的需求是用 `Descriptions` 组件用固定比例展示字段信息的时候，相比 `auto` 的属性，更好地是 `fixed` 属性

‎src/descriptions/index.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.dtc-descriptions {
2+
&__fixed {
3+
.ant-descriptions-view > table {
4+
table-layout: fixed;
5+
}
6+
}
7+
}

‎src/descriptions/index.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { Descriptions as AntdDescriptions, DescriptionsProps as AntdDescriptionsProps } from 'antd';
3+
import classNames from 'classnames';
4+
5+
import './index.scss';
6+
7+
interface DescriptionsProps extends AntdDescriptionsProps {
8+
tableLayout?: 'auto' | 'fixed';
9+
}
10+
11+
function Descriptions({ className, tableLayout, ...rest }: DescriptionsProps) {
12+
return (
13+
<AntdDescriptions
14+
className={classNames(tableLayout === 'fixed' && 'dtc-descriptions__fixed', className)}
15+
{...rest}
16+
/>
17+
);
18+
}
19+
20+
Descriptions.Item = AntdDescriptions.Item;
21+
22+
export default Descriptions;

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export { default as CollapsibleActionItems } from './collapsibleActionItems';
44
export { default as ContentLayout } from './contentLayout';
55
export { default as ContextMenu } from './contextMenu';
66
export { default as Copy } from './copy';
7+
export { default as Descriptions } from './descriptions';
78
export { default as Drawer } from './drawer';
89
export { default as Dropdown } from './dropdown';
910
export { default as EllipsisText } from './ellipsisText';

0 commit comments

Comments
 (0)