fix(table): 修复 Safari 中设置 virtual 后只能表头滚动问题 (#2758)

XiaoMi · Mar 8, 2024 · 68afb78 · 68afb78
1 parent 5a002ac
commit 68afb78
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/.changeset/fresh-bananas-double.md b/.changeset/fresh-bananas-double.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": patch
+---
+
+fix: 修复 Safari 中设置 virtual 后只能表头滚动问题
diff --git a/.changeset/ninety-colts-heal.md b/.changeset/ninety-colts-heal.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(table): 修复 Safari 中设置 virtual 后只能表头滚动问题
diff --git a/packages/ui/table/src/TableBody.tsx b/packages/ui/table/src/TableBody.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useMemo, useState } from 'react'
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react'
 import VirtualList from 'rc-virtual-list'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
@@ -31,6 +31,7 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
       virtual,
       measureRowElementRef,
       scrollbar,
+      scrollLeft,
     } = useTableContext()
 
     const cls = cx(`${prefixCls}-body`)
@@ -49,21 +50,12 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
       }
     )
 
-    const [scrollLeft, setScrollLeft] = useState(0)
     const rowWidth = useMemo(() => {
       let tmpWidth = 0
       colWidths.forEach((width) => (tmpWidth += width))
       return tmpWidth
     }, [colWidths])
 
-    const onVirtualContainerScroll = useCallback(
-      (evt: any) => {
-        setScrollLeft(scrollBodyElementRef?.current?.scrollLeft || 0)
-        onTableBodyScroll(evt)
-      },
-      [scrollBodyElementRef, onTableBodyScroll]
-    )
-
     if (virtual) {
       // TODO： avg和summay row的逻辑
 
@@ -78,7 +70,7 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
         <div
           ref={scrollBodyElementRef}
           className={cls}
-          onScroll={onVirtualContainerScroll}
+          onScroll={onTableBodyScroll}
           onWheel={onTableBodyScrollMock}
           style={{
             // 表格宽度大于div宽度才出现横向滚动条
@@ -92,7 +84,7 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
           ></div>
           <div
             ref={bodyTableRef}
-            style={{ height: 1, marginTop: -1, background: 'transparent', width: rowWidth }}
+            style={{ height: 2, marginTop: -1, background: 'transparent', width: rowWidth }}
           ></div>
           {isArrayNonEmpty(transitionData) ? (
             <div style={{ width: '100%', position: 'sticky', left: 0 }}>