chore: fixed it

Author: zombieJ

assets/index.less

@@ -79,7 +79,13 @@
         bottom: 0;
         width: 5px;
         background: rgba(0, 0, 0, 0.5);
+        opacity: 0;
         content: '';
+        transition: opacity 0.3s;
+      }
+
+      &-show::after {
+        opacity: 1;
       }
     }
 

docs/examples/scrollXY.tsx

@@ -20,14 +20,14 @@ const columns: TableProps['columns'] = [
 
 const data = [
   { a: '123', b: 'xxxxxxxx xxxxxxxx', d: 3, key: '1' },
-  // { a: 'cdd', b: 'edd12221 edd12221', d: 3, key: '2' },
-  // { a: '133', c: 'edd12221 edd12221', d: 2, key: '3' },
-  // { a: '133', c: 'edd12221 edd12221', d: 2, key: '4' },
-  // { a: '133', c: 'edd12221 edd12221', d: 2, key: '5' },
-  // { a: '133', c: 'edd12221 edd12221', d: 2, key: '6' },
-  // { a: '133', c: 'edd12221 edd12221', d: 2, key: '7' },
-  // { a: '133', c: 'edd12221 edd12221', d: 2, key: '8' },
-  // { a: '133', c: 'edd12221 edd12221', d: 2, key: '9' },
+  { a: 'cdd', b: 'edd12221 edd12221', d: 3, key: '2' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '3' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '4' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '5' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '6' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '7' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '8' },
+  { a: '133', c: 'edd12221 edd12221', d: 2, key: '9' },
 ];
 
 const Demo = () => {

src/Cell/index.tsx

@@ -121,12 +121,6 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     'rowHoverable',
   ]);
 
-  useContext(TableContext, ({ scrollInfo }) => {
-    if (fixedStartShadow) {
-      console.log('~~~>', fixedStartShadow, scrollInfo);
-    }
-  });
-
   // ====================== Value =======================
   const [childNode, legacyCellProps] = useCellRender(
     record,
@@ -142,6 +136,15 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
   const isFixStart = typeof fixStart === 'number';
   const isFixEnd = typeof fixEnd === 'number';
 
+  const [showFixStartShadow, showFixEndShadow] = useContext(TableContext, ({ scrollInfo }) => {
+    const [scroll, scrollWidth] = scrollInfo;
+
+    const showStartShadow = isFixStart && fixedStartShadow && scroll > fixStart;
+    const showEndShadow = isFixEnd && fixedEndShadow && scrollWidth - scroll > fixEnd;
+
+    return [showStartShadow, showEndShadow];
+  });
+
   if (isFixStart) {
     fixedStyle.insetInlineStart = fixStart as number;
     fixedStyle['--z-offset'] = zIndex;
@@ -205,7 +208,9 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
 
       // 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,

src/utils/fixUtil.ts

@@ -13,13 +13,6 @@ export interface FixedInfo {
   fixedEndShadow?: boolean;
 
   zIndex?: number;
-
-  /** Get the scroll position of the scrollbar at
-   * which the current `fixed: start` needs to display a shadow */
-  stickyStart?: number;
-  /** Get the scroll position of the scrollbar at
-   * which the current `fixed: end` needs to display a shadow */
-  stickyEnd?: number;
 }
 
 function isFixedStart(column: { fixed?: FixedType }) {
@@ -58,7 +51,7 @@ export function getCellFixedInfo(
 
   if (fixStart !== null) {
     fixedStartShadow = !columns[colEnd + 1] || !isFixedStart(columns[colEnd + 1]);
-    zIndex = columns.length - colStart;
+    zIndex = columns.length * 2 - colStart; // Fix start always overlay fix end
   }
   if (fixEnd !== null) {
     fixedEndShadow = !columns[colStart - 1] || !isFixedEnd(columns[colStart - 1]);