Merge pull request #858 from sheinsight/fix-table-rowspan-shake

fix: 修复 `Table` 合并行数据在虚拟列表下偶现的抖动问题
sheinsight · Dec 9, 2024 · 739a7f8 · 739a7f8
2 parents b3f06e2 + fa2881b
commit 739a7f8
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.5.4-beta.9",
+  "version": "3.5.4-beta.10",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/hooks/src/components/use-table/use-table-virtual.tsx b/packages/hooks/src/components/use-table/use-table-virtual.tsx
@@ -1,5 +1,5 @@
 import { usePersistFn } from '../../common/use-persist-fn';
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { useState, useRef, useEffect, useMemo, useLayoutEffect } from 'react';
 import { TableFormatColumn } from './use-table.type';
 
 // 找出最大的连续数字的个数
@@ -157,8 +157,9 @@ const useTableVirtual = (props: UseTableVirtualProps) => {
     const scrollContainerHeight = Math.max(props.scrollRef.current?.clientHeight || 0, 200);
     for (let i = 0; i <= maxIndex; i++) {
       context.rowSpanRows = 0;
-      sum += context.cachedHeight[i] || props.rowHeight;
-      let rowSpanHeight = 0;
+      const currentRowHeight = context.cachedHeight[i] || props.rowHeight;
+      sum += currentRowHeight;
+      let rowSpanHeight = currentRowHeight;
       if (rowSpanInfo) {
         const siblingsIndexs = [];
         for (let k = i; k < rowSpanInfo.maxRowSpan + i; k++) {

diff --git a/packages/shineout/src/table/__doc__/changelog.cn.md b/packages/shineout/src/table/__doc__/changelog.cn.md
@@ -1,3 +1,9 @@
+## 3.5.4-beta.10
+2024-12-09
+
+### 🐞 BugFix
+- 修复 `Table` 合并行数据在虚拟列表下偶现的抖动问题 ([#858](https://github.com/sheinsight/shineout-next/pull/858))
+
 ## 3.5.4-beta.5
 2024-12-06
 

diff --git a/packages/shineout/src/table/__example__/test-006-fix-online.tsx b/packages/shineout/src/table/__example__/test-006-fix-online.tsx
@@ -8,11 +8,11 @@ import React, { useEffect, useState } from 'react';
 import { Button, Form, Input, Table, TYPE } from 'shineout';
 import testData from './test-data-online';
 
-function t(v){
-  return v
+function t(v) {
+  return v;
 }
 
-type OrderRowItem = any
+type OrderRowItem = any;
 
 function orderRow(a: OrderRowItem, b: OrderRowItem, mergeSummary = false) {
   return mergeSummary
@@ -23,8 +23,8 @@ function orderRow(a: OrderRowItem, b: OrderRowItem, mergeSummary = false) {
 type TableColumnItem = TYPE.Table.ColumnItem<any>;
 
 // 取第10条到第23条
-const data = testData
-const specIndex = data.findIndex(item => item.sellerOrderNo === 'PB2411200000029')
+const data = testData;
+const specIndex = data.findIndex((item) => item.sellerOrderNo === 'PB2411200000029');
 const columns: TableColumnItem[] = [
   {
     type: 'checkbox',
@@ -47,15 +47,17 @@ const columns: TableColumnItem[] = [
     width: 230,
     fixed: 'left',
     rowSpan: (a, b) => orderRow(a, b, true),
-    render: (row) => <div style={{background:'#ccc', borderRadius: 8, height: 300}}>{row.sellerOrderNo}</div>,
+    render: (row) => (
+      <div style={{ background: '#ccc', borderRadius: 8, height: 300 }}>{row.sellerOrderNo}</div>
+    ),
     keygen: t('订单基本信息'),
     group: `${t('基本信息')} (${t('订单数')}:${testData.length ?? 0})`,
     groupKeygen: t('基本信息'),
   },
   {
     title: 'SKU',
     width: 180,
-    render: () => 'ORDER_LIST_SKU',
+    render: 'sellerOrderNo',
     group: t('商品信息'),
     colSpan: (row) => (row.isSummary ? 2 : 1),
   },
@@ -73,7 +75,7 @@ const columns: TableColumnItem[] = [
       //   return '';
       // }
       // return [row.currencyCode, row.supplyPrice].filter(Boolean).join(' ');
-      return '单价'
+      return '单价';
     },
     // hidden: isPartiallyStockToShein,
     keygen: t('单价'),
@@ -270,7 +272,7 @@ const columns: TableColumnItem[] = [
       // ) {
       //   return row?.skuExt?.inventoryAbleSaleDays;
       // }
-      return '可售天数'
+      return '可售天数';
     },
     width: 120,
     group: t('其他信息'),
@@ -310,63 +312,63 @@ const columns: TableColumnItem[] = [
     // ellipsis: { rows: 3 },
     width: 150,
   },
-]
-
+];
 
 const App: React.FC = () => {
-const [table, setTable] = useState<any>();
-
-const [state, setState] = useState({
-  index: 25,
-});
+  const [table, setTable] = useState<any>();
 
-const handleScroll = () => {
-  if (table)
-    table.scrollToIndex(state.index - 1, () => {
-      const el: HTMLElement = document.querySelector(`#name_${state.index}`)!;
-      if (el) {
-        el.style.color = 'red';
-      }
-    });
-};
+  const [state, setState] = useState({
+    index: 25,
+  });
 
-const handleIndexChange = ({ index }: { index: number }) => {
-  setState({ index });
-};
+  const handleScroll = () => {
+    if (table)
+      table.scrollToIndex(state.index - 1, () => {
+        const el: HTMLElement = document.querySelector(`#name_${state.index}`)!;
+        if (el) {
+          el.style.color = 'red';
+        }
+      });
+  };
 
-useEffect(() => {
-  setTimeout(handleScroll);
-}, [state]);
+  const handleIndexChange = ({ index }: { index: number }) => {
+    setState({ index });
+  };
 
+  useEffect(() => {
+    setTimeout(handleScroll);
+  }, [state]);
 
-return (
-  <div>
-    <Form style={{ marginBottom: 24 }} defaultValue={state} inline onSubmit={handleIndexChange}>
-      <Input.Number min={1} max={10000} width={100} name='index' />
-      <Button type='primary' htmlType='submit'>
-        Scroll
-      </Button>
-      <strong>表格数据总条数：{data.length}</strong>
+  return (
+    <div>
+      <Form style={{ marginBottom: 24 }} defaultValue={state} inline onSubmit={handleIndexChange}>
+        <Input.Number min={1} max={10000} width={100} name='index' />
+        <Button type='primary' htmlType='submit'>
+          Scroll
+        </Button>
+        <strong>表格数据总条数：{data.length}</strong>
 
-      <strong>specIndex: {specIndex}</strong>
-    </Form>
+        <strong>specIndex: {specIndex}</strong>
+      </Form>
 
-    <div style={{height: 500}}>
-      <Table
-        tableRef={(t) => setTable(t)}
-        bordered
-        height="100%"
-        style={{width: '100%'}}
-        data={data}
-        keygen={(item, index:number) => `${item.orderId}-${index}`}
-        columns={columns}
-        width={2000}
-        virtual
-        rowsInView={10}
-      />
+      <div style={{ height: 500 }}>
+        <Table
+          tableRef={(t) => setTable(t)}
+          height='100%'
+          style={{ width: '100%' }}
+          data={data}
+          keygen={(item, index: number) => `${item.orderId}-${index}`}
+          columns={columns}
+          width={2000}
+          rowHeight={120}
+          hover={false}
+          virtual
+          bordered
+          rowsInView={20}
+        />
+      </div>
     </div>
-  </div>
-);
+  );
 };
 
 export default App;
diff --git a/packages/shineout/src/table/__example__/test-008-select-absolute.tsx b/packages/shineout/src/table/__example__/test-008-select-absolute.tsx
@@ -103,7 +103,7 @@ const columns: TableColumnItem[] = [
           bordered
           keygen='id'
           width={1500}
-          // style={{ height: 300 }}
+          style={{ height: 300 }}
           columns={columns}
           data={data}
           virtual