fix: stack case (#1247)

Author: zombieJ

docs/examples/scrollXY.tsx

@@ -4,12 +4,12 @@ import Table from 'rc-table';
 import '../../assets/index.less';
 
 const columns: TableProps['columns'] = [
-  { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'start' },
-  { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
-  { title: 'title3', dataIndex: 'c', key: 'c', width: 100, fixed: 'start' },
-  { title: 'title4', dataIndex: 'b', key: 'd', width: 100 },
-  { title: 'title5', dataIndex: 'b', key: 'e', width: 100 },
-  { title: 'title6', dataIndex: 'b', key: 'f', width: 100 },
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 60, fixed: 'start' },
+  { title: 'title2', dataIndex: 'b', key: 'b', width: 80, fixed: 'start' },
+  { title: 'title3', dataIndex: 'c', key: 'c', width: 120 },
+  { title: 'title4', dataIndex: 'b', key: 'd', width: 100, fixed: 'start' },
+  { title: 'title5', dataIndex: 'b', key: 'e' },
+  { title: 'title6', dataIndex: 'b', key: 'f' },
   { title: 'title7', dataIndex: 'b', key: 'g', width: 100 },
   { title: 'title8', dataIndex: 'b', key: 'h', width: 100 },
   { title: 'title9', dataIndex: 'b', key: 'i', width: 100 },

src/Cell/index.tsx

@@ -41,6 +41,8 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   fixEnd?: number | false;
   fixedStartShadow?: boolean;
   fixedEndShadow?: boolean;
+  offsetFixedStartShadow?: number;
+  offsetFixedEndShadow?: number;
   zIndex?: number;
   allColsFixedLeft?: boolean;
 
@@ -107,6 +109,8 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     fixEnd,
     fixedStartShadow,
     fixedEndShadow,
+    offsetFixedStartShadow,
+    offsetFixedEndShadow,
     zIndex,
 
     // Private
@@ -146,12 +150,12 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     const showStartShadow =
       (isFixStart && fixedStartShadow && absScroll) -
         // For precision, we not show shadow by default which has better user experience.
-        (fixStart as number) >=
+        (offsetFixedStartShadow as number) >=
       1;
     const showEndShadow =
       (isFixEnd && fixedEndShadow && scrollWidth - absScroll) -
         // Same as above
-        (fixEnd as number) >=
+        (offsetFixedEndShadow as number) >=
       1;
 
     return [showStartShadow, showEndShadow];

src/hooks/useStickyOffsets.ts

@@ -32,6 +32,7 @@ function useStickyOffsets<RecordType>(
     return {
       start: startOffsets,
       end: endOffsets,
+      widths: colWidths,
     };
   }, [colWidths, flattenColumns]);
 

src/interface.ts

@@ -133,6 +133,7 @@ export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export interface StickyOffsets {
   start: readonly number[];
   end: readonly number[];
+  widths: readonly number[];
   isSticky?: boolean;
 }
 

src/utils/fixUtil.ts

@@ -12,6 +12,11 @@ export interface FixedInfo {
   /** `fixed: end` with shadow */
   fixedEndShadow?: boolean;
 
+  /** Show the shadow when `scrollLeft` arrive for `fixed: start` */
+  offsetFixedStartShadow?: number;
+  /** Show the shadow when `scrollLeft` arrive for `fixed: end` */
+  offsetFixedEndShadow?: number;
+
   zIndex?: number;
 }
 
@@ -41,8 +46,8 @@ export function getCellFixedInfo(
   }
 
   // check if need to add shadow
-  let fixedStartShadow: boolean;
-  let fixedEndShadow: boolean;
+  let fixedStartShadow = false;
+  let fixedEndShadow = false;
 
   // Calc `zIndex`.
   // first fixed start (start -> end) column `zIndex` should be greater than next column.
@@ -58,11 +63,32 @@ export function getCellFixedInfo(
     zIndex = colEnd;
   }
 
+  // Check if scrollLeft will show the shadow
+  let offsetFixedStartShadow = 0;
+  let offsetFixedEndShadow = 0;
+
+  if (fixedStartShadow) {
+    for (let i = 0; i < colStart; i += 1) {
+      if (!isFixedStart(columns[i])) {
+        offsetFixedStartShadow += stickyOffsets.widths[i] || 0;
+      }
+    }
+  }
+  if (fixedEndShadow) {
+    for (let i = columns.length - 1; i > colEnd; i -= 1) {
+      if (!isFixedEnd(columns[i])) {
+        offsetFixedEndShadow += stickyOffsets.widths[i] || 0;
+      }
+    }
+  }
+
   return {
     fixStart,
     fixEnd,
     fixedStartShadow,
     fixedEndShadow,
+    offsetFixedStartShadow,
+    offsetFixedEndShadow,
     isSticky: stickyOffsets.isSticky,
     zIndex,
   };