From ca71a796e4b556c8e1d2386173cb7e542b4852a2 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, 8 Jan 2023 15:25:11 +0800
Subject: [PATCH] fix: solve table display unexpected when column fixed (#925)

* fix: solve table display unexpected when column fixed

* feat: code optimize
---
 src/Footer/Cell.tsx           |  3 +-
 src/Footer/SummaryContext.tsx |  3 +-
 src/Footer/index.tsx          |  8 +++--
 src/Header/HeaderRow.tsx      |  4 +--
 src/Table.tsx                 |  6 ++--
 src/hooks/useFixedInfo.ts     |  5 +--
 src/utils/fixUtil.ts          | 16 +++++----
 tests/FixedHeader.spec.js     | 64 +++++++++++++++++++++++++++++++++--
 8 files changed, 88 insertions(+), 21 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<RecordType> = readonly (ColumnType<RecordType> & { scrollbar?: boolean })[];
 
@@ -7,6 +7,7 @@ const SummaryContext = React.createContext<{
   stickyOffsets?: StickyOffsets;
   scrollColumnIndex?: number;
   flattenColumns?: FlattenColumns<any>;
+  columns?: ColumnsType<any>;
 }>({});
 
 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<RecordType> {
   children: React.ReactNode;
   stickyOffsets: StickyOffsets;
   flattenColumns: FlattenColumns<RecordType>;
+  columns: ColumnsType<RecordType>;
 }
 
 function Footer<RecordType>(props: FooterProps<RecordType>) {
@@ -19,7 +20,7 @@ function Footer<RecordType>(props: FooterProps<RecordType>) {
     devRenderTimes(props);
   }
 
-  const { children, stickyOffsets, flattenColumns } = props;
+  const { children, stickyOffsets, flattenColumns, columns } = props;
 
   const prefixCls = useContext(TableContext, 'prefixCls');
 
@@ -31,8 +32,9 @@ function Footer<RecordType>(props: FooterProps<RecordType>) {
       stickyOffsets,
       flattenColumns,
       scrollColumnIndex: scrollColumn?.scrollbar ? lastColumnIndex : null,
+      columns
     }),
-    [scrollColumn, flattenColumns, lastColumnIndex, stickyOffsets],
+    [scrollColumn, flattenColumns, lastColumnIndex, stickyOffsets, columns],
   );
 
   return (
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<RecordType>({
   index,
 }: RowProps<RecordType>) {
   const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
-
   let rowProps: React.HTMLAttributes<HTMLElement>;
   if (onHeaderRow) {
     rowProps = onHeaderRow(
@@ -49,12 +48,13 @@ function HeaderRow<RecordType>({
     <RowComponent {...rowProps}>
       {cells.map((cell: CellType<RecordType>, cellIndex) => {
         const { column } = cell;
-        const fixedInfo = getCellFixedInfo(
+        const fixedInfo = getCellFixedInfo<RecordType>(
           cell.colStart,
           cell.colEnd,
           flattenColumns,
           stickyOffsets,
           direction,
+          column
         );
 
         let additionalProps: React.HTMLAttributes<HTMLElement>;
diff --git a/src/Table.tsx b/src/Table.tsx
index de275e7b6..8e74719e8 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -599,7 +599,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
             {bodyColGroup}
             {bodyTable}
             {!fixFooter && summaryNode && (
-              <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns}>
+              <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns} columns={columns}>
                 {summaryNode}
               </Footer>
             )}
@@ -680,7 +680,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
           {showHeader !== false && <Header {...headerProps} {...columnContext} />}
           {bodyTable}
           {summaryNode && (
-            <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns}>
+            <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns} columns={columns}>
               {summaryNode}
             </Footer>
           )}
@@ -722,7 +722,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
     fullTable = <ResizeObserver onResize={onFullTableResize}>{fullTable}</ResizeObserver>;
   }
 
-  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<RecordType>(
   flattenColumns: readonly ColumnType<RecordType>[],
   stickyOffsets: StickyOffsets,
   direction: Direction,
+  columns: ColumnsType<RecordType>
 ) {
   const fixedInfoList = flattenColumns.map((_, colIndex) =>
-    getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction),
+    getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction, columns?.[colIndex]),
   );
 
   return useMemo(
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<RecordType = any>(
   colStart: number,
   colEnd: number,
   columns: readonly { fixed?: FixedType }[],
   stickyOffsets: StickyOffsets,
   direction: Direction,
+  curColumns?: ColumnType<RecordType> | ColumnGroupType<RecordType>
 ): 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<RecordType>)?.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(
+      <Table
+        columns={columns}
+        data={data}
+        scroll={{ x: true }}
+      />,
+    );
+    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');
+    
+  });
 });