test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-11-30 02:57:50 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: update descriptions (#2385)

Browse Source 
* feat: update descriptions

* fix: merge Col props
This commit is contained in:
言肆 2020-06-11 22:35:09 +08:00 committed by GitHub
parent e2ce58fa7a
commit e5924d5ded
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
components/descriptions/Col.jsx
View File

@ -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 <th {...labelProps}>{label}</th>;
}
return (
<td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
{slots.default}
</td>
);
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 <th {...someLabelProps}>{label}</th>;
}
if (layout === 'vertical') {
if (type === 'content') {
return (
<td colSpan={span} class={`${prefixCls}-item`}>
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
{slots.default}
</span>
</td>
);
}
return (
<td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
{defaultSlot}
</td>
);
}
if (layout === 'vertical') {
if (type === 'content') {
return (
<td colSpan={span} class={`${prefixCls}-item`}>
<span
class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
key={`${key}-label`}
>
{label}
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
{defaultSlot}
</span>
</td>
);
}
return (
<td colSpan={span} class={`${prefixCls}-item`}>
<span {...labelProps}>{label}</span>
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
{slots.default}
<span
class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
key={`${key}-label`}
>
{label}
</span>
</td>
);
},
}
return (
<td colSpan={span} class={`${prefixCls}-item`}>
<span {...someLabelProps}>{label}</span>
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
{defaultSlot}
</span>
</td>
);
};
export default Col;

35
components/descriptions/index.jsx
View File

@ -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;