fix(components/virtual-list): 修复children 数量变化时不会刷新预设高度的问题

js-tool-pack · Feb 13, 2024 · 074681c · 074681c
1 parent e1d3ef9
commit 074681c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/packages/components/src/virtual-list/VirtualList.tsx b/packages/components/src/virtual-list/VirtualList.tsx
@@ -67,6 +67,10 @@ export const VirtualList: React.FC<VirtualListProps> = React.forwardRef<
     });
   }, [childList, offsets]);
 
+  useEffect(() => {
+    autoFillLayoutRef.current = true;
+  }, [childList.length]);
+
   useEffect(() => {
     if (!autoFillLayoutRef.current) return;
     const [start, end] = offsets;

diff --git a/packages/components/src/virtual-list/demo/dynamic-size.tsx b/packages/components/src/virtual-list/demo/dynamic-size.tsx
@@ -2,15 +2,32 @@
  * title: 动态尺寸
  */
 
-import { VirtualList, Alert } from '@tool-pack/react-ui';
-import React from 'react';
-
-const length = 100;
+import { VirtualList, Select, Alert } from '@tool-pack/react-ui';
+import React, { useState } from 'react';
 
+const options = [
+  { label: 100, value: 100 },
+  { label: 500, value: 500 },
+  { label: 1000, value: 1000 },
+  { label: 5000, value: 5000 },
+  { label: 10000, value: 10000 },
+];
 const App: React.FC = () => {
+  const [num, setNum] = useState(100);
   return (
     <>
-      <h3>列表内含 {length} 个不定高度 Alert 组件</h3>
+      item 数量：
+      <Select
+        attrs={{
+          style: { display: 'inline-flex', minWidth: '100px' },
+        }}
+        onChange={setNum}
+        options={options}
+        size="small"
+        value={num}
+      />
+      <br />
+      <br />
       <VirtualList
         attrs={{
           style: {
@@ -19,9 +36,9 @@ const App: React.FC = () => {
           },
         }}
       >
-        {Array.from({ length }).map((_, i) => (
+        {Array.from({ length: num }).map((_, i) => (
           <Alert title={i} key={i}>
-            {String(i).repeat(~~(Math.random() * 500))}
+            {(i + ' ').repeat(~~(Math.random() * 500))}
           </Alert>
         ))}
       </VirtualList>