From fa2881b0f533fcdb14facf988c1ea4bc047745b4 Mon Sep 17 00:00:00 2001 From: saint3347 Date: Mon, 9 Dec 2024 15:57:41 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20`Table`=20=E5=90=88?= =?UTF-8?q?=E5=B9=B6=E8=A1=8C=E6=95=B0=E6=8D=AE=E5=9C=A8=E8=99=9A=E6=8B=9F?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E4=B8=8B=E5=81=B6=E7=8E=B0=E7=9A=84=E6=8A=96?= =?UTF-8?q?=E5=8A=A8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- .../use-table/use-table-virtual.tsx | 7 +- .../src/table/__doc__/changelog.cn.md | 6 + .../table/__example__/test-006-fix-online.tsx | 114 +++++++++--------- .../__example__/test-008-select-absolute.tsx | 2 +- 5 files changed, 70 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index ce2eb17a5..1eab36639 100644 --- 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 index 156afd439..4be40b2ed 100644 --- 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 index 5d7661fb4..455a5bad9 100644 --- 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 index ff1dadbcf..5e080b750 100644 --- 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; // 取第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,7 +47,9 @@ const columns: TableColumnItem[] = [ width: 230, fixed: 'left', rowSpan: (a, b) => orderRow(a, b, true), - render: (row) =>
{row.sellerOrderNo}
, + render: (row) => ( +
{row.sellerOrderNo}
+ ), keygen: t('订单基本信息'), group: `${t('基本信息')} (${t('订单数')}:${testData.length ?? 0})`, groupKeygen: t('基本信息'), @@ -55,7 +57,7 @@ const columns: TableColumnItem[] = [ { 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(); - -const [state, setState] = useState({ - index: 25, -}); + const [table, setTable] = useState(); -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 ( -
-
- - - 表格数据总条数：{data.length} + return ( +
+ + + + 表格数据总条数：{data.length} - specIndex: {specIndex} - + specIndex: {specIndex} + -
- setTable(t)} - bordered - height="100%" - style={{width: '100%'}} - data={data} - keygen={(item, index:number) => `${item.orderId}-${index}`} - columns={columns} - width={2000} - virtual - rowsInView={10} - /> +
+
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} + /> + - -); + ); }; 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 index c34c3bd42..afcbe3b78 100644 --- 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