feat: support ref track of dom node (#172)

* chore: support ref

* test: add test case

* Update src/SingleObserver/index.tsx

Co-authored-by: kiner-tang(文辉) <[email protected]>

* Update src/index.tsx

Co-authored-by: kiner-tang(文辉) <[email protected]>

---------

Co-authored-by: kiner-tang(文辉) <[email protected]>

Author: zombieJ

src/SingleObserver/index.tsx

@@ -10,7 +10,7 @@ export interface SingleObserverProps extends ResizeObserverProps {
   children: React.ReactElement | ((ref: React.RefObject<Element>) => React.ReactElement);
 }
 
-export default function SingleObserver(props: SingleObserverProps) {
+function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>) {
   const { children, disabled } = props;
   const elementRef = React.useRef<Element>(null);
   const wrapperRef = React.useRef<DomWrapper>(null);
@@ -39,6 +39,11 @@ export default function SingleObserver(props: SingleObserverProps) {
     [originRef, elementRef],
   );
 
+  const getDom = () =>
+    findDOMNode<HTMLElement>(elementRef.current) || findDOMNode<HTMLElement>(wrapperRef.current);
+
+  React.useImperativeHandle(ref, () => getDom());
+
   // =========================== Observe ============================
   const propsRef = React.useRef<SingleObserverProps>(props);
   propsRef.current = props;
@@ -91,8 +96,7 @@ export default function SingleObserver(props: SingleObserverProps) {
 
   // Dynamic observe
   React.useEffect(() => {
-    const currentElement: HTMLElement =
-      findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current);
+    const currentElement: HTMLElement = getDom();
 
     if (currentElement && !disabled) {
       observe(currentElement, onInternalResize);
@@ -112,3 +116,11 @@ export default function SingleObserver(props: SingleObserverProps) {
     </DomWrapper>
   );
 }
+
+const RefSingleObserver = React.forwardRef(SingleObserver);
+
+if (process.env.NODE_ENV !== 'production') {
+  RefSingleObserver.displayName = 'SingleObserver';
+}
+
+export default RefSingleObserver;

src/index.tsx

@@ -24,7 +24,7 @@ export interface ResizeObserverProps {
   onResize?: OnResize;
 }
 
-function ResizeObserver(props: ResizeObserverProps) {
+function ResizeObserver(props: ResizeObserverProps, ref: React.Ref<HTMLElement>) {
   const { children } = props;
   const childNodes = typeof children === 'function' ? [children] : toArray(children);
 
@@ -42,13 +42,23 @@ function ResizeObserver(props: ResizeObserverProps) {
   return childNodes.map((child, index) => {
     const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
     return (
-      <SingleObserver {...props} key={key}>
+      <SingleObserver {...props} key={key} ref={index === 0 ? ref : undefined}>
         {child}
       </SingleObserver>
     );
   }) as any as React.ReactElement;
 }
 
-ResizeObserver.Collection = Collection;
+const RefResizeObserver = React.forwardRef(ResizeObserver) as React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<ResizeObserverProps> & React.RefAttributes<any>
+> & {
+  Collection: typeof Collection;
+};
 
-export default ResizeObserver;
+if (process.env.NODE_ENV !== 'production') {
+  RefResizeObserver.displayName = 'ResizeObserver';
+}
+
+RefResizeObserver.Collection = Collection;
+
+export default RefResizeObserver;

tests/index.spec.js

@@ -245,4 +245,17 @@ describe('ResizeObserver', () => {
 
     expect(wrapper.exists('.block')).toBeTruthy();
   });
+
+  it('ref-able', () => {
+    const domRef = React.createRef();
+
+    const wrapper = mount(
+      <ResizeObserver ref={domRef}>
+        <div className="block" />
+      </ResizeObserver>,
+    );
+
+    expect(domRef.current instanceof HTMLDivElement).toBeTruthy();
+    expect(domRef.current).toBe(wrapper.find('div.block').getDOMNode());
+  });
 });