mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-30 06:09:34 +08:00
Merge remote-tracking branch 'upstream/feature' into feat-anchor-getCurrentAnchor
This commit is contained in:
shao
commit
ab796e60dd
@ -7,6 +7,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
|
||||
|
||||
interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
|
||||
noStyle?: boolean;
|
||||
}
|
||||
|
||||
const inlineStyle: React.CSSProperties = {
|
||||
@ -53,7 +54,8 @@ class TransButton extends React.Component<TransButtonProps> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { style } = this.props;
|
||||
const { style, noStyle } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
@ -62,7 +64,7 @@ class TransButton extends React.Component<TransButtonProps> {
|
||||
{...this.props}
|
||||
onKeyDown={this.onKeyDown}
|
||||
onKeyUp={this.onKeyUp}
|
||||
style={{ ...inlineStyle, ...style }}
|
||||
style={{ ...(!noStyle ? inlineStyle : null), ...style }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
2
components/calendar/locale/ms_MY.tsx
Normal file
2
components/calendar/locale/ms_MY.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
import ms_MY from '../../date-picker/locale/ms_MY';
|
||||
export default ms_MY;
|
||||
19
components/date-picker/locale/ms_MY.tsx
Normal file
19
components/date-picker/locale/ms_MY.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import CalendarLocale from 'rc-calendar/lib/locale/ms_MY';
|
||||
import TimePickerLocale from '../../time-picker/locale/ms_MY';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
lang: {
|
||||
placeholder: 'Pilih tarikh',
|
||||
rangePlaceholder: ['Tarikh mula', 'Tarikh akhir'],
|
||||
...CalendarLocale,
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale,
|
||||
},
|
||||
};
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale;
|
||||
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>
|
||||
@ -294,7 +294,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Product
|
||||
</th>
|
||||
@ -305,7 +305,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
Cloud Database
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Billing
|
||||
</th>
|
||||
@ -316,7 +316,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
Prepaid
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
time
|
||||
</th>
|
||||
@ -331,7 +331,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Amount
|
||||
</th>
|
||||
@ -342,7 +342,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
$80.00
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Discount
|
||||
</th>
|
||||
@ -353,7 +353,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||
$20.00
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
class="ant-descriptions-item-label ant-descriptions-item-colon"
|
||||
>
|
||||
Official
|
||||
</th>
|
||||
@ -368,7 +368,7 @@ exports[`renders ./components/descriptions/demo/responsive.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>
|
||||
@ -479,7 +479,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>
|
||||
@ -490,7 +490,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>
|
||||
@ -501,7 +501,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>
|
||||
@ -516,7 +516,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>
|
||||
@ -527,7 +527,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>
|
||||
@ -538,7 +538,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>
|
||||
@ -553,7 +553,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>
|
||||
@ -604,7 +604,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>
|
||||
@ -614,7 +614,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>
|
||||
@ -624,7 +624,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>
|
||||
@ -672,7 +672,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>
|
||||
@ -682,7 +682,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>
|
||||
@ -735,24 +735,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"
|
||||
@ -779,18 +779,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"
|
||||
@ -811,12 +811,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"
|
||||
@ -842,24 +842,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"
|
||||
@ -886,12 +886,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 support style 1`] = `
|
||||
<Descriptions
|
||||
column={
|
||||
@ -35,13 +104,28 @@ exports[`Descriptions Descriptions support style 1`] = `
|
||||
<tr
|
||||
className="ant-descriptions-row"
|
||||
key="0"
|
||||
>
|
||||
<Col
|
||||
bordered={false}
|
||||
child={
|
||||
<DescriptionsItem
|
||||
prefixCls="ant-descriptions"
|
||||
span={1}
|
||||
>
|
||||
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 ant-descriptions-item-no-label"
|
||||
className="ant-descriptions-item-label ant-descriptions-item-colon ant-descriptions-item-no-label"
|
||||
key="label"
|
||||
/>
|
||||
<span
|
||||
@ -51,6 +135,7 @@ exports[`Descriptions Descriptions support style 1`] = `
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -84,13 +169,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
|
||||
@ -102,6 +204,7 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
|
||||
Cloud Database
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -126,14 +229,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
|
||||
@ -145,13 +262,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
|
||||
@ -163,12 +295,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
|
||||
@ -180,17 +328,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
|
||||
@ -202,6 +367,7 @@ exports[`Descriptions column is number 1`] = `
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -236,22 +402,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"
|
||||
@ -264,26 +461,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"
|
||||
@ -296,26 +525,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"
|
||||
@ -328,26 +589,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"
|
||||
@ -360,6 +655,7 @@ exports[`Descriptions vertical layout 1`] = `
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -393,13 +689,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
|
||||
@ -411,17 +722,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
|
||||
@ -433,17 +760,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
|
||||
@ -455,17 +798,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
|
||||
@ -477,6 +837,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
|
||||
$80.00
|
||||
</span>
|
||||
</td>
|
||||
</Col>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -152,6 +152,15 @@ 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();
|
||||
});
|
||||
|
||||
it('Descriptions support style', () => {
|
||||
const wrapper = mount(
|
||||
<Descriptions style={{ backgroundColor: '#e8e8e8' }}>
|
||||
|
||||
@ -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 | 3.19.0 |
|
||||
| size | set the size of the list. Can be set to `middle`,`small`, or not filled | `default | middle | small` | false | 3.19.0 |
|
||||
| layout | Define description layout | `horizontal | vertical` | `horizontal` | 3.19.8 |
|
||||
| colon | change default props `colon` value of `Descriptions.Item` | boolean | true | 3.21.0 |
|
||||
|
||||
### 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?: React.ReactNode;
|
||||
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,
|
||||
style,
|
||||
} = this.props;
|
||||
const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
|
||||
@ -324,6 +254,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 | 3.19.0 |
|
||||
| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | false | 3.19.0 |
|
||||
| layout | 描述布局 | `horizontal | vertical` | `horizontal` | 3.19.8 |
|
||||
| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | 3.21.0 |
|
||||
|
||||
### DescriptionItem
|
||||
|
||||
|
||||
@ -47,6 +47,12 @@
|
||||
position: relative;
|
||||
top: -0.5px;
|
||||
margin: 0 8px 0 2px;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
&-item-colon {
|
||||
&::after {
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -41,6 +41,7 @@ import knIN from '../kn_IN';
|
||||
import koKR from '../ko_KR';
|
||||
import kuIQ from '../ku_IQ';
|
||||
import mnMN from '../mn_MN';
|
||||
import msMY from '../ms_MY';
|
||||
import nbNO from '../nb_NO';
|
||||
import neNP from '../ne-NP';
|
||||
import nlBE from '../nl_BE';
|
||||
@ -87,6 +88,7 @@ const locales = [
|
||||
knIN,
|
||||
koKR,
|
||||
kuIQ,
|
||||
msMY,
|
||||
mnMN,
|
||||
nbNO,
|
||||
neNP,
|
||||
|
||||
@ -19,6 +19,8 @@ export default {
|
||||
selectAll: 'Select current page',
|
||||
selectInvert: 'Invert current page',
|
||||
sortTitle: 'Sort',
|
||||
expand: 'Expand row',
|
||||
collapse: 'Collapse row',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'OK',
|
||||
|
||||
@ -31,4 +31,10 @@ export default {
|
||||
Empty: {
|
||||
description: 'Aucune donnée',
|
||||
},
|
||||
Text: {
|
||||
edit: 'éditer',
|
||||
copy: 'copier',
|
||||
copied: 'copie effectuée',
|
||||
expand: 'développer',
|
||||
},
|
||||
};
|
||||
|
||||
@ -31,4 +31,10 @@ export default {
|
||||
Empty: {
|
||||
description: 'Aucune donnée',
|
||||
},
|
||||
Text: {
|
||||
edit: 'éditer',
|
||||
copy: 'copier',
|
||||
copied: 'copie effectuée',
|
||||
expand: 'développer',
|
||||
},
|
||||
};
|
||||
|
||||
62
components/locale-provider/ms_MY.tsx
Normal file
62
components/locale-provider/ms_MY.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import Pagination from 'rc-pagination/lib/locale/ms_MY';
|
||||
import DatePicker from '../date-picker/locale/ms_MY';
|
||||
import TimePicker from '../time-picker/locale/ms_MY';
|
||||
import Calendar from '../calendar/locale/ms_MY';
|
||||
|
||||
export default {
|
||||
locale: 'ms-my',
|
||||
Pagination,
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
global: {
|
||||
placeholder: 'Sila pilih',
|
||||
},
|
||||
PageHeader: {
|
||||
back: 'Kembali',
|
||||
},
|
||||
Text: {
|
||||
edit: 'Sunting',
|
||||
copy: 'Salin',
|
||||
copied: 'Berjaya menyalin',
|
||||
expand: 'Kembang',
|
||||
},
|
||||
Empty: {
|
||||
description: 'Tiada data',
|
||||
},
|
||||
Table: {
|
||||
filterTitle: 'Cari dengan tajuk',
|
||||
filterConfirm: 'Ok',
|
||||
filterReset: 'Menetapkan semula',
|
||||
emptyText: 'Tiada data',
|
||||
selectAll: 'Pilih semua',
|
||||
selectInvert: 'Terbalikkan',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'OK',
|
||||
cancelText: 'Batal',
|
||||
justOkText: 'OK',
|
||||
},
|
||||
Popconfirm: {
|
||||
okText: 'OK',
|
||||
cancelText: 'Batal',
|
||||
},
|
||||
Transfer: {
|
||||
notFoundContent: 'Tidak dijumpai',
|
||||
searchPlaceholder: 'Carian di sini',
|
||||
itemUnit: 'item',
|
||||
itemsUnit: 'item',
|
||||
},
|
||||
Icon: {
|
||||
icon: 'ikon',
|
||||
},
|
||||
Select: {
|
||||
notFoundContent: 'Tidak Dijumpai',
|
||||
},
|
||||
Upload: {
|
||||
uploading: 'Sedang memuat naik...',
|
||||
removeFile: 'Buang fail',
|
||||
uploadError: 'Masalah muat naik',
|
||||
previewFile: 'Tengok fail',
|
||||
},
|
||||
};
|
||||
@ -20,6 +20,8 @@ export default {
|
||||
selectAll: '全选当页',
|
||||
selectInvert: '反选当页',
|
||||
sortTitle: '排序',
|
||||
expand: '展开行',
|
||||
collapse: '关闭行',
|
||||
},
|
||||
Modal: {
|
||||
okText: '确定',
|
||||
|
||||
@ -16,12 +16,12 @@ More layouts with navigation: [layout](/components/layout).
|
||||
## API
|
||||
|
||||
```html
|
||||
<Menu>
|
||||
<menu>
|
||||
<Menu.Item>Menu</Menu.Item>
|
||||
<SubMenu title="SubMenu">
|
||||
<Menu.Item>SubMenuItem</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</menu>
|
||||
```
|
||||
|
||||
### Menu
|
||||
|
||||
@ -17,12 +17,12 @@ subtitle: 导航菜单
|
||||
## API
|
||||
|
||||
```html
|
||||
<Menu>
|
||||
<menu>
|
||||
<Menu.Item>菜单项</Menu.Item>
|
||||
<SubMenu title="子菜单">
|
||||
<Menu.Item>子菜单项</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</menu>
|
||||
```
|
||||
|
||||
### Menu
|
||||
|
||||
@ -160,7 +160,7 @@
|
||||
.@{iconfont-css-prefix} {
|
||||
min-width: 14px;
|
||||
margin-right: 10px;
|
||||
font-size: @font-size-base;
|
||||
font-size: @menu-icon-size;
|
||||
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
|
||||
+ span {
|
||||
opacity: 1;
|
||||
@ -418,7 +418,7 @@
|
||||
}
|
||||
.@{iconfont-css-prefix} {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-size: @menu-icon-size-lg;
|
||||
line-height: @menu-item-height;
|
||||
+ span {
|
||||
display: inline-block;
|
||||
|
||||
@ -384,6 +384,8 @@
|
||||
@menu-item-active-bg: @item-active-bg;
|
||||
@menu-item-active-border-width: 3px;
|
||||
@menu-item-group-title-color: @text-color-secondary;
|
||||
@menu-icon-size: @font-size-base;
|
||||
@menu-icon-size-lg: @font-size-lg;
|
||||
|
||||
// dark theme
|
||||
@menu-dark-color: @text-color-secondary-dark;
|
||||
|
||||
@ -30,11 +30,13 @@ import {
|
||||
TableRowSelection,
|
||||
PaginationConfig,
|
||||
PrepareParamsArgumentsReturn,
|
||||
ExpandIconProps,
|
||||
} from './interface';
|
||||
import Pagination from '../pagination';
|
||||
import Icon from '../icon';
|
||||
import Spin, { SpinProps } from '../spin';
|
||||
import { RadioChangeEvent } from '../radio';
|
||||
import TransButton from '../_util/transButton';
|
||||
import { CheckboxChangeEvent } from '../checkbox';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import defaultLocale from '../locale-provider/default';
|
||||
@ -83,6 +85,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
locale: PropTypes.object,
|
||||
dropdownPrefixCls: PropTypes.string,
|
||||
sortDirections: PropTypes.array,
|
||||
getPopupContainer: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
@ -760,18 +763,24 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
return recordKey === undefined ? index : recordKey;
|
||||
};
|
||||
|
||||
getPopupContainer = () => {
|
||||
return ReactDOM.findDOMNode(this) as HTMLElement;
|
||||
};
|
||||
|
||||
generatePopupContainerFunc = () => {
|
||||
generatePopupContainerFunc = (getPopupContainer: TableProps<T>['getPopupContainer']) => {
|
||||
const { scroll } = this.props;
|
||||
|
||||
if (getPopupContainer) {
|
||||
return getPopupContainer;
|
||||
}
|
||||
// Use undefined to let rc component use default logic.
|
||||
return scroll ? this.getPopupContainer : undefined;
|
||||
return scroll ? () => ReactDOM.findDOMNode(this) as HTMLElement : undefined;
|
||||
};
|
||||
|
||||
renderRowSelection(prefixCls: string, locale: TableLocale) {
|
||||
renderRowSelection({
|
||||
prefixCls,
|
||||
locale,
|
||||
getPopupContainer,
|
||||
}: {
|
||||
prefixCls: string;
|
||||
locale: TableLocale;
|
||||
getPopupContainer: TableProps<T>['getPopupContainer'];
|
||||
}) {
|
||||
const { rowSelection } = this.props;
|
||||
const columns = this.columns.concat();
|
||||
if (rowSelection) {
|
||||
@ -811,7 +820,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
onSelect={this.handleSelectRow}
|
||||
selections={rowSelection.selections}
|
||||
hideDefaultSelections={rowSelection.hideDefaultSelections}
|
||||
getPopupContainer={this.generatePopupContainerFunc()}
|
||||
getPopupContainer={this.generatePopupContainerFunc(getPopupContainer)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -851,12 +860,19 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
return this.getColumnKey(sortColumn) === this.getColumnKey(column);
|
||||
}
|
||||
|
||||
renderColumnsDropdown(
|
||||
prefixCls: string,
|
||||
dropdownPrefixCls: string,
|
||||
columns: ColumnProps<T>[],
|
||||
locale: TableLocale,
|
||||
) {
|
||||
renderColumnsDropdown({
|
||||
prefixCls,
|
||||
dropdownPrefixCls,
|
||||
columns,
|
||||
locale,
|
||||
getPopupContainer,
|
||||
}: {
|
||||
prefixCls: string;
|
||||
dropdownPrefixCls: string;
|
||||
columns: ColumnProps<T>[];
|
||||
locale: TableLocale;
|
||||
getPopupContainer: TableProps<T>['getPopupContainer'];
|
||||
}) {
|
||||
const { sortOrder, filters } = this.state;
|
||||
return treeMap(columns, (column, i) => {
|
||||
const key = this.getColumnKey(column, i) as string;
|
||||
@ -874,7 +890,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
confirmFilter={this.handleFilter}
|
||||
prefixCls={`${prefixCls}-filter`}
|
||||
dropdownPrefixCls={dropdownPrefixCls || 'ant-dropdown'}
|
||||
getPopupContainer={this.generatePopupContainerFunc()}
|
||||
getPopupContainer={this.generatePopupContainerFunc(getPopupContainer)}
|
||||
key="filter-dropdown"
|
||||
/>
|
||||
);
|
||||
@ -1146,16 +1162,61 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
};
|
||||
}
|
||||
|
||||
renderTable = (
|
||||
prefixCls: string,
|
||||
renderEmpty: RenderEmptyHandler,
|
||||
dropdownPrefixCls: string,
|
||||
contextLocale: TableLocale,
|
||||
) => {
|
||||
const { style, className, showHeader, locale, ...restProps } = this.props;
|
||||
renderExpandIcon = (prefixCls: string) => ({
|
||||
expandable,
|
||||
expanded,
|
||||
needIndentSpaced,
|
||||
record,
|
||||
onExpand,
|
||||
}: ExpandIconProps<T>) => {
|
||||
if (expandable) {
|
||||
return (
|
||||
<LocaleReceiver componentName="Table" defaultLocale={defaultLocale.Table}>
|
||||
{(locale: TableLocale) => (
|
||||
<TransButton
|
||||
className={classNames(`${prefixCls}-row-expand-icon`, {
|
||||
[`${prefixCls}-row-collapsed`]: !expanded,
|
||||
[`${prefixCls}-row-expanded`]: expanded,
|
||||
})}
|
||||
onClick={event => {
|
||||
onExpand(record, event);
|
||||
}}
|
||||
aria-label={expanded ? locale.collapse : locale.expand}
|
||||
noStyle
|
||||
/>
|
||||
)}
|
||||
</LocaleReceiver>
|
||||
);
|
||||
}
|
||||
|
||||
if (needIndentSpaced) {
|
||||
return <span className={`${prefixCls}-row-expand-icon ${prefixCls}-row-spaced`} />;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
renderTable = ({
|
||||
prefixCls,
|
||||
renderEmpty,
|
||||
dropdownPrefixCls,
|
||||
contextLocale,
|
||||
getPopupContainer: contextGetPopupContainer,
|
||||
}: {
|
||||
prefixCls: string;
|
||||
renderEmpty: RenderEmptyHandler;
|
||||
dropdownPrefixCls: string;
|
||||
contextLocale: TableLocale;
|
||||
getPopupContainer: TableProps<T>['getPopupContainer'];
|
||||
}) => {
|
||||
const { style, className, showHeader, locale, getPopupContainer, ...restProps } = this.props;
|
||||
const data = this.getCurrentPageData();
|
||||
const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
|
||||
|
||||
// use props.getPopupContainer first
|
||||
const realGetPopupContainer = getPopupContainer || contextGetPopupContainer;
|
||||
|
||||
// Merge too locales
|
||||
const mergedLocale = { ...contextLocale, ...locale };
|
||||
if (!locale || !locale.emptyText) {
|
||||
mergedLocale.emptyText = renderEmpty('Table');
|
||||
@ -1168,13 +1229,23 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
[`${prefixCls}-without-column-header`]: !showHeader,
|
||||
});
|
||||
|
||||
let columns = this.renderRowSelection(prefixCls, mergedLocale);
|
||||
columns = this.renderColumnsDropdown(prefixCls, dropdownPrefixCls, columns, mergedLocale);
|
||||
columns = columns.map((column, i) => {
|
||||
const columnsWithRowSelection = this.renderRowSelection({
|
||||
prefixCls,
|
||||
locale: mergedLocale,
|
||||
getPopupContainer: realGetPopupContainer,
|
||||
});
|
||||
const columns = this.renderColumnsDropdown({
|
||||
columns: columnsWithRowSelection,
|
||||
prefixCls,
|
||||
dropdownPrefixCls,
|
||||
locale: mergedLocale,
|
||||
getPopupContainer: realGetPopupContainer,
|
||||
}).map((column, i) => {
|
||||
const newColumn = { ...column };
|
||||
newColumn.key = this.getColumnKey(newColumn, i);
|
||||
return newColumn;
|
||||
});
|
||||
|
||||
let expandIconColumnIndex = columns[0] && columns[0].key === 'selection-column' ? 1 : 0;
|
||||
if ('expandIconColumnIndex' in restProps) {
|
||||
expandIconColumnIndex = restProps.expandIconColumnIndex as number;
|
||||
@ -1183,6 +1254,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
return (
|
||||
<RcTable
|
||||
key="table"
|
||||
expandIcon={this.renderExpandIcon(prefixCls)}
|
||||
{...restProps}
|
||||
onRow={(record: T, index: number) => this.onRow(prefixCls, record, index)}
|
||||
components={this.components}
|
||||
@ -1198,7 +1270,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
);
|
||||
};
|
||||
|
||||
renderComponent = ({ getPrefixCls, renderEmpty }: ConfigConsumerProps) => {
|
||||
renderComponent = ({ getPrefixCls, renderEmpty, getPopupContainer }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
dropdownPrefixCls: customizeDropdownPrefixCls,
|
||||
@ -1218,7 +1290,15 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
const dropdownPrefixCls = getPrefixCls('dropdown', customizeDropdownPrefixCls);
|
||||
const table = (
|
||||
<LocaleReceiver componentName="Table" defaultLocale={defaultLocale.Table}>
|
||||
{locale => this.renderTable(prefixCls, renderEmpty, dropdownPrefixCls, locale)}
|
||||
{locale =>
|
||||
this.renderTable({
|
||||
prefixCls,
|
||||
renderEmpty,
|
||||
dropdownPrefixCls,
|
||||
contextLocale: locale,
|
||||
getPopupContainer,
|
||||
})
|
||||
}
|
||||
</LocaleReceiver>
|
||||
);
|
||||
|
||||
|
||||
41
components/table/__tests__/Table.expand.test.js
Normal file
41
components/table/__tests__/Table.expand.test.js
Normal file
@ -0,0 +1,41 @@
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Table from '..';
|
||||
|
||||
describe('Table.expand', () => {
|
||||
it('click to expand', () => {
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
firstName: 'John',
|
||||
lastName: 'Brown',
|
||||
age: 32,
|
||||
|
||||
children: [
|
||||
{
|
||||
key: '2',
|
||||
firstName: 'Jim',
|
||||
lastName: 'Green',
|
||||
age: 42,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const wrapper = mount(<Table columns={columns} dataSource={data} />);
|
||||
wrapper
|
||||
.find('.ant-table-row-expand-icon')
|
||||
.last()
|
||||
.simulate('click');
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -4,6 +4,7 @@ import { render, mount } from 'enzyme';
|
||||
import Table from '..';
|
||||
import Input from '../../input';
|
||||
import Button from '../../button';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
|
||||
function getDropdownWrapper(wrapper) {
|
||||
return mount(
|
||||
@ -686,4 +687,35 @@ describe('Table.filter', () => {
|
||||
dropdownWrapper2.find('.confirm').simulate('click');
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should support getPopupContainer', () => {
|
||||
const wrapper = mount(
|
||||
createTable({
|
||||
columns: [
|
||||
{
|
||||
...column,
|
||||
filterDropdownVisible: true,
|
||||
},
|
||||
],
|
||||
getPopupContainer: node => node.parentNode,
|
||||
}),
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should support getPopupContainer from ConfigProvider', () => {
|
||||
const wrapper = mount(
|
||||
<ConfigProvider getPopupContainer={node => node.parentNode}>
|
||||
{createTable({
|
||||
columns: [
|
||||
{
|
||||
...column,
|
||||
filterDropdownVisible: true,
|
||||
},
|
||||
],
|
||||
})}
|
||||
</ConfigProvider>
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,170 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table.expand click to expand 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-default ant-table-scroll-position-left"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<div
|
||||
class="ant-table-body"
|
||||
>
|
||||
<table
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-header-column"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left: 0px;"
|
||||
/>
|
||||
<div
|
||||
aria-label="Collapse row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expanded"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-1"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-1"
|
||||
style="padding-left: 20px;"
|
||||
/>
|
||||
<span
|
||||
class="ant-table-row-expand-icon ant-table-row-spaced"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-disabled ant-pagination-prev"
|
||||
title="Previous Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: left"
|
||||
class="anticon anticon-left"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-disabled ant-pagination-next"
|
||||
title="Next Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: right"
|
||||
class="anticon anticon-right"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -144,10 +144,6 @@ exports[`Table.filter renders filter correctly 1`] = `
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Jack
|
||||
</td>
|
||||
</tr>
|
||||
@ -158,10 +154,6 @@ exports[`Table.filter renders filter correctly 1`] = `
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Lucy
|
||||
</td>
|
||||
</tr>
|
||||
@ -172,10 +164,6 @@ exports[`Table.filter renders filter correctly 1`] = `
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Tom
|
||||
</td>
|
||||
</tr>
|
||||
@ -186,10 +174,6 @@ exports[`Table.filter renders filter correctly 1`] = `
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Jerry
|
||||
</td>
|
||||
</tr>
|
||||
@ -392,3 +376,441 @@ exports[`Table.filter renders radio filter correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Table.filter should support getPopupContainer 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-default ant-table-scroll-position-left"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<div
|
||||
class="ant-table-body"
|
||||
>
|
||||
<table
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<span
|
||||
class="ant-table-header-column"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
<i
|
||||
aria-label="icon: filter"
|
||||
class="anticon anticon-filter ant-table-filter-open ant-dropdown-trigger ant-dropdown-open"
|
||||
style=""
|
||||
tabindex="-1"
|
||||
title="Filter menu"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown ant-dropdown-placement-bottomRight slide-up-appear"
|
||||
style="left: -999px; top: -995px;"
|
||||
>
|
||||
<div
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
role="menuitem"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Boy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
role="menuitem"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Girl
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
title="Title"
|
||||
>
|
||||
Title
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
>
|
||||
<a
|
||||
class="ant-table-filter-dropdown-link confirm"
|
||||
>
|
||||
OK
|
||||
</a>
|
||||
<a
|
||||
class="ant-table-filter-dropdown-link clear"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="0"
|
||||
>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
Jack
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
Lucy
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
Tom
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
Jerry
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-default ant-table-scroll-position-left"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<div
|
||||
class="ant-table-body"
|
||||
>
|
||||
<table
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<span
|
||||
class="ant-table-header-column"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
<i
|
||||
aria-label="icon: filter"
|
||||
class="anticon anticon-filter ant-table-filter-open ant-dropdown-trigger ant-dropdown-open"
|
||||
style=""
|
||||
tabindex="-1"
|
||||
title="Filter menu"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown ant-dropdown-placement-bottomRight slide-up-appear"
|
||||
style="left: -999px; top: -995px;"
|
||||
>
|
||||
<div
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
role="menuitem"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Boy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
role="menuitem"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Girl
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
title="Title"
|
||||
>
|
||||
Title
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
>
|
||||
<a
|
||||
class="ant-table-filter-dropdown-link confirm"
|
||||
>
|
||||
OK
|
||||
</a>
|
||||
<a
|
||||
class="ant-table-filter-dropdown-link clear"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="0"
|
||||
>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
Jack
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
Lucy
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
Tom
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
Jerry
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -59,10 +59,6 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Jack
|
||||
</td>
|
||||
</tr>
|
||||
@ -73,10 +69,6 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Lucy
|
||||
</td>
|
||||
</tr>
|
||||
@ -87,10 +79,6 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Tom
|
||||
</td>
|
||||
</tr>
|
||||
@ -101,10 +89,6 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Jerry
|
||||
</td>
|
||||
</tr>
|
||||
@ -249,10 +233,6 @@ exports[`Table.pagination renders pagination correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Jack
|
||||
</td>
|
||||
</tr>
|
||||
@ -263,10 +243,6 @@ exports[`Table.pagination renders pagination correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Lucy
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -122,10 +122,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Jack
|
||||
</td>
|
||||
</tr>
|
||||
@ -157,10 +153,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Lucy
|
||||
</td>
|
||||
</tr>
|
||||
@ -192,10 +184,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Tom
|
||||
</td>
|
||||
</tr>
|
||||
@ -227,10 +215,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Jerry
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -119,10 +119,6 @@ exports[`Table renders JSX correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
John
|
||||
</td>
|
||||
<td
|
||||
@ -143,10 +139,6 @@ exports[`Table renders JSX correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
Jim
|
||||
</td>
|
||||
<td
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -263,7 +263,6 @@ class FilterMenu<T> extends React.Component<FilterMenuProps<T>, FilterMenuState<
|
||||
confirm: this.handleConfirm,
|
||||
clearFilters: this.handleClearFilters,
|
||||
filters: column.filters,
|
||||
getPopupContainer: (triggerNode: HTMLElement) => triggerNode.parentNode as HTMLElement,
|
||||
});
|
||||
}
|
||||
|
||||
@ -281,7 +280,7 @@ class FilterMenu<T> extends React.Component<FilterMenuProps<T>, FilterMenuState<
|
||||
onSelect={this.setSelectedKeys}
|
||||
onDeselect={this.setSelectedKeys}
|
||||
selectedKeys={originSelectedKeys && originSelectedKeys.map(val => val.toString())}
|
||||
getPopupContainer={(triggerNode: HTMLElement) => triggerNode.parentNode}
|
||||
getPopupContainer={getPopupContainer}
|
||||
>
|
||||
{this.renderMenus(column.filters!)}
|
||||
</Menu>
|
||||
|
||||
@ -87,6 +87,7 @@ const columns = [
|
||||
| onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | | |
|
||||
| onHeaderRow | Set props on per header row | Function(column, index) | - | |
|
||||
| onRow | Set props on per row | Function(record, index) | - | |
|
||||
| getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` | 3.21.0 |
|
||||
|
||||
#### onRow usage
|
||||
|
||||
|
||||
@ -92,6 +92,7 @@ const columns = [
|
||||
| onExpandedRowsChange | 展开的行变化时触发 | Function(expandedRows) | | |
|
||||
| onHeaderRow | 设置头部行属性 | Function(column, index) | - | |
|
||||
| onRow | 设置行属性 | Function(record, index) | - | |
|
||||
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | `() => TableHtmlElement` | 3.21.0 |
|
||||
|
||||
#### onRow 用法
|
||||
|
||||
|
||||
@ -80,6 +80,8 @@ export interface TableLocale {
|
||||
selectAll?: React.ReactNode;
|
||||
selectInvert?: React.ReactNode;
|
||||
sortTitle?: string;
|
||||
expand?: string;
|
||||
collapse?: string;
|
||||
}
|
||||
|
||||
export type RowSelectionType = 'checkbox' | 'radio';
|
||||
@ -122,7 +124,7 @@ export interface ExpandIconProps<T> {
|
||||
record: T;
|
||||
needIndentSpaced: boolean;
|
||||
expandable: boolean;
|
||||
onExpand: (record: T, event: MouseEvent) => void;
|
||||
onExpand: (record: T, event?: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
export interface TableCurrentDataSource<T> {
|
||||
@ -188,6 +190,7 @@ export interface TableProps<T> {
|
||||
style?: React.CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
sortDirections?: SortOrder[];
|
||||
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
||||
}
|
||||
|
||||
export interface TableStateFilters {
|
||||
|
||||
@ -545,15 +545,25 @@
|
||||
|
||||
&-row {
|
||||
&-expand-icon {
|
||||
.operation-unit();
|
||||
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
color: inherit;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
background: @component-background;
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&-expanded::after {
|
||||
|
||||
5
components/time-picker/locale/ms_MY.tsx
Normal file
5
components/time-picker/locale/ms_MY.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
const locale = {
|
||||
placeholder: 'Sila pilih masa',
|
||||
};
|
||||
|
||||
export default locale;
|
||||
@ -46,7 +46,7 @@ const TimelineItem: React.SFC<TimeLineItemProps> = props => (
|
||||
<div className={`${prefixCls}-item-tail`} />
|
||||
<div
|
||||
className={dotClassName}
|
||||
style={{ borderColor: /blue|red|green/.test(color) ? undefined : color }}
|
||||
style={{ borderColor: /blue|red|green|gray/.test(color) ? undefined : color }}
|
||||
>
|
||||
{dot}
|
||||
</div>
|
||||
|
||||
@ -270,7 +270,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-timeline-item ant-timeline-item-last"
|
||||
class="ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-timeline-item-tail"
|
||||
@ -292,6 +292,52 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-timeline-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-head ant-timeline-item-head-gray"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-content"
|
||||
>
|
||||
<p>
|
||||
Technical testing 1
|
||||
</p>
|
||||
<p>
|
||||
Technical testing 2
|
||||
</p>
|
||||
<p>
|
||||
Technical testing 3 2015-09-01
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-timeline-item ant-timeline-item-last"
|
||||
>
|
||||
<div
|
||||
class="ant-timeline-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-head ant-timeline-item-head-gray"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-content"
|
||||
>
|
||||
<p>
|
||||
Technical testing 1
|
||||
</p>
|
||||
<p>
|
||||
Technical testing 2
|
||||
</p>
|
||||
<p>
|
||||
Technical testing 3 2015-09-01
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。
|
||||
圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态，灰色表示未完成或失效状态。
|
||||
|
||||
## en-US
|
||||
|
||||
Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status.
|
||||
Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status, `gray` for unfinished or disabled status.
|
||||
|
||||
```jsx
|
||||
import { Timeline } from 'antd';
|
||||
@ -30,6 +30,16 @@ ReactDOM.render(
|
||||
<p>Technical testing 2</p>
|
||||
<p>Technical testing 3 2015-09-01</p>
|
||||
</Timeline.Item>
|
||||
<Timeline.Item color="gray">
|
||||
<p>Technical testing 1</p>
|
||||
<p>Technical testing 2</p>
|
||||
<p>Technical testing 3 2015-09-01</p>
|
||||
</Timeline.Item>
|
||||
<Timeline.Item color="gray">
|
||||
<p>Technical testing 1</p>
|
||||
<p>Technical testing 2</p>
|
||||
<p>Technical testing 3 2015-09-01</p>
|
||||
</Timeline.Item>
|
||||
</Timeline>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -39,6 +39,6 @@ Node of timeline
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` | |
|
||||
| color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` | |
|
||||
| dot | Customize timeline dot | string\|ReactNode | - | |
|
||||
| position | Customize node position | `left` \| `right` | - | 3.17.0 |
|
||||
|
||||
@ -39,7 +39,7 @@ title: Timeline
|
||||
时间轴的每一个节点。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | ----------------------------------------------- | ----------------- | ------ | ------ |
|
||||
| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue | |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | 指定圆圈颜色 `blue, red, green, gray`，或自定义的色值 | string | blue | |
|
||||
| dot | 自定义时间轴点 | string\|ReactNode | - | |
|
||||
| position | 自定义节点位置 | `left` \| `right` | - | 3.17.0 |
|
||||
|
||||
@ -55,6 +55,11 @@
|
||||
color: @success-color;
|
||||
border-color: @success-color;
|
||||
}
|
||||
|
||||
&-gray {
|
||||
color: @disabled-color;
|
||||
border-color: @disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-head-custom {
|
||||
|
||||
@ -1311,10 +1311,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content1
|
||||
</td>
|
||||
<td
|
||||
@ -1360,10 +1356,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content2
|
||||
</td>
|
||||
<td
|
||||
@ -1409,10 +1401,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content4
|
||||
</td>
|
||||
<td
|
||||
@ -1459,10 +1447,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content5
|
||||
</td>
|
||||
<td
|
||||
@ -1508,10 +1492,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content7
|
||||
</td>
|
||||
<td
|
||||
@ -1557,10 +1537,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content8
|
||||
</td>
|
||||
<td
|
||||
@ -1606,10 +1582,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content10
|
||||
</td>
|
||||
<td
|
||||
@ -1655,10 +1627,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content11
|
||||
</td>
|
||||
<td
|
||||
@ -1705,10 +1673,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content13
|
||||
</td>
|
||||
<td
|
||||
@ -1754,10 +1718,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content14
|
||||
</td>
|
||||
<td
|
||||
@ -2063,10 +2023,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content3
|
||||
</td>
|
||||
</tr>
|
||||
@ -2098,10 +2054,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content6
|
||||
</td>
|
||||
</tr>
|
||||
@ -2134,10 +2086,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content9
|
||||
</td>
|
||||
</tr>
|
||||
@ -2169,10 +2117,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content12
|
||||
</td>
|
||||
</tr>
|
||||
@ -2204,10 +2148,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content15
|
||||
</td>
|
||||
</tr>
|
||||
@ -2239,10 +2179,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
content18
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
"rc-slider": "~8.6.11",
|
||||
"rc-steps": "~3.4.1",
|
||||
"rc-switch": "~1.9.0",
|
||||
"rc-table": "~6.6.0",
|
||||
"rc-table": "~6.7.0",
|
||||
"rc-tabs": "~9.6.4",
|
||||
"rc-time-picker": "~3.7.1",
|
||||
"rc-tooltip": "~3.7.3",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user