From 68afb78ed1fb8e42bc8eec68cfa5f1787ee052b0 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Fri, 8 Mar 2024 11:52:24 +0800
Subject: [PATCH] =?UTF-8?q?fix(table):=20=E4=BF=AE=E5=A4=8D=20Safari=20?=
 =?UTF-8?q?=E4=B8=AD=E8=AE=BE=E7=BD=AE=20virtual=20=E5=90=8E=E5=8F=AA?=
 =?UTF-8?q?=E8=83=BD=E8=A1=A8=E5=A4=B4=E6=BB=9A=E5=8A=A8=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20(#2758)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/fresh-bananas-double.md  |  5 +++++
 .changeset/ninety-colts-heal.md     |  5 +++++
 packages/ui/table/src/TableBody.tsx | 16 ++++------------
 3 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/fresh-bananas-double.md
 create mode 100644 .changeset/ninety-colts-heal.md

diff --git a/.changeset/fresh-bananas-double.md b/.changeset/fresh-bananas-double.md
new file mode 100644
index 000000000..3484b4eee
--- /dev/null
+++ 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
new file mode 100644
index 000000000..ba4cd2034
--- /dev/null
+++ 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
index 1cc8f020c..362d32297 100644
--- 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 }}>