mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 13:47:02 +08:00
Merge pull request #17560 from hengkx/feature-descriptions-colon
feat: Descriptions support colon props
This commit is contained in:
偏右
GitHub
commit
f17073e5b8
72
components/descriptions/Col.tsx
Normal file
72
components/descriptions/Col.tsx
Normal file
@ -0,0 +1,72 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { DescriptionsItemProps } from './index';
|
||||
|
||||
interface ColProps {
|
||||
child: React.ReactElement<DescriptionsItemProps>;
|
||||
bordered: boolean;
|
||||
colon: boolean;
|
||||
type?: 'label' | 'content';
|
||||
layout?: 'horizontal' | 'vertical';
|
||||
}
|
||||
|
||||
const Col: React.SFC<ColProps> = props => {
|
||||
const { child, bordered, colon, type, layout } = props;
|
||||
const { prefixCls, label, className, children, span = 1 } = child.props;
|
||||
const labelProps: any = {
|
||||
className: classNames(`${prefixCls}-item-label`, className, {
|
||||
[`${prefixCls}-item-colon`]: colon,
|
||||
[`${prefixCls}-item-no-label`]: !label,
|
||||
}),
|
||||
key: 'label',
|
||||
};
|
||||
if (layout === 'vertical') {
|
||||
labelProps.colSpan = span * 2 - 1;
|
||||
}
|
||||
|
||||
if (bordered) {
|
||||
if (type === 'label') {
|
||||
return <th {...labelProps}>{label}</th>;
|
||||
}
|
||||
return (
|
||||
<td
|
||||
className={classNames(`${prefixCls}-item-content`, className)}
|
||||
key="content"
|
||||
colSpan={span * 2 - 1}
|
||||
>
|
||||
{children}
|
||||
</td>
|
||||
);
|
||||
}
|
||||
if (layout === 'vertical') {
|
||||
if (type === 'content') {
|
||||
return (
|
||||
<td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
|
||||
<span className={`${prefixCls}-item-content`} key="content">
|
||||
{children}
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
|
||||
<span
|
||||
className={classNames(`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon })}
|
||||
key="label"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
|
||||
<span {...labelProps}>{label}</span>
|
||||
<span className={`${prefixCls}-item-content`} key="content">
|
||||
{children}
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
export default Col;
|
||||
@ -22,7 +22,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
UserName
|
||||
</span>
|
||||
@ -37,7 +37,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Telephone
|
||||
</span>
|
||||
@ -52,7 +52,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Live
|
||||
</span>
|
||||
@ -71,7 +71,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Remark
|
||||
</span>
|
||||
@ -86,7 +86,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
|
||||
colspan="2"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Address
|
||||
</span>
|
||||
@ -121,7 +121,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Product
|
||||
</th>
|
||||
@ -132,7 +132,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||
Cloud Database
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Billing Mode
|
||||
</th>
|
||||
@ -143,7 +143,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||
Prepaid
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Automatic Renewal
|
||||
</th>
|
||||
@ -158,7 +158,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Order time
|
||||
</th>
|
||||
@ -169,7 +169,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||
2018-04-24 18:00:00
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Usage Time
|
||||
</th>
|
||||
@ -184,7 +184,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
@ -210,7 +210,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Negotiated Amount
|
||||
</th>
|
||||
@ -221,7 +221,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||
$80.00
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Discount
|
||||
</th>
|
||||
@ -232,7 +232,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||
$20.00
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Official Receipts
|
||||
</th>
|
||||
@ -247,7 +247,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Config Info
|
||||
</th>
|
||||
@ -298,7 +298,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
@ -313,7 +313,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Billing
|
||||
</span>
|
||||
@ -328,7 +328,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
time
|
||||
</span>
|
||||
@ -347,7 +347,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Amount
|
||||
</span>
|
||||
@ -362,7 +362,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Discount
|
||||
</span>
|
||||
@ -377,7 +377,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Official
|
||||
</span>
|
||||
@ -396,7 +396,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
colspan="3"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Config Info
|
||||
</span>
|
||||
@ -507,7 +507,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Product
|
||||
</th>
|
||||
@ -518,7 +518,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
||||
Cloud Database
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Billing
|
||||
</th>
|
||||
@ -529,7 +529,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
||||
Prepaid
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
time
|
||||
</th>
|
||||
@ -544,7 +544,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Amount
|
||||
</th>
|
||||
@ -555,7 +555,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
||||
$80.00
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Discount
|
||||
</th>
|
||||
@ -566,7 +566,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
||||
$20.00
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Official
|
||||
</th>
|
||||
@ -581,7 +581,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Config Info
|
||||
</th>
|
||||
@ -632,7 +632,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
UserName
|
||||
</span>
|
||||
@ -642,7 +642,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Telephone
|
||||
</span>
|
||||
@ -652,7 +652,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Live
|
||||
</span>
|
||||
@ -700,7 +700,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Remark
|
||||
</span>
|
||||
@ -710,7 +710,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
|
||||
colspan="2"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Address
|
||||
</span>
|
||||
@ -763,24 +763,24 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<td
|
||||
class="ant-descriptions-item-label"
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Product
|
||||
</td>
|
||||
<td
|
||||
class="ant-descriptions-item-label"
|
||||
</th>
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Billing Mode
|
||||
</td>
|
||||
<td
|
||||
class="ant-descriptions-item-label"
|
||||
</th>
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Automatic Renewal
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
@ -807,18 +807,18 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<td
|
||||
class="ant-descriptions-item-label"
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Order time
|
||||
</td>
|
||||
<td
|
||||
class="ant-descriptions-item-label"
|
||||
</th>
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="5"
|
||||
>
|
||||
Usage Time
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
@ -839,12 +839,12 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<td
|
||||
class="ant-descriptions-item-label"
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="5"
|
||||
>
|
||||
Status
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
@ -870,24 +870,24 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<td
|
||||
class="ant-descriptions-item-label"
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Negotiated Amount
|
||||
</td>
|
||||
<td
|
||||
class="ant-descriptions-item-label"
|
||||
</th>
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Discount
|
||||
</td>
|
||||
<td
|
||||
class="ant-descriptions-item-label"
|
||||
</th>
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Official Receipts
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
@ -914,12 +914,12 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<td
|
||||
class="ant-descriptions-item-label"
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="5"
|
||||
>
|
||||
Config Info
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
|
||||
@ -1,5 +1,74 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Descriptions Descriptions support colon 1`] = `
|
||||
<Descriptions
|
||||
colon={false}
|
||||
column={
|
||||
Object {
|
||||
"lg": 3,
|
||||
"md": 3,
|
||||
"sm": 2,
|
||||
"xl": 3,
|
||||
"xs": 1,
|
||||
"xxl": 3,
|
||||
}
|
||||
}
|
||||
size="default"
|
||||
>
|
||||
<div
|
||||
className="ant-descriptions"
|
||||
>
|
||||
<div
|
||||
className="ant-descriptions-view"
|
||||
>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="0"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
span={1}
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={false}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
key="label"
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</Descriptions>
|
||||
`;
|
||||
|
||||
exports[`Descriptions Descriptions.Item support className 1`] = `
|
||||
<Descriptions
|
||||
column={
|
||||
@ -25,13 +94,30 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="0"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
className="my-class"
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
span={1}
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item my-class"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label my-class ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Product
|
||||
@ -43,6 +129,7 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -67,14 +154,28 @@ exports[`Descriptions column is number 1`] = `
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="0"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
key=".$.0"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Product
|
||||
@ -86,13 +187,28 @@ exports[`Descriptions column is number 1`] = `
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Billing"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Prepaid
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-1"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
key=".$.1"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Billing
|
||||
@ -104,12 +220,28 @@ exports[`Descriptions column is number 1`] = `
|
||||
Prepaid
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="time"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
18:00:00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-2"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
time
|
||||
@ -121,17 +253,34 @@ exports[`Descriptions column is number 1`] = `
|
||||
18:00:00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="1"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Amount"
|
||||
prefixCls="ant-descriptions"
|
||||
span={3}
|
||||
>
|
||||
$80.00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={3}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Amount
|
||||
@ -143,6 +292,7 @@ exports[`Descriptions column is number 1`] = `
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -177,22 +327,53 @@ exports[`Descriptions vertical layout 1`] = `
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="label-0"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="vertical"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="content-0"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="content-0"
|
||||
layout="vertical"
|
||||
type="content"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
@ -205,26 +386,58 @@ exports[`Descriptions vertical layout 1`] = `
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="label-1"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Billing"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Prepaid
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="vertical"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Billing
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="content-1"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Billing"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Prepaid
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="content-0"
|
||||
layout="vertical"
|
||||
type="content"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
@ -237,26 +450,58 @@ exports[`Descriptions vertical layout 1`] = `
|
||||
Prepaid
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="label-2"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="time"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
18:00:00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="vertical"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
time
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="content-2"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="time"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
18:00:00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="content-0"
|
||||
layout="vertical"
|
||||
type="content"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
@ -269,26 +514,60 @@ exports[`Descriptions vertical layout 1`] = `
|
||||
18:00:00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="label-3"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Amount"
|
||||
prefixCls="ant-descriptions"
|
||||
span={1}
|
||||
>
|
||||
$80.00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="vertical"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Amount
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="content-3"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Amount"
|
||||
prefixCls="ant-descriptions"
|
||||
span={1}
|
||||
>
|
||||
$80.00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="content-0"
|
||||
layout="vertical"
|
||||
type="content"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
@ -301,6 +580,7 @@ exports[`Descriptions vertical layout 1`] = `
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -334,13 +614,28 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="0"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Product
|
||||
@ -352,17 +647,33 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="1"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Billing"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Prepaid
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Billing
|
||||
@ -374,17 +685,33 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
|
||||
Prepaid
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="2"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="time"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
18:00:00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
time
|
||||
@ -396,17 +723,34 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
|
||||
18:00:00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="3"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Amount"
|
||||
prefixCls="ant-descriptions"
|
||||
span={1}
|
||||
>
|
||||
$80.00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Amount
|
||||
@ -418,6 +762,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -151,4 +151,13 @@ describe('Descriptions', () => {
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('Descriptions support colon', () => {
|
||||
const wrapper = mount(
|
||||
<Descriptions colon={false}>
|
||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||
</Descriptions>,
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -22,6 +22,7 @@ Commonly displayed on the details page.
|
||||
| column | the number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 |
|
||||
| size | set the size of the list. Can be set to `middle`,`small`, or not filled | `default | middle | small` | false |
|
||||
| layout | Define description layout | `horizontal | vertical` | `horizontal` |
|
||||
| colon | change default props `colon` value of `Descriptions.Item` | boolean | true |
|
||||
|
||||
### DescriptionItem
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@ import ResponsiveObserve, {
|
||||
responsiveArray,
|
||||
} from '../_util/responsiveObserve';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import Col from './Col';
|
||||
|
||||
export interface DescriptionsItemProps {
|
||||
prefixCls?: string;
|
||||
@ -29,6 +30,7 @@ export interface DescriptionsProps {
|
||||
title?: string;
|
||||
column?: number | Partial<Record<Breakpoint, number>>;
|
||||
layout?: 'horizontal' | 'vertical';
|
||||
colon?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -69,96 +71,13 @@ const generateChildrenRows = (
|
||||
return childrenArray;
|
||||
};
|
||||
|
||||
/**
|
||||
* This code is for handling react15 does not support returning an array,
|
||||
* It can convert a children into th and td
|
||||
* @param child DescriptionsItem
|
||||
* @returns
|
||||
* <>
|
||||
* <th>{DescriptionsItem.label}</th>
|
||||
* <td>{DescriptionsItem.children}</td>
|
||||
* </>
|
||||
*/
|
||||
const renderCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
|
||||
const { prefixCls, label, className, children, span = 1 } = child.props;
|
||||
if (bordered) {
|
||||
return [
|
||||
<th
|
||||
className={classNames(`${prefixCls}-item-label`, className, {
|
||||
[`${prefixCls}-item-no-label`]: !label,
|
||||
})}
|
||||
key="label"
|
||||
>
|
||||
{label}
|
||||
</th>,
|
||||
<td
|
||||
className={classNames(`${prefixCls}-item-content`, className)}
|
||||
key="content"
|
||||
colSpan={span * 2 - 1}
|
||||
>
|
||||
{children}
|
||||
</td>,
|
||||
];
|
||||
}
|
||||
return (
|
||||
<td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
|
||||
<span
|
||||
className={classNames(`${prefixCls}-item-label`, {
|
||||
[`${prefixCls}-item-no-label`]: !label,
|
||||
})}
|
||||
key="label"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
<span className={`${prefixCls}-item-content`} key="content">
|
||||
{children}
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
const renderLabelCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
|
||||
const { prefixCls, label, span = 1 } = child.props;
|
||||
if (bordered) {
|
||||
return (
|
||||
<td className={`${prefixCls}-item-label`} key="label" colSpan={span * 2 - 1}>
|
||||
{label}
|
||||
</td>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<td colSpan={span} className={`${prefixCls}-item`}>
|
||||
<span className={`${prefixCls}-item-label`} key="label">
|
||||
{label}
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
const renderContentCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
|
||||
const { prefixCls, children, span = 1 } = child.props;
|
||||
if (bordered) {
|
||||
return (
|
||||
<td className={`${prefixCls}-item-content`} key="content" colSpan={span * 2 - 1}>
|
||||
{children}
|
||||
</td>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<td colSpan={span} className={`${prefixCls}-item`}>
|
||||
<span className={`${prefixCls}-item-content`} key="content">
|
||||
{children}
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
const renderRow = (
|
||||
children: React.ReactElement<DescriptionsItemProps>[],
|
||||
index: number,
|
||||
{ prefixCls, column, isLast }: { prefixCls: string; column: number; isLast: boolean },
|
||||
bordered: boolean,
|
||||
layout: string,
|
||||
layout: 'horizontal' | 'vertical',
|
||||
colon: boolean,
|
||||
) => {
|
||||
// copy children,prevent changes to incoming parameters
|
||||
const childrenArray = [...children];
|
||||
@ -169,41 +88,51 @@ const renderRow = (
|
||||
span,
|
||||
});
|
||||
}
|
||||
childrenArray.push(lastChildren);
|
||||
|
||||
const renderCol = (
|
||||
childrenItem: React.ReactElement<DescriptionsItemProps>,
|
||||
type: 'label' | 'content',
|
||||
idx: number,
|
||||
) => (
|
||||
<Col
|
||||
child={childrenItem}
|
||||
bordered={bordered}
|
||||
colon={colon}
|
||||
type={type}
|
||||
key={`${type}-${idx}`}
|
||||
layout={layout}
|
||||
/>
|
||||
);
|
||||
|
||||
const cloneChildren: JSX.Element[] = [];
|
||||
const cloneContentChildren: JSX.Element[] = [];
|
||||
React.Children.forEach(
|
||||
childrenArray,
|
||||
(childrenItem: React.ReactElement<DescriptionsItemProps>, idx: number) => {
|
||||
cloneChildren.push(renderCol(childrenItem, 'label', idx));
|
||||
if (layout === 'vertical') {
|
||||
cloneContentChildren.push(renderCol(childrenItem, 'content', idx));
|
||||
} else if (bordered) {
|
||||
cloneChildren.push(renderCol(childrenItem, 'content', idx));
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
if (layout === 'vertical') {
|
||||
const cloneLabelChildren = React.Children.map(
|
||||
childrenArray,
|
||||
(childrenItem: React.ReactElement<DescriptionsItemProps>) => {
|
||||
return renderLabelCol(childrenItem, bordered);
|
||||
},
|
||||
);
|
||||
const cloneContentChildren = React.Children.map(
|
||||
childrenArray,
|
||||
(childrenItem: React.ReactElement<DescriptionsItemProps>) => {
|
||||
return renderContentCol(childrenItem, bordered);
|
||||
},
|
||||
);
|
||||
return [
|
||||
<tr className={`${prefixCls}-row`} key={`label-${index}`}>
|
||||
{cloneLabelChildren}
|
||||
{renderLabelCol(lastChildren, bordered)}
|
||||
{cloneChildren}
|
||||
</tr>,
|
||||
<tr className={`${prefixCls}-row`} key={`content-${index}`}>
|
||||
{cloneContentChildren}
|
||||
{renderContentCol(lastChildren, bordered)}
|
||||
</tr>,
|
||||
];
|
||||
}
|
||||
const cloneChildren = React.Children.map(
|
||||
childrenArray,
|
||||
(childrenItem: React.ReactElement<DescriptionsItemProps>) => {
|
||||
return renderCol(childrenItem, bordered);
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<tr className={`${prefixCls}-row`} key={index}>
|
||||
{cloneChildren}
|
||||
{renderCol(lastChildren, bordered)}
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
@ -281,6 +210,7 @@ class Descriptions extends React.Component<
|
||||
children,
|
||||
bordered = false,
|
||||
layout = 'horizontal',
|
||||
colon = true,
|
||||
} = this.props;
|
||||
const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
|
||||
|
||||
@ -322,6 +252,7 @@ class Descriptions extends React.Component<
|
||||
},
|
||||
bordered,
|
||||
layout,
|
||||
colon,
|
||||
),
|
||||
)}
|
||||
</tbody>
|
||||
|
||||
@ -23,6 +23,7 @@ cols: 1
|
||||
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 |
|
||||
| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | false |
|
||||
| layout | 描述布局 | `horizontal | vertical` | `horizontal` |
|
||||
| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true |
|
||||
|
||||
### DescriptionItem
|
||||
|
||||
|
||||
@ -47,6 +47,12 @@
|
||||
position: relative;
|
||||
top: -0.5px;
|
||||
margin: 0 8px 0 2px;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
&-item-colon {
|
||||
&::after {
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user