From ca5d13cac40362a39feab1587eee108c6ea0f792 Mon Sep 17 00:00:00 2001 From: tangwenhui Date: Fri, 4 Nov 2022 13:04:07 +0800 Subject: [PATCH 01/10] fix: columns title render not as expected --- components/table/hooks/useSorter.tsx | 4 ++-- components/table/util.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx index 48f9807f14bb..299076b850a2 100644 --- a/components/table/hooks/useSorter.tsx +++ b/components/table/hooks/useSorter.tsx @@ -209,12 +209,12 @@ function injectSorter( if (sorterOrder) { cell['aria-sort'] = sorterOrder === 'ascend' ? 'ascending' : 'descending'; } else { - cell['aria-label'] = `${renderColumnTitle(column.title, {})} sortable`; + cell['aria-label'] = `${renderColumnTitle(column.title, {}, true)} sortable`; } cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`); cell.tabIndex = 0; if (column.ellipsis) { - cell.title = (renderColumnTitle(column.title, {}) ?? '').toString(); + cell.title = (renderColumnTitle(column.title, {}, true) ?? '').toString(); } return cell; }, diff --git a/components/table/util.ts b/components/table/util.ts index e6394f186e84..01c2776bc749 100644 --- a/components/table/util.ts +++ b/components/table/util.ts @@ -36,12 +36,13 @@ function getElementFirstTextContent(node: React.ReactElement): string { export function renderColumnTitle( title: ColumnTitle, props: ColumnTitleProps, + onlyGetFirstTextContent = false, ) { if (typeof title === 'function') { return title(props); } // fix: #38155 - if (React.isValidElement(title)) { + if (React.isValidElement(title) && onlyGetFirstTextContent) { // if title is a React Element, we should get first text content as result, // if there has not text content in React Element, return origin title return getElementFirstTextContent(title) || title; From e52083be445b6c77deabbe55f3d597c962badf8c Mon Sep 17 00:00:00 2001 From: tangwenhui Date: Fri, 4 Nov 2022 14:27:45 +0800 Subject: [PATCH 02/10] feat: code optimize --- components/table/__tests__/Table.test.tsx | 26 ++++ .../__snapshots__/Table.test.tsx.snap | 123 ++++++++++++++++++ components/table/hooks/useSorter.tsx | 13 +- components/table/util.ts | 20 ++- 4 files changed, 172 insertions(+), 10 deletions(-) diff --git a/components/table/__tests__/Table.test.tsx b/components/table/__tests__/Table.test.tsx index 1d8531c826d7..d7f8076616b8 100644 --- a/components/table/__tests__/Table.test.tsx +++ b/components/table/__tests__/Table.test.tsx @@ -286,4 +286,30 @@ describe('Table', () => { render(); expect(warnSpy).not.toHaveBeenCalled(); }); + + // https://github.com/ant-design/ant-design/issues/38371 + it('should render title', () => { + const columns = [ + { + title: ( +
+ name + Jason +
+ ), + key: 'name', + }, + { + title: () => ( +
+ name + Red +
+ ), + key: 'name', + }, + ]; + const { container } = render(); + expect(container).toMatchSnapshot(); + }); }); diff --git a/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/components/table/__tests__/__snapshots__/Table.test.tsx.snap index 925e8c074e29..cfab0c1b9e5b 100644 --- a/components/table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/components/table/__tests__/__snapshots__/Table.test.tsx.snap @@ -204,3 +204,126 @@ exports[`Table rtl render component should be rendered correctly in RTL directio `; + +exports[`Table should render title 1`] = ` +
+
+
+
+
+
+
+
+ + + + + + + + + + + + +
+
+ + name + + + Jason + +
+ 		+
+ + name + + + Red + +
+
+
+
+ + + + + + + + + +
+
+ No data +
+
+
+ + + + + + + +`; diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx index 299076b850a2..e29406fc9828 100644 --- a/components/table/hooks/useSorter.tsx +++ b/components/table/hooks/useSorter.tsx @@ -17,7 +17,12 @@ import type { TableLocale, TransformColumns, } from '../interface'; -import { getColumnKey, getColumnPos, renderColumnTitle } from '../util'; +import { + getColumnKey, + getColumnPos, + renderColumnTitle, + renderColumnTitleWithFirstContent, +} from '../util'; const ASCEND = 'ascend'; const DESCEND = 'descend'; @@ -205,16 +210,18 @@ function injectSorter( } }; + const titleText = renderColumnTitleWithFirstContent(column.title); + // Inform the screen-reader so it can tell the visually impaired user which column is sorted if (sorterOrder) { cell['aria-sort'] = sorterOrder === 'ascend' ? 'ascending' : 'descending'; } else { - cell['aria-label'] = `${renderColumnTitle(column.title, {}, true)} sortable`; + cell['aria-label'] = `${titleText} sortable`; } cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`); cell.tabIndex = 0; if (column.ellipsis) { - cell.title = (renderColumnTitle(column.title, {}, true) ?? '').toString(); + cell.title = (titleText ?? '').toString(); } return cell; }, diff --git a/components/table/util.ts b/components/table/util.ts index 01c2776bc749..06cdfb01b676 100644 --- a/components/table/util.ts +++ b/components/table/util.ts @@ -33,20 +33,26 @@ function getElementFirstTextContent(node: React.ReactElement): string { ); } +/** + * Render title by first content + * + * @param title + * @returns + */ +export function renderColumnTitleWithFirstContent(title: ColumnTitle) { + if (React.isValidElement(title)) { + return getElementFirstTextContent(title); + } + return title; +} + export function renderColumnTitle( title: ColumnTitle, props: ColumnTitleProps, - onlyGetFirstTextContent = false, ) { if (typeof title === 'function') { return title(props); } - // fix: #38155 - if (React.isValidElement(title) && onlyGetFirstTextContent) { - // if title is a React Element, we should get first text content as result, - // if there has not text content in React Element, return origin title - return getElementFirstTextContent(title) || title; - } return title; } From e8eafddbe90a0bb2b9e3cdae8f9505c43a8d136e Mon Sep 17 00:00:00 2001 From: tangwenhui Date: Fri, 4 Nov 2022 15:15:39 +0800 Subject: [PATCH 03/10] feat: update test case --- components/table/__tests__/Table.test.tsx | 8 ++++++++ .../table/__tests__/__snapshots__/Table.test.tsx.snap | 9 ++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/components/table/__tests__/Table.test.tsx b/components/table/__tests__/Table.test.tsx index d7f8076616b8..3d063137b256 100644 --- a/components/table/__tests__/Table.test.tsx +++ b/components/table/__tests__/Table.test.tsx @@ -299,6 +299,14 @@ describe('Table', () => { ), key: 'name', }, + { + title: ( +
+ +
+ ), + key: 'name', + }, { title: () => (
diff --git a/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/components/table/__tests__/__snapshots__/Table.test.tsx.snap index cfab0c1b9e5b..941c967cc1a8 100644 --- a/components/table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/components/table/__tests__/__snapshots__/Table.test.tsx.snap @@ -245,6 +245,13 @@ exports[`Table should render title 1`] = `
+ +
+ +
+ @@ -267,7 +274,7 @@ exports[`Table should render title 1`] = ` >
Date: Fri, 4 Nov 2022 15:44:01 +0800 Subject: [PATCH 04/10] feat: update test case --- components/table/__tests__/Table.test.tsx | 3 + .../__snapshots__/Table.test.tsx.snap | 200 ++++++++++++++++-- 2 files changed, 188 insertions(+), 15 deletions(-) diff --git a/components/table/__tests__/Table.test.tsx b/components/table/__tests__/Table.test.tsx index 3d063137b256..da92eb617137 100644 --- a/components/table/__tests__/Table.test.tsx +++ b/components/table/__tests__/Table.test.tsx @@ -298,6 +298,7 @@ describe('Table', () => {
), key: 'name', + sorter: true, }, { title: ( @@ -306,6 +307,7 @@ describe('Table', () => { ), key: 'name', + sorter: true, }, { title: () => ( @@ -315,6 +317,7 @@ describe('Table', () => { ), key: 'name', + sorter: true, }, ]; const { container } = render(); diff --git a/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/components/table/__tests__/__snapshots__/Table.test.tsx.snap index 941c967cc1a8..264c580b99e6 100644 --- a/components/table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/components/table/__tests__/__snapshots__/Table.test.tsx.snap @@ -234,33 +234,203 @@ exports[`Table should render title 1`] = ` > From 602299ffd13a4ef6af22d08225a961caf6b3b212 Mon Sep 17 00:00:00 2001 From: tangwenhui Date: Fri, 4 Nov 2022 17:10:27 +0800 Subject: [PATCH 05/10] feat: code optimize --- components/table/__tests__/Table.test.tsx | 14 +- .../__snapshots__/Table.test.tsx.snap | 134 +++++++++++++++++- components/table/hooks/useSorter.tsx | 13 +- components/table/util.ts | 44 +++--- 4 files changed, 159 insertions(+), 46 deletions(-) diff --git a/components/table/__tests__/Table.test.tsx b/components/table/__tests__/Table.test.tsx index da92eb617137..5203c539e551 100644 --- a/components/table/__tests__/Table.test.tsx +++ b/components/table/__tests__/Table.test.tsx @@ -312,13 +312,23 @@ describe('Table', () => { { title: () => (
- name - Red + age + 20
), key: 'name', sorter: true, }, + { + title: () => 'color', + key: 'name', + sorter: true, + }, + { + title: 'sex', + key: 'name', + sorter: true, + }, ]; const { container } = render(
-
- - name +
+ +
+ + name + + + Jason + +
- - Jason + + + + + + + + +
-
- +
+ +
+ +
+ + + + + + + + + + +
-
- - name +
+ +
+ + name + + + Red + +
- - Red + + + + + + + + +
); expect(container).toMatchSnapshot(); diff --git a/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/components/table/__tests__/__snapshots__/Table.test.tsx.snap index 264c580b99e6..539fb6546b4b 100644 --- a/components/table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/components/table/__tests__/__snapshots__/Table.test.tsx.snap @@ -234,7 +234,7 @@ exports[`Table should render title 1`] = ` > + +
@@ -365,9 +365,7 @@ exports[`Table should render title 1`] = ` @@ -379,10 +377,10 @@ exports[`Table should render title 1`] = ` >
- name + age - Red + 20
@@ -434,6 +432,128 @@ exports[`Table should render title 1`] = ` 		+
+ + color + + + + + + + + + + + +
+ 		+
+ + sex + + + + + + + + + + + +
+
( } }; - const titleText = renderColumnTitleWithFirstContent(column.title); + const renderTitle = safeColumnTitle(column.title, {}); // Inform the screen-reader so it can tell the visually impaired user which column is sorted if (sorterOrder) { cell['aria-sort'] = sorterOrder === 'ascend' ? 'ascending' : 'descending'; } else { - cell['aria-label'] = `${titleText} sortable`; + cell['aria-label'] = `${renderTitle} sortable`; } cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`); cell.tabIndex = 0; if (column.ellipsis) { - cell.title = (titleText ?? '').toString(); + cell.title = (renderTitle ?? '').toString(); } return cell; }, diff --git a/components/table/util.ts b/components/table/util.ts index 06cdfb01b676..835fec85b69f 100644 --- a/components/table/util.ts +++ b/components/table/util.ts @@ -17,42 +17,30 @@ export function getColumnPos(index: number, pos?: string) { return pos ? `${pos}-${index}` : `${index}`; } -/** - * Get first text content in Element - * - * @param node - * @returns - */ -function getElementFirstTextContent(node: React.ReactElement): string { - if (!node || !node.props || !node.props.children) return ''; - if (typeof node.props.children === 'string') return node.props.children; - return ( - node.props.children?.map?.((item: React.ReactElement) => - getElementFirstTextContent(item), - )?.[0] || '' - ); +export function renderColumnTitle( + title: ColumnTitle, + props: ColumnTitleProps, +) { + if (typeof title === 'function') { + return title(props); + } + + return title; } /** - * Render title by first content + * Safe get column title + * + * Should filter [object Object] * * @param title * @returns */ -export function renderColumnTitleWithFirstContent(title: ColumnTitle) { - if (React.isValidElement(title)) { - return getElementFirstTextContent(title); - } - return title; -} - -export function renderColumnTitle( +export function safeColumnTitle( title: ColumnTitle, props: ColumnTitleProps, ) { - if (typeof title === 'function') { - return title(props); - } - - return title; + const res = renderColumnTitle(title, props); + if (Object.prototype.toString.call(res) === '[object Object]') return ''; + return res; } From 3a6010d1a0c07f734669da6c3950907b5e8c1183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sat, 5 Nov 2022 07:18:14 +0800 Subject: [PATCH 06/10] Update components/table/__tests__/Table.test.tsx Co-authored-by: afc163 --- components/table/__tests__/Table.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/table/__tests__/Table.test.tsx b/components/table/__tests__/Table.test.tsx index 65f8b496a4cd..8caff8c6d534 100644 --- a/components/table/__tests__/Table.test.tsx +++ b/components/table/__tests__/Table.test.tsx @@ -333,6 +333,7 @@ describe('Table', () => { const { container } = render(); expect(container).toMatchSnapshot(); }); + it('title should support ReactNode', () => { const { container } = render(
Date: Sat, 5 Nov 2022 07:25:35 +0800 Subject: [PATCH 07/10] feat: update aria-label --- .../table/__tests__/__snapshots__/Table.test.tsx.snap | 10 +++++----- components/table/hooks/useSorter.tsx | 5 ++++- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/components/table/__tests__/__snapshots__/Table.test.tsx.snap index 197bfad4d13f..74920ff02bf4 100644 --- a/components/table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/components/table/__tests__/__snapshots__/Table.test.tsx.snap @@ -234,7 +234,7 @@ exports[`Table should render title 1`] = ` >
@@ -302,7 +302,7 @@ exports[`Table should render title 1`] = ` @@ -365,7 +365,7 @@ exports[`Table should render title 1`] = ` @@ -433,7 +433,7 @@ exports[`Table should render title 1`] = ` @@ -494,7 +494,7 @@ exports[`Table should render title 1`] = ` diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx index 8d268a7c2e68..125d7930b560 100644 --- a/components/table/hooks/useSorter.tsx +++ b/components/table/hooks/useSorter.tsx @@ -206,12 +206,15 @@ function injectSorter( }; const renderTitle = safeColumnTitle(column.title, {}); + const displayTitle = renderTitle?.toString(); // Inform the screen-reader so it can tell the visually impaired user which column is sorted if (sorterOrder) { cell['aria-sort'] = sorterOrder === 'ascend' ? 'ascending' : 'descending'; } else { - cell['aria-label'] = `${renderTitle} sortable`; + cell['aria-label'] = `${ + displayTitle ? `this column's title is ${displayTitle},` : '' + }this column is sortable`; } cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`); cell.tabIndex = 0; From 59ab319316eeeb3d90bfae68df6c53cccf98b083 Mon Sep 17 00:00:00 2001 From: tangwenhui Date: Sat, 5 Nov 2022 07:38:23 +0800 Subject: [PATCH 08/10] feat: update test case --- components/table/__tests__/Table.sorter.test.tsx | 4 +++- .../table/__tests__/__snapshots__/Table.sorter.test.tsx.snap | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/table/__tests__/Table.sorter.test.tsx b/components/table/__tests__/Table.sorter.test.tsx index 2509419833aa..6238c4f38ec4 100644 --- a/components/table/__tests__/Table.sorter.test.tsx +++ b/components/table/__tests__/Table.sorter.test.tsx @@ -105,7 +105,9 @@ describe('Table.sorter', () => { fireEvent.click(container.querySelector('.ant-table-column-sorters')!); expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null); - expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name sortable'); + expect(getNameColumn()?.getAttribute('aria-label')).toEqual( + "this column's title is Name,this column is sortable", + ); }); it('sort records', () => { diff --git a/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap b/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap index 753dbe39c3eb..a47090115408 100644 --- a/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap +++ b/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = ` >
From cdb112ed2552aaf7869c224ba7d8fb390f73c25a Mon Sep 17 00:00:00 2001 From: tangwenhui Date: Sat, 5 Nov 2022 08:48:41 +0800 Subject: [PATCH 09/10] feat: update snapshots --- .../__snapshots__/components.test.tsx.snap | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 3a1bbb4160a4..6c5372aece1d 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -26954,7 +26954,7 @@ exports[`ConfigProvider components Table configProvider 1`] = ` >
@@ -27260,7 +27260,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] = >
@@ -27568,7 +27568,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`] >
@@ -27874,7 +27874,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`] >
@@ -28180,7 +28180,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc >
@@ -28486,7 +28486,7 @@ exports[`ConfigProvider components Table normal 1`] = ` >
@@ -28792,7 +28792,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = ` >
From 91aebc9dc3547cbd972745217cec568aebcc0cbc Mon Sep 17 00:00:00 2001 From: tangwenhui Date: Sat, 5 Nov 2022 08:53:29 +0800 Subject: [PATCH 10/10] feat: update snapshots --- .../__snapshots__/demo-extend.test.ts.snap | 30 +++++++++---------- .../__tests__/__snapshots__/demo.test.ts.snap | 30 +++++++++---------- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index 3877ce1a4e0f..b93487d1531b 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -35,7 +35,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] = >
@@ -1549,7 +1549,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c @@ -3314,7 +3314,7 @@ Array [ Name @@ -3625,7 +3625,7 @@ Array [ @@ -7589,7 +7589,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc @@ -8410,7 +8410,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct @@ -12254,7 +12254,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
@@ -14707,7 +14707,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre Name @@ -14792,7 +14792,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre @@ -14877,7 +14877,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre @@ -20374,7 +20374,7 @@ Array [ >
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap index 7a49c23c5cfc..f01e1926a5f0 100644 --- a/components/table/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap @@ -35,7 +35,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = ` >
@@ -1141,7 +1141,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] = @@ -2784,7 +2784,7 @@ Array [ Name @@ -2883,7 +2883,7 @@ Array [ @@ -5861,7 +5861,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = ` @@ -6208,7 +6208,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = ` @@ -9382,7 +9382,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
@@ -11074,7 +11074,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = ` Name @@ -11135,7 +11135,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = ` @@ -11196,7 +11196,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = ` @@ -15392,7 +15392,7 @@ Array [ >