chore: fixed pos

react-component · Aug 17, 2023 · 441678c · 441678c
1 parent 663037a
commit 441678c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/assets/virtual.less b/assets/virtual.less
@@ -5,19 +5,26 @@
     box-sizing: border-box;
   }
 
+  @border: 1px solid @border-color;
+
   .@{tablePrefixCls}-row {
     display: flex;
     width: 100%;
-    border-bottom: 1px solid @border-color;
-    border-left: 1px solid @border-color;
+    border-bottom: @border;
+    border-left: @border;
   }
 
   .@{tablePrefixCls}-cell {
     flex: 1 0 auto;
+    width: var(--virtual-width);
     padding: 8px 16px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    border-right: 1px solid @border-color;
+    border-right: @border;
+
+    &-fix-left {
+      left: calc(var(--sticky-left) + 1px) !important;
+    }
   }
 }
diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
@@ -140,11 +140,13 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
   if (isFixLeft) {
     fixedStyle.position = 'sticky';
     fixedStyle.left = fixLeft as number;
+    fixedStyle['--sticky-left'] = `${fixLeft}px`;
   }
   if (isFixRight) {
     fixedStyle.position = 'sticky';
 
     fixedStyle.right = fixRight as number;
+    fixedStyle['--sticky-right'] = `${fixRight}px`;
   }
 
   // ================ RowSpan & ColSpan =================

diff --git a/src/StaticTable/BodyLine.tsx b/src/StaticTable/BodyLine.tsx
@@ -49,7 +49,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
         const { style: cellStyle, colSpan, rowSpan } = additionalCellProps;
         const mergedStyle = {
           ...cellStyle,
-          width: colWidth,
+          '--virtual-width': `${colWidth}px`,
         };
 
         // When `colSpan` or `rowSpan` is `0`, should skip render.

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -391,16 +391,15 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
       if (!getScrollTarget() || getScrollTarget() === compareTarget) {
         setScrollTarget(compareTarget);
 
-        console.log('-=>', mergedScrollLeft, scrollLeft);
-
         forceScroll(mergedScrollLeft, scrollHeaderRef.current);
         forceScroll(mergedScrollLeft, scrollBodyRef.current);
         forceScroll(mergedScrollLeft, scrollSummaryRef.current);
         forceScroll(mergedScrollLeft, stickyRef.current?.setScrollLeft);
       }
 
-      if (currentTarget) {
-        const { scrollWidth, clientWidth } = currentTarget;
+      const measureTarget = currentTarget || scrollHeaderRef.current;
+      if (measureTarget) {
+        const { scrollWidth, clientWidth } = measureTarget;
         // There is no space to scroll
         if (scrollWidth === clientWidth) {
           setPingedLeft(false);