mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-12 20:43:11 +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
|
<tr
|
||||||
class="ant-descriptions-row"
|
class="ant-descriptions-row"
|
||||||
>
|
>
|
||||||
<td
|
<th
|
||||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
Product
|
Product
|
||||||
</td>
|
</th>
|
||||||
<td
|
<th
|
||||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
Billing Mode
|
Billing Mode
|
||||||
</td>
|
</th>
|
||||||
<td
|
<th
|
||||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
Automatic Renewal
|
Automatic Renewal
|
||||||
</td>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
class="ant-descriptions-row"
|
class="ant-descriptions-row"
|
||||||
@ -807,18 +807,18 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
<tr
|
<tr
|
||||||
class="ant-descriptions-row"
|
class="ant-descriptions-row"
|
||||||
>
|
>
|
||||||
<td
|
<th
|
||||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
Order time
|
Order time
|
||||||
</td>
|
</th>
|
||||||
<td
|
<th
|
||||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
colspan="5"
|
colspan="5"
|
||||||
>
|
>
|
||||||
Usage Time
|
Usage Time
|
||||||
</td>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
class="ant-descriptions-row"
|
class="ant-descriptions-row"
|
||||||
@ -839,12 +839,12 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
<tr
|
<tr
|
||||||
class="ant-descriptions-row"
|
class="ant-descriptions-row"
|
||||||
>
|
>
|
||||||
<td
|
<th
|
||||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
colspan="5"
|
colspan="5"
|
||||||
>
|
>
|
||||||
Status
|
Status
|
||||||
</td>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
class="ant-descriptions-row"
|
class="ant-descriptions-row"
|
||||||
@ -870,24 +870,24 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
<tr
|
<tr
|
||||||
class="ant-descriptions-row"
|
class="ant-descriptions-row"
|
||||||
>
|
>
|
||||||
<td
|
<th
|
||||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
Negotiated Amount
|
Negotiated Amount
|
||||||
</td>
|
</th>
|
||||||
<td
|
<th
|
||||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
Discount
|
Discount
|
||||||
</td>
|
</th>
|
||||||
<td
|
<th
|
||||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
Official Receipts
|
Official Receipts
|
||||||
</td>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
class="ant-descriptions-row"
|
class="ant-descriptions-row"
|
||||||
@ -914,12 +914,12 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
<tr
|
<tr
|
||||||
class="ant-descriptions-row"
|
class="ant-descriptions-row"
|
||||||
>
|
>
|
||||||
<td
|
<th
|
||||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
colspan="5"
|
colspan="5"
|
||||||
>
|
>
|
||||||
Config Info
|
Config Info
|
||||||
</td>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
class="ant-descriptions-row"
|
class="ant-descriptions-row"
|
||||||
|
|||||||
@ -27,23 +27,40 @@ exports[`Descriptions Descriptions support colon 1`] = `
|
|||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="0"
|
key="0"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Product"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
span={1}
|
||||||
|
>
|
||||||
|
Cloud Database
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={false}
|
||||||
|
key="label-0"
|
||||||
|
layout="horizontal"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Product
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label"
|
||||||
<span
|
key="label"
|
||||||
className="ant-descriptions-item-content"
|
>
|
||||||
key="content"
|
Product
|
||||||
>
|
</span>
|
||||||
Cloud Database
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
Cloud Database
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@ -78,23 +95,41 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
|
|||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="0"
|
key="0"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item my-class"
|
bordered={false}
|
||||||
colSpan={1}
|
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
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item my-class"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Product
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label my-class ant-descriptions-item-colon"
|
||||||
<span
|
key="label"
|
||||||
className="ant-descriptions-item-content"
|
>
|
||||||
key="content"
|
Product
|
||||||
>
|
</span>
|
||||||
Cloud Database
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
Cloud Database
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@ -120,81 +155,144 @@ exports[`Descriptions column is number 1`] = `
|
|||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="0"
|
key="0"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
key=".$.0"
|
<DescriptionsItem
|
||||||
|
label="Product"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
Cloud Database
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-0"
|
||||||
|
layout="horizontal"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Product
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
<span
|
key="label"
|
||||||
className="ant-descriptions-item-content"
|
>
|
||||||
key="content"
|
Product
|
||||||
>
|
</span>
|
||||||
Cloud Database
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
<td
|
>
|
||||||
className="ant-descriptions-item"
|
Cloud Database
|
||||||
colSpan={1}
|
</span>
|
||||||
key=".$.1"
|
</td>
|
||||||
|
</Col>
|
||||||
|
<Col
|
||||||
|
bordered={false}
|
||||||
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Billing"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
Prepaid
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-1"
|
||||||
|
layout="horizontal"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Billing
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
<span
|
key="label"
|
||||||
className="ant-descriptions-item-content"
|
>
|
||||||
key="content"
|
Billing
|
||||||
>
|
</span>
|
||||||
Prepaid
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
<td
|
>
|
||||||
className="ant-descriptions-item"
|
Prepaid
|
||||||
colSpan={1}
|
</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
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
time
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
<span
|
key="label"
|
||||||
className="ant-descriptions-item-content"
|
>
|
||||||
key="content"
|
time
|
||||||
>
|
</span>
|
||||||
18:00:00
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
18:00:00
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="1"
|
key="1"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={3}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Amount"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
span={3}
|
||||||
|
>
|
||||||
|
$80.00
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-0"
|
||||||
|
layout="horizontal"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={3}
|
||||||
>
|
>
|
||||||
Amount
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
<span
|
key="label"
|
||||||
className="ant-descriptions-item-content"
|
>
|
||||||
key="content"
|
Amount
|
||||||
>
|
</span>
|
||||||
$80.00
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
$80.00
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@ -230,129 +328,259 @@ exports[`Descriptions vertical layout 1`] = `
|
|||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="label-0"
|
key="label-0"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Product"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
Cloud Database
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-0"
|
||||||
|
layout="vertical"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Product
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
</td>
|
key="label"
|
||||||
|
>
|
||||||
|
Product
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="content-0"
|
key="content-0"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Product"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
Cloud Database
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="content-0"
|
||||||
|
layout="vertical"
|
||||||
|
type="content"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-content"
|
className="ant-descriptions-item"
|
||||||
key="content"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Cloud Database
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
Cloud Database
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="label-1"
|
key="label-1"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Billing"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
Prepaid
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-0"
|
||||||
|
layout="vertical"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Billing
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
</td>
|
key="label"
|
||||||
|
>
|
||||||
|
Billing
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="content-1"
|
key="content-1"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Billing"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
Prepaid
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="content-0"
|
||||||
|
layout="vertical"
|
||||||
|
type="content"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-content"
|
className="ant-descriptions-item"
|
||||||
key="content"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Prepaid
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
Prepaid
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="label-2"
|
key="label-2"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="time"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
18:00:00
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-0"
|
||||||
|
layout="vertical"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
time
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
</td>
|
key="label"
|
||||||
|
>
|
||||||
|
time
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="content-2"
|
key="content-2"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="time"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
18:00:00
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="content-0"
|
||||||
|
layout="vertical"
|
||||||
|
type="content"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-content"
|
className="ant-descriptions-item"
|
||||||
key="content"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
18:00:00
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
18:00:00
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="label-3"
|
key="label-3"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Amount"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
span={1}
|
||||||
|
>
|
||||||
|
$80.00
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-0"
|
||||||
|
layout="vertical"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Amount
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
</td>
|
key="label"
|
||||||
|
>
|
||||||
|
Amount
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="content-3"
|
key="content-3"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Amount"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
span={1}
|
||||||
|
>
|
||||||
|
$80.00
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="content-0"
|
||||||
|
layout="vertical"
|
||||||
|
type="content"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-content"
|
className="ant-descriptions-item"
|
||||||
key="content"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
$80.00
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
$80.00
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@ -387,89 +615,154 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
|
|||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="0"
|
key="0"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Product"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
Cloud Database
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-0"
|
||||||
|
layout="horizontal"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Product
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
<span
|
key="label"
|
||||||
className="ant-descriptions-item-content"
|
>
|
||||||
key="content"
|
Product
|
||||||
>
|
</span>
|
||||||
Cloud Database
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
Cloud Database
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="1"
|
key="1"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Billing"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
Prepaid
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-0"
|
||||||
|
layout="horizontal"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Billing
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
<span
|
key="label"
|
||||||
className="ant-descriptions-item-content"
|
>
|
||||||
key="content"
|
Billing
|
||||||
>
|
</span>
|
||||||
Prepaid
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
Prepaid
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="2"
|
key="2"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="time"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
>
|
||||||
|
18:00:00
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-0"
|
||||||
|
layout="horizontal"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
time
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
<span
|
key="label"
|
||||||
className="ant-descriptions-item-content"
|
>
|
||||||
key="content"
|
time
|
||||||
>
|
</span>
|
||||||
18:00:00
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
18:00:00
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
className="ant-descriptions-row"
|
className="ant-descriptions-row"
|
||||||
key="3"
|
key="3"
|
||||||
>
|
>
|
||||||
<td
|
<Col
|
||||||
className="ant-descriptions-item"
|
bordered={false}
|
||||||
colSpan={1}
|
child={
|
||||||
|
<DescriptionsItem
|
||||||
|
label="Amount"
|
||||||
|
prefixCls="ant-descriptions"
|
||||||
|
span={1}
|
||||||
|
>
|
||||||
|
$80.00
|
||||||
|
</DescriptionsItem>
|
||||||
|
}
|
||||||
|
colon={true}
|
||||||
|
key="label-0"
|
||||||
|
layout="horizontal"
|
||||||
|
type="label"
|
||||||
>
|
>
|
||||||
<span
|
<td
|
||||||
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
className="ant-descriptions-item"
|
||||||
key="label"
|
colSpan={1}
|
||||||
>
|
>
|
||||||
Amount
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||||
<span
|
key="label"
|
||||||
className="ant-descriptions-item-content"
|
>
|
||||||
key="content"
|
Amount
|
||||||
>
|
</span>
|
||||||
$80.00
|
<span
|
||||||
</span>
|
className="ant-descriptions-item-content"
|
||||||
</td>
|
key="content"
|
||||||
|
>
|
||||||
|
$80.00
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</Col>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import ResponsiveObserve, {
|
|||||||
responsiveArray,
|
responsiveArray,
|
||||||
} from '../_util/responsiveObserve';
|
} from '../_util/responsiveObserve';
|
||||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||||
|
import Col from './Col';
|
||||||
|
|
||||||
export interface DescriptionsItemProps {
|
export interface DescriptionsItemProps {
|
||||||
prefixCls?: string;
|
prefixCls?: string;
|
||||||
@ -70,113 +71,12 @@ const generateChildrenRows = (
|
|||||||
return childrenArray;
|
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 = (
|
const renderRow = (
|
||||||
children: React.ReactElement<DescriptionsItemProps>[],
|
children: React.ReactElement<DescriptionsItemProps>[],
|
||||||
index: number,
|
index: number,
|
||||||
{ prefixCls, column, isLast }: { prefixCls: string; column: number; isLast: boolean },
|
{ prefixCls, column, isLast }: { prefixCls: string; column: number; isLast: boolean },
|
||||||
bordered: boolean,
|
bordered: boolean,
|
||||||
layout: string,
|
layout: 'horizontal' | 'vertical',
|
||||||
colon: boolean,
|
colon: boolean,
|
||||||
) => {
|
) => {
|
||||||
// copy children,prevent changes to incoming parameters
|
// copy children,prevent changes to incoming parameters
|
||||||
@ -188,41 +88,51 @@ const renderRow = (
|
|||||||
span,
|
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') {
|
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 [
|
return [
|
||||||
<tr className={`${prefixCls}-row`} key={`label-${index}`}>
|
<tr className={`${prefixCls}-row`} key={`label-${index}`}>
|
||||||
{cloneLabelChildren}
|
{cloneChildren}
|
||||||
{renderLabelCol(lastChildren, bordered, colon)}
|
|
||||||
</tr>,
|
</tr>,
|
||||||
<tr className={`${prefixCls}-row`} key={`content-${index}`}>
|
<tr className={`${prefixCls}-row`} key={`content-${index}`}>
|
||||||
{cloneContentChildren}
|
{cloneContentChildren}
|
||||||
{renderContentCol(lastChildren, bordered)}
|
|
||||||
</tr>,
|
</tr>,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
const cloneChildren = React.Children.map(
|
|
||||||
childrenArray,
|
|
||||||
(childrenItem: React.ReactElement<DescriptionsItemProps>) => {
|
|
||||||
return renderCol(childrenItem, bordered, colon);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
return (
|
return (
|
||||||
<tr className={`${prefixCls}-row`} key={index}>
|
<tr className={`${prefixCls}-row`} key={index}>
|
||||||
{cloneChildren}
|
{cloneChildren}
|
||||||
{renderCol(lastChildren, bordered, colon)}
|
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user