✨ feat(ims-view-pc): add MutateObserver

packages/ims-view-pc/src/components/MutateObserver/MutateObserver.tsx

@@ -0,0 +1,26 @@
+import { useMutateObserver } from '@ims-view/hooks';
+import React, { useLayoutEffect } from 'react';
+import './index.less';
+import type { MutationObserverProps } from './interface';
+
+const MutateObserver: React.FC<MutationObserverProps> = (props) => {
+  const { options, onMutate = () => {}, children } = props;
+
+  const elementRef = React.useRef<HTMLElement>(null);
+
+  const [target, setTarget] = React.useState<HTMLElement>();
+
+  useMutateObserver(target!, onMutate, options);
+
+  useLayoutEffect(() => {
+    setTarget(elementRef.current!);
+  }, []);
+
+  if (!children) {
+    return null;
+  }
+
+  return React.cloneElement(children, { ref: elementRef });
+};
+
+export default MutateObserver;

packages/ims-view-pc/src/components/MutateObserver/demo/index.tsx

@@ -0,0 +1,32 @@
+import { MutateObserver } from 'ims-view-pc';
+import { useEffect, useState } from 'react';
+
+export default function App() {
+  const [className, setClassName] = useState('aaa');
+
+  useEffect(() => {
+    setTimeout(() => setClassName('bbb'), 2000);
+  }, []);
+
+  const callback = function (mutationsList: MutationRecord[]) {
+    console.log(mutationsList);
+  };
+
+  return (
+    <div>
+      <MutateObserver onMutate={callback}>
+        <div id="container">
+          <div className={className}>
+            {className === 'aaa' ? (
+              <div>aaa</div>
+            ) : (
+              <div>
+                <p>bbb</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </MutateObserver>
+    </div>
+  );
+}

packages/ims-view-pc/src/components/MutateObserver/index.less

@@ -0,0 +1,2 @@
+.MutateObserver {
+}

packages/ims-view-pc/src/components/MutateObserver/index.md

@@ -0,0 +1,41 @@
+---
+title: MutateObserver
+description: MutateObserver
+toc: content
+group:
+  title: 其他
+---
+
+# MutateObserver
+
+## 介绍
+
+`MutateObserver` 组件可以将内容渲染到指定的节点上，通常用于弹出层、全局提示等场景。
+
+## 引入
+
+```js
+import { MutateObserver } from 'ims-view-pc';
+```
+
+## 代码演示
+
+<code src='./demo/index.tsx'></code>
+
+## API
+
+### Props
+
+| 参数     | 说明                        | 类型                          | 默认值 |
+| -------- | --------------------------- | ----------------------------- | ------ |
+| options  | MutationObserver 的配置项   | MutationObserverInit          | -      |
+| onMutate | MutationObserver 的回调函数 | (mutations, observer) => void | -      |
+| children | 需要观察的节点              | React.ReactElement            | -      |
+
+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type { MutateObserverProps } from 'ims-view-pc';
+```

packages/ims-view-pc/src/components/MutateObserver/index.tsx

@@ -0,0 +1,2 @@
+import MutateObserver from './MutateObserver';
+export default MutateObserver;

packages/ims-view-pc/src/components/MutateObserver/interface.ts

@@ -0,0 +1,5 @@
+export interface MutationObserverProps {
+  options?: MutationObserverInit;
+  onMutate?: (mutations: MutationRecord[], observer: MutationObserver) => void;
+  children: React.ReactElement;
+}

packages/ims-view-pc/src/index.tsx

@@ -31,6 +31,8 @@ export * from './components/ExportButton/interface';
 export { default as Icon } from './components/Icon';
 export { default as Marker } from './components/Marker';
 export * from './components/Marker/interface';
+export { default as MutateObserver } from './components/MutateObserver';
+export * from './components/MutateObserver/interface';
 export { default as Portal } from './components/Portal';
 export * from './components/Portal/interface';
 export { default as SectionTitle } from './components/SectionTitle';