From 0eeec3b3ca7e5ea2576b6bb73b1f4c87ef0b6c73 Mon Sep 17 00:00:00 2001 From: Ali Date: Fri, 29 Mar 2024 14:48:13 +0800 Subject: [PATCH] fix: table stripe style error --- src/_common | 2 +- src/table/TBody.tsx | 8 +- .../__snapshots__/pagination.test.tsx.snap | 40 +- .../__snapshots__/vitest-table.test.jsx.snap | 60 +- src/table/__tests__/base.test.tsx | 10 +- src/table/hooks/useClassName.ts | 3 + src/table/hooks/useFixed.ts | 13 +- src/table/interface.ts | 2 + test/snap/__snapshots__/csr.test.jsx.snap | 6678 ++++++++--------- test/snap/__snapshots__/ssr.test.jsx.snap | 64 +- 10 files changed, 3452 insertions(+), 3428 deletions(-) diff --git a/src/_common b/src/_common index e398021da..de804ca25 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit e398021dac2820995b518c1e64f888818448c287 +Subproject commit de804ca255c994ed6d58c7d1e661e248bd11a4b5 diff --git a/src/table/TBody.tsx b/src/table/TBody.tsx index 01b00220a..8d257ba73 100644 --- a/src/table/TBody.tsx +++ b/src/table/TBody.tsx @@ -137,6 +137,7 @@ export default function TBody(props: TableBodyProps) { 'rowHeight', 'scrollType', ]; + data?.forEach((row, rowIndex) => { const trProps = { ...pick(props, TABLE_PROPS), @@ -158,7 +159,12 @@ export default function TBody(props: TableBodyProps) { } const trNode = ( - + ); trNodeList.push(trNode); diff --git a/src/table/__tests__/__snapshots__/pagination.test.tsx.snap b/src/table/__tests__/__snapshots__/pagination.test.tsx.snap index 3a3215f7b..05f5041bd 100644 --- a/src/table/__tests__/__snapshots__/pagination.test.tsx.snap +++ b/src/table/__tests__/__snapshots__/pagination.test.tsx.snap @@ -3,7 +3,7 @@ exports[`BaseTable Pagination > locale data pagination controlled > both pagination.pageSize and pagination.current changed 1`] = ` NodeList [ , , , , locale data pagination controlled > pagination.current changed 1`] = ` NodeList [ , , , , locale data pagination controlled > pagination.c class="t-table__body" > locale data pagination controlled > pagination.c locale data pagination controlled > pagination.c locale data pagination controlled > pagination.c /> locale data pagination controlled > pagination.c locale data pagination controlled > pagination.c exports[`BaseTable Pagination > locale data pagination controlled > pagination.pageSize changed 1`] = ` NodeList [ , , , , props.showHeader: BaseTable contains element \`th class="t-table__body" > props.showHeader: BaseTable contains element \`th /> props.showHeader: BaseTable contains element \`th props.showHeader: BaseTable contains element \`th props.showHeader: BaseTable contains element \`th props.size is equal to large 1`] = ` class="t-table__body" > props.size is equal to large 1`] = ` /> props.size is equal to large 1`] = ` props.size is equal to large 1`] = ` props.size is equal to large 1`] = ` props.size is equal to medium 1`] = ` class="t-table__body" > props.size is equal to medium 1`] = ` /> props.size is equal to medium 1`] = ` props.size is equal to medium 1`] = ` props.size is equal to medium 1`] = ` props.size is equal to small 1`] = ` class="t-table__body" > props.size is equal to small 1`] = ` /> props.size is equal to small 1`] = ` props.size is equal to small 1`] = ` props.size is equal to small 1`] = ` props.tableLayout is equal to auto 1`] = ` class="t-table__body" > props.tableLayout is equal to auto 1`] = ` /> props.tableLayout is equal to auto 1`] = ` props.tableLayout is equal to auto 1`] = ` props.tableLayout is equal to auto 1`] = ` props.tableLayout is equal to fixed 1`] = ` class="t-table__body" > props.tableLayout is equal to fixed 1`] = ` /> props.tableLayout is equal to fixed 1`] = ` props.tableLayout is equal to fixed 1`] = ` props.tableLayout is equal to fixed 1`] = ` { , ); const trWrapper = container.querySelector('tbody').querySelector('tr'); - expect(trWrapper.getAttribute('class')).toBe(rowClassName); + expect(trWrapper.getAttribute('class')).toBe(`t-table__row__odd ${rowClassName} t-table__row`); }); it('props.rowClassName could be an object ', () => { const rowClassName = { @@ -109,7 +109,7 @@ TABLES.forEach((TTable) => { , ); const trWrapper = container.querySelector('tbody').querySelector('tr'); - expect(trWrapper.getAttribute('class')).toBe('tdesign-class'); + expect(trWrapper.getAttribute('class')).toBe('t-table__row__odd tdesign-class t-table__row'); }); it('props.rowClassName could be an Array ', () => { const rowClassName = [ @@ -123,7 +123,9 @@ TABLES.forEach((TTable) => { , ); const trWrapper = container.querySelector('tbody').querySelector('tr'); - expect(trWrapper.getAttribute('class')).toBe('tdesign-class-default tdesign-class'); + expect(trWrapper.getAttribute('class')).toBe( + 't-table__row__odd tdesign-class-default tdesign-class t-table__row', + ); }); it('props.rowClassName could be a function ', () => { const rowClassName = () => ({ @@ -134,7 +136,7 @@ TABLES.forEach((TTable) => { , ); const trWrapper = container.querySelector('tbody').querySelector('tr'); - expect(trWrapper.getAttribute('class')).toBe('tdesign-class'); + expect(trWrapper.getAttribute('class')).toBe('t-table__row__odd tdesign-class t-table__row'); }); }); diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts index 353d89d83..fb4ba0736 100644 --- a/src/table/hooks/useClassName.ts +++ b/src/table/hooks/useClassName.ts @@ -12,6 +12,7 @@ export default function useClassName() { body: `${classPrefix}-table__body`, overflowVisible: `${classPrefix}-table--overflow-visible`, content: `${classPrefix}-table__content`, + row: `${classPrefix}-table__row`, topContent: `${classPrefix}-table__top-content`, bottomContent: `${classPrefix}-table__bottom-content`, paginationWrap: `${classPrefix}-table__pagination-wrap`, @@ -77,6 +78,8 @@ export default function useClassName() { bottom: `${classPrefix}-table__row--fixed-bottom`, firstBottom: `${classPrefix}-table__row--fixed-bottom-first`, withoutBorderBottom: `${classPrefix}-table__row--without-border-bottom`, + even: `${classPrefix}-table__row__even`, + odd: `${classPrefix}-table__row__odd`, }, tableColFixedClasses: { diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts index 77ca5ed0c..6c505722d 100644 --- a/src/table/hooks/useFixed.ts +++ b/src/table/hooks/useFixed.ts @@ -46,12 +46,23 @@ export function getRowFixedStyles( rowAndColFixedPosition: RowAndColFixedPosition, tableRowFixedClasses: TableRowFixedClasses, ): { style: Styles; classes: ClassName } { - if (!fixedRows || !fixedRows.length) return { style: undefined, classes: undefined }; + const defaultClasses = { + [tableRowFixedClasses.even]: (rowIndex + 1) % 2 === 0, + [tableRowFixedClasses.odd]: (rowIndex + 1) % 2 === 1, + }; + + if (!fixedRows || !fixedRows.length) + return { + style: undefined, + classes: defaultClasses, + }; + const fixedTop = rowIndex < fixedRows[0]; const fixedBottom = rowIndex > rowLength - 1 - fixedRows[1]; const firstFixedBottomRow = rowLength - fixedRows[1]; const fixedPos = rowAndColFixedPosition?.get(rowId) || {}; const rowClasses = { + ...defaultClasses, [tableRowFixedClasses.top]: fixedTop, [tableRowFixedClasses.bottom]: fixedBottom, [tableRowFixedClasses.firstBottom]: rowIndex === firstFixedBottomRow, diff --git a/src/table/interface.ts b/src/table/interface.ts index af8fccb47..31167553b 100644 --- a/src/table/interface.ts +++ b/src/table/interface.ts @@ -85,6 +85,8 @@ export interface TableRowFixedClasses { bottom: string; firstBottom: string; withoutBorderBottom: string; + even: string; + odd: string; } export interface FixedColumnInfo { diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 90a7ee217..5d835c609 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -71317,7 +71317,7 @@ exports[`csr snapshot test > csr test src/config-provider/_example/table.jsx 1`] class="t-table__body" > csr test src/config-provider/_example/table.jsx 1`] csr test src/config-provider/_example/table.jsx 1`] csr test src/config-provider/_example/table.jsx 1`] class="t-table__body" > csr test src/config-provider/_example/table.jsx 1`] csr test src/config-provider/_example/table.jsx 1`] csr test src/date-picker/_example/quarter.jsx 1`] = /> @@ -84525,7 +84525,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] = > @@ -84544,7 +84544,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] = > @@ -84600,7 +84600,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] = /> @@ -84649,7 +84649,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] = > @@ -84668,7 +84668,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] = > @@ -84785,7 +84785,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = ` /> @@ -84834,7 +84834,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = ` > @@ -84853,7 +84853,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = ` > @@ -84909,7 +84909,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = ` /> @@ -84958,7 +84958,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = ` > @@ -84977,7 +84977,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = ` > @@ -196669,7 +196669,7 @@ exports[`csr snapshot test > csr test src/table/_example/affix.jsx 1`] = ` class="t-table__body" > csr test src/table/_example/affix.jsx 1`] = ` csr test src/table/_example/affix.jsx 1`] = ` csr test src/table/_example/affix.jsx 1`] = ` csr test src/table/_example/affix.jsx 1`] = ` csr test src/table/_example/affix.jsx 1`] = ` class="t-table__body" > csr test src/table/_example/affix.jsx 1`] = ` csr test src/table/_example/affix.jsx 1`] = ` csr test src/table/_example/affix.jsx 1`] = ` csr test src/table/_example/affix.jsx 1`] = ` csr test src/table/_example/async-loading.jsx 1`] = class="t-table__body" > csr test src/table/_example/async-loading.jsx 1`] = csr test src/table/_example/async-loading.jsx 1`] = csr test src/table/_example/async-loading.jsx 1`] = csr test src/table/_example/async-loading.jsx 1`] = csr test src/table/_example/async-loading.jsx 1`] = class="t-table__body" > csr test src/table/_example/async-loading.jsx 1`] = csr test src/table/_example/async-loading.jsx 1`] = csr test src/table/_example/async-loading.jsx 1`] = csr test src/table/_example/async-loading.jsx 1`] = csr test src/table/_example/base.jsx 1`] = ` class="t-table__body" > csr test src/table/_example/base.jsx 1`] = ` csr test src/table/_example/base.jsx 1`] = ` csr test src/table/_example/base.jsx 1`] = ` csr test src/table/_example/base.jsx 1`] = ` csr test src/table/_example/base.jsx 1`] = ` class="t-table__body" > csr test src/table/_example/base.jsx 1`] = ` csr test src/table/_example/base.jsx 1`] = ` csr test src/table/_example/base.jsx 1`] = ` csr test src/table/_example/base.jsx 1`] = ` csr test src/table/_example/custom-cell.jsx 1`] = ` class="t-table__body" > csr test src/table/_example/custom-cell.jsx 1`] = ` csr test src/table/_example/custom-cell.jsx 1`] = ` csr test src/table/_example/custom-cell.jsx 1`] = ` csr test src/table/_example/custom-cell.jsx 1`] = ` csr test src/table/_example/custom-cell.jsx 1`] = ` class="t-table__body" > csr test src/table/_example/custom-cell.jsx 1`] = ` csr test src/table/_example/custom-cell.jsx 1`] = ` csr test src/table/_example/custom-cell.jsx 1`] = ` csr test src/table/_example/custom-cell.jsx 1`] = ` csr test src/table/_example/custom-col.jsx 1`] = ` class="t-table__body" > csr test src/table/_example/custom-col.jsx 1`] = ` csr test src/table/_example/custom-col.jsx 1`] = ` csr test src/table/_example/custom-col.jsx 1`] = ` csr test src/table/_example/custom-col.jsx 1`] = ` csr test src/table/_example/custom-col.jsx 1`] = ` class="t-table__body" > csr test src/table/_example/custom-col.jsx 1`] = ` csr test src/table/_example/custom-col.jsx 1`] = ` csr test src/table/_example/custom-col.jsx 1`] = ` csr test src/table/_example/custom-col.jsx 1`] = ` csr test src/table/_example/custom-col-button.jsx 1 class="t-table__body" > csr test src/table/_example/custom-col-button.jsx 1 csr test src/table/_example/custom-col-button.jsx 1 csr test src/table/_example/custom-col-button.jsx 1 csr test src/table/_example/custom-col-button.jsx 1 csr test src/table/_example/custom-col-button.jsx 1 class="t-table__body" > csr test src/table/_example/custom-col-button.jsx 1 csr test src/table/_example/custom-col-button.jsx 1 csr test src/table/_example/custom-col-button.jsx 1 csr test src/table/_example/custom-col-button.jsx 1 csr test src/table/_example/custom-footer.jsx 1`] = class="t-table__body" > csr test src/table/_example/custom-footer.jsx 1`] = csr test src/table/_example/custom-footer.jsx 1`] = csr test src/table/_example/custom-footer.jsx 1`] = class="t-table__body" > csr test src/table/_example/custom-footer.jsx 1`] = csr test src/table/_example/custom-footer.jsx 1`] = 2022-02-01 + + + 王芳 + + +
+ + + + + 审批过期 + +
+ + + 纸质签署 + + +
+ p.cumx@rampblpa.ru +
+ + + 2022-03-01 + + + + + + + 表尾信息 + + + +
+ 表尾信息 +
+ + + 表尾信息 + + +
+ 表尾信息 +
+ + +
+ 表尾信息 +
+ + + + + + + + , + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`csr snapshot test > csr test src/table/_example/custom-header.jsx 1`] = ` +{ + "asFragment": [Function], + "baseElement": +