From 4dfed8d0b7665016a4f6454904c0789c1386e5f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 30 Aug 2019 15:56:44 +0800 Subject: [PATCH] chore: Col support key if user providered (#18578) --- .../__snapshots__/index.test.js.snap | 38 +++++++++--------- .../descriptions/__tests__/index.test.js | 10 +++++ components/descriptions/index.tsx | 40 +++++++++---------- 3 files changed, 49 insertions(+), 39 deletions(-) diff --git a/components/descriptions/__tests__/__snapshots__/index.test.js.snap b/components/descriptions/__tests__/__snapshots__/index.test.js.snap index 632ec69dee..06fd1bbffc 100644 --- a/components/descriptions/__tests__/__snapshots__/index.test.js.snap +++ b/components/descriptions/__tests__/__snapshots__/index.test.js.snap @@ -39,7 +39,7 @@ exports[`Descriptions Descriptions support colon 1`] = ` } colon={false} - key="label-0" + key="0" layout="horizontal" type="label" > @@ -116,7 +116,7 @@ exports[`Descriptions Descriptions support style 1`] = ` } colon={true} - key="label-0" + key="0" layout="horizontal" type="label" > @@ -183,7 +183,7 @@ exports[`Descriptions Descriptions.Item support className 1`] = ` } colon={true} - key="label-0" + key="0" layout="horizontal" type="label" > @@ -241,7 +241,7 @@ exports[`Descriptions column is number 1`] = ` } colon={true} - key="label-0" + key="0" layout="horizontal" type="label" > @@ -274,7 +274,7 @@ exports[`Descriptions column is number 1`] = ` } colon={true} - key="label-1" + key="1" layout="horizontal" type="label" > @@ -307,7 +307,7 @@ exports[`Descriptions column is number 1`] = ` } colon={true} - key="label-2" + key="2" layout="horizontal" type="label" > @@ -346,7 +346,7 @@ exports[`Descriptions column is number 1`] = ` } colon={true} - key="label-0" + key="0" layout="horizontal" type="label" > @@ -414,7 +414,7 @@ exports[`Descriptions vertical layout 1`] = ` } colon={true} - key="label-0" + key="0" layout="vertical" type="label" > @@ -446,7 +446,7 @@ exports[`Descriptions vertical layout 1`] = ` } colon={true} - key="content-0" + key="0" layout="vertical" type="content" > @@ -478,7 +478,7 @@ exports[`Descriptions vertical layout 1`] = ` } colon={true} - key="label-0" + key="0" layout="vertical" type="label" > @@ -510,7 +510,7 @@ exports[`Descriptions vertical layout 1`] = ` } colon={true} - key="content-0" + key="0" layout="vertical" type="content" > @@ -542,7 +542,7 @@ exports[`Descriptions vertical layout 1`] = ` } colon={true} - key="label-0" + key="0" layout="vertical" type="label" > @@ -574,7 +574,7 @@ exports[`Descriptions vertical layout 1`] = ` } colon={true} - key="content-0" + key="0" layout="vertical" type="content" > @@ -607,7 +607,7 @@ exports[`Descriptions vertical layout 1`] = ` } colon={true} - key="label-0" + key="0" layout="vertical" type="label" > @@ -640,7 +640,7 @@ exports[`Descriptions vertical layout 1`] = ` } colon={true} - key="content-0" + key="0" layout="vertical" type="content" > @@ -701,7 +701,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = ` } colon={true} - key="label-0" + key="0" layout="horizontal" type="label" > @@ -739,7 +739,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = ` } colon={true} - key="label-0" + key="0" layout="horizontal" type="label" > @@ -777,7 +777,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = ` } colon={true} - key="label-0" + key="0" layout="horizontal" type="label" > @@ -816,7 +816,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = ` } colon={true} - key="label-0" + key="0" layout="horizontal" type="label" > diff --git a/components/descriptions/__tests__/index.test.js b/components/descriptions/__tests__/index.test.js index 506ce9c3cb..b76f10b258 100644 --- a/components/descriptions/__tests__/index.test.js +++ b/components/descriptions/__tests__/index.test.js @@ -175,4 +175,14 @@ describe('Descriptions', () => { ); expect(wrapper).toMatchSnapshot(); }); + + it('keep key', () => { + const wrapper = mount( + + + , + ); + + expect(wrapper.find('Col').key()).toBe('bamboo'); + }); }); diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index ab15fa7a1f..b8a65f8e61 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -61,7 +61,7 @@ const generateChildrenRows = ( const lastItem = index === itemNodes.length - 1; let lastSpanSame = true; if (lastItem) { - lastSpanSame = (itemNode.props.span || 1) === leftSpans; + lastSpanSame = !itemNode.props.span || itemNode.props.span === leftSpans; itemNode = React.cloneElement(itemNode, { span: leftSpans, }); @@ -95,24 +95,25 @@ const renderRow = ( colon: boolean, ) => { const renderCol = ( - childrenItem: React.ReactElement, + colItem: React.ReactElement, type: 'label' | 'content', idx: number, - ) => ( - - ); + ) => { + return ( + + ); + }; const cloneChildren: JSX.Element[] = []; const cloneContentChildren: JSX.Element[] = []; - React.Children.forEach( - children, + toArray(children).forEach( (childrenItem: React.ReactElement, idx: number) => { cloneChildren.push(renderCol(childrenItem, 'label', idx)); if (layout === 'vertical') { @@ -224,17 +225,16 @@ class Descriptions extends React.Component< const prefixCls = getPrefixCls('descriptions', customizePrefixCls); const column = this.getColumn(); - const cloneChildren = React.Children.map( - children, - (child: React.ReactElement) => { + const cloneChildren = toArray(children) + .map((child: React.ReactElement) => { if (React.isValidElement(child)) { return React.cloneElement(child, { prefixCls, }); } - return child; - }, - ); + return null; + }) + .filter((node: React.ReactElement) => node); const childrenArray: Array< React.ReactElement[]