chore: use @rc-component/resize-observer

.gitignore

@@ -7,7 +7,9 @@ lib/
 ~*
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 !tests/__mocks__/rc-util/lib
+!tests/__mocks__/@rc-component/util/lib
 bun.lockb
 
 # umi

examples/animate.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import CSSMotion from 'rc-animate/lib/CSSMotion';
 import classNames from 'classnames';
 import List, { ListRef } from '../src/List';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import './animate.less';
 
 let uuid = 0;
@@ -74,7 +74,7 @@ const MyItem: React.ForwardRefRenderFunction<any, MyItemProps> = (
       motionName="motion"
       motionAppear={motionAppear}
       onAppearStart={getCollapsedHeight}
-      onAppearActive={node => {
+      onAppearActive={(node) => {
         motionRef.current = true;
         return getMaxHeight(node);
       }}
@@ -135,7 +135,7 @@ const Demo = () => {
   const [animating, setAnimating] = React.useState(false);
   const [insertIndex, setInsertIndex] = React.useState<number>();
 
-  const listRef = React.useRef<ListRef>();
+  const listRef = React.useRef<ListRef>(null);
 
   const onClose = (id: string) => {
     setCloseMap({
@@ -145,7 +145,7 @@ const Demo = () => {
   };
 
   const onLeave = (id: string) => {
-    const newData = data.filter(item => item.id !== id);
+    const newData = data.filter((item) => item.id !== id);
     setData(newData);
   };
 
@@ -159,14 +159,14 @@ const Demo = () => {
   }
 
   const onInsertBefore = (id: string) => {
-    const index = data.findIndex(item => item.id === id);
+    const index = data.findIndex((item) => item.id === id);
     const newData = [...data.slice(0, index), genItem(), ...data.slice(index)];
     setInsertIndex(index);
     setData(newData);
     lockForAnimation();
   };
   const onInsertAfter = (id: string) => {
-    const index = data.findIndex(item => item.id === id) + 1;
+    const index = data.findIndex((item) => item.id === id) + 1;
     const newData = [...data.slice(0, index), genItem(), ...data.slice(index)];
     setInsertIndex(index);
     setData(newData);

examples/no-virtual.tsx

@@ -5,9 +5,11 @@ import List from '../src/List';
 interface Item {
   id: number;
   height: number;
+  ref?: React.Ref<HTMLSpanElement>;
 }
 
-const MyItem: React.FC<Item> = ({ id, height }, ref) => {
+const MyItem: React.FC<Item> = (props) => {
+  const { id, height, ref } = props;
   return (
     <span
       ref={ref}
@@ -50,7 +52,7 @@ const Demo = () => {
             boxSizing: 'border-box',
           }}
         >
-          {item => <ForwardMyItem {...(item as any)} />}
+          {(item) => <ForwardMyItem {...(item as any)} />}
         </List>
 
         <h2>Less Count</h2>
@@ -59,12 +61,9 @@ const Demo = () => {
           itemHeight={30}
           height={100}
           itemKey="id"
-          style={{
-            border: '1px solid red',
-            boxSizing: 'border-box',
-          }}
+          style={{ border: '1px solid red', boxSizing: 'border-box' }}
         >
-          {item => <ForwardMyItem {...(item as any)} />}
+          {(item) => <ForwardMyItem {...(item as any)} />}
         </List>
 
         <h2>Less Item Height</h2>
@@ -78,7 +77,7 @@ const Demo = () => {
             boxSizing: 'border-box',
           }}
         >
-          {item => <ForwardMyItem {...(item as any)} />}
+          {(item) => <ForwardMyItem {...(item as any)} />}
         </List>
 
         <h2>Without Height</h2>
@@ -91,7 +90,7 @@ const Demo = () => {
             boxSizing: 'border-box',
           }}
         >
-          {item => <ForwardMyItem {...(item as any)} />}
+          {(item) => <ForwardMyItem {...(item as any)} />}
         </List>
       </div>
     </React.StrictMode>

examples/switch.tsx

@@ -4,9 +4,10 @@ import List from '../src/List';
 
 interface Item {
   id: number;
+  ref?: React.Ref<HTMLSpanElement>;
 }
 
-const MyItem: React.FC<Item> = ({ id }, ref) => (
+const MyItem: React.FC<Item> = ({ id, ref }) => (
   <span
     ref={ref}
     style={{
@@ -39,7 +40,7 @@ const Demo = () => {
   const [height, setHeight] = React.useState(200);
   const [data, setData] = React.useState(getData(20));
   const [fullHeight, setFullHeight] = React.useState(true);
-  const listRef = React.useRef<ListRef>();
+  const listRef = React.useRef<ListRef>(null);
 
   return (
     <React.StrictMode>

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rc-virtual-list",
-  "version": "3.18.1",
+  "name": "@rc-component/virtual-list",
+  "version": "1.0.0",
   "description": "React Virtual List Component",
   "engines": {
     "node": ">=8.x"
@@ -36,9 +36,11 @@
     "test": "rc-test",
     "now-build": "npm run build"
   },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+  "dependencies": {
+    "@babel/runtime": "^7.20.0",
+    "@rc-component/resize-observer": "^1.0.0",
+    "@rc-component/util": "^1.2.0",
+    "classnames": "^2.2.6"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.2",
@@ -47,8 +49,8 @@
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.3",
-    "@types/react": "^18.0.8",
-    "@types/react-dom": "^18.0.3",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@types/warning": "^3.0.0",
     "cheerio": "1.0.0-rc.12",
     "cross-env": "^5.2.0",
@@ -63,14 +65,12 @@
     "np": "^5.0.3",
     "rc-animate": "^2.9.1",
     "rc-test": "^7.0.15",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "typescript": "^5.0.0"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.20.0",
-    "classnames": "^2.2.6",
-    "rc-resize-observer": "^1.0.0",
-    "rc-util": "^5.36.0"
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   }
 }

src/Filler.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ResizeObserver from 'rc-resize-observer';
+import ResizeObserver from '@rc-component/resize-observer';
 import classNames from 'classnames';
 
 export type InnerProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;
@@ -28,73 +28,63 @@ interface FillerProps {
 /**
  * Fill component to provided the scroll content real height.
  */
-const Filler = React.forwardRef(
-  (
-    {
+const Filler = React.forwardRef<HTMLDivElement, FillerProps>((props, ref) => {
+  const { height, offsetY, offsetX, children, prefixCls, onInnerResize, innerProps, rtl, extra } =
+    props;
+
+  let outerStyle: React.CSSProperties = {};
+
+  let innerStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  if (offsetY !== undefined) {
+    // Not set `width` since this will break `sticky: right`
+    outerStyle = {
       height,
-      offsetY,
-      offsetX,
-      children,
-      prefixCls,
-      onInnerResize,
-      innerProps,
-      rtl,
-      extra,
-    }: FillerProps,
-    ref: React.Ref<HTMLDivElement>,
-  ) => {
-    let outerStyle: React.CSSProperties = {};
-
-    let innerStyle: React.CSSProperties = {
-      display: 'flex',
-      flexDirection: 'column',
+      position: 'relative',
+      overflow: 'hidden',
     };
 
-    if (offsetY !== undefined) {
-      // Not set `width` since this will break `sticky: right`
-      outerStyle = {
-        height,
-        position: 'relative',
-        overflow: 'hidden',
-      };
-
-      innerStyle = {
-        ...innerStyle,
-        transform: `translateY(${offsetY}px)`,
-        [rtl ? 'marginRight' : 'marginLeft']: -offsetX,
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        top: 0,
-      };
-    }
-
-    return (
-      <div style={outerStyle}>
-        <ResizeObserver
-          onResize={({ offsetHeight }) => {
-            if (offsetHeight && onInnerResize) {
-              onInnerResize();
-            }
-          }}
+    innerStyle = {
+      ...innerStyle,
+      transform: `translateY(${offsetY}px)`,
+      [rtl ? 'marginRight' : 'marginLeft']: -offsetX,
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+    };
+  }
+
+  return (
+    <div style={outerStyle}>
+      <ResizeObserver
+        onResize={({ offsetHeight }) => {
+          if (offsetHeight && onInnerResize) {
+            onInnerResize();
+          }
+        }}
+      >
+        <div
+          style={innerStyle}
+          className={classNames({
+            [`${prefixCls}-holder-inner`]: prefixCls,
+          })}
+          ref={ref}
+          {...innerProps}
         >
-          <div
-            style={innerStyle}
-            className={classNames({
-              [`${prefixCls}-holder-inner`]: prefixCls,
-            })}
-            ref={ref}
-            {...innerProps}
-          >
-            {children}
-            {extra}
-          </div>
-        </ResizeObserver>
-      </div>
-    );
-  },
-);
-
-Filler.displayName = 'Filler';
+          {children}
+          {extra}
+        </div>
+      </ResizeObserver>
+    </div>
+  );
+});
+
+if (process.env.NODE_ENV !== 'production') {
+  Filler.displayName = 'Filler';
+}
 
 export default Filler;

src/Item.tsx

@@ -6,11 +6,10 @@ export interface ItemProps {
 }
 
 export function Item({ children, setRef }: ItemProps) {
-  const refFunc = React.useCallback(node => {
+  const refFunc = React.useCallback((node: HTMLElement) => {
     setRef(node);
   }, []);
-
-  return React.cloneElement(children, {
+  return React.cloneElement<any>(children, {
     ref: refFunc,
   });
 }