From 56264c7481837fea8ddb1c2833d0f4e462c48046 Mon Sep 17 00:00:00 2001 From: Julien Confetti Date: Tue, 2 Jul 2019 22:49:59 +0200 Subject: [PATCH 01/15] Add missing French translation --- components/locale-provider/fr_BE.tsx | 6 ++++++ components/locale-provider/fr_FR.tsx | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/components/locale-provider/fr_BE.tsx b/components/locale-provider/fr_BE.tsx index c1c0166308..5b154e86ca 100644 --- a/components/locale-provider/fr_BE.tsx +++ b/components/locale-provider/fr_BE.tsx @@ -31,4 +31,10 @@ export default { Empty: { description: 'Aucune donnée', }, + Text: { + edit: 'éditer', + copy: 'copier', + copied: 'copie effectuée', + expand: 'développer', + }, }; diff --git a/components/locale-provider/fr_FR.tsx b/components/locale-provider/fr_FR.tsx index 8ece10bdd8..3fa5fcd0ce 100644 --- a/components/locale-provider/fr_FR.tsx +++ b/components/locale-provider/fr_FR.tsx @@ -31,4 +31,10 @@ export default { Empty: { description: 'Aucune donnée', }, + Text: { + edit: 'éditer', + copy: 'copier', + copied: 'copie effectuée', + expand: 'développer', + }, }; From 3db32cb6312795a13fab649d54bd26112448c466 Mon Sep 17 00:00:00 2001 From: hengkx Date: Wed, 10 Jul 2019 10:32:02 +0800 Subject: [PATCH 02/15] feat:Descriptions support colon props --- .../__tests__/__snapshots__/demo.test.js.snap | 88 +++++++++---------- .../__snapshots__/index.test.js.snap | 78 +++++++++++++--- .../descriptions/__tests__/index.test.js | 9 ++ components/descriptions/index.en-US.md | 1 + components/descriptions/index.tsx | 37 ++++++-- components/descriptions/index.zh-CN.md | 1 + components/descriptions/style/index.less | 6 ++ 7 files changed, 155 insertions(+), 65 deletions(-) diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap index 7ed955a48f..393a8d1772 100644 --- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap +++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap @@ -22,7 +22,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = ` colspan="1" > UserName @@ -37,7 +37,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = ` colspan="1" > Telephone @@ -52,7 +52,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = ` colspan="1" > Live @@ -71,7 +71,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = ` colspan="1" > Remark @@ -86,7 +86,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = ` colspan="2" > Address @@ -121,7 +121,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = ` class="ant-descriptions-row" > Product @@ -132,7 +132,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = ` Cloud Database Billing Mode @@ -143,7 +143,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = ` Prepaid Automatic Renewal @@ -158,7 +158,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = ` class="ant-descriptions-row" > Order time @@ -169,7 +169,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = ` 2018-04-24 18:00:00 Usage Time @@ -184,7 +184,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = ` class="ant-descriptions-row" > Status @@ -210,7 +210,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = ` class="ant-descriptions-row" > Negotiated Amount @@ -221,7 +221,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = ` $80.00 Discount @@ -232,7 +232,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = ` $20.00 Official Receipts @@ -247,7 +247,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = ` class="ant-descriptions-row" > Config Info @@ -298,7 +298,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = ` colspan="1" > Product @@ -313,7 +313,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = ` colspan="1" > Billing @@ -328,7 +328,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = ` colspan="1" > time @@ -347,7 +347,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = ` colspan="1" > Amount @@ -362,7 +362,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = ` colspan="1" > Discount @@ -377,7 +377,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = ` colspan="1" > Official @@ -396,7 +396,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = ` colspan="3" > Config Info @@ -507,7 +507,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = ` class="ant-descriptions-row" > Product @@ -518,7 +518,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = ` Cloud Database Billing @@ -529,7 +529,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = ` Prepaid time @@ -544,7 +544,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = ` class="ant-descriptions-row" > Amount @@ -555,7 +555,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = ` $80.00 Discount @@ -566,7 +566,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = ` $20.00 Official @@ -581,7 +581,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = ` class="ant-descriptions-row" > Config Info @@ -632,7 +632,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = ` colspan="1" > UserName @@ -642,7 +642,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = ` colspan="1" > Telephone @@ -652,7 +652,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = ` colspan="1" > Live @@ -700,7 +700,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = ` colspan="1" > Remark @@ -710,7 +710,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = ` colspan="2" > Address @@ -764,19 +764,19 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`] class="ant-descriptions-row" > Product Billing Mode Automatic Renewal @@ -808,13 +808,13 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`] class="ant-descriptions-row" > Order time Usage Time @@ -840,7 +840,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`] class="ant-descriptions-row" > Status @@ -871,19 +871,19 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`] class="ant-descriptions-row" > Negotiated Amount Discount Official Receipts @@ -915,7 +915,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`] class="ant-descriptions-row" > Config Info diff --git a/components/descriptions/__tests__/__snapshots__/index.test.js.snap b/components/descriptions/__tests__/__snapshots__/index.test.js.snap index e269a348ff..c90513c35c 100644 --- a/components/descriptions/__tests__/__snapshots__/index.test.js.snap +++ b/components/descriptions/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,57 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Descriptions Descriptions support colon 1`] = ` + +
+
+ + + + + + +
+ + Product + + + Cloud Database + +
+
+
+ +`; + exports[`Descriptions Descriptions.Item support className 1`] = ` Product @@ -74,7 +126,7 @@ exports[`Descriptions column is number 1`] = ` key=".$.0" > Product @@ -92,7 +144,7 @@ exports[`Descriptions column is number 1`] = ` key=".$.1" > Billing @@ -109,7 +161,7 @@ exports[`Descriptions column is number 1`] = ` colSpan={1} > time @@ -131,7 +183,7 @@ exports[`Descriptions column is number 1`] = ` colSpan={3} > Amount @@ -183,7 +235,7 @@ exports[`Descriptions vertical layout 1`] = ` colSpan={1} > Product @@ -215,7 +267,7 @@ exports[`Descriptions vertical layout 1`] = ` colSpan={1} > Billing @@ -247,7 +299,7 @@ exports[`Descriptions vertical layout 1`] = ` colSpan={1} > time @@ -279,7 +331,7 @@ exports[`Descriptions vertical layout 1`] = ` colSpan={1} > Amount @@ -340,7 +392,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = ` colSpan={1} > Product @@ -362,7 +414,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = ` colSpan={1} > Billing @@ -384,7 +436,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = ` colSpan={1} > time @@ -406,7 +458,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = ` colSpan={1} > Amount diff --git a/components/descriptions/__tests__/index.test.js b/components/descriptions/__tests__/index.test.js index 9c20b5523f..a4d01e046f 100644 --- a/components/descriptions/__tests__/index.test.js +++ b/components/descriptions/__tests__/index.test.js @@ -151,4 +151,13 @@ describe('Descriptions', () => { ); expect(wrapper).toMatchSnapshot(); }); + + it('Descriptions support colon', () => { + const wrapper = mount( + + Cloud Database + , + ); + expect(wrapper).toMatchSnapshot(); + }); }); diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md index e052191dd4..39e091917e 100644 --- a/components/descriptions/index.en-US.md +++ b/components/descriptions/index.en-US.md @@ -22,6 +22,7 @@ Commonly displayed on the details page. | column | the number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | | size | set the size of the list. Can be set to `middle`,`small`, or not filled | `default | middle | small` | false | | layout | Define description layout | `horizontal | vertical` | `horizontal` | +| colon | change default props `colon` value of `Descriptions.Item` | boolean | true | ### DescriptionItem diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index 06cd33365c..13466f2f0a 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -29,6 +29,7 @@ export interface DescriptionsProps { title?: string; column?: number | Partial>; layout?: 'horizontal' | 'vertical'; + colon?: boolean; } /** @@ -79,12 +80,17 @@ const generateChildrenRows = ( * {DescriptionsItem.children} * */ -const renderCol = (child: React.ReactElement, bordered: boolean) => { +const renderCol = ( + child: React.ReactElement, + bordered: boolean, + colon: boolean, +) => { const { prefixCls, label, className, children, span = 1 } = child.props; if (bordered) { return [ , bordered: b , bordered: b ); }; -const renderLabelCol = (child: React.ReactElement, bordered: boolean) => { +const renderLabelCol = ( + child: React.ReactElement, + bordered: boolean, + colon: boolean, +) => { const { prefixCls, label, span = 1 } = child.props; if (bordered) { return ( - + {label} ); } return ( - + {label} @@ -159,6 +177,7 @@ const renderRow = ( { prefixCls, column, isLast }: { prefixCls: string; column: number; isLast: boolean }, bordered: boolean, layout: string, + colon: boolean, ) => { // copy children,prevent changes to incoming parameters const childrenArray = [...children]; @@ -174,7 +193,7 @@ const renderRow = ( const cloneLabelChildren = React.Children.map( childrenArray, (childrenItem: React.ReactElement) => { - return renderLabelCol(childrenItem, bordered); + return renderLabelCol(childrenItem, bordered, colon); }, ); const cloneContentChildren = React.Children.map( @@ -186,7 +205,7 @@ const renderRow = ( return [ {cloneLabelChildren} - {renderLabelCol(lastChildren, bordered)} + {renderLabelCol(lastChildren, bordered, colon)} , {cloneContentChildren} @@ -197,13 +216,13 @@ const renderRow = ( const cloneChildren = React.Children.map( childrenArray, (childrenItem: React.ReactElement) => { - return renderCol(childrenItem, bordered); + return renderCol(childrenItem, bordered, colon); }, ); return ( {cloneChildren} - {renderCol(lastChildren, bordered)} + {renderCol(lastChildren, bordered, colon)} ); }; @@ -281,6 +300,7 @@ class Descriptions extends React.Component< children, bordered = false, layout = 'horizontal', + colon = true, } = this.props; const prefixCls = getPrefixCls('descriptions', customizePrefixCls); @@ -322,6 +342,7 @@ class Descriptions extends React.Component< }, bordered, layout, + colon, ), )} diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index c200a4dd89..ffd4e5daf0 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -23,6 +23,7 @@ cols: 1 | column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | | size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | false | | layout | 描述布局 | `horizontal | vertical` | `horizontal` | +| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | ### DescriptionItem diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index 6282cd7533..ad7dfdbfae 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -47,6 +47,12 @@ position: relative; top: -0.5px; margin: 0 8px 0 2px; + content: ' '; + } + } + + &-item-colon { + &::after { content: ':'; } } From 99a2cc201e40a15a0e409b65c42c06afe4462ba1 Mon Sep 17 00:00:00 2001 From: hengkx Date: Wed, 10 Jul 2019 13:21:56 +0800 Subject: [PATCH 03/15] improve Descriptions code --- components/descriptions/Col.tsx | 75 ++ .../__tests__/__snapshots__/demo.test.js.snap | 40 +- .../__snapshots__/index.test.js.snap | 741 ++++++++++++------ components/descriptions/index.tsx | 158 +--- 4 files changed, 646 insertions(+), 368 deletions(-) create mode 100644 components/descriptions/Col.tsx diff --git a/components/descriptions/Col.tsx b/components/descriptions/Col.tsx new file mode 100644 index 0000000000..e779b60e1c --- /dev/null +++ b/components/descriptions/Col.tsx @@ -0,0 +1,75 @@ +import * as React from 'react'; +import classNames from 'classnames'; +import { DescriptionsItemProps } from './index'; + +interface ColProps { + child: React.ReactElement; + bordered: boolean; + colon: boolean; + type?: 'label' | 'content'; + layout?: 'horizontal' | 'vertical'; +} + +const Col: React.SFC = 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 {label}; + } + return ( + + {children} + + ); + } + if (layout === 'vertical') { + if (type === 'content') { + return ( + + + {children} + + + ); + } + return ( + + + {label} + + + ); + } + return ( + + {label} + + {children} + + + ); +}; + +export default Col; diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap index 393a8d1772..68791d4000 100644 --- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap +++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap @@ -763,24 +763,24 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`] - Product - - + Billing Mode - - + Automatic Renewal - + - Order time - - + Usage Time - + - Status - + - Negotiated Amount - - + Discount - - + Official Receipts - + - Config Info - + - + Cloud Database + + } + colon={false} + key="label-0" + layout="horizontal" + type="label" > - - Product - - - Cloud Database - - + + Product + + + Cloud Database + + + @@ -78,23 +95,41 @@ exports[`Descriptions Descriptions.Item support className 1`] = ` className="ant-descriptions-row" key="0" > - + Cloud Database + + } + colon={true} + key="label-0" + layout="horizontal" + type="label" > - - Product - - - Cloud Database - - + + Product + + + Cloud Database + + + @@ -120,81 +155,144 @@ exports[`Descriptions column is number 1`] = ` className="ant-descriptions-row" key="0" > - + Cloud Database + + } + colon={true} + key="label-0" + layout="horizontal" + type="label" > - - Product - - - Cloud Database - - - + Product + + + Cloud Database + + + + + Prepaid + + } + colon={true} + key="label-1" + layout="horizontal" + type="label" > - - Billing - - - Prepaid - - - + Billing + + + Prepaid + + + + + 18:00:00 + + } + colon={true} + key="label-2" + layout="horizontal" + type="label" > - - time - - - 18:00:00 - - + + time + + + 18:00:00 + + + - + $80.00 + + } + colon={true} + key="label-0" + layout="horizontal" + type="label" > - - Amount - - - $80.00 - - + + Amount + + + $80.00 + + + @@ -230,129 +328,259 @@ exports[`Descriptions vertical layout 1`] = ` className="ant-descriptions-row" key="label-0" > - + Cloud Database + + } + colon={true} + key="label-0" + layout="vertical" + type="label" > - - Product - - + + Product + + + - + Cloud Database + + } + colon={true} + key="content-0" + layout="vertical" + type="content" > - - Cloud Database - - + + Cloud Database + + + - + Prepaid + + } + colon={true} + key="label-0" + layout="vertical" + type="label" > - - Billing - - + + Billing + + + - + Prepaid + + } + colon={true} + key="content-0" + layout="vertical" + type="content" > - - Prepaid - - + + Prepaid + + + - + 18:00:00 + + } + colon={true} + key="label-0" + layout="vertical" + type="label" > - - time - - + + time + + + - + 18:00:00 + + } + colon={true} + key="content-0" + layout="vertical" + type="content" > - - 18:00:00 - - + + 18:00:00 + + + - + $80.00 + + } + colon={true} + key="label-0" + layout="vertical" + type="label" > - - Amount - - + + Amount + + + - + $80.00 + + } + colon={true} + key="content-0" + layout="vertical" + type="content" > - - $80.00 - - + + $80.00 + + + @@ -387,89 +615,154 @@ exports[`Descriptions when item is rendered conditionally 1`] = ` className="ant-descriptions-row" key="0" > - + Cloud Database + + } + colon={true} + key="label-0" + layout="horizontal" + type="label" > - - Product - - - Cloud Database - - + + Product + + + Cloud Database + + + - + Prepaid + + } + colon={true} + key="label-0" + layout="horizontal" + type="label" > - - Billing - - - Prepaid - - + + Billing + + + Prepaid + + + - + 18:00:00 + + } + colon={true} + key="label-0" + layout="horizontal" + type="label" > - - time - - - 18:00:00 - - + + time + + + 18:00:00 + + + - + $80.00 + + } + colon={true} + key="label-0" + layout="horizontal" + type="label" > - - Amount - - - $80.00 - - + + Amount + + + $80.00 + + + diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index 13466f2f0a..88990a6a09 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -7,6 +7,7 @@ import ResponsiveObserve, { responsiveArray, } from '../_util/responsiveObserve'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import Col from './Col'; export interface DescriptionsItemProps { prefixCls?: string; @@ -70,113 +71,12 @@ const generateChildrenRows = ( return childrenArray; }; -/** - * This code is for handling react15 does not support returning an array, - * It can convert a children into th and td - * @param child DescriptionsItem - * @returns - * <> - * {DescriptionsItem.label} - * {DescriptionsItem.children} - * - */ -const renderCol = ( - child: React.ReactElement, - bordered: boolean, - colon: boolean, -) => { - const { prefixCls, label, className, children, span = 1 } = child.props; - if (bordered) { - return [ - - {label} - , - - {children} - , - ]; - } - return ( - - - {label} - - - {children} - - - ); -}; - -const renderLabelCol = ( - child: React.ReactElement, - bordered: boolean, - colon: boolean, -) => { - const { prefixCls, label, span = 1 } = child.props; - if (bordered) { - return ( - - {label} - - ); - } - return ( - - - {label} - - - ); -}; - -const renderContentCol = (child: React.ReactElement, bordered: boolean) => { - const { prefixCls, children, span = 1 } = child.props; - if (bordered) { - return ( - - {children} - - ); - } - return ( - - - {children} - - - ); -}; - const renderRow = ( children: React.ReactElement[], index: number, { prefixCls, column, isLast }: { prefixCls: string; column: number; isLast: boolean }, bordered: boolean, - layout: string, + layout: 'horizontal' | 'vertical', colon: boolean, ) => { // copy children,prevent changes to incoming parameters @@ -188,41 +88,51 @@ const renderRow = ( span, }); } + childrenArray.push(lastChildren); + + const renderCol = ( + childrenItem: React.ReactElement, + type: 'label' | 'content', + idx: number, + ) => ( + + ); + + const cloneChildren: JSX.Element[] = []; + const cloneContentChildren: JSX.Element[] = []; + React.Children.forEach( + childrenArray, + (childrenItem: React.ReactElement, 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) => { - return renderLabelCol(childrenItem, bordered, colon); - }, - ); - const cloneContentChildren = React.Children.map( - childrenArray, - (childrenItem: React.ReactElement) => { - return renderContentCol(childrenItem, bordered); - }, - ); return [ - {cloneLabelChildren} - {renderLabelCol(lastChildren, bordered, colon)} + {cloneChildren} , {cloneContentChildren} - {renderContentCol(lastChildren, bordered)} , ]; } - const cloneChildren = React.Children.map( - childrenArray, - (childrenItem: React.ReactElement) => { - return renderCol(childrenItem, bordered, colon); - }, - ); + return ( {cloneChildren} - {renderCol(lastChildren, bordered, colon)} ); }; From 628dbc2d6abdddbe324647de4534551b4136d77e Mon Sep 17 00:00:00 2001 From: hengkx Date: Wed, 10 Jul 2019 13:46:36 +0800 Subject: [PATCH 04/15] improve Descriptions code --- components/descriptions/Col.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/components/descriptions/Col.tsx b/components/descriptions/Col.tsx index e779b60e1c..f147597dfc 100644 --- a/components/descriptions/Col.tsx +++ b/components/descriptions/Col.tsx @@ -49,10 +49,7 @@ const Col: React.SFC = props => { ); } return ( - + Date: Tue, 9 Jul 2019 15:35:06 +0800 Subject: [PATCH 05/15] Added ms_MY locale support --- components/calendar/locale/ms_MY.tsx | 2 + components/date-picker/locale/ms_MY.tsx | 19 ++++++++ components/locale-provider/ms_MY.tsx | 62 +++++++++++++++++++++++++ components/time-picker/locale/ms_MY.tsx | 5 ++ 4 files changed, 88 insertions(+) create mode 100644 components/calendar/locale/ms_MY.tsx create mode 100644 components/date-picker/locale/ms_MY.tsx create mode 100644 components/locale-provider/ms_MY.tsx create mode 100644 components/time-picker/locale/ms_MY.tsx diff --git a/components/calendar/locale/ms_MY.tsx b/components/calendar/locale/ms_MY.tsx new file mode 100644 index 0000000000..0c1ecedadf --- /dev/null +++ b/components/calendar/locale/ms_MY.tsx @@ -0,0 +1,2 @@ +import ms_MY from '../../date-picker/locale/ms_MY'; +export default ms_MY; diff --git a/components/date-picker/locale/ms_MY.tsx b/components/date-picker/locale/ms_MY.tsx new file mode 100644 index 0000000000..7382d546fe --- /dev/null +++ b/components/date-picker/locale/ms_MY.tsx @@ -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; diff --git a/components/locale-provider/ms_MY.tsx b/components/locale-provider/ms_MY.tsx new file mode 100644 index 0000000000..ef38cd3316 --- /dev/null +++ b/components/locale-provider/ms_MY.tsx @@ -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', + }, +}; diff --git a/components/time-picker/locale/ms_MY.tsx b/components/time-picker/locale/ms_MY.tsx new file mode 100644 index 0000000000..2e66160ff8 --- /dev/null +++ b/components/time-picker/locale/ms_MY.tsx @@ -0,0 +1,5 @@ +const locale = { + placeholder: 'Sila pilih masa', +}; + +export default locale; From 1c07d54ad5b7b5865af0d31a39782b92727bec0f Mon Sep 17 00:00:00 2001 From: Goh Zhao Yang Date: Fri, 12 Jul 2019 07:52:58 +0800 Subject: [PATCH 06/15] Added test for ms_MY --- components/locale-provider/__tests__/index.test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js index 325f93d19e..4da305fbc5 100644 --- a/components/locale-provider/__tests__/index.test.js +++ b/components/locale-provider/__tests__/index.test.js @@ -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, From 44e456773d1e6ddd853203893575d0d406dda1b0 Mon Sep 17 00:00:00 2001 From: Goh Zhao Yang Date: Fri, 12 Jul 2019 08:05:04 +0800 Subject: [PATCH 07/15] Rerun tests --- .../__snapshots__/index.test.js.snap | 5328 ++++++++++++++++- 1 file changed, 5288 insertions(+), 40 deletions(-) diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap index 2b74230ee9..3a85b3512e 100644 --- a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap +++ b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap @@ -107358,7 +107358,7 @@ exports[`Locale Provider should display the text as id 1`] = ` class="ant-modal-mask fade-appear" /> @@ -3811,10 +3765,6 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = ` class="editable-cell-value-wrap" style="padding-right:24px" > - Edward King 1 @@ -4043,10 +3993,6 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = ` - Edrward 0 - Edrward 1 - Edrward 2 - Edrward 3 - Edrward 4 - Edrward 5 - Edrward 6 - Edrward 7 - Edrward 8 - Edrward 9 - - - - John Brown sr. @@ -5391,10 +5313,6 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = ` - John Brown - Jim Green - John Brown - Jim Green - Edrward 0 - Edrward 1 - Edrward 2 - Edrward 3 - Edrward 4 - Edrward 5 - Edrward 6 - Edrward 7 - Edrward 8 - Edrward 9 - Edrward 0 - Edrward 1 - Edrward 2 - Edrward 3 - Edrward 4 - Edrward 5 - Edrward 6 - Edrward 7 - Edrward 8 - Edrward 9 - Edward King 0 - Edward King 1 - Edward King 2 - Edward King 3 - Edward King 4 - Edward King 5 - Edward King 6 - Edward King 7 - Edward King 8 - Edward King 9 - Edward King 10 - Edward King 11 - Edward King 12 - Edward King 13 - Edward King 14 - Edward King 15 - Edward King 16 - Edward King 17 - Edward King 18 - Edward King 19 - Edward King 20 - Edward King 21 - Edward King 22 - Edward King 23 - Edward King 24 - Edward King 25 - Edward King 26 - Edward King 27 - Edward King 28 - Edward King 29 - Edward King 30 - Edward King 31 - Edward King 32 - Edward King 33 - Edward King 34 - Edward King 35 - Edward King 36 - Edward King 37 - Edward King 38 - Edward King 39 - Edward King 40 - Edward King 41 - Edward King 42 - Edward King 43 - Edward King 44 - Edward King 45 - Edward King 46 - Edward King 47 - Edward King 48 - Edward King 49 - John Brown - John Brown - John Brown - John Brown - John Brown - John Brown - John Brown - John Brown - John Brown - John Brown - John Brown @@ -9827,10 +9409,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` - John Brown @@ -9841,10 +9419,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` - John Brown @@ -9855,10 +9429,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` - John Brown @@ -9869,10 +9439,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` - John Brown @@ -9883,10 +9449,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` - John Brown @@ -9897,10 +9459,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` - John Brown @@ -9911,10 +9469,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` - John Brown @@ -9925,10 +9479,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` - John Brown @@ -9939,10 +9489,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` - John Brown @@ -10537,10 +10083,6 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = ` - Jim Green - John Brown - Joe Black - Jim Red - John - Jim - Joe - - - - John Brown - Jim Green - Joe Black - Jim Red - 2018-02-11 - 2018-03-11 - 2018-04-11 - @@ -12592,10 +12087,6 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = ` - @@ -12642,10 +12133,6 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = ` - @@ -12693,10 +12180,6 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = ` - @@ -12970,10 +12453,6 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl - Edward King 0 - Edward King 1 - Edward King 2 - Edward King 3 - Edward King 4 - Edward King 5 - Edward King 6 - Edward King 7 - Edward King 8 - Edward King 9 - Edward King 0 - Edward King 1 - Edward King 2 - Edward King 3 - Edward King 4 - Edward King 5 - Edward King 6 - Edward King 7 - Edward King 8 - Edward King 9 - John Brown - Jim Green - Joe Black - John Brown - Jim Green - Joe Black { record: T; needIndentSpaced: boolean; expandable: boolean; - onExpand: (record: T, event: MouseEvent) => void; + onExpand: (record: T, event?: React.MouseEvent) => void; } export interface TableCurrentDataSource { diff --git a/components/table/style/index.less b/components/table/style/index.less index a38292611e..9f045e3e6b 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -541,15 +541,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 { diff --git a/components/transfer/__tests__/__snapshots__/demo.test.js.snap b/components/transfer/__tests__/__snapshots__/demo.test.js.snap index 2608c0c5b4..11dc8506e0 100644 --- a/components/transfer/__tests__/__snapshots__/demo.test.js.snap +++ b/components/transfer/__tests__/__snapshots__/demo.test.js.snap @@ -1311,10 +1311,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = ` - content1 - content2 - content4 - content5 - content7 - content8 - content10 - content11 - content13 - content14 - content3 @@ -2098,10 +2054,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = ` - content6 @@ -2134,10 +2086,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = ` - content9 @@ -2169,10 +2117,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = ` - content12 @@ -2204,10 +2148,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = ` - content15 @@ -2239,10 +2179,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = ` - content18 diff --git a/package.json b/package.json index 5890fa2362..615aabbcca 100644 --- a/package.json +++ b/package.json @@ -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", From 173859e49c9f0c95688a3cde19cf2374d306978c Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 22 Jul 2019 21:27:32 +0800 Subject: [PATCH 12/15] :sparkles: Add Table `getPopupContainer` close #17548 close #16876 close #14864 close #14426 --- components/table/Table.tsx | 13 ++++++------- components/table/filterDropdown.tsx | 3 +-- components/table/index.en-US.md | 1 + components/table/index.zh-CN.md | 1 + components/table/interface.tsx | 1 + 5 files changed, 10 insertions(+), 9 deletions(-) diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 5912d18524..056e8f0b3c 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -85,6 +85,7 @@ export default class Table extends React.Component, TableState< locale: PropTypes.object, dropdownPrefixCls: PropTypes.string, sortDirections: PropTypes.array, + getPopupContainer: PropTypes.func, }; static defaultProps = { @@ -762,15 +763,13 @@ export default class Table extends React.Component, TableState< return recordKey === undefined ? index : recordKey; }; - getPopupContainer = () => { - return ReactDOM.findDOMNode(this) as HTMLElement; - }; - generatePopupContainerFunc = () => { - const { scroll } = this.props; - + const { scroll, getPopupContainer } = 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) { diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx index 07ea02a891..aa517734d9 100755 --- a/components/table/filterDropdown.tsx +++ b/components/table/filterDropdown.tsx @@ -263,7 +263,6 @@ class FilterMenu extends React.Component, FilterMenuState< confirm: this.handleConfirm, clearFilters: this.handleClearFilters, filters: column.filters, - getPopupContainer: (triggerNode: HTMLElement) => triggerNode.parentNode as HTMLElement, }); } @@ -281,7 +280,7 @@ class FilterMenu extends React.Component, 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!)} diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index e2109ee13b..3bc6ed8865 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -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 diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 7e3895cfd7..eeb511c767 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -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 用法 diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 50e0ab239e..3e0c9205e8 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -190,6 +190,7 @@ export interface TableProps { style?: React.CSSProperties; children?: React.ReactNode; sortDirections?: SortOrder[]; + getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; } export interface TableStateFilters { From abcfe77b5b3fb3bafb6fc0d640fc57ba3813fe90 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 22 Jul 2019 21:36:57 +0800 Subject: [PATCH 13/15] :white_check_mark: Add snapshot test for Table getPopupContainer --- .../table/__tests__/Table.filter.test.js | 15 ++ .../__snapshots__/Table.filter.test.js.snap | 219 ++++++++++++++++++ 2 files changed, 234 insertions(+) diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 6283903db5..5356d71e4f 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -686,4 +686,19 @@ 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(); + }); }); diff --git a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap index b60adf68d3..f13b3a3fc3 100644 --- a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap +++ b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap @@ -376,3 +376,222 @@ exports[`Table.filter renders radio filter correctly 1`] = ` `; + +exports[`Table.filter should support getPopupContainer 1`] = ` +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + Name + + +
+ + + + +
+
+
+ +
+ + OK + + + Reset + +
+
+
+
+
+ Jack +
+ Lucy +
+ Tom +
+ Jerry +
+
+
+
+
+
+
+`; From 2a5a8415be21648d125e5d02487d7ef7f5f301ea Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 23 Jul 2019 11:48:34 +0800 Subject: [PATCH 14/15] :bug: ConfigProvider getPopupContainer for Table --- components/table/Table.tsx | 90 ++++++++++++++++++++++++++++---------- 1 file changed, 67 insertions(+), 23 deletions(-) diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 056e8f0b3c..2f916f8df3 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -763,8 +763,8 @@ export default class Table extends React.Component, TableState< return recordKey === undefined ? index : recordKey; }; - generatePopupContainerFunc = () => { - const { scroll, getPopupContainer } = this.props; + generatePopupContainerFunc = (getPopupContainer: TableProps['getPopupContainer']) => { + const { scroll } = this.props; if (getPopupContainer) { return getPopupContainer; } @@ -772,7 +772,15 @@ export default class Table extends React.Component, TableState< return scroll ? () => ReactDOM.findDOMNode(this) as HTMLElement : undefined; }; - renderRowSelection(prefixCls: string, locale: TableLocale) { + renderRowSelection({ + prefixCls, + locale, + getPopupContainer, + }: { + prefixCls: string; + locale: TableLocale; + getPopupContainer: TableProps['getPopupContainer']; + }) { const { rowSelection } = this.props; const columns = this.columns.concat(); if (rowSelection) { @@ -812,7 +820,7 @@ export default class Table extends React.Component, TableState< onSelect={this.handleSelectRow} selections={rowSelection.selections} hideDefaultSelections={rowSelection.hideDefaultSelections} - getPopupContainer={this.generatePopupContainerFunc()} + getPopupContainer={this.generatePopupContainerFunc(getPopupContainer)} /> ); } @@ -852,12 +860,19 @@ export default class Table extends React.Component, TableState< return this.getColumnKey(sortColumn) === this.getColumnKey(column); } - renderColumnsDropdown( - prefixCls: string, - dropdownPrefixCls: string, - columns: ColumnProps[], - locale: TableLocale, - ) { + renderColumnsDropdown({ + prefixCls, + dropdownPrefixCls, + columns, + locale, + getPopupContainer, + }: { + prefixCls: string; + dropdownPrefixCls: string; + columns: ColumnProps[]; + locale: TableLocale; + getPopupContainer: TableProps['getPopupContainer']; + }) { const { sortOrder, filters } = this.state; return treeMap(columns, (column, i) => { const key = this.getColumnKey(column, i) as string; @@ -875,7 +890,7 @@ export default class Table extends React.Component, TableState< confirmFilter={this.handleFilter} prefixCls={`${prefixCls}-filter`} dropdownPrefixCls={dropdownPrefixCls || 'ant-dropdown'} - getPopupContainer={this.generatePopupContainerFunc()} + getPopupContainer={this.generatePopupContainerFunc(getPopupContainer)} key="filter-dropdown" /> ); @@ -1181,16 +1196,27 @@ export default class Table extends React.Component, TableState< return null; }; - renderTable = ( - prefixCls: string, - renderEmpty: RenderEmptyHandler, - dropdownPrefixCls: string, - contextLocale: TableLocale, - ) => { - const { style, className, showHeader, locale, ...restProps } = this.props; + renderTable = ({ + prefixCls, + renderEmpty, + dropdownPrefixCls, + contextLocale, + getPopupContainer: contextGetPopupContainer, + }: { + prefixCls: string; + renderEmpty: RenderEmptyHandler; + dropdownPrefixCls: string; + contextLocale: TableLocale; + getPopupContainer: TableProps['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'); @@ -1203,13 +1229,23 @@ export default class Table extends React.Component, 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; @@ -1234,7 +1270,7 @@ export default class Table extends React.Component, TableState< ); }; - renderComponent = ({ getPrefixCls, renderEmpty }: ConfigConsumerProps) => { + renderComponent = ({ getPrefixCls, renderEmpty, getPopupContainer }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, dropdownPrefixCls: customizeDropdownPrefixCls, @@ -1254,7 +1290,15 @@ export default class Table extends React.Component, TableState< const dropdownPrefixCls = getPrefixCls('dropdown', customizeDropdownPrefixCls); const table = ( - {locale => this.renderTable(prefixCls, renderEmpty, dropdownPrefixCls, locale)} + {locale => + this.renderTable({ + prefixCls, + renderEmpty, + dropdownPrefixCls, + contextLocale: locale, + getPopupContainer, + }) + } ); From efecf5eafd109d45cc51f90c35553af3d4b59afa Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 23 Jul 2019 11:58:05 +0800 Subject: [PATCH 15/15] :white_check_mark: add test snapshot --- .../table/__tests__/Table.filter.test.js | 17 ++ .../__snapshots__/Table.filter.test.js.snap | 219 ++++++++++++++++++ 2 files changed, 236 insertions(+) diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 5356d71e4f..879c4fc9f7 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -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( @@ -701,4 +702,20 @@ describe('Table.filter', () => { ); expect(wrapper.render()).toMatchSnapshot(); }); + + it('should support getPopupContainer from ConfigProvider', () => { + const wrapper = mount( + node.parentNode}> + {createTable({ + columns: [ + { + ...column, + filterDropdownVisible: true, + }, + ], + })} + + ); + expect(wrapper.render()).toMatchSnapshot(); + }); }); diff --git a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap index f13b3a3fc3..1302e148bd 100644 --- a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap +++ b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap @@ -595,3 +595,222 @@ exports[`Table.filter should support getPopupContainer 1`] = ` `; + +exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] = ` +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + Name + + +
+ + + + +
+
+
+ +
+ + OK + + + Reset + +
+
+
+
+
+ Jack +
+ Lucy +
+ Tom +
+ Jerry +
+
+
+
+
+
+
+`;