fix(watermark): 修复行内style引起的无法sticky定位问题 (#2685)

* fix(watermark): 修复行内style引起的无法sticky定位问题

fix #2680

* test(watermark): test modify

* chore: update common

---------

Co-authored-by: Uyarn <[email protected]>

src/watermark/Watermark.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import React, { useCallback, useState, useEffect, useRef } from 'react';
+import classNames from 'classnames';
 import { StyledProps } from '../common';
 import generateBase64Url from '../_common/js/watermark/generateBase64Url';
 import randomMovingStyle from '../_common/js/watermark/randomMovingStyle';
@@ -45,7 +46,6 @@ const Watermark: React.FC<WatermarkProps> = ({
   const clsName = `${classPrefix}-watermark`;
   const [base64Url, setBase64Url] = useState('');
   const styleStr = useRef('');
-  const maskclassName = useRef(className);
   const watermarkRef = useRef<HTMLDivElement>();
   const watermarkImgRef = useRef<HTMLDivElement>();
   const stopObservation = useRef(false);
@@ -82,21 +82,16 @@ const Watermark: React.FC<WatermarkProps> = ({
       right: 0,
       top: 0,
       bottom: 0,
-      width: '100%',
-      height: '100%',
+      width: movable ? `${width}px` : '100%',
+      height: movable ? `${height}px` : '100%',
       backgroundSize: `${gapX + width}px`,
       pointerEvents: 'none',
       backgroundRepeat: movable ? 'no-repeat' : isRepeat ? 'repeat' : 'no-repeat',
       backgroundImage: `url('${base64Url}')`,
       animation: movable ? `watermark infinite ${(moveInterval * 4) / 60}s` : 'none',
       ...style,
     });
-  }, [zIndex, gapX, width, movable, isRepeat, base64Url, moveInterval, style]);
-
-  // 水印节点 - className
-  useEffect(() => {
-    maskclassName.current = className;
-  }, [className]);
+  }, [zIndex, gapX, width, movable, isRepeat, base64Url, moveInterval, style, height]);
 
   // 水印节点 - 渲染
   const renderWatermark = useCallback(() => {
@@ -108,9 +103,6 @@ const Watermark: React.FC<WatermarkProps> = ({
     // 创建新的
     watermarkImgRef.current = document.createElement('div');
     watermarkImgRef.current.setAttribute('style', styleStr.current);
-    if (maskclassName.current) {
-      watermarkImgRef.current.setAttribute('class', maskclassName.current);
-    }
     watermarkRef.current?.append(watermarkImgRef.current);
     // 继续监听
     setTimeout(() => {
@@ -170,7 +162,7 @@ const Watermark: React.FC<WatermarkProps> = ({
   });
 
   return (
-    <div style={{ position: 'relative', overflow: 'hidden' }} className={clsName} ref={watermarkRef}>
+    <div className={classNames([clsName, className])} ref={watermarkRef}>
       {children || content}
     </div>
   );

src/watermark/__tests__/watermark.test.tsx

@@ -59,30 +59,33 @@ describe('Watermark 组件测试', () => {
     child.innerText = 'testing';
     child.id = 'test';
 
+    const watermarkWrapCls = wrapper.container.querySelector('.test-observer');
+    expect(watermarkWrapCls).not.toBeNull();
     const watermarkWrap = wrapper.container.querySelector('.t-watermark');
     const watermarkWrapParent = watermarkWrap.parentElement;
-    const watermarkEle = wrapper.container.querySelector('.test-observer');
+    const watermarkEle = watermarkWrap.querySelectorAll('div')[1];
 
     // 删除了水印wrap元素，还会被立即追加回去
     watermarkWrapParent.removeChild(watermarkWrap);
-    const afterWrapRemove = wrapper.container.querySelector('.t-watermark');
+    const afterWrapRemove = watermarkWrapParent.querySelector('.t-watermark');
     expect(afterWrapRemove).toBeNull();
     await mockDelay(10);
-    const waitAfterWrapRemove = wrapper.container.querySelector('.t-watermark');
+    const waitAfterWrapRemove = watermarkWrapParent.querySelector('.t-watermark');
     expect(waitAfterWrapRemove).not.toBeNull();
 
     // 删除了水印元素，还会被立即追加回去
-    watermarkWrap.removeChild(watermarkEle);
-    const afterMarkRemove = wrapper.container.querySelector('.test-observer');
-    expect(afterMarkRemove).toBeNull();
+    waitAfterWrapRemove.removeChild(watermarkEle);
+    expect(waitAfterWrapRemove.querySelectorAll('div').length).toBe(1);
+    // const afterMarkRemove = waitAfterWrapRemove.querySelectorAll('div')[1];
+    // expect(afterMarkRemove).toBeNull();
     await mockDelay(10);
-    const waitAfterMarkRemove = wrapper.container.querySelector('.test-observer');
+    const waitAfterMarkRemove = waitAfterWrapRemove.querySelectorAll('div')[1];
     expect(waitAfterMarkRemove).not.toBeNull();
 
     // 修改水印元素的属性，会立即还原
     watermarkEle.setAttribute('any', '11');
     await mockDelay(10);
-    const waitAfterAttrChange = wrapper.container.querySelector('.test-observer');
+    const waitAfterAttrChange = watermarkWrap.querySelectorAll('div')[1];
     expect(waitAfterAttrChange.getAttribute('any')).toBeNull();
   });
 });

src/watermark/index.ts

@@ -1,6 +1,9 @@
 import _Watermark from './Watermark';
 
+import './style/index.js';
+
 export type { WatermarkProps } from './Watermark';
+
 export * from './type';
 
 export const Watermark = _Watermark;

src/watermark/style/css.js

@@ -0,0 +1 @@
+import './index.css';

src/watermark/style/index.js

@@ -0,0 +1 @@
+import '../../_common/style/web/components/watermark/_index.less';