Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update descriptions #2385

Merged
merged 2 commits into from
Jun 11, 2020
Merged

feat: update descriptions #2385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26a8045
feat: update descriptions
sendya Jun 8, 2020
b43a25d
fix: merge Col props
sendya Jun 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 56 additions & 52 deletions components/descriptions/Col.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 changes: 15 additions & 20 deletions components/descriptions/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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,
},
Expand Down Expand Up @@ -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: {},
Expand Down Expand Up @@ -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,
},
Expand Down Expand Up @@ -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;