Skip to content

Commit

Permalink
fix: Descriptions.Item not support className (#17280)
Browse files Browse the repository at this point in the history 
* 🐛 Fix Desciptions.Item not support className

close #17276

* refactor descriptions styles implementation

* use `th` as label elements in bordered situation

* ✅ update snapshots
  • Loading branch information
@afc163 @zombieJ
afc163 authored and zombieJ committed Jun 26, 2019
1 parent b2261bb commit 94072ad
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 79 deletions.
72 changes: 36 additions & 36 deletions components/descriptions/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `

exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
<div
class="ant-descriptions bordered"
class="ant-descriptions ant-descriptions-bordered"
>
<div
class="ant-descriptions-title"
Expand All @@ -120,33 +120,33 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
<tr
class="ant-descriptions-row"
>
<td
<th
class="ant-descriptions-item-label"
>
Product
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
Cloud Database
</td>
<td
<th
class="ant-descriptions-item-label"
>
Billing Mode
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
Prepaid
</td>
<td
<th
class="ant-descriptions-item-label"
>
Automatic Renewal
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
Expand All @@ -157,22 +157,22 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
<tr
class="ant-descriptions-row"
>
<td
<th
class="ant-descriptions-item-label"
>
Order time
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
2018-04-24 18:00:00
</td>
<td
<th
class="ant-descriptions-item-label"
>
Usage Time
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="5"
Expand All @@ -183,11 +183,11 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
<tr
class="ant-descriptions-row"
>
<td
<th
class="ant-descriptions-item-label"
>
Status
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="5"
Expand All @@ -209,33 +209,33 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
<tr
class="ant-descriptions-row"
>
<td
<th
class="ant-descriptions-item-label"
>
Negotiated Amount
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
$80.00
</td>
<td
<th
class="ant-descriptions-item-label"
>
Discount
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
$20.00
</td>
<td
<th
class="ant-descriptions-item-label"
>
Official Receipts
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
Expand All @@ -246,11 +246,11 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
<tr
class="ant-descriptions-row"
>
<td
<th
class="ant-descriptions-item-label"
>
Config Info
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="5"
Expand Down Expand Up @@ -491,7 +491,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
<br />
<br />
<div
class="ant-descriptions bordered"
class="ant-descriptions ant-descriptions-bordered"
>
<div
class="ant-descriptions-title"
Expand All @@ -506,33 +506,33 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
<tr
class="ant-descriptions-row"
>
<td
<th
class="ant-descriptions-item-label"
>
Product
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
Cloud Database
</td>
<td
<th
class="ant-descriptions-item-label"
>
Billing
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
Prepaid
</td>
<td
<th
class="ant-descriptions-item-label"
>
time
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
Expand All @@ -543,33 +543,33 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
<tr
class="ant-descriptions-row"
>
<td
<th
class="ant-descriptions-item-label"
>
Amount
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
$80.00
</td>
<td
<th
class="ant-descriptions-item-label"
>
Discount
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
$20.00
</td>
<td
<th
class="ant-descriptions-item-label"
>
Official
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
Expand All @@ -580,11 +580,11 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
<tr
class="ant-descriptions-row"
>
<td
<th
class="ant-descriptions-item-label"
>
Config Info
</td>
</th>
<td
class="ant-descriptions-item-content"
colspan="5"
Expand Down
51 changes: 51 additions & 0 deletions components/descriptions/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Descriptions Descriptions.Item support className 1`] = `
<Descriptions
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"
>
<td
className="ant-descriptions-item my-class"
colSpan={1}
>
<span
className="ant-descriptions-item-label"
key="label"
>
Product
</span>
<span
className="ant-descriptions-item-content"
key="content"
>
Cloud Database
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</Descriptions>
`;

exports[`Descriptions column is number 1`] = `
<Descriptions
column="3"
Expand Down
11 changes: 11 additions & 0 deletions components/descriptions/__tests__/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,4 +124,15 @@ describe('Descriptions', () => {
expect(wrapper).toMatchSnapshot();
wrapper.unmount();
});

it('Descriptions.Item support className', () => {
const wrapper = mount(
<Descriptions>
<Descriptions.Item label="Product" className="my-class">
Cloud Database
</Descriptions.Item>
</Descriptions>,
);
expect(wrapper).toMatchSnapshot();
});
});
23 changes: 14 additions & 9 deletions components/descriptions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';

export interface DescriptionsItemProps {
prefixCls?: string;
className?: string;
label?: React.ReactNode;
children: React.ReactNode;
span?: number;
Expand Down Expand Up @@ -69,28 +70,32 @@ const generateChildrenRows = (

/**
* This code is for handling react15 does not support returning an array,
* It can convert a children into two td
* It can convert a children into th and td
* @param child DescriptionsItem
* @returns
* <>
* <td>{DescriptionsItem.label}</td>
* <th>{DescriptionsItem.label}</th>
* <td>{DescriptionsItem.children}</td>
* </>
*/
const renderCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
const { prefixCls, label, children, span = 1 } = child.props;
const { prefixCls, label, className, children, span = 1 } = child.props;
if (bordered) {
return [
<td className={`${prefixCls}-item-label`} key="label">
<th className={classNames(`${prefixCls}-item-label`, className)} key="label">
{label}
</td>,
<td className={`${prefixCls}-item-content`} key="content" colSpan={span * 2 - 1}>
</th>,
<td
className={classNames(`${prefixCls}-item-content`, className)}
key="content"
colSpan={span * 2 - 1}
>
{children}
</td>,
];
}
return (
<td colSpan={span} className={`${prefixCls}-item`}>
<td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
<span className={`${prefixCls}-item-label`} key="label">
{label}
</span>
Expand Down Expand Up @@ -224,8 +229,8 @@ class Descriptions extends React.Component<
return (
<div
className={classNames(prefixCls, className, {
[size as string]: size !== 'default',
bordered,
[`${prefixCls}-${size}`]: size !== 'default',
[`${prefixCls}-bordered`]: !!bordered,
})}
>
{title && <div className={`${prefixCls}-title`}>{title}</div>}
Expand Down

0 comments on commit 94072ad

Please sign in to comment.