Watermark container size changes, resulting in incomplete display or disappearance of watermarks

components/watermark/index.tsx

@@ -116,7 +116,8 @@
 
  // Used for nest case like Modal, Drawer
  const [subElements, setSubElements] = React.useState(new Set<HTMLElement>());
-
+ // Used for re-rendering the watermark Container
+ const [containerKey, setContainerKey] = React.useState(0);
  // Nest elements should also support watermark
  const targetElements = React.useMemo(() => {
  const list = container ? [container] : [];
@@ -207,7 +208,8 @@
 
  // ============================= Effect =============================
  // Append watermark to the container
- const [appendWatermark, removeWatermark, isWatermarkEle] = useWatermark(markStyle);
+ const [appendWatermark, removeWatermark, isWatermarkEle, isWatermarkContainer] =
+ useWatermark(markStyle);
 
  useEffect(() => {
  if (watermarkInfo) {
@@ -222,6 +224,8 @@
  mutations.forEach((mutation) => {
  if (reRendering(mutation, isWatermarkEle)) {
  syncWatermark();
+ } else if (reRendering(mutation, isWatermarkContainer)) {
+ setContainerKey((x) => x + 1);
  }
  });
  };
@@ -280,6 +284,7 @@
 
  return (
  <div
+ key={containerKey}
  ref={setContainer}
  className={classNames(className, rootClassName)}
  style={{ position: 'relative', ...style }}

components/watermark/useWatermark.ts

@@ -26,6 +26,7 @@ export default function useWatermark(
  appendWatermark: AppendWatermark,
  removeWatermark: (container: HTMLElement) => void,
  isWatermarkEle: (ele: Node) => boolean,
+ isWatermarkContainer: (ele: Node) => boolean,
 ] {
  const [watermarkMap] = React.useState(() => new Map<HTMLElement, HTMLDivElement>());
 
@@ -70,5 +71,7 @@ export default function useWatermark(
 
  const isWatermarkEle = (ele: any) => Array.from(watermarkMap.values()).includes(ele);
 
- return [appendWatermark, removeWatermark, isWatermarkEle];
+ const isWatermarkContainer = (ele: any) => Array.from(watermarkMap.keys()).includes(ele);
+
+ return [appendWatermark, removeWatermark, isWatermarkEle, isWatermarkContainer];
 }