From c585607bb664f555efffa074246da70adac9a7c0 Mon Sep 17 00:00:00 2001 From: Boran <993967177@qq.com> Date: Wed, 8 Mar 2023 18:36:07 +0800 Subject: [PATCH] fix(table): table lazyload reset bug --- src/table/TR.tsx | 4 +- src/table/hooks/useLazyLoad.ts | 7 +- test/snap/__snapshots__/csr.test.jsx.snap | 94 +---------------------- test/snap/__snapshots__/ssr.test.jsx.snap | 2 +- 4 files changed, 11 insertions(+), 96 deletions(-) diff --git a/src/table/TR.tsx b/src/table/TR.tsx index 7e9f407e2..915ec2359 100644 --- a/src/table/TR.tsx +++ b/src/table/TR.tsx @@ -35,7 +35,7 @@ export const TABLE_PROPS = [ 'onRowMouseup', ] as const; -export type TrPropsKeys = typeof TABLE_PROPS[number]; +export type TrPropsKeys = (typeof TABLE_PROPS)[number]; export interface TrProps extends TrCommonProps { rowKey: string; @@ -102,7 +102,7 @@ export default function TR(props: TrProps) { }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]); const useLazyLoadParams = useMemo(() => ({ ...scroll, rowIndex }), [scroll, rowIndex]); - const { hasLazyLoadHolder, tRowHeight } = useLazyLoad(tableContentElm, trRef.current, useLazyLoadParams); + const { hasLazyLoadHolder, tRowHeight } = useLazyLoad(tableContentElm, trRef, useLazyLoadParams); useEffect(() => { if (virtualConfig.isVirtualScroll && trRef.current) { diff --git a/src/table/hooks/useLazyLoad.ts b/src/table/hooks/useLazyLoad.ts index e091a4371..2cb4f0279 100644 --- a/src/table/hooks/useLazyLoad.ts +++ b/src/table/hooks/useLazyLoad.ts @@ -2,6 +2,7 @@ * 原作者 @louiszhai 思路 */ import { useState, useMemo, useEffect } from 'react'; +import type React from 'react'; import observe from '../../_common/js/utils/observe'; export type UseLazyLoadParams = { @@ -13,12 +14,12 @@ export type UseLazyLoadParams = { export default function useLazyLoad( containerRef: HTMLElement, - childRef: HTMLTableRowElement, + childRef: React.MutableRefObject, params: UseLazyLoadParams, ) { // useMemo 用意：1. 为了实时响应数据；2. 表格的计算量容易过大，提前存储 const tRowHeight = useMemo(() => Math.max(params.rowHeight || 48, 48), [params.rowHeight]); - const [isInit, setIsInit] = useState(params.rowIndex === 0); + const [isInit, setIsInit] = useState(params.rowIndex === -1); const hasLazyLoadHolder = useMemo(() => params?.type === 'lazy' && !isInit, [isInit, params?.type]); const requestAnimationFrame = @@ -37,7 +38,7 @@ export default function useLazyLoad( const timer = setTimeout(() => { const bufferSize = Math.max(10, params.bufferSize || 10); const height = tRowHeight * bufferSize; - childRef && observe(childRef, containerRef, init, height); + childRef && observe(childRef.current, containerRef, init, height); clearTimeout(timer); }); return () => { diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 9dd80e362..8ef839b6c 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -213509,51 +213509,8 @@ exports[`csr snapshot test > csr test src/table/_example/lazy.jsx 1`] = ` class="" > - 贾明 - - - - - - - - 审批通过 - - - - - 部分宣传物料制作费用 - - - w.cezkdudy@lhll.au - - - 2022-01-01 - + style="height: 48px;" + /> csr test src/table/_example/lazy.jsx 1`] = ` class="" > - 贾明 - - - - - - - - 审批通过 - - - - - 部分宣传物料制作费用 - - - w.cezkdudy@lhll.au - - - 2022-01-01 - + style="height: 48px;" + /> ssr test src/table/_example/fixed-header.jsx 1`] = exports[`ssr snapshot test > ssr test src/table/_example/fixed-header-col.jsx 1`] = `"
申请人
审批状态
签署方式
申请事项
邮箱地址
申请日期
操作
贾明审批通过电子签署宣传物料制作费用w.cezkdudy@lhll.au2022-01-01查看详情
张三审批失败纸质签署algolia 服务报销r.nmgw@peurezgn.sl2022-02-01再次申请
王芳审批过期纸质签署相关周边制作费p.cumx@rampblpa.ru2022-03-01再次申请
贾明审批通过电子签署激励奖品快递费w.cezkdudy@lhll.au2022-04-01查看详情
张三审批失败纸质签署宣传物料制作费用r.nmgw@peurezgn.sl2022-01-01再次申请
王芳审批过期纸质签署algolia 服务报销p.cumx@rampblpa.ru2022-02-01再次申请
贾明审批通过电子签署相关周边制作费w.cezkdudy@lhll.au2022-03-01查看详情
张三审批失败纸质签署激励奖品快递费r.nmgw@peurezgn.sl2022-04-01再次申请
王芳审批过期纸质签署宣传物料制作费用p.cumx@rampblpa.ru2022-01-01再次申请
贾明审批通过电子签署algolia 服务报销w.cezkdudy@lhll.au2022-02-01查看详情
张三审批失败纸质签署相关周边制作费r.nmgw@peurezgn.sl2022-03-01再次申请
王芳审批过期纸质签署激励奖品快递费p.cumx@rampblpa.ru2022-04-01再次申请
贾明审批通过电子签署宣传物料制作费用w.cezkdudy@lhll.au2022-01-01查看详情
张三审批失败纸质签署algolia 服务报销r.nmgw@peurezgn.sl2022-02-01再次申请
王芳审批过期纸质签署相关周边制作费p.cumx@rampblpa.ru2022-03-01再次申请
贾明审批通过电子签署激励奖品快递费w.cezkdudy@lhll.au2022-04-01查看详情
张三审批失败纸质签署宣传物料制作费用r.nmgw@peurezgn.sl2022-01-01再次申请
王芳审批过期纸质签署algolia 服务报销p.cumx@rampblpa.ru2022-02-01再次申请
贾明审批通过电子签署相关周边制作费w.cezkdudy@lhll.au2022-03-01查看详情
张三审批失败纸质签署激励奖品快递费r.nmgw@peurezgn.sl2022-04-01再次申请
共20条----
"`; -exports[`ssr snapshot test > ssr test src/table/_example/lazy.jsx 1`] = `"
申请人
申请状态
申请事项
邮箱地址
申请时间
贾明审批通过部分宣传物料制作费用w.cezkdudy@lhll.au2022-01-01
"`; +exports[`ssr snapshot test > ssr test src/table/_example/lazy.jsx 1`] = `"
申请人
申请状态
申请事项
邮箱地址
申请时间
"`; exports[`ssr snapshot test > ssr test src/table/_example/loading.jsx 1`] = `"
集群名称
状态
管理员
描述
集群名称
状态
管理员
描述
自定义加载状态文本
集群名称
状态
管理员
描述
  渲染函数自定义加载中（可单独去除内置加载图标）
"`;