refactor: Support all type of shadow (#1238)

* chore: tmp check for fixed

* chore: add zIndex placeholder

* docs: update demo

* chore: add scrollInfo context

* chore: add comment

* chore: fixed it

* chore: clean up

* chore: clean up

* chore: fix ci

* test: update snapshot

* test: fix test case

* chore: opt code

* test: fix test case

* test: fix test case

* chore: clean up

* test: fix test case

* test: fix test case

* test: clean up

Author: zombieJ

assets/index.less

@@ -56,76 +56,37 @@
   }
 
   // ================== Cell ==================
-  &-fixed-column-gapped {
-    .@{tablePrefixCls}-cell-fix-left-last::after,
-    .@{tablePrefixCls}-cell-fix-right-first::after {
-      display: none !important;
-    }
-  }
-
   &-cell {
     background: #f4f4f4;
 
-    &-fix-left,
-    &-fix-right {
-      z-index: 2;
+    &-fix {
+      position: sticky !important;
+      z-index: calc(2 + var(--z-offset));
     }
 
-    &-fix-right:last-child:not(&-fix-sticky) {
-      border-right-color: transparent;
-    }
-
-    .@{tablePrefixCls}-rtl & {
-      &-fix-right:last-child {
-        border-right-color: @border-color;
-      }
-      &-fix-left:last-child {
-        border-left-color: transparent;
+    &-fix-start-shadow,
+    &-fix-end-shadow {
+      &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 5px;
+        background: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        content: '';
+        transition: opacity 0.3s;
       }
-    }
 
-    &-fix-left-first {
-      .@{tablePrefixCls}-rtl & {
-        box-shadow: 1px 0 0 @border-color;
+      &-show::after {
+        opacity: 1;
       }
     }
 
-    &-fix-left-first::after,
-    &-fix-left-last::after {
-      position: absolute;
-      top: 0;
-      right: -1px;
-      bottom: -1px;
-      width: 20px;
-      transform: translateX(100%);
-      transition: box-shadow 0.3s;
-      content: '';
-      pointer-events: none;
-    }
-
-    &-fix-left-all::after {
-      display: none;
+    &-fix-start-shadow::after {
+      inset-inline-start: 100%;
     }
-
-    &-fix-right-first,
-    &-fix-right-last {
-      box-shadow: -1px 0 0 @border-color;
-
-      .@{tablePrefixCls}-rtl & {
-        box-shadow: none;
-      }
-
-      &::after {
-        position: absolute;
-        top: 0;
-        bottom: -1px;
-        left: -1px;
-        width: 20px;
-        transform: translateX(-100%);
-        transition: box-shadow 0.3s;
-        content: '';
-        pointer-events: none;
-      }
+    &-fix-end-shadow::after {
+      inset-inline-end: 100%;
     }
 
     &&-ellipsis {
@@ -134,9 +95,8 @@
       text-overflow: ellipsis;
 
       // Fixed first or last should special process
-      &.@{tablePrefixCls}-cell-fix-left-first,
-      &.@{tablePrefixCls}-cell-fix-left-last,
-      &.@{tablePrefixCls}-cell-fix-right-first &.@{tablePrefixCls}-cell-fix-right-last {
+      &.@{tablePrefixCls}-cell-fix-start-shadow,
+      &.@{tablePrefixCls}-cell-fix-end-shadow {
         overflow: visible;
 
         .@{tablePrefixCls}-cell-content {

docs/examples/fixedColumns.tsx

@@ -34,7 +34,7 @@ const columns: ColumnType<RecordType>[] = [
   { title: 'title8', dataIndex: 'b', key: 'h' },
   { title: 'title9', dataIndex: 'b', key: 'i' },
   { title: 'title10', dataIndex: 'b', key: 'j' },
-  { title: 'title11', dataIndex: 'b', key: 'k', width: 50 },
+  { title: 'title11', dataIndex: 'b', key: 'k', width: 50, fixed: 'right'  },
   { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
 ];
 

docs/examples/scrollXY.tsx

@@ -4,18 +4,18 @@ import Table from 'rc-table';
 import '../../assets/index.less';
 
 const columns: TableProps['columns'] = [
-  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  { 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 },
+  { 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: 'title7', dataIndex: 'b', key: 'g', width: 100 },
   { title: 'title8', dataIndex: 'b', key: 'h', width: 100 },
   { title: 'title9', dataIndex: 'b', key: 'i', width: 100 },
-  { title: 'title10', dataIndex: 'b', key: 'j', width: 100 },
+  { title: 'title10', dataIndex: 'b', key: 'j', width: 100, fixed: 'end' },
   { title: 'title11', dataIndex: 'b', key: 'k', width: 100 },
-  { title: 'title12', dataIndex: 'b', key: 'l', width: 100 },
+  { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'end' },
 ];
 
 const data = [
@@ -32,6 +32,8 @@ const data = [
 
 const Demo = () => {
   const [visible, setVisible] = React.useState(true);
+  const [rtl, setRtl] = React.useState(true);
+
   return (
     <div>
       <h2>Scroll X/Y</h2>
@@ -43,8 +45,23 @@ const Demo = () => {
       >
         Trigger Visible
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          setRtl(!rtl);
+        }}
+      >
+        {rtl ? 'RTL' : 'LTR'}
+      </button>
+
       <div style={{ display: visible ? undefined : 'none' }}>
-        <Table style={{ width: 800 }} scroll={{ x: 1500, y: 300 }} columns={columns} data={data} />
+        <Table
+          direction={rtl ? 'rtl' : 'ltr'}
+          style={{ width: 800 }}
+          scroll={{ x: 1500, y: 300 }}
+          columns={columns}
+          data={data}
+        />
       </div>
     </div>
   );

package.json

@@ -71,7 +71,6 @@
     "@types/styled-components": "^5.1.32",
     "@umijs/fabric": "^4.0.1",
     "@vitest/coverage-v8": "^2.0.5",
-    "cheerio": "1.0.0-rc.12",
     "cross-env": "^7.0.0",
     "dumi": "^2.1.3",
     "eslint": "^8.54.0",

src/Cell/index.tsx

@@ -37,12 +37,11 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
 
   // Fixed
-  fixLeft?: number | false;
-  fixRight?: number | false;
-  firstFixLeft?: boolean;
-  lastFixLeft?: boolean;
-  firstFixRight?: boolean;
-  lastFixRight?: boolean;
+  fixStart?: number | false;
+  fixEnd?: number | false;
+  fixedStartShadow?: boolean;
+  fixedEndShadow?: boolean;
+  zIndex?: number;
   allColsFixedLeft?: boolean;
 
   // ====================== Private Props ======================
@@ -104,12 +103,11 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     rowSpan,
 
     // Fixed
-    fixLeft,
-    fixRight,
-    firstFixLeft,
-    lastFixLeft,
-    firstFixRight,
-    lastFixRight,
+    fixStart,
+    fixEnd,
+    fixedStartShadow,
+    fixedEndShadow,
+    zIndex,
 
     // Private
     appendNode,
@@ -118,8 +116,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
   } = props;
 
   const cellPrefixCls = `${prefixCls}-cell`;
-  const { supportSticky, allColumnsFixedLeft, rowHoverable } = useContext(TableContext, [
-    'supportSticky',
+  const { allColumnsFixedLeft, rowHoverable } = useContext(TableContext, [
     'allColumnsFixedLeft',
     'rowHoverable',
   ]);
@@ -136,16 +133,31 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
 
   // ====================== Fixed =======================
   const fixedStyle: React.CSSProperties = {};
-  const isFixLeft = typeof fixLeft === 'number' && supportSticky;
-  const isFixRight = typeof fixRight === 'number' && supportSticky;
+  const isFixStart = typeof fixStart === 'number' && !allColumnsFixedLeft;
+  const isFixEnd = typeof fixEnd === 'number' && !allColumnsFixedLeft;
 
-  if (isFixLeft) {
-    fixedStyle.position = 'sticky';
-    fixedStyle.left = fixLeft as number;
+  const [showFixStartShadow, showFixEndShadow] = useContext(TableContext, ({ scrollInfo }) => {
+    if (!isFixStart && !isFixEnd) {
+      return [false, false];
+    }
+
+    const [scroll, scrollWidth] = scrollInfo;
+
+    const absScroll = Math.abs(scroll);
+
+    const showStartShadow = isFixStart && fixedStartShadow && absScroll > fixStart;
+    const showEndShadow = isFixEnd && fixedEndShadow && scrollWidth - absScroll > fixEnd;
+
+    return [showStartShadow, showEndShadow];
+  });
+
+  if (isFixStart) {
+    fixedStyle.insetInlineStart = fixStart as number;
+    fixedStyle['--z-offset'] = zIndex;
   }
-  if (isFixRight) {
-    fixedStyle.position = 'sticky';
-    fixedStyle.right = fixRight as number;
+  if (isFixEnd) {
+    fixedStyle.insetInlineEnd = fixEnd as number;
+    fixedStyle['--z-offset'] = zIndex;
   }
 
   // ================ RowSpan & ColSpan =================
@@ -190,16 +202,20 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     cellPrefixCls,
     className,
     {
-      [`${cellPrefixCls}-fix-left`]: isFixLeft && supportSticky,
-      [`${cellPrefixCls}-fix-left-first`]: firstFixLeft && supportSticky,
-      [`${cellPrefixCls}-fix-left-last`]: lastFixLeft && supportSticky,
-      [`${cellPrefixCls}-fix-left-all`]: lastFixLeft && allColumnsFixedLeft && supportSticky,
-      [`${cellPrefixCls}-fix-right`]: isFixRight && supportSticky,
-      [`${cellPrefixCls}-fix-right-first`]: firstFixRight && supportSticky,
-      [`${cellPrefixCls}-fix-right-last`]: lastFixRight && supportSticky,
+      // Fixed
+      [`${cellPrefixCls}-fix`]: isFixStart || isFixEnd,
+      [`${cellPrefixCls}-fix-start`]: isFixStart,
+      [`${cellPrefixCls}-fix-end`]: isFixEnd,
+
+      // Fixed shadow
+      [`${cellPrefixCls}-fix-start-shadow`]: fixedStartShadow,
+      [`${cellPrefixCls}-fix-start-shadow-show`]: fixedStartShadow && showFixStartShadow,
+      [`${cellPrefixCls}-fix-end-shadow`]: fixedEndShadow,
+      [`${cellPrefixCls}-fix-end-shadow-show`]: fixedEndShadow && showFixEndShadow,
+
       [`${cellPrefixCls}-ellipsis`]: ellipsis,
       [`${cellPrefixCls}-with-append`]: appendNode,
-      [`${cellPrefixCls}-fix-sticky`]: (isFixLeft || isFixRight) && isSticky && supportSticky,
+      [`${cellPrefixCls}-fix-sticky`]: (isFixStart || isFixEnd) && isSticky,
       [`${cellPrefixCls}-row-hover`]: !legacyCellProps && hovering,
     },
     additionalProps.className,
@@ -233,7 +249,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     mergedChildNode = null;
   }
 
-  if (ellipsis && (lastFixLeft || firstFixRight)) {
+  if (ellipsis && (fixedStartShadow || fixedEndShadow)) {
     mergedChildNode = <span className={`${cellPrefixCls}-content`}>{mergedChildNode}</span>;
   }
 

src/FixedHolder/index.tsx

@@ -85,7 +85,22 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     function onWheel(e: WheelEvent) {
       const { currentTarget, deltaX } = e as unknown as React.WheelEvent<HTMLDivElement>;
       if (deltaX) {
-        onScroll({ currentTarget, scrollLeft: currentTarget.scrollLeft + deltaX });
+        const { scrollLeft, scrollWidth, clientWidth } = currentTarget;
+        const maxScrollWidth = scrollWidth - clientWidth;
+        let nextScroll = scrollLeft + deltaX;
+
+        if (direction === 'rtl') {
+          nextScroll = Math.max(-maxScrollWidth, nextScroll);
+          nextScroll = Math.min(0, nextScroll);
+        } else {
+          nextScroll = Math.min(maxScrollWidth, nextScroll);
+          nextScroll = Math.max(0, nextScroll);
+        }
+
+        onScroll({
+          currentTarget,
+          scrollLeft: nextScroll,
+        });
         e.preventDefault();
       }
     }
@@ -124,13 +139,15 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
 
   // Calculate the sticky offsets
   const headerStickyOffsets = useMemo(() => {
-    const { right, left } = stickyOffsets;
+    const { start, end } = stickyOffsets;
     return {
       ...stickyOffsets,
-      left:
-        direction === 'rtl' ? [...left.map(width => width + combinationScrollBarSize), 0] : left,
-      right:
-        direction === 'rtl' ? right : [...right.map(width => width + combinationScrollBarSize), 0],
+      // left:
+      //   direction === 'rtl' ? [...left.map(width => width + combinationScrollBarSize), 0] : left,
+      // right:
+      //   direction === 'rtl' ? right : [...right.map(width => width + combinationScrollBarSize), 0],
+      start: start,
+      end: [...end.map(width => width + combinationScrollBarSize), 0],
       isSticky,
     };
   }, [combinationScrollBarSize, stickyOffsets, isSticky]);

src/Footer/Cell.tsx

@@ -23,17 +23,14 @@ export default function SummaryCell({
   rowSpan,
   align,
 }: SummaryCellProps) {
-  const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
+  const { prefixCls } = useContext(TableContext, ['prefixCls']);
   const { scrollColumnIndex, stickyOffsets, flattenColumns } = React.useContext(SummaryContext);
   const lastIndex = index + colSpan - 1;
   const mergedColSpan = lastIndex + 1 === scrollColumnIndex ? colSpan + 1 : colSpan;
 
-  const fixedInfo = getCellFixedInfo(
-    index,
-    index + mergedColSpan - 1,
-    flattenColumns,
-    stickyOffsets,
-    direction,
+  const fixedInfo = React.useMemo(
+    () => getCellFixedInfo(index, index + mergedColSpan - 1, flattenColumns, stickyOffsets),
+    [index, mergedColSpan, flattenColumns, stickyOffsets],
   );
 
   return (

src/Header/HeaderRow.tsx

@@ -32,7 +32,7 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
     onHeaderRow,
     index,
   } = props;
-  const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
+  const { prefixCls } = useContext(TableContext, ['prefixCls']);
   let rowProps: React.HTMLAttributes<HTMLElement>;
   if (onHeaderRow) {
     rowProps = onHeaderRow(
@@ -52,7 +52,6 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
           cell.colEnd,
           flattenColumns,
           stickyOffsets,
-          direction,
         );
 
         let additionalProps: React.HTMLAttributes<HTMLElement>;