From df1ae06e923694e7c826c93e9f2073cddc712784 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, 31 Dec 2022 19:06:07 +0800 Subject: [PATCH 1/2] fix: solve table display unexpected when column fixed --- src/Header/HeaderRow.tsx | 4 +-- src/utils/fixUtil.ts | 16 ++++++---- tests/FixedHeader.spec.js | 64 +++++++++++++++++++++++++++++++++++++-- 3 files changed, 73 insertions(+), 11 deletions(-) diff --git a/src/Header/HeaderRow.tsx b/src/Header/HeaderRow.tsx index c6db6d7e0..87ff81042 100644 --- a/src/Header/HeaderRow.tsx +++ b/src/Header/HeaderRow.tsx @@ -34,7 +34,6 @@ function HeaderRow({ index, }: RowProps) { const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']); - let rowProps: React.HTMLAttributes; if (onHeaderRow) { rowProps = onHeaderRow( @@ -49,12 +48,13 @@ function HeaderRow({ {cells.map((cell: CellType, cellIndex) => { const { column } = cell; - const fixedInfo = getCellFixedInfo( + const fixedInfo = getCellFixedInfo( cell.colStart, cell.colEnd, flattenColumns, stickyOffsets, direction, + column ); let additionalProps: React.HTMLAttributes; diff --git a/src/utils/fixUtil.ts b/src/utils/fixUtil.ts index 7d37282f4..ca6c469cd 100644 --- a/src/utils/fixUtil.ts +++ b/src/utils/fixUtil.ts @@ -1,4 +1,4 @@ -import type { StickyOffsets, FixedType, Direction } from '../interface'; +import type { StickyOffsets, FixedType, Direction, ColumnType, ColumnGroupType } from '../interface'; export interface FixedInfo { fixLeft: number | false; @@ -13,12 +13,13 @@ export interface FixedInfo { isSticky: boolean; } -export function getCellFixedInfo( +export function getCellFixedInfo( colStart: number, colEnd: number, columns: readonly { fixed?: FixedType }[], stickyOffsets: StickyOffsets, direction: Direction, + curColumns?: ColumnType | ColumnGroupType ): FixedInfo { const startColumn = columns[colStart] || {}; const endColumn = columns[colEnd] || {}; @@ -41,20 +42,23 @@ export function getCellFixedInfo( const nextColumn = columns[colEnd + 1]; const prevColumn = columns[colStart - 1]; + // no children only + const canLastFix = !(curColumns as ColumnGroupType)?.children; + if (direction === 'rtl') { if (fixLeft !== undefined) { const prevFixLeft = prevColumn && prevColumn.fixed === 'left'; - firstFixLeft = !prevFixLeft; + firstFixLeft = !prevFixLeft && canLastFix; } else if (fixRight !== undefined) { const nextFixRight = nextColumn && nextColumn.fixed === 'right'; - lastFixRight = !nextFixRight; + lastFixRight = !nextFixRight && canLastFix; } } else if (fixLeft !== undefined) { const nextFixLeft = nextColumn && nextColumn.fixed === 'left'; - lastFixLeft = !nextFixLeft; + lastFixLeft = !nextFixLeft && canLastFix; } else if (fixRight !== undefined) { const prevFixRight = prevColumn && prevColumn.fixed === 'right'; - firstFixRight = !prevFixRight; + firstFixRight = !prevFixRight && canLastFix; } return { diff --git a/tests/FixedHeader.spec.js b/tests/FixedHeader.spec.js index 00e1919b6..edf093583 100644 --- a/tests/FixedHeader.spec.js +++ b/tests/FixedHeader.spec.js @@ -1,9 +1,9 @@ -import React from 'react'; import { mount } from 'enzyme'; -import { act } from 'react-dom/test-utils'; +import RcResizeObserver from 'rc-resize-observer'; import { spyElementPrototype } from 'rc-util/lib/test/domHook'; +import React from 'react'; +import { act } from 'react-dom/test-utils'; import Table, { INTERNAL_COL_DEFINE } from '../src'; -import RcResizeObserver from 'rc-resize-observer'; describe('Table.FixedHeader', () => { let domSpy; @@ -208,4 +208,62 @@ describe('Table.FixedHeader', () => { jest.useRealTimers(); }); + + it('do not mask as ant-table-cell-fix-left-last in nested table parent cell', () => { + const columns = [ + { + title: '父表头右侧的阴影导致整个表格最右侧有空隙', + children: [ + { + key: 'name', + title: 'Name', + fixed: 'left', + dataIndex: 'name', + }, + { + key: 'name', + title: 'Name', + fixed: 'left', + dataIndex: 'name', + }, + { + key: 'name', + title: 'Name', + dataIndex: 'name', + }, + { + key: 'name', + title: 'Name', + fixed: 'right', + dataIndex: 'name', + }, + ], + }, + ]; + + const data = [ + { + key: 0, + name: 'Jack', + }, + { + key: 1, + name: 'Jack1', + }, + { + key: 2, + name: 'Jack1', + }, + ]; + const wrapper = mount( + , + ); + expect(wrapper.find('td').at(9).props().className).toContain('rc-table-cell-fix-left-last'); + expect(wrapper.find('th').first().props().className).not.toContain('rc-table-cell-fix-left-last'); + + }); }); From 496dfb75762f110e12134de789e048c45a37533f 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: Sun, 1 Jan 2023 10:59:47 +0800 Subject: [PATCH 2/2] feat: code optimize --- src/Footer/Cell.tsx | 3 ++- src/Footer/SummaryContext.tsx | 3 ++- src/Footer/index.tsx | 8 +++++--- src/Table.tsx | 6 +++--- src/hooks/useFixedInfo.ts | 5 +++-- 5 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/Footer/Cell.tsx b/src/Footer/Cell.tsx index 2ecbd407a..c36ca9a9f 100644 --- a/src/Footer/Cell.tsx +++ b/src/Footer/Cell.tsx @@ -24,7 +24,7 @@ export default function SummaryCell({ align, }: SummaryCellProps) { const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']); - const { scrollColumnIndex, stickyOffsets, flattenColumns } = React.useContext(SummaryContext); + const { scrollColumnIndex, stickyOffsets, flattenColumns, columns } = React.useContext(SummaryContext); const lastIndex = index + colSpan - 1; const mergedColSpan = lastIndex + 1 === scrollColumnIndex ? colSpan + 1 : colSpan; @@ -34,6 +34,7 @@ export default function SummaryCell({ flattenColumns, stickyOffsets, direction, + columns?.[index] ); return ( diff --git a/src/Footer/SummaryContext.tsx b/src/Footer/SummaryContext.tsx index 5e57c9200..04fc13cda 100644 --- a/src/Footer/SummaryContext.tsx +++ b/src/Footer/SummaryContext.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { ColumnType, StickyOffsets } from '../interface'; +import type { ColumnsType, ColumnType, StickyOffsets } from '../interface'; type FlattenColumns = readonly (ColumnType & { scrollbar?: boolean })[]; @@ -7,6 +7,7 @@ const SummaryContext = React.createContext<{ stickyOffsets?: StickyOffsets; scrollColumnIndex?: number; flattenColumns?: FlattenColumns; + columns?: ColumnsType; }>({}); export default SummaryContext; diff --git a/src/Footer/index.tsx b/src/Footer/index.tsx index 0912f5ac8..73c2b51ce 100644 --- a/src/Footer/index.tsx +++ b/src/Footer/index.tsx @@ -2,7 +2,7 @@ import { responseImmutable, useContext } from '@rc-component/context'; import * as React from 'react'; import TableContext from '../context/TableContext'; import devRenderTimes from '../hooks/useRenderTimes'; -import type { ColumnType, StickyOffsets } from '../interface'; +import type { ColumnsType, ColumnType, StickyOffsets } from '../interface'; import Summary from './Summary'; import SummaryContext from './SummaryContext'; @@ -12,6 +12,7 @@ export interface FooterProps { children: React.ReactNode; stickyOffsets: StickyOffsets; flattenColumns: FlattenColumns; + columns: ColumnsType; } function Footer(props: FooterProps) { @@ -19,7 +20,7 @@ function Footer(props: FooterProps) { devRenderTimes(props); } - const { children, stickyOffsets, flattenColumns } = props; + const { children, stickyOffsets, flattenColumns, columns } = props; const prefixCls = useContext(TableContext, 'prefixCls'); @@ -31,8 +32,9 @@ function Footer(props: FooterProps) { stickyOffsets, flattenColumns, scrollColumnIndex: scrollColumn?.scrollbar ? lastColumnIndex : null, + columns }), - [scrollColumn, flattenColumns, lastColumnIndex, stickyOffsets], + [scrollColumn, flattenColumns, lastColumnIndex, stickyOffsets, columns], ); return ( diff --git a/src/Table.tsx b/src/Table.tsx index 1f48333af..22670a1cc 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -619,7 +619,7 @@ function Table(tableProps: TableProps +
{summaryNode}
)} @@ -700,7 +700,7 @@ function Table(tableProps: TableProps} {bodyTable} {summaryNode && ( -
+
{summaryNode}
)} @@ -748,7 +748,7 @@ function Table(tableProps: TableProps{fullTable}; } - const fixedInfoList = useFixedInfo(flattenColumns, stickyOffsets, direction); + const fixedInfoList = useFixedInfo(flattenColumns, stickyOffsets, direction, columns); const TableContextValue = React.useMemo( () => ({ diff --git a/src/hooks/useFixedInfo.ts b/src/hooks/useFixedInfo.ts index d2ea2e687..9f05c8711 100644 --- a/src/hooks/useFixedInfo.ts +++ b/src/hooks/useFixedInfo.ts @@ -1,15 +1,16 @@ import useMemo from 'rc-util/lib/hooks/useMemo'; import isEqual from 'rc-util/lib/isEqual'; -import type { ColumnType, Direction, StickyOffsets } from '../interface'; +import type { ColumnsType, ColumnType, Direction, StickyOffsets } from '../interface'; import { getCellFixedInfo } from '../utils/fixUtil'; export default function useFixedInfo( flattenColumns: readonly ColumnType[], stickyOffsets: StickyOffsets, direction: Direction, + columns: ColumnsType ) { const fixedInfoList = flattenColumns.map((_, colIndex) => - getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction), + getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction, columns?.[colIndex]), ); return useMemo(