Skip to content

Commit 8996db2

Browse files
tangjinzhoutangjinzhou
committed
Merge branch 'v3' into next
2 parents 700d04b + 9ce43be commit 8996db2

File tree

8 files changed

+247
-88
lines changed

8 files changed

+247
-88
lines changed

‎components/descriptions/Cell.tsx

+36-16
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { VNodeTypes, HTMLAttributes, FunctionalComponent } from 'vue';
1+
import { VNodeTypes, HTMLAttributes, FunctionalComponent, CSSProperties } from 'vue';
22

33
function notEmpty(val: any) {
44
return val !== undefined && val !== null;
@@ -8,14 +8,26 @@ interface CellProps extends HTMLAttributes {
88
itemPrefixCls: string;
99
span: number;
1010
component: string;
11+
labelStyle?: CSSProperties;
12+
contentStyle?: CSSProperties;
1113
bordered?: boolean;
1214
label?: VNodeTypes;
1315
content?: VNodeTypes;
1416
colon?: boolean;
1517
}
1618

1719
const Cell: FunctionalComponent<CellProps> = props => {
18-
const { itemPrefixCls, component, span, bordered, label, content, colon } = props;
20+
const {
21+
itemPrefixCls,
22+
component,
23+
span,
24+
labelStyle,
25+
contentStyle,
26+
bordered,
27+
label,
28+
content,
29+
colon,
30+
} = props;
1931
const Component = component as any;
2032
if (bordered) {
2133
return (
@@ -28,26 +40,34 @@ const Cell: FunctionalComponent<CellProps> = props => {
2840
]}
2941
colSpan={span}
3042
>
31-
{notEmpty(label) ? label : content}
43+
{notEmpty(label) && <span style={labelStyle}>{label}</span>}
44+
{notEmpty(content) && <span style={contentStyle}>{content}</span>}
3245
</Component>
3346
);
3447
}
3548

3649
return (
3750
<Component class={[`${itemPrefixCls}-item`]} colSpan={span}>
38-
{label && (
39-
<span
40-
class={[
41-
`${itemPrefixCls}-item-label`,
42-
{
43-
[`${itemPrefixCls}-item-no-colon`]: !colon,
44-
},
45-
]}
46-
>
47-
{label}
48-
</span>
49-
)}
50-
{content && <span class={`${itemPrefixCls}-item-content`}>{content}</span>}
51+
<div class={`${itemPrefixCls}-item-container`}>
52+
{label && (
53+
<span
54+
class={[
55+
`${itemPrefixCls}-item-label`,
56+
{
57+
[`${itemPrefixCls}-item-no-colon`]: !colon,
58+
},
59+
]}
60+
style={labelStyle}
61+
>
62+
{label}
63+
</span>
64+
)}
65+
{content && (
66+
<span class={`${itemPrefixCls}-item-content`} style={contentStyle}>
67+
{content}
68+
</span>
69+
)}
70+
</div>
5171
</Component>
5272
);
5373
};

‎components/descriptions/Row.tsx

+37-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Cell from './Cell';
2-
import { getOptionProps, getSlot, getClass, getStyle, getComponent } from '../_util/props-util';
3-
import { FunctionalComponent, VNode } from 'vue';
2+
import { getSlot, getClass, getStyle } from '../_util/props-util';
3+
import { FunctionalComponent, VNode, inject, ref } from 'vue';
4+
import { descriptionsContext, DescriptionsContextProp } from './index';
45

