diff --git a/components/descriptions/Col.jsx b/components/descriptions/Col.jsx index f777c73067..7b75bb6c7c 100644 --- a/components/descriptions/Col.jsx +++ b/components/descriptions/Col.jsx @@ -1,5 +1,5 @@ import PropTypes from '../_util/vue-types'; -import { getOptionProps, getSlots, getComponentFromProp } from '../_util/props-util'; +import { getOptionProps } from '../_util/props-util'; const ColProps = { child: PropTypes.any, @@ -9,70 +9,74 @@ const ColProps = { layout: PropTypes.oneOf(['horizontal', 'vertical']), }; -const Col = { - functional: true, - props: ColProps, - render(h, ctx) { - const { child, bordered, colon, type, layout } = ctx.props; - const { prefixCls, span = 1 } = getOptionProps(child); - const { key } = ctx.data; - const label = getComponentFromProp(child, 'label'); - const slots = getSlots(child); - const labelProps = { - attrs: {}, - class: [ - `${prefixCls}-item-label`, - { - [`${prefixCls}-item-colon`]: colon, - [`${prefixCls}-item-no-label`]: !label, - }, - ], - key: `${key}-label`, - }; - if (layout === 'vertical') { - labelProps.attrs.colSpan = span * 2 - 1; - } +const Col = (_, { attrs }) => { + // props: { + // child: PropTypes.any, + // bordered: PropTypes.bool, + // colon: PropTypes.bool, + // type: PropTypes.oneOf(['label', 'content']), + // layout: PropTypes.oneOf(['horizontal', 'vertical']), + // } + const { child, bordered, colon, type, layout } = attrs; + const { prefixCls, span = 1 } = getOptionProps(child); + const { key, children = {} } = child || {}; + const label = children.label && children.label(); + const defaultSlot = children.default && children.default(); - if (bordered) { - if (type === 'label') { - return {label}; - } - return ( - - {slots.default} - - ); + const someLabelProps = { + class: [ + `${prefixCls}-item-label`, + { + [`${prefixCls}-item-colon`]: colon, + [`${prefixCls}-item-no-label`]: !label, + }, + ], + key: `${key}-label`, + }; + + if (layout === 'vertical') { + someLabelProps.colSpan = span * 2 - 1; + } + + if (bordered) { + if (type === 'label') { + return {label}; } - if (layout === 'vertical') { - if (type === 'content') { - return ( - - - {slots.default} - - - ); - } + return ( + + {defaultSlot} + + ); + } + if (layout === 'vertical') { + if (type === 'content') { return ( - - {label} + + {defaultSlot} ); } return ( - {label} - - {slots.default} + + {label} ); - }, + } + return ( + + {label} + + {defaultSlot} + + + ); }; export default Col; diff --git a/components/descriptions/index.jsx b/components/descriptions/index.jsx index f60a0c8a13..07c1a2ab2c 100644 --- a/components/descriptions/index.jsx +++ b/components/descriptions/index.jsx @@ -1,17 +1,11 @@ +import { inject, isVNode, cloneVNode } from 'vue'; import warning from '../_util/warning'; import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve'; import { ConfigConsumerProps } from '../config-provider'; import Col from './Col'; import PropTypes from '../_util/vue-types'; -import { - initDefaultProps, - isValidElement, - getOptionProps, - getComponentFromProp, -} from '../_util/props-util'; +import { initDefaultProps, getOptionProps, getComponent } from '../_util/props-util'; import BaseMixin from '../_util/BaseMixin'; -import Base from '../base'; -import { cloneElement } from '../_util/vnode'; export const DescriptionsItemProps = { prefixCls: PropTypes.string, @@ -70,7 +64,7 @@ const generateChildrenRows = (children, column) => { let lastSpanSame = true; if (lastItem) { lastSpanSame = !itemProps.span || itemProps.span === leftSpans; - itemNode = cloneElement(itemNode, { + itemNode = cloneVNode(itemNode, { props: { span: leftSpans, }, @@ -109,12 +103,14 @@ const Descriptions = { name: 'ADescriptions', Item: DescriptionsItem, mixins: [BaseMixin], - inject: { - configProvider: { default: () => ConfigConsumerProps }, - }, props: initDefaultProps(DescriptionsProps, { column: defaultColumnMap, }), + setup() { + return { + configProvider: inject('configProvider', ConfigConsumerProps), + }; + }, data() { return { screens: {}, @@ -205,16 +201,16 @@ const Descriptions = { layout = 'horizontal', colon = true, } = this.$props; - const title = getComponentFromProp(this, 'title') || null; + const title = getComponent(this, 'title') || null; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('descriptions', customizePrefixCls); const column = this.getColumn(); - const children = this.$slots.default; + const children = this.$slots.default && this.$slots.default(); const cloneChildren = toArray(children) .map(child => { - if (isValidElement(child)) { - return cloneElement(child, { + if (isVNode(child)) { + return cloneVNode(child, { props: { prefixCls, }, @@ -259,10 +255,9 @@ const Descriptions = { }, }; -Descriptions.install = function(Vue) { - Vue.use(Base); - Vue.component(Descriptions.name, Descriptions); - Vue.component(Descriptions.Item.name, Descriptions.Item); +Descriptions.install = function(app) { + app.component(Descriptions.name, Descriptions); + app.component(Descriptions.Item.name, Descriptions.Item); }; export default Descriptions;