From e359e7388261c658ca47828450581e6a4e81ca42 Mon Sep 17 00:00:00 2001 From: Ali Date: Fri, 29 Mar 2024 14:48:13 +0800 Subject: [PATCH] fix: fix table stripe style error --- 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/_example/base.jsx | 1 - src/table/hooks/useClassName.ts | 3 + src/table/hooks/useFixed.ts | 13 +- src/table/interface.ts | 2 + test/snap/__snapshots__/csr.test.jsx.snap | 6654 ++++++++--------- test/snap/__snapshots__/ssr.test.jsx.snap | 60 +- 10 files changed, 3437 insertions(+), 3414 deletions(-) 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..d27387b17 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/_example/base.jsx b/src/table/_example/base.jsx index dcbface2e..4353f1dd2 100644 --- a/src/table/_example/base.jsx +++ b/src/table/_example/base.jsx @@ -70,7 +70,6 @@ export default function TableBasic() { rowClassName={({ rowIndex }) => `${rowIndex}-class`} cellEmptyContent={'-'} resizable - bordered // 与pagination对齐 pagination={{ defaultCurrent: 2, diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts index 353d89d83..382a40fa0 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 0b152dcf1..a32c7cfa8 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 6d21b1447..bf52acf18 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -70977,7 +70977,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/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-space-item" >
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-space-item" >
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": +