chore: use @rc-component/resize-observer

Author: li-jia-nan

.gitignore

@@ -7,7 +7,8 @@ lib/
 ~*
 yarn.lock
 package-lock.json
-!tests/__mocks__/rc-util/lib
+pnpm-lock.yaml
+!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);

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'>;
@@ -95,6 +95,8 @@ const Filler = React.forwardRef(
   },
 );
 
-Filler.displayName = 'Filler';
+if (process.env.NODE_ENV !== 'production') {
+  Filler.displayName = 'Filler';
+}
 
 export default Filler;

src/List.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
-import type { ResizeObserverProps } from 'rc-resize-observer';
-import ResizeObserver from 'rc-resize-observer';
-import { useEvent } from 'rc-util';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import type { ResizeObserverProps } from '@rc-component/resize-observer';
+import ResizeObserver from '@rc-component/resize-observer';
+import { useEvent } from '@rc-component/util';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
@@ -148,9 +148,9 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   const mergedClassName = classNames(prefixCls, { [`${prefixCls}-rtl`]: isRTL }, className);
   const mergedData = data || EMPTY_DATA;
-  const componentRef = useRef<HTMLDivElement>();
-  const fillerInnerRef = useRef<HTMLDivElement>();
-  const containerRef = useRef<HTMLDivElement>();
+  const componentRef = useRef<HTMLDivElement>(null);
+  const fillerInnerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   // =============================== Item Key ===============================
 
@@ -190,7 +190,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   // Put ref here since the range is generate by follow
   const rangeRef = useRef({ start: 0, end: mergedData.length });
 
-  const diffItemRef = useRef<T>();
+  const diffItemRef = useRef<T>(null);
   const [diffItem] = useDiffItem(mergedData, getKey);
   diffItemRef.current = diffItem;
 
@@ -303,8 +303,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   };
 
   // Hack on scrollbar to enable flash call
-  const verticalScrollBarRef = useRef<ScrollBarRef>();
-  const horizontalScrollBarRef = useRef<ScrollBarRef>();
+  const verticalScrollBarRef = useRef<ScrollBarRef>(null);
+  const horizontalScrollBarRef = useRef<ScrollBarRef>(null);
 
   const horizontalScrollBarSpinSize = React.useMemo(
     () => getSpinSize(size.width, scrollWidth),
@@ -587,17 +587,15 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   }
 
   const containerProps: React.HTMLAttributes<HTMLDivElement> = {};
+
   if (isRTL) {
     containerProps.dir = 'rtl';
   }
 
   return (
     <div
       ref={containerRef}
-      style={{
-        ...style,
-        position: 'relative',
-      }}
+      style={{ ...style, position: 'relative' }}
       className={mergedClassName}
       {...containerProps}
       {...restProps}
@@ -669,7 +667,9 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
 const List = React.forwardRef<ListRef, ListProps<any>>(RawList);
 
-List.displayName = 'List';
+if (process.env.NODE_ENV !== 'production') {
+  List.displayName = 'List';
+}
 
 export default List as <Item = any>(
   props: ListProps<Item> & { ref?: React.Ref<ListRef> },

src/ScrollBar.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import raf from 'rc-util/lib/raf';
+import raf from '@rc-component/util/lib/raf';
 import * as React from 'react';
 import { getPageXY } from './hooks/useScrollDrag';
 
@@ -49,12 +49,12 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   const isLTR = !rtl;
 
   // ========================= Refs =========================
-  const scrollbarRef = React.useRef<HTMLDivElement>();
-  const thumbRef = React.useRef<HTMLDivElement>();
+  const scrollbarRef = React.useRef<HTMLDivElement>(null);
+  const thumbRef = React.useRef<HTMLDivElement>(null);
 
   // ======================= Visible ========================
   const [visible, setVisible] = React.useState(showScrollBar);
-  const visibleTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const visibleTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);
 
   const delayHidden = () => {
     if (showScrollBar === true || showScrollBar === false) return;
@@ -120,9 +120,9 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   }, []);
 
   // Pass to effect
-  const enableScrollRangeRef = React.useRef<number>();
+  const enableScrollRangeRef = React.useRef<number>(null);
   enableScrollRangeRef.current = enableScrollRange;
-  const enableOffsetRangeRef = React.useRef<number>();
+  const enableOffsetRangeRef = React.useRef<number>(null);
   enableOffsetRangeRef.current = enableOffsetRange;
 
   React.useEffect(() => {

src/hooks/useFrameWheel.ts

@@ -1,4 +1,4 @@
-import raf from 'rc-util/lib/raf';
+import raf from '@rc-component/util/lib/raf';
 import { useRef } from 'react';
 import isFF from '../utils/isFirefox';
 import useOriginScroll from './useOriginScroll';

src/hooks/useHeights.tsx

@@ -1,4 +1,4 @@
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
+import findDOMNode from '@rc-component/util/lib/Dom/findDOMNode';
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import type { GetKey } from '../interface';

src/hooks/useMobileTouchMove.ts

@@ -1,4 +1,4 @@
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import type * as React from 'react';
 import { useRef } from 'react';
 

src/hooks/useScrollDrag.ts

@@ -1,4 +1,4 @@
-import raf from 'rc-util/lib/raf';
+import raf from '@rc-component/util/lib/raf';
 import * as React from 'react';
 
 function smoothScrollOffset(offset: number) {

src/hooks/useScrollTo.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable no-param-reassign */
 import * as React from 'react';
-import raf from 'rc-util/lib/raf';
+import raf from '@rc-component/util/lib/raf';
 import type { GetKey } from '../interface';
 import type CacheMap from '../utils/CacheMap';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import { warning } from 'rc-util';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
+import { warning } from '@rc-component/util';
 
 const MAX_TIMES = 10;
 
@@ -37,7 +37,7 @@ export default function useScrollTo<T>(
   syncScrollTop: (newTop: number) => void,
   triggerFlash: () => void,
 ): (arg: number | ScrollTarget) => void {
-  const scrollRef = React.useRef<number>();
+  const scrollRef = React.useRef<number>(null);
 
   const [syncState, setSyncState] = React.useState<{
     times: number;

src/mock.tsx

@@ -8,6 +8,8 @@ const List = React.forwardRef((props: ListProps<any>, ref: React.Ref<ListRef>) =
   props: React.PropsWithChildren<ListProps<Item>> & { ref?: React.Ref<ListRef> },
 ) => React.ReactElement;
 
-(List as any).displayName = 'List';
+if (process.env.NODE_ENV !== 'production') {
+  (List as any).displayName = 'List';
+}
 
 export default List;

tests/scroll.test.js

@@ -1,8 +1,8 @@
 import '@testing-library/jest-dom';
 import { act, createEvent, fireEvent, render } from '@testing-library/react';
 import { mount } from 'enzyme';
-import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
-import { resetWarned } from 'rc-util/lib/warning';
+import { _rs as onLibResize } from '@rc-component/resize-observer/lib/utils/observerUtil';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import List from '../src';
 import { spyElementPrototypes } from './utils/domHook';

tests/scrollWidth.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { act, fireEvent, render } from '@testing-library/react';
-import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { _rs as onLibResize } from '@rc-component/resize-observer/lib/utils/observerUtil';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import type { ListRef } from '../src';
 import List, { type ListProps } from '../src';