refactor: get hooks (#7)

* chore: move

* chore: fix export

* chore: refactor

* chore: update effect deps

Author: zombieJ

src/MutateObserver.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import { supportRef, useComposeRef } from 'rc-util/lib/ref';
+import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import DomWrapper from './wrapper';
+import type { MutationObserverProps } from './interface';
+import useMutateObserver from './useMutateObserver';
+
+const MutateObserver: React.FC<MutationObserverProps> = props => {
+  const { children, options, onMutate = () => {} } = props;
+
+  const callback = useEvent(onMutate);
+
+  const wrapperRef = React.useRef<DomWrapper>(null);
+
+  const elementRef = React.useRef<HTMLElement>(null);
+
+  const canRef = React.isValidElement(children) && supportRef(children);
+
+  const mergedRef = useComposeRef(
+    elementRef,
+    canRef ? (children as any).ref : null,
+  );
+
+  const [target, setTarget] = React.useState<HTMLElement>(null);
+
+  useMutateObserver(target, callback, options);
+
+  // =========================== Effect ===========================
+  // Bind target
+  useLayoutEffect(() => {
+    setTarget(
+      findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current),
+    );
+  });
+
+  // =========================== Render ===========================
+  if (!children) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error('MutationObserver need children props');
+    }
+    return null;
+  }
+
+  return (
+    <DomWrapper ref={wrapperRef}>
+      {canRef
+        ? React.cloneElement(children as any, { ref: mergedRef })
+        : children}
+    </DomWrapper>
+  );
+};
+
+export default MutateObserver;

src/index.tsx

@@ -1,71 +1,6 @@
-import React, { useEffect, useRef } from 'react';
-import { composeRef, supportRef } from 'rc-util/lib/ref';
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
-import useEvent from 'rc-util/lib/hooks/useEvent';
-import DomWrapper from './wrapper';
-import type { MutationObserverProps } from './interface';
+import MutateObserver from './MutateObserver';
+import useMutateObserver from './useMutateObserver';
 
-const defOptions: MutationObserverInit = {
-  subtree: true,
-  childList: true,
-  attributeFilter: ['style', 'class'],
-};
-
-const MutateObserver: React.FC<MutationObserverProps> = props => {
-  const { children, options = defOptions, onMutate = () => {} } = props;
-
-  const callback = useEvent(onMutate);
-
-  const wrapperRef = useRef<DomWrapper>(null);
-
-  const elementRef = React.useRef<HTMLElement>(null);
-
-  const canRef = React.isValidElement(children) && supportRef(children);
-
-  const originRef: React.Ref<Element> = canRef ? (children as any)?.ref : null;
-
-  const mergedRef = React.useMemo<React.Ref<Element>>(
-    () => composeRef<Element>(originRef, elementRef),
-    [originRef, elementRef],
-  );
-
-  useEffect(() => {
-    if (!canUseDom()) {
-      return;
-    }
-
-    let instance: MutationObserver;
-
-    const currentElement =
-      findDOMNode((originRef as any)?.current) ||
-      findDOMNode(wrapperRef?.current);
-
-    if (currentElement && 'MutationObserver' in window) {
-      instance = new MutationObserver(callback);
-      instance.observe(currentElement, options);
-    }
-    return () => {
-      instance?.takeRecords();
-      instance?.disconnect();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options, originRef]);
-
-  if (!children) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.error('MutationObserver need children props');
-    }
-    return null;
-  }
-
-  return (
-    <DomWrapper ref={wrapperRef}>
-      {canRef
-        ? React.cloneElement(children as any, { ref: mergedRef })
-        : children}
-    </DomWrapper>
-  );
-};
+export { useMutateObserver };
 
 export default MutateObserver;

src/useMutateObserver.tsx

@@ -0,0 +1,36 @@
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
+import * as React from 'react';
+
+const defaultOptions: MutationObserverInit = {
+  subtree: true,
+  childList: true,
+  attributeFilter: ['style', 'class'],
+};
+
+export default function useMutateObserver(
+  nodeOrList: HTMLElement | HTMLElement[],
+  callback: MutationCallback,
+  options: MutationObserverInit = defaultOptions,
+) {
+  React.useEffect(() => {
+    if (!canUseDom() || !nodeOrList) {
+      return;
+    }
+
+    let instance: MutationObserver;
+
+    const nodeList = Array.isArray(nodeOrList) ? nodeOrList : [nodeOrList];
+
+    if ('MutationObserver' in window) {
+      instance = new MutationObserver(callback);
+
+      nodeList.forEach(element => {
+        instance.observe(element, options);
+      });
+    }
+    return () => {
+      instance?.takeRecords();
+      instance?.disconnect();
+    };
+  }, [options, nodeOrList]);
+}