Skip to content

Commit e5924d5

Browse files
sendyasendya
authored
feat: update descriptions (#2385)
* feat: update descriptions * fix: merge Col props
1 parent e2ce58f commit e5924d5

File tree

2 files changed

+71
-72
lines changed

2 files changed

+71
-72
lines changed

‎components/descriptions/Col.jsx

+56-52
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import PropTypes from '../_util/vue-types';
2-
import { getOptionProps, getSlots, getComponentFromProp } from '../_util/props-util';
2+
import { getOptionProps } from '../_util/props-util';
33

44
const ColProps = {
55
child: PropTypes.any,
@@ -9,70 +9,74 @@ const ColProps = {
99
layout: PropTypes.oneOf(['horizontal', 'vertical']),
1010
};
1111

12-
const Col = {
13-
functional: true,
14-
props: ColProps,
15-
render(h, ctx) {
16-
const { child, bordered, colon, type, layout } = ctx.props;
17-
const { prefixCls, span = 1 } = getOptionProps(child);
18-
const { key } = ctx.data;
19-
const label = getComponentFromProp(child, 'label');
20-
const slots = getSlots(child);
21-
const labelProps = {
22-
attrs: {},
23-
class: [
24-
`${prefixCls}-item-label`,
25-
{
26-
[`${prefixCls}-item-colon`]: colon,
27-
[`${prefixCls}-item-no-label`]: !label,
28-
},
29-
],
30-
key: `${key}-label`,
31-
};
32-
if (layout === 'vertical') {
33-
labelProps.attrs.colSpan = span * 2 - 1;
34-
}
12+
const Col = (_, { attrs }) => {
13+
// props: {
14+
// child: PropTypes.any,
15+
// bordered: PropTypes.bool,
16+
// colon: PropTypes.bool,
17+
// type: PropTypes.oneOf(['label', 'content']),
18+
// layout: PropTypes.oneOf(['horizontal', 'vertical']),
19+
// }
20+
const { child, bordered, colon, type, layout } = attrs;
21+
const { prefixCls, span = 1 } = getOptionProps(child);
22+
const { key, children = {} } = child || {};
23+
const label = children.label && children.label();
24+
const defaultSlot = children.default && children.default();
3525

36-
if (bordered) {
37-
if (type === 'label') {
38-
return <th {...labelProps}>{label}</th>;
39-
}
40-
return (
41-
<td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
42-
{slots.default}
43-
</td>
44-
);
26+
const someLabelProps = {
27+
class: [
28+
`${prefixCls}-item-label`,
29+
{
30+
[`${prefixCls}-item-colon`]: colon,
31+
[`${prefixCls}-item-no-label`]: !label,
32+
},
33+
],
34+
key: `${key}-label`,
35+
};
36+
37+
if (layout === 'vertical') {
38+
someLabelProps.colSpan = span * 2 - 1;
39+
}
40+
41+
if (bordered) {
42+
if (type === 'label') {
43+
return <th {...someLabelProps}>{label}</th>;
4544
}
46-
if (layout === 'vertical') {
47-
if (type === 'content') {
48-
return (
49-
<td colSpan={span} class={`${prefixCls}-item`}>
50-
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
51-
{slots.default}
52-
</span>
53-
</td>
54-
);
55-
}
45+
return (
46+
<td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
47+
{defaultSlot}
48+
</td>
49+
);
50+
}
51+
if (layout === 'vertical') {
52+
if (type === 'content') {
5653
return (
5754
<td colSpan={span} class={`${prefixCls}-item`}>
58-
<span
59-
class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
60-
key={`${key}-label`}
61-
>
62-
{label}
55+
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
56+
{defaultSlot}
6357
</span>
6458
</td>
6559
);
6660
}
6761
return (
6862
<td colSpan={span} class={`${prefixCls}-item`}>
69-
<span {...labelProps}>{label}</span>
70-
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
71-
{slots.default}
63+
<span
64+
class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
65+
key={`${key}-label`}
66+
>
67+
{label}
7268
</span>
7369
</td>
7470
);
75-
},
71+
}
72+
return (
73+
<td colSpan={span} class={`${prefixCls}-item`}>
74+
<span {...someLabelProps}>{label}</span>
75+
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
76+
{defaultSlot}
77+
</span>
78+
</td>
79+
);
7680
};
7781

7882
export default Col;

‎components/descriptions/index.jsx

+15-20
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1+
import { inject, isVNode, cloneVNode } from 'vue';
12
import warning from '../_util/warning';
23
import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
34
import { ConfigConsumerProps } from '../config-provider';
45
import Col from './Col';
56
import PropTypes from '../_util/vue-types';
6-
import {
7-
initDefaultProps,
8-
isValidElement,
9-
getOptionProps,
10-
getComponentFromProp,
11-
} from '../_util/props-util';
7+
import { initDefaultProps, getOptionProps, getComponent } from '../_util/props-util';
128
import BaseMixin from '../_util/BaseMixin';
13-
import Base from '../base';
14-
import { cloneElement } from '../_util/vnode';
159

1610
export const DescriptionsItemProps = {
1711
prefixCls: PropTypes.string,
@@ -70,7 +64,7 @@ const generateChildrenRows = (children, column) => {
7064
let lastSpanSame = true;
7165
if (lastItem) {
7266
lastSpanSame = !itemProps.span || itemProps.span === leftSpans;
73-
itemNode = cloneElement(itemNode, {
67+
itemNode = cloneVNode(itemNode, {
7468
props: {
7569
span: leftSpans,
7670
},
@@ -109,12 +103,14 @@ const Descriptions = {
109103
name: 'ADescriptions',
110104
Item: DescriptionsItem,
111105
mixins: [BaseMixin],
112-
inject: {
113-
configProvider: { default: () => ConfigConsumerProps },
114-
},
115106
props: initDefaultProps(DescriptionsProps, {
116107
column: defaultColumnMap,
117108
}),
109+
setup() {
110+
return {
111+
configProvider: inject('configProvider', ConfigConsumerProps),
112+
};
113+
},
118114
data() {
119115
return {
120116
screens: {},
@@ -205,16 +201,16 @@ const Descriptions = {
205201
layout = 'horizontal',
206202
colon = true,
207203
} = this.$props;
208-
const title = getComponentFromProp(this, 'title') || null;
204+
const title = getComponent(this, 'title') || null;
209205
const getPrefixCls = this.configProvider.getPrefixCls;
210206
const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
211207

212208
const column = this.getColumn();
213-
const children = this.$slots.default;
209+
const children = this.$slots.default && this.$slots.default();
214210
const cloneChildren = toArray(children)
215211
.map(child => {
216-
if (isValidElement(child)) {
217-
return cloneElement(child, {
212+
if (isVNode(child)) {
213+
return cloneVNode(child, {
218214
props: {
219215
prefixCls,
220216
},
@@ -259,10 +255,9 @@ const Descriptions = {
259255
},
260256
};
261257

262-
Descriptions.install = function(Vue) {
263-
Vue.use(Base);
264-
Vue.component(Descriptions.name, Descriptions);
265-
Vue.component(Descriptions.Item.name, Descriptions.Item);
258+
Descriptions.install = function(app) {
259+
app.component(Descriptions.name, Descriptions);
260+
app.component(Descriptions.Item.name, Descriptions.Item);
266261
};
267262

268263
export default Descriptions;

0 commit comments

Comments
 (0)