feat: Remove findDOMNode (#216)

* feat: Remove findDOMNode

* test: update test case

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>

Author: Zyf665

package.json

@@ -43,7 +43,7 @@
   "dependencies": {
     "@babel/runtime": "^7.20.7",
     "classnames": "^2.2.1",
-    "rc-util": "^5.44.1",
+    "@rc-component/util": "^1.2.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {

src/SingleObserver/DomWrapper.tsx

@@ -1,10 +1,9 @@
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
-import { supportRef, useComposeRef, getNodeRef } from 'rc-util/lib/ref';
+import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
+import { supportRef, useComposeRef, getNodeRef } from '@rc-component/util/lib/ref';
 import * as React from 'react';
 import type { ResizeObserverProps } from '..';
 import { CollectionContext } from '../Collection';
 import { observe, unobserve } from '../utils/observerUtil';
-import DomWrapper from './DomWrapper';
 
 export interface SingleObserverProps extends ResizeObserverProps {
   children: React.ReactElement | ((ref: React.RefObject<Element>) => React.ReactElement);
@@ -13,7 +12,6 @@ export interface SingleObserverProps extends ResizeObserverProps {
 function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>) {
   const { children, disabled } = props;
   const elementRef = React.useRef<Element>(null);
-  const wrapperRef = React.useRef<DomWrapper>(null);
 
   const onCollectionResize = React.useContext(CollectionContext);
 
@@ -36,15 +34,12 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
 
   const mergedRef = useComposeRef(originRef, elementRef);
 
-  const getDom = () =>
-    findDOMNode<HTMLElement>(elementRef.current) ||
-    // Support `nativeElement` format
-    (elementRef.current && typeof elementRef.current === 'object'
-      ? findDOMNode<HTMLElement>((elementRef.current as any)?.nativeElement)
-      : null) ||
-    findDOMNode<HTMLElement>(wrapperRef.current);
+  const getDomElement = () => {
+    return getDOM( elementRef.current ) as HTMLElement
+  }
+  
 
-  React.useImperativeHandle(ref, () => getDom());
+  React.useImperativeHandle(ref, () => getDomElement());
 
   // =========================== Observe ============================
   const propsRef = React.useRef<SingleObserverProps>(props);
@@ -98,7 +93,7 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
 
   // Dynamic observe
   React.useEffect(() => {
-    const currentElement: HTMLElement = getDom();
+    const currentElement: HTMLElement = getDomElement();
 
     if (currentElement && !disabled) {
       observe(currentElement, onInternalResize);
@@ -109,13 +104,11 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
 
   // ============================ Render ============================
   return (
-    <DomWrapper ref={wrapperRef}>
-      {canRef
+      canRef
         ? React.cloneElement(mergedChildren as any, {
             ref: mergedRef,
           })
-        : mergedChildren}
-    </DomWrapper>
+        : mergedChildren
   );
 }
 

src/SingleObserver/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import toArray from 'rc-util/lib/Children/toArray';
-import { warning } from 'rc-util/lib/warning';
+import toArray from '@rc-component/util/lib/Children/toArray';
+import { warning } from '@rc-component/util/lib/warning';
 import SingleObserver from './SingleObserver';
 import { Collection } from './Collection';
 

src/index.tsx

@@ -98,7 +98,6 @@ describe('ResizeObserver', () => {
 
       wrapper.triggerResize();
       await Promise.resolve();
-      expect(wrapper.exists('DomWrapper')).toBeTruthy(); // Dom exist
       expect(onResize).toHaveBeenCalled();
     });
 
@@ -220,7 +219,7 @@ describe('ResizeObserver', () => {
     });
   });
 
-  it('should listen even not ref-able', async () => {
+  it('should not listen even not ref-able', async () => {
     const Wrapper = props => <>{props.children}</>;
     const onResize = jest.fn();
 
@@ -235,7 +234,7 @@ describe('ResizeObserver', () => {
     wrapper.triggerResize();
     await Promise.resolve();
 
-    expect(onResize).toHaveBeenCalled();
+    expect(onResize).not.toHaveBeenCalled();
   });
 
   it('support renderProps', () => {

tests/index.spec.js

@@ -25,7 +25,7 @@ describe('ResizeObserver.ref', () => {
     expect(resizeRef.current).toEqual(container.querySelector('.little'));
   });
 
-  it('ignore invalidate forward', () => {
+  it('should return null when forward ref is invalid', () => {
     const My = React.forwardRef((_, ref) => {
       React.useImperativeHandle(ref, () => 233);
 
@@ -34,12 +34,33 @@ describe('ResizeObserver.ref', () => {
 
     const resizeRef = React.createRef<HTMLDivElement>();
 
+    render(
+      <ResizeObserver ref={resizeRef}>
+        <My />
+      </ResizeObserver>,
+    );
+
+    expect(resizeRef.current).toBeNull();
+  });
+
+  it('should support nativeElement', () => {
+    const My = React.forwardRef((_, ref) => {
+      const domRef = React.useRef<HTMLDivElement>(null);
+      React.useImperativeHandle(ref, () => ({
+        nativeElement: domRef.current,
+      }));
+
+      return <div ref={domRef} className="little" />;
+    });
+
+    const resizeRef = React.createRef<HTMLDivElement>();
+
     const { container } = render(
       <ResizeObserver ref={resizeRef}>
         <My />
       </ResizeObserver>,
     );
 
-    expect(resizeRef.current).toEqual(container.querySelector('.little'));
+    expect(resizeRef.current).toBe(container.querySelector('.little'));
   });
 });