mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 23:59:12 +08:00
ec76041584
* chore: watermark add utils * feat: Support watermark interleaved layout * docs: add watermark docs * docs: add watermark demo * test: add watermark test * test: add watermark snapshot * feat: The watermark is staggered by default
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
|
|
export default function useMutationObserver() {
|
|
const instance = useRef<MutationObserver>();
|
|
|
|
const destroyObserver = () => {
|
|
if (instance.current) {
|
|
instance.current.takeRecords();
|
|
instance.current.disconnect();
|
|
instance.current = undefined;
|
|
}
|
|
};
|
|
|
|
const createObserver = (target: Node, callback: MutationCallback) => {
|
|
if (MutationObserver) {
|
|
destroyObserver();
|
|
instance.current = new MutationObserver(callback);
|
|
instance.current.observe(target, {
|
|
childList: true,
|
|
subtree: true,
|
|
attributeFilter: ['style', 'class'],
|
|
});
|
|
}
|
|
};
|
|
|
|
useEffect(() => destroyObserver, []);
|
|
|
|
const reRendering = (mutation: MutationRecord, watermarkElement?: HTMLElement) => {
|
|
let flag = false;
|
|
// Whether to delete the watermark node
|
|
if (mutation.removedNodes.length) {
|
|
flag = Array.from(mutation.removedNodes).some((node) => node === watermarkElement);
|
|
}
|
|
// Whether the watermark dom property value has been modified
|
|
if (mutation.type === 'attributes' && mutation.target === watermarkElement) {
|
|
flag = true;
|
|
}
|
|
return flag;
|
|
};
|
|
|
|
return { createObserver, destroyObserver, reRendering };
|
|
}
|