56
interface CellConfig {
67
component: string | [string, string];
@@ -22,12 +23,23 @@ const Row: FunctionalComponent<RowProps> = props => {
2223
const renderCells = (
2324
items: VNode[],
2425
{ colon, prefixCls, bordered },
25-
{ component, type, showLabel, showContent }: CellConfig,
26+
{
27+
component,
28+
type,
29+
showLabel,
30+
showContent,
31+
labelStyle: rootLabelStyle,
32+
contentStyle: rootContentStyle,
33+
}: CellConfig & DescriptionsContextProp,
2634
) => {
2735
return items.map((item, index) => {
28-
const { prefixCls: itemPrefixCls = prefixCls, span = 1 } = getOptionProps(item);
29-
const label = getComponent(item, 'label');
30-
36+
const {
37+
prefixCls: itemPrefixCls = prefixCls,
38+
span = 1,
39+
labelStyle,
40+
contentStyle,
41+
label = (item.children as any)?.label?.(),
42+
} = item.props || {};
3143
const children = getSlot(item);
3244
const className = getClass(item);
3345
const style = getStyle(item);
@@ -39,6 +51,8 @@ const Row: FunctionalComponent<RowProps> = props => {
3951
key={`${type}-${key || index}`}
4052
class={className}
4153
style={style}
54+
labelStyle={{ ...rootLabelStyle.value, ...labelStyle }}
55+
contentStyle={{ ...rootContentStyle.value, ...contentStyle }}
4256
span={span}
4357
colon={colon}
4458
component={component}
@@ -54,7 +68,7 @@ const Row: FunctionalComponent<RowProps> = props => {
5468
<Cell
5569
key={`label-${key || index}`}
5670
class={className}
57-
style={style}
71+
style={{ ...rootLabelStyle.value, ...style, ...labelStyle }}
5872
span={1}
5973
colon={colon}
6074
component={component[0]}
@@ -65,7 +79,7 @@ const Row: FunctionalComponent<RowProps> = props => {
6579
<Cell
6680
key={`content-${key || index}`}
6781
class={className}
68-
style={style}
82+
style={{ ...rootContentStyle.value, ...style, ...contentStyle }}
6983
span={span * 2 - 1}
7084
component={component[1]}
7185
itemPrefixCls={itemPrefixCls}
@@ -77,17 +91,29 @@ const Row: FunctionalComponent<RowProps> = props => {
7791
};
7892

7993
const { prefixCls, vertical, row, index, bordered } = props;
94+
const { labelStyle, contentStyle } = inject(descriptionsContext, {
95+
labelStyle: ref({}),
96+
contentStyle: ref({}),
97+
});
8098
if (vertical) {
8199
return (
82100
<>
83101
<tr key={`label-${index}`} class={`${prefixCls}-row`}>
84-
{renderCells(row, props, { component: 'th', type: 'label', showLabel: true })}
102+
{renderCells(row, props, {
103+
component: 'th',
104+
type: 'label',
105+
showLabel: true,
106+
labelStyle,
107+
contentStyle,
108+
})}
85109
</tr>
86110
<tr key={`content-${index}`} class={`${prefixCls}-row`}>
87111
{renderCells(row, props, {
88112
component: 'td',
89113
type: 'content',
90114
showContent: true,
115+
labelStyle,
116+
contentStyle,
91117
})}
92118
</tr>
93119
</>
@@ -101,6 +127,8 @@ const Row: FunctionalComponent<RowProps> = props => {
101127
type: 'item',
102128
showLabel: true,
103129
showContent: true,
130+
labelStyle,
131+
contentStyle,
104132
})}
105133
</tr>
106134
);

‎components/descriptions/__tests__/__snapshots__/index.test.js.snap

+61-23
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ exports[`Descriptions Descriptions support colon 1`] = `
77
<table>
88
<tbody>
99
<tr class="ant-descriptions-row">
10-
<td class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label ant-descriptions-item-no-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
10+
<td class="ant-descriptions-item" colspan="3">
11+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label ant-descriptions-item-no-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
12+
</td>
1113
</tr>
1214
</tbody>
1315
</table>
@@ -23,7 +25,9 @@ exports[`Descriptions Descriptions support style 1`] = `
2325
<tbody>
2426
<tr class="ant-descriptions-row">
2527
<td class="ant-descriptions-item" colspan="3">
26-
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
28+
<div class="ant-descriptions-item-container">
29+
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
30+
</div>
2731
</td>
2832
</tr>
2933
</tbody>
@@ -39,7 +43,9 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
3943
<table>
4044
<tbody>
4145
<tr class="ant-descriptions-row">
42-
<td class="ant-descriptions-item my-class" colspan="3"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
46+
<td class="ant-descriptions-item my-class" colspan="3">
47+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
48+
</td>
4349
</tr>
4450
</tbody>
4551
</table>
@@ -54,12 +60,20 @@ exports[`Descriptions column is number 1`] = `
5460
<table>
5561
<tbody>
5662
<tr class="ant-descriptions-row">
57-
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
58-
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
59-
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
63+
<td class="ant-descriptions-item" colspan="1">
64+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
65+
</td>
66+
<td class="ant-descriptions-item" colspan="1">
67+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></div>
68+
</td>
69+
<td class="ant-descriptions-item" colspan="1">
70+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></div>
71+
</td>
6072
</tr>
6173
<tr class="ant-descriptions-row">
62-
<td class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
74+
<td class="ant-descriptions-item" colspan="3">
75+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></div>
76+
</td>
6377
</tr>
6478
</tbody>
6579
</table>
@@ -74,35 +88,51 @@ exports[`Descriptions vertical layout 1`] = `
7488
<table>
7589
<tbody>
7690
<tr class="ant-descriptions-row">
77-
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span>
78-
<!---->
91+
<th class="ant-descriptions-item" colspan="1">
92+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span>
93+
<!---->
94+
</div>
7995
</th>
80-
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span>
81-
<!---->
96+
<th class="ant-descriptions-item" colspan="1">
97+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span>
98+
<!---->
99+
</div>
82100
</th>
83-
<th class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">time</span>
84-
<!---->
101+
<th class="ant-descriptions-item" colspan="1">
102+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span>
103+
<!---->
104+
</div>
85105
</th>
86106
</tr>
87107
<tr class="ant-descriptions-row">
88108
<td class="ant-descriptions-item" colspan="1">
89-
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
109+
<div class="ant-descriptions-item-container">
110+
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
111+
</div>
90112
</td>
91113
<td class="ant-descriptions-item" colspan="1">
92-
<!----><span class="ant-descriptions-item-content">Prepaid</span>
114+
<div class="ant-descriptions-item-container">
115+
<!----><span class="ant-descriptions-item-content">Prepaid</span>
116+
</div>
93117
</td>
94118
<td class="ant-descriptions-item" colspan="1">
95-
<!----><span class="ant-descriptions-item-content">18:00:00</span>
119+
<div class="ant-descriptions-item-container">
120+
<!----><span class="ant-descriptions-item-content">18:00:00</span>
121+
</div>
96122
</td>
97123
</tr>
98124
<tr class="ant-descriptions-row">
99-
<th class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label">Amount</span>
100-
<!---->
125+
<th class="ant-descriptions-item" colspan="3">
126+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span>
127+
<!---->
128+
</div>
101129
</th>
102130
</tr>
103131
<tr class="ant-descriptions-row">
104132
<td class="ant-descriptions-item" colspan="3">
105-
<!----><span class="ant-descriptions-item-content">$80.00</span>
133+
<div class="ant-descriptions-item-container">
134+
<!----><span class="ant-descriptions-item-content">$80.00</span>
135+
</div>
106136
</td>
107137
</tr>
108138
</tbody>
@@ -118,12 +148,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
118148
<table>
119149
<tbody>
120150
<tr class="ant-descriptions-row">
121-
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
122-
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
123-
<td class="ant-descriptions-item" colspan="1"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
151+
<td class="ant-descriptions-item" colspan="1">
152+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
153+
</td>
154+
<td class="ant-descriptions-item" colspan="1">
155+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></div>
156+
</td>
157+
<td class="ant-descriptions-item" colspan="1">
158+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></div>
159+
</td>
124160
</tr>
125161
<tr class="ant-descriptions-row">
126-
<td class="ant-descriptions-item" colspan="3"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
162+
<td class="ant-descriptions-item" colspan="3">
163+
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></div>
164+
</td>
127165
</tr>
128166
</tbody>
129167
</table>

‎components/descriptions/__tests__/index.test.js

+15-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { mount } from '@vue/test-utils';
2+
import { h } from 'vue';
23
import MockDate from 'mockdate';
34
import Descriptions from '..';
45
import { resetWarned } from '../../_util/warning';
@@ -263,21 +264,27 @@ describe('Descriptions', () => {
263264
});
264265

265266
it('Descriptions support extra', async () => {
266-
const wrapper = mount({
267-
render() {
268-
return (
269-
<Descriptions extra="Edit">
270-
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
271-
</Descriptions>
272-
);
267+
const wrapper = mount(Descriptions, {
268+
props: {
269+
extra: 'Edit',
270+
},
271+
slots: {
272+
default: h(
273+
Descriptions.Item,
274+
{
275+
label: 'UserName',
276+
},
277+
'Zhou Maomao',
278+
),
273279
},
274280
});
275281

276282
await asyncExpect(() => {
277283
expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(true);
278-
wrapper.setProps({ extra: undefined });
279284
});
280285

286+
wrapper.setProps({ extra: undefined });
287+
281288
await asyncExpect(() => {
282289
expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false);
283290
});

0 commit comments

Comments
 (0)