diff --git a/docs/examples/fixedColumns.tsx b/docs/examples/fixedColumns.tsx index b54750d96..a790a4407 100644 --- a/docs/examples/fixedColumns.tsx +++ b/docs/examples/fixedColumns.tsx @@ -15,7 +15,7 @@ const columns: ColumnType[] = [ { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' }, { title: 'title2', dataIndex: 'b', key: 'b', width: 100, ellipsis: true }, { title: 'title3', dataIndex: 'c', key: 'c', fixed: 'left' }, - { title: 'title4', dataIndex: 'b', key: 'd' }, + { title: 'title4', dataIndex: 'b', key: 'd', fixed: 'left' }, { title: 'title5', dataIndex: 'b', key: 'e' }, { title: 'title6', dataIndex: 'b', key: 'f' }, { diff --git a/package.json b/package.json index 0c24abe10..72350fde3 100644 --- a/package.json +++ b/package.json @@ -62,15 +62,14 @@ }, "devDependencies": { "@rc-component/father-plugin": "^1.0.2", - "@testing-library/jest-dom": "^5.16.5", + "@testing-library/jest-dom": "^6.4.0", "@testing-library/react": "^12.1.5", "@types/enzyme": "^3.10.5", - "@types/react": "^18.0.28", "@types/jest": "^29.5.0", + "@types/react": "^18.0.28", "@types/react-dom": "^18.0.5", "@types/responselike": "^1.0.0", "@types/styled-components": "^5.1.32", - "@types/testing-library__jest-dom": "^6.0.0", "@umijs/fabric": "^4.0.1", "@vitest/coverage-c8": "^0.31.0", "cross-env": "^7.0.0", @@ -105,7 +104,7 @@ "regenerator-runtime": "^0.14.0", "styled-components": "^6.1.1", "typescript": "~5.3.0", - "vitest": "^0.31.0" + "vitest": "^1.2.2" }, "lint-staged": { "**/*.{js,jsx,tsx,ts,md,json}": [ diff --git a/src/hooks/useColumns/index.tsx b/src/hooks/useColumns/index.tsx index 345f98a4b..21d68cfa0 100644 --- a/src/hooks/useColumns/index.tsx +++ b/src/hooks/useColumns/index.tsx @@ -88,30 +88,6 @@ function flatColumns( }, []); } -function warningFixed(flattenColumns: readonly { fixed?: FixedType }[]) { - let allFixLeft = true; - for (let i = 0; i < flattenColumns.length; i += 1) { - const col = flattenColumns[i]; - if (allFixLeft && col.fixed !== 'left') { - allFixLeft = false; - } else if (!allFixLeft && col.fixed === 'left') { - warning(false, `Index ${i - 1} of \`columns\` missing \`fixed='left'\` prop.`); - break; - } - } - - let allFixRight = true; - for (let i = flattenColumns.length - 1; i >= 0; i -= 1) { - const col = flattenColumns[i]; - if (allFixRight && col.fixed !== 'right') { - allFixRight = false; - } else if (!allFixRight && col.fixed === 'right') { - warning(false, `Index ${i + 1} of \`columns\` missing \`fixed='right'\` prop.`); - break; - } - } -} - function revertForRtl(columns: ColumnsType): ColumnsType { return columns.map(column => { const { fixed, ...restProps } = column; @@ -294,11 +270,6 @@ function useColumns( return flatColumns(mergedColumns); }, [mergedColumns, direction, scrollWidth]); - // Only check out of production since it's waste for each render - if (process.env.NODE_ENV !== 'production') { - warningFixed(direction === 'rtl' ? flattenColumns.slice().reverse() : flattenColumns); - } - // ========================= FillWidth ======================== const [filledColumns, realScrollWidth] = useWidthColumns( flattenColumns, diff --git a/src/hooks/useStickyOffsets.ts b/src/hooks/useStickyOffsets.ts index f2195d4f2..220f66667 100644 --- a/src/hooks/useStickyOffsets.ts +++ b/src/hooks/useStickyOffsets.ts @@ -12,37 +12,6 @@ function useStickyOffsets( const stickyOffsets: StickyOffsets = useMemo(() => { const columnCount = flattenColumns.length; - // const leftOffsets: number[] = []; - // const rightOffsets: number[] = []; - // let left = 0; - // let right = 0; - - // for (let start = 0; start < columnCount; start += 1) { - // if (direction === 'rtl') { - // // Left offset - // rightOffsets[start] = right; - // right += colWidths[start] || 0; - - // // Right offset - // const end = columnCount - start - 1; - // leftOffsets[end] = left; - // left += colWidths[end] || 0; - // } else { - // // Left offset - // leftOffsets[start] = left; - // left += colWidths[start] || 0; - - // // Right offset - // const end = columnCount - start - 1; - // rightOffsets[end] = right; - // right += colWidths[end] || 0; - // } - // } - - // console.log('leftOffsets', leftOffsets); - // console.log('rightOffsets', rightOffsets); - // // // console.log('flattenColumns', flattenColumns); - const getOffsets = (startIndex: number, endIndex: number, offset: number) => { const offsets: number[] = []; let total = 0; @@ -50,10 +19,7 @@ function useStickyOffsets( for (let i = startIndex; i !== endIndex; i += offset) { offsets.push(total); - const col = flattenColumns[i]; - console.log(i, col); - - if (col.fixed) { + if (flattenColumns[i].fixed) { total += colWidths[i] || 0; } } @@ -64,10 +30,6 @@ function useStickyOffsets( const startOffsets = getOffsets(0, columnCount, 1); const endOffsets = getOffsets(columnCount - 1, -1, -1).reverse(); - // console.log('flattenColumns', flattenColumns); - // console.log('startOffsets', startOffsets); - // console.log('endOffsets', endOffsets); - return direction === 'rtl' ? { left: endOffsets, diff --git a/src/index.ts b/src/index.ts index a1c42ecbe..c16dd1b19 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,6 @@ import { EXPAND_COLUMN, INTERNAL_HOOKS } from './constant'; import { FooterComponents as Summary } from './Footer'; -import type { ColumnType, Reference } from './interface'; +import type { ColumnType, ColumnsType, Reference } from './interface'; import Column from './sugar/Column'; import ColumnGroup from './sugar/ColumnGroup'; import type { TableProps } from './Table'; @@ -23,6 +23,7 @@ export { type VirtualTableProps, type Reference, type ColumnType, + type ColumnsType, }; export default Table; diff --git a/tests/FixedColumn.spec.jsx b/tests/FixedColumn.spec.tsx similarity index 86% rename from tests/FixedColumn.spec.jsx rename to tests/FixedColumn.spec.tsx index a0f7eb47a..5b8585686 100644 --- a/tests/FixedColumn.spec.jsx +++ b/tests/FixedColumn.spec.tsx @@ -1,11 +1,16 @@ +import React from 'react'; import { mount } from 'enzyme'; -import RcResizeObserver from 'rc-resize-observer'; +import { render } from '@testing-library/react'; +import RcResizeObserver, { _rs } from 'rc-resize-observer'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; -import { resetWarned } from 'rc-util/lib/warning'; import { act } from 'react-dom/test-utils'; -import Table from '../src'; +import Table, { type ColumnsType } from '../src'; import { safeAct } from './utils'; +function triggerResize(ele: HTMLElement) { + _rs([{ target: ele }] as any); +} + describe('Table.FixedColumn', () => { let domSpy; beforeEach(() => { @@ -26,7 +31,7 @@ describe('Table.FixedColumn', () => { domSpy.mockRestore(); }); - const columns = [ + const columns: ColumnsType = [ { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' }, { title: 'title2', @@ -86,7 +91,7 @@ describe('Table.FixedColumn', () => { { data: wrapper.find('table ResizeObserver').first().props().data, size: { width: 93, offsetWidth: 93 }, - }, + } as any, ]); }); await safeAct(wrapper); @@ -131,7 +136,7 @@ describe('Table.FixedColumn', () => { scrollWidth: 200, clientWidth: 100, }, - }); + } as any); }); wrapper.update(); expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy(); @@ -148,7 +153,7 @@ describe('Table.FixedColumn', () => { scrollWidth: 200, clientWidth: 100, }, - }); + } as any); }); wrapper.update(); expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeFalsy(); @@ -165,7 +170,7 @@ describe('Table.FixedColumn', () => { scrollWidth: 200, clientWidth: 100, }, - }); + } as any); }); wrapper.update(); expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy(); @@ -182,49 +187,13 @@ describe('Table.FixedColumn', () => { scrollWidth: 100, clientWidth: 100, }, - }); + } as any); }); wrapper.update(); expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeFalsy(); expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeFalsy(); }); - describe('warning if fixed not continue', () => { - let errorSpy; - - beforeAll(() => { - errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); - }); - - beforeEach(() => { - resetWarned(); - errorSpy.mockReset(); - }); - - afterAll(() => { - errorSpy.mockRestore(); - }); - - it('left', async () => { - mount(); - expect(errorSpy).toHaveBeenCalledWith( - "Warning: Index 0 of `columns` missing `fixed='left'` prop.", - ); - }); - - it('right', () => { - mount(
); - expect(errorSpy).toHaveBeenCalledWith( - "Warning: Index 2 of `columns` missing `fixed='right'` prop.", - ); - }); - - it('RTL', () => { - mount(
); - expect(errorSpy).not.toHaveBeenCalled(); - }); - }); - it('ellipsis will wrap additional dom', () => { const myColumns = [{ ...columns[0], ellipsis: true }]; const wrapper = mount(
); @@ -282,4 +251,37 @@ describe('Table.FixedColumn', () => { await safeAct(wrapper); expect(wrapper.find('.rc-table-cell-fix-left-all')).toHaveLength(10); }); + + describe('cross fixed support', () => { + it('left', async () => { + const { container } = render( +
, + ); + + act(() => { + Array.from(container.querySelectorAll('.rc-table-measure-row td')).forEach( + td => { + triggerResize(td); + }, + ); + }); + + await act(async () => { + vi.runAllTimers(); + await Promise.resolve(); + }); + + expect(container.querySelectorAll('tbody .rc-table-cell-fix-left')).toHaveLength(2); + expect(container.querySelectorAll('thead td')[1]).toHaveStyle({ + left: '0px', + }); + expect(container.querySelectorAll('thead td')[2]).toHaveStyle({ + left: '1000px', + }); + }); + }); }); diff --git a/tests/setup.ts b/tests/setup.ts index 8597c2d9b..648329c8d 100644 --- a/tests/setup.ts +++ b/tests/setup.ts @@ -1,12 +1,4 @@ -import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers'; -import matchers from '@testing-library/jest-dom/matchers'; -import { expect } from 'vitest'; - -declare module 'vitest' { - interface Assertion extends jest.Matchers, TestingLibraryMatchers {} -} - -expect.extend(matchers); +import '@testing-library/jest-dom'; // https://github.com/nickcolley/jest-axe/issues/147#issuecomment-758804533 const { getComputedStyle } = window; diff --git a/tsconfig.json b/tsconfig.json index 613a69611..b7bdcf0fb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,7 @@ "@@/*": [".dumi/tmp/*"], "rc-table": ["src/index.ts"] }, - "types": ["vitest/globals"] + "types": ["vitest/globals", "@testing-library/jest-dom"] }, "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"] }