Merge pull request #1 from react-component/MutateObserver

feat: Mutate observer

Author: zombieJ

README.md

@@ -1,4 +1,4 @@
-# rc-portal
+# rc-mutate-observer
 
 React 18 supported Portal Component.
 
@@ -31,11 +31,21 @@ open http://localhost:8000
 
 ## Usage
 
-```js | pure
-import Portal from 'rc-portal';
+```tsx
+import React from 'react';
+import MutateObserver from './src';
 
-const Demo = () => {
-  return <Portal open>Hello World</Portal>;
+const onMutate = (mutations: MutationRecord[], observer: MutationObserver) => {
+  console.log(mutation);
+  console.log(observer);
+};
+
+const Demo: React.FC = () => {
+  return (
+    <MutateObserver onMutate={onMutate}>
+      <div>test</div>
+    </MutateObserver>
+  );
 };
 
 export default Demo;
@@ -47,8 +57,7 @@ We use typescript to create the Type definition. You can view directly in IDE. B
 
 ### Portal
 
-| Prop         | Description                        | Type                     | Default       |
-| ------------ | ---------------------------------- | ------------------------ | ------------- |
-| getContainer | Customize portal container element | Element \| () => Element | document.body |
-| open         | Show the portal                    | boolean                  | false         |
-| autoLock     | Lock screen scroll when open       | boolean                  | false         |
+| Prop     | Description                                                                                                      | Type                 | Default |
+| -------- | ---------------------------------------------------------------------------------------------------------------- | -------------------- | ------- |
+| onMutate | A function which will be called on each DOM change that qualifies given the observed node or subtree and options | MutationCallback     | -       |
+| options  | An object providing options that describe which DOM mutations should be reported to mutationObserver's callback  | MutationObserverInit | -       |

docs/demo/basic.md

@@ -1,4 +1,3 @@
 ## basic
 
-
 <code src="../examples/basic.tsx" />

docs/demo/getContainer.md

@@ -1,58 +1,20 @@
-import React, { version } from 'react';
-import classNames from 'classnames';
-import Portal from '../../src';
-import './basic.less';
+import MutateObserver from '../../src';
+import React, { useCallback } from 'react';
 
-export default () => {
-  const [show, setShow] = React.useState(true);
-  const [customizeContainer, setCustomizeContainer] = React.useState(false);
-  const [lock, setLock] = React.useState(true);
+const App: React.FC = () => {
+  const [flag, setFlag] = React.useState<boolean>(true);
 
-  const divRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(
-    () => () => {
-      console.log('Demo unmount!!');
-    },
-    [],
-  );
-
-  const getContainer = customizeContainer ? () => divRef.current : undefined;
-  const contentCls = customizeContainer ? '' : 'abs';
+  const onMutate = useCallback((mutations: MutationRecord[]) => {
+    console.log(mutations);
+  }, []);
 
   return (
-    <React.StrictMode>
-      <div style={{ height: '200vh' }}>
-        <div style={{ border: '2px solid red' }}>
-          Real Version: {version}
-          <button onClick={() => setShow(!show)}>
-            show: {show.toString()}
-          </button>
-          <button onClick={() => setCustomizeContainer(!customizeContainer)}>
-            customize container: {customizeContainer.toString()}
-          </button>
-          <button onClick={() => setLock(!lock)}>
-            lock scroll: {lock.toString()}
-          </button>
-          <div
-            id="customize"
-            ref={divRef}
-            style={{ border: '1px solid green', minHeight: 10 }}
-          />
-        </div>
-
-        <Portal open={show} getContainer={getContainer} autoLock={lock}>
-          <p className={classNames(contentCls, 'root')}>Hello Root</p>
-          <Portal open={show} getContainer={getContainer} autoLock={lock}>
-            <p className={classNames(contentCls, 'parent')}>Hello Parent</p>
-            <Portal open={show} getContainer={getContainer} autoLock={lock}>
-              <p className={classNames(contentCls, 'children')}>
-                Hello Children
-              </p>
-            </Portal>
-          </Portal>
-        </Portal>
-      </div>
-    </React.StrictMode>
+    <MutateObserver onMutate={onMutate}>
+      <button className={flag ? 'aaa' : 'bbb'} onClick={() => setFlag(!flag)}>
+        click
+      </button>
+    </MutateObserver>
   );
 };
+
+export default App;

docs/examples/basic.less

@@ -1,5 +1,5 @@
 ---
-title: rc-portal
+title: rc-mutate-observer
 ---
 
 <embed src="../README.md"></embed>

docs/examples/basic.tsx

@@ -1,22 +1,22 @@
 {
-  "name": "@rc-component/portal",
-  "version": "1.0.3",
-  "description": "React Portal Component",
+  "name": "@rc-component/mutate-observer",
+  "version": "0.0.1",
+  "description": "React MutateObserver Component",
   "keywords": [
     "react",
     "react-component",
-    "react-portal"
+    "mutate-observer"
   ],
-  "homepage": "https://github.com/react-component/portal",
+  "homepage": "https://github.com/react-component/mutate-observer",
   "bugs": {
-    "url": "https://github.com/react-component/portal/issues"
+    "url": "https://github.com/react-component/mutate-observer/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/react-component/portal.git"
+    "url": "https://github.com/react-component/mutate-observer.git"
   },
   "license": "MIT",
-  "author": "smith3816@gmail.com",
+  "author": "574980606@qq.com",
   "main": "./lib/index",
   "module": "./es/index",
   "typings": "es/index.d.ts",