mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 19:42:54 +08:00
improve Descriptions code
This commit is contained in:
hengkx
parent
3db32cb631
commit
99a2cc201e
75
components/descriptions/Col.tsx
Normal file
75
components/descriptions/Col.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
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={bordered ? span * 2 - 1 : 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;
|
||||
@ -763,24 +763,24 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<td
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Product
|
||||
</td>
|
||||
<td
|
||||
</th>
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Billing Mode
|
||||
</td>
|
||||
<td
|
||||
</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
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Order time
|
||||
</td>
|
||||
<td
|
||||
</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
|
||||
<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
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Negotiated Amount
|
||||
</td>
|
||||
<td
|
||||
</th>
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="1"
|
||||
>
|
||||
Discount
|
||||
</td>
|
||||
<td
|
||||
</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
|
||||
<th
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
colspan="5"
|
||||
>
|
||||
Config Info
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
|
||||
@ -27,23 +27,40 @@ exports[`Descriptions Descriptions support colon 1`] = `
|
||||
className="ant-descriptions-row"
|
||||
key="0"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
span={1}
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={false}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
<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>
|
||||
@ -78,23 +95,41 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
|
||||
className="ant-descriptions-row"
|
||||
key="0"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item my-class"
|
||||
colSpan={1}
|
||||
<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"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item my-class"
|
||||
colSpan={1}
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label my-class ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -120,81 +155,144 @@ exports[`Descriptions column is number 1`] = `
|
||||
className="ant-descriptions-row"
|
||||
key="0"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
key=".$.0"
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
key=".$.1"
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
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"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Billing
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Prepaid
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Billing
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
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"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
time
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
18:00:00
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
time
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
18:00:00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="1"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={3}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Amount"
|
||||
prefixCls="ant-descriptions"
|
||||
span={3}
|
||||
>
|
||||
$80.00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={3}
|
||||
>
|
||||
Amount
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Amount
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -230,129 +328,259 @@ exports[`Descriptions vertical layout 1`] = `
|
||||
className="ant-descriptions-row"
|
||||
key="label-0"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="vertical"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="content-0"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="content-0"
|
||||
layout="vertical"
|
||||
type="content"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="label-1"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Billing"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Prepaid
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="vertical"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Billing
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Billing
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="content-1"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Billing"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Prepaid
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="content-0"
|
||||
layout="vertical"
|
||||
type="content"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Prepaid
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Prepaid
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="label-2"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="time"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
18:00:00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="vertical"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
time
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
time
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="content-2"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="time"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
18:00:00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="content-0"
|
||||
layout="vertical"
|
||||
type="content"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
18:00:00
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
18:00:00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="label-3"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Amount"
|
||||
prefixCls="ant-descriptions"
|
||||
span={1}
|
||||
>
|
||||
$80.00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="vertical"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Amount
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Amount
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="content-3"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Amount"
|
||||
prefixCls="ant-descriptions"
|
||||
span={1}
|
||||
>
|
||||
$80.00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="content-0"
|
||||
layout="vertical"
|
||||
type="content"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -387,89 +615,154 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
|
||||
className="ant-descriptions-row"
|
||||
key="0"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Product"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Cloud Database
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="1"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Billing"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
Prepaid
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Billing
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Prepaid
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Billing
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
Prepaid
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="2"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="time"
|
||||
prefixCls="ant-descriptions"
|
||||
>
|
||||
18:00:00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
time
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
18:00:00
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
time
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
18:00:00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="3"
|
||||
>
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
label="Amount"
|
||||
prefixCls="ant-descriptions"
|
||||
span={1}
|
||||
>
|
||||
$80.00
|
||||
</DescriptionsItem>
|
||||
}
|
||||
colon={true}
|
||||
key="label-0"
|
||||
layout="horizontal"
|
||||
type="label"
|
||||
>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
<td
|
||||
className="ant-descriptions-item"
|
||||
colSpan={1}
|
||||
>
|
||||
Amount
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
<span
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
key="label"
|
||||
>
|
||||
Amount
|
||||
</span>
|
||||
<span
|
||||
className="ant-descriptions-item-content"
|
||||
key="content"
|
||||
>
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -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;
|
||||
@ -70,113 +71,12 @@ 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,
|
||||
colon: boolean,
|
||||
) => {
|
||||
const { prefixCls, label, className, children, span = 1 } = child.props;
|
||||
if (bordered) {
|
||||
return [
|
||||
<th
|
||||
className={classNames(`${prefixCls}-item-label`, className, {
|
||||
[`${prefixCls}-item-colon`]: colon,
|
||||
[`${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-colon`]: colon,
|
||||
[`${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,
|
||||
colon: boolean,
|
||||
) => {
|
||||
const { prefixCls, label, span = 1 } = child.props;
|
||||
if (bordered) {
|
||||
return (
|
||||
<td
|
||||
className={classNames(`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon })}
|
||||
key="label"
|
||||
colSpan={span * 2 - 1}
|
||||
>
|
||||
{label}
|
||||
</td>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<td colSpan={span} className={`${prefixCls}-item`}>
|
||||
<span
|
||||
className={classNames(`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon })}
|
||||
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
|
||||
@ -188,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, colon);
|
||||
},
|
||||
);
|
||||
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, colon)}
|
||||
{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, colon);
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<tr className={`${prefixCls}-row`} key={index}>
|
||||
{cloneChildren}
|
||||
{renderCol(lastChildren, bordered, colon)}
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user