chore: tmp of it

Author: zombieJ

assets/index.less

@@ -351,4 +351,21 @@
       }
     }
   }
+
+  // ============= Column Shadow ==============
+  &-fixed-column-shadow {
+    &-holder {
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+    }
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 10px;
+    background: red;
+    z-index: 10;
+  }
 }

docs/examples/stack-columns.tsx

@@ -12,9 +12,22 @@ interface RecordType {
 }
 
 const columns: ColumnType<RecordType>[] = [
-  { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
+  {
+    title: 'title1',
+    dataIndex: 'a',
+    key: 'a',
+    width: 100,
+    // Fixed
+    fixed: 'start',
+  },
   { title: 'title2', dataIndex: 'b', key: 'b', width: 50 },
-  { title: 'title3', dataIndex: 'c', key: 'c', fixed: 'left' },
+  {
+    title: 'title3',
+    dataIndex: 'c',
+    key: 'c',
+    // Fixed
+    fixed: 'start',
+  },
   { title: 'title4', dataIndex: 'b', key: 'd' },
   { title: 'title5', dataIndex: 'b', key: 'e' },
   { title: 'title6', dataIndex: 'b', key: 'f' },
@@ -25,9 +38,22 @@ const columns: ColumnType<RecordType>[] = [
   },
   { title: 'title8', dataIndex: 'b', key: 'h' },
   { title: 'title9', dataIndex: 'b', key: 'i' },
-  { title: 'title10', dataIndex: 'b', key: 'j', fixed: 'right' },
+  {
+    title: 'title10',
+    dataIndex: 'b',
+    key: 'j',
+    // Fixed
+    fixed: 'end',
+  },
   { title: 'title11', dataIndex: 'b', key: 'k', width: 50 },
-  { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
+  {
+    title: 'title12',
+    dataIndex: 'b',
+    key: 'l',
+    width: 100,
+    // Fixed
+    fixed: 'end',
+  },
 ];
 
 const data: RecordType[] = [

src/Cell/index.tsx

@@ -37,8 +37,8 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
 
   // Fixed
-  fixLeft?: number | false;
-  fixRight?: number | false;
+  fixStart?: number | false;
+  fixEnd?: number | false;
   firstFixLeft?: boolean;
   lastFixLeft?: boolean;
   firstFixRight?: boolean;
@@ -104,8 +104,8 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     rowSpan,
 
     // Fixed
-    fixLeft,
-    fixRight,
+    fixStart,
+    fixEnd,
     firstFixLeft,
     lastFixLeft,
     firstFixRight,
@@ -136,16 +136,16 @@ 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' && supportSticky;
+  const isFixEnd = typeof fixEnd === 'number' && supportSticky;
 
-  if (isFixLeft) {
+  if (isFixStart) {
     fixedStyle.position = 'sticky';
-    fixedStyle.left = fixLeft as number;
+    fixedStyle.insetInlineStart = fixStart as number;
   }
-  if (isFixRight) {
+  if (isFixEnd) {
     fixedStyle.position = 'sticky';
-    fixedStyle.right = fixRight as number;
+    fixedStyle.insetInlineEnd = fixEnd as number;
   }
 
   // ================ RowSpan & ColSpan =================
@@ -190,16 +190,16 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     cellPrefixCls,
     className,
     {
-      [`${cellPrefixCls}-fix-left`]: isFixLeft && supportSticky,
+      [`${cellPrefixCls}-fix-left`]: isFixStart && 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`]: isFixEnd && supportSticky,
       [`${cellPrefixCls}-fix-right-first`]: firstFixRight && supportSticky,
       [`${cellPrefixCls}-fix-right-last`]: lastFixRight && supportSticky,
       [`${cellPrefixCls}-ellipsis`]: ellipsis,
       [`${cellPrefixCls}-with-append`]: appendNode,
-      [`${cellPrefixCls}-fix-sticky`]: (isFixLeft || isFixRight) && isSticky && supportSticky,
+      [`${cellPrefixCls}-fix-sticky`]: (isFixStart || isFixEnd) && isSticky && supportSticky,
       [`${cellPrefixCls}-row-hover`]: !legacyCellProps && hovering,
     },
     additionalProps.className,

src/FixedColumnShadows.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { getTargetScrollBarSize } from '@rc-component/util/lib/getScrollBarSize';
+
+export interface FixedColumnShadowsProps {
+  prefixCls: string;
+}
+
+export default function FixedColumnShadows(props: FixedColumnShadowsProps) {
+  const { prefixCls } = props;
+  const holderRef = React.useRef<HTMLDivElement>(null);
+
+  const [scrollBarSize, setScrollBarSize] = React.useState<[height: number, width: number]>([0, 0]);
+
+  React.useEffect(() => {
+    if (holderRef.current) {
+      const { height, width } = getTargetScrollBarSize(holderRef.current);
+      setScrollBarSize([height, width]);
+    }
+  }, []);
+
+  const fixedColumnShadowCls = `${prefixCls}-fixed-column-shadow`;
+
+  return (
+    <div
+      className={`${fixedColumnShadowCls}-holder`}
+      ref={holderRef}
+      style={{
+        // TODO: update when parent scroll changed
+        insetBlockEnd: scrollBarSize[0],
+        insetInlineEnd: scrollBarSize[1],
+      }}
+    >
+      <div className={fixedColumnShadowCls} />
+    </div>
+  );
+}

src/Table.tsx

@@ -76,6 +76,7 @@ import Column from './sugar/Column';
 import ColumnGroup from './sugar/ColumnGroup';
 import { getColumnsKey, validateValue, validNumberValue } from './utils/valueUtil';
 import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
+import FixedColumnShadows from './FixedColumnShadows';
 
 export const DEFAULT_PREFIX = 'rc-table';
 
@@ -355,7 +356,7 @@ function Table<RecordType extends DefaultRecordType>(
   const colsKeys = getColumnsKey(flattenColumns);
   const pureColWidths = colsKeys.map(columnKey => colsWidths.get(columnKey));
   const colWidths = React.useMemo(() => pureColWidths, [pureColWidths.join('_')]);
-  const stickyOffsets = useStickyOffsets(colWidths, flattenColumns, direction);
+  const stickyOffsets = useStickyOffsets(colWidths, flattenColumns);
   const fixHeader = scroll && validateValue(scroll.y);
   const horizonScroll = (scroll && validateValue(mergedScrollX)) || Boolean(expandableConfig.fixed);
   const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed);
@@ -765,6 +766,7 @@ function Table<RecordType extends DefaultRecordType>(
     <div
       className={classNames(prefixCls, className, {
         [`${prefixCls}-rtl`]: direction === 'rtl',
+        // TODO: Remove these ping className
         [`${prefixCls}-ping-left`]: pingedLeft,
         [`${prefixCls}-ping-right`]: pingedRight,
         [`${prefixCls}-layout-fixed`]: tableLayout === 'fixed',
@@ -786,6 +788,7 @@ function Table<RecordType extends DefaultRecordType>(
       {title && <Panel className={`${prefixCls}-title`}>{title(mergedData)}</Panel>}
       <div ref={scrollBodyContainerRef} className={`${prefixCls}-container`}>
         {groupTableNode}
+        <FixedColumnShadows prefixCls={prefixCls} />
       </div>
       {footer && <Panel className={`${prefixCls}-footer`}>{footer(mergedData)}</Panel>}
     </div>

src/hooks/useStickyOffsets.ts

@@ -1,13 +1,17 @@
 import { useMemo } from 'react';
-import type { ColumnType, Direction, StickyOffsets } from '../interface';
+import type {
+  ColumnType,
+  // Direction,
+  StickyOffsets,
+} from '../interface';
 
 /**
  * Get sticky column offset width
  */
 function useStickyOffsets<RecordType>(
   colWidths: number[],
   flattenColumns: readonly ColumnType<RecordType>[],
-  direction: Direction,
+  // direction: Direction,
 ) {
   const stickyOffsets: StickyOffsets = useMemo(() => {
     const columnCount = flattenColumns.length;
@@ -30,16 +34,24 @@ function useStickyOffsets<RecordType>(
     const startOffsets = getOffsets(0, columnCount, 1);
     const endOffsets = getOffsets(columnCount - 1, -1, -1).reverse();
 
-    return direction === 'rtl'
-      ? {
-          left: endOffsets,
-          right: startOffsets,
-        }
-      : {
-          left: startOffsets,
-          right: endOffsets,
-        };
-  }, [colWidths, flattenColumns, direction]);
+    // return direction === 'rtl'
+    //   ? {
+    //       left: endOffsets,
+    //       right: startOffsets,
+    //     }
+    //   : {
+    //       left: startOffsets,
+    //       right: endOffsets,
+    //     };
+    return {
+      start: startOffsets,
+      end: endOffsets,
+    };
+  }, [
+    colWidths,
+    flattenColumns,
+    // , direction
+  ]);
 
   return stickyOffsets;
 }

src/interface.ts

@@ -131,8 +131,10 @@ export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 
 // ================= Fix Column =================
 export interface StickyOffsets {
-  left: readonly number[];
-  right: readonly number[];
+  // left: readonly number[];
+  // right: readonly number[];
+  start: readonly number[];
+  end: readonly number[];
   isSticky?: boolean;
 }
 

src/utils/fixUtil.ts

@@ -3,6 +3,8 @@ import type { Direction, FixedType, StickyOffsets } from '../interface';
 export interface FixedInfo {
   fixLeft: number | false;
   fixRight: number | false;
+  fixStart: number | false;
+  fixEnd: number | false;
   lastFixLeft: boolean;
   firstFixRight: boolean;
 
@@ -23,13 +25,17 @@ export function getCellFixedInfo(
   const startColumn = columns[colStart] || {};
   const endColumn = columns[colEnd] || {};
 
-  let fixLeft: number;
-  let fixRight: number;
+  // let fixLeft: number;
+  // let fixRight: number;
+  let fixStart: number;
+  let fixEnd: number;
 
-  if (startColumn.fixed === 'left') {
-    fixLeft = stickyOffsets.left[direction === 'rtl' ? colEnd : colStart];
-  } else if (endColumn.fixed === 'right') {
-    fixRight = stickyOffsets.right[direction === 'rtl' ? colStart : colEnd];
+  if (startColumn.fixed === 'left' || startColumn.fixed === 'start') {
+    // fixLeft = stickyOffsets.left[direction === 'rtl' ? colEnd : colStart];
+    fixStart = stickyOffsets.start[colStart];
+  } else if (endColumn.fixed === 'right' || endColumn.fixed === 'end') {
+    // fixRight = stickyOffsets.right[direction === 'rtl' ? colStart : colEnd];
+    fixEnd = stickyOffsets.end[colEnd];
   }
 
   let lastFixLeft: boolean = false;
@@ -64,8 +70,10 @@ export function getCellFixedInfo(
   // }
 
   return {
-    fixLeft,
-    fixRight,
+    fixLeft: fixStart,
+    fixStart,
+    fixRight: fixEnd,
+    fixEnd,
     lastFixLeft,
     firstFixRight,
     lastFixRight,