fix(useVirtualList): mutate style in react context (#2034)

Co-authored-by: 潇见 <xiaojian.lj@antgroup.com>
alibaba · Feb 27, 2023 · 29c9203 · 29c9203
1 parent e7682c1
commit 29c9203
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/packages/hooks/src/useVirtualList/index.ts b/packages/hooks/src/useVirtualList/index.ts
@@ -1,11 +1,12 @@
-import { useEffect, useMemo, useState, useRef } from 'react';
+import { useEffect, useMemo, useState, useRef, CSSProperties } from 'react';
 import useEventListener from '../useEventListener';
 import useLatest from '../useLatest';
 import useMemoizedFn from '../useMemoizedFn';
 import useSize from '../useSize';
 import { getTargetElement } from '../utils/domTarget';
 import type { BasicTarget } from '../utils/domTarget';
 import { isNumber } from '../utils';
+import useUpdateEffect from '../useUpdateEffect';
 
 type ItemHeight<T> = (index: number, data: T) => number;
 
@@ -27,6 +28,8 @@ const useVirtualList = <T = any>(list: T[], options: Options<T>) => {
 
   const [targetList, setTargetList] = useState<{ index: number; data: T }[]>([]);
 
+  const [wrapperStyle, setWrapperStyle] = useState<CSSProperties>({});
+
   const getVisibleCount = (containerHeight: number, fromIndex: number) => {
     if (isNumber(itemHeightRef.current)) {
       return Math.ceil(containerHeight / itemHeightRef.current);
@@ -86,9 +89,8 @@ const useVirtualList = <T = any>(list: T[], options: Options<T>) => {
 
   const calculateRange = () => {
     const container = getTargetElement(containerTarget);
-    const wrapper = getTargetElement(wrapperTarget) as HTMLElement;
 
-    if (container && wrapper) {
+    if (container) {
       const { scrollTop, clientHeight } = container;
 
       const offset = getOffset(scrollTop);
@@ -99,8 +101,10 @@ const useVirtualList = <T = any>(list: T[], options: Options<T>) => {
 
       const offsetTop = getDistanceTop(start);
 
-      wrapper.style.height = totalHeight - offsetTop + 'px';
-      wrapper.style.marginTop = offsetTop + 'px';
+      setWrapperStyle({
+        height: totalHeight - offsetTop + 'px',
+        marginTop: offsetTop + 'px',
+      });
 
       setTargetList(
         list.slice(start, end).map((ele, index) => ({
@@ -111,6 +115,13 @@ const useVirtualList = <T = any>(list: T[], options: Options<T>) => {
     }
   };
 
+  useUpdateEffect(() => {
+    const wrapper = getTargetElement(wrapperTarget) as HTMLElement;
+    if (wrapper) {
+      Object.keys(wrapperStyle).forEach((key) => (wrapper.style[key] = wrapperStyle[key]));
+    }
+  }, [wrapperStyle]);
+
   useEffect(() => {
     if (!size?.width || !size?.height) {
       return;