feat: Watermark support inherit to disable passing (ant-design#45319)

* docs: init * feat: support inherit * test: update snapshot
ammar-knowledge · Oct 13, 2023 · 44e1493 · 44e1493
1 parent eaf4949
commit 44e1493
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 8 deletions.
diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1249,7 +1249,7 @@ Array [
         type="button"
       >
         <span>
-          Show Modal
+          Show in Modal
         </span>
       </button>
     </div>
@@ -1261,10 +1261,30 @@ Array [
         type="button"
       >
         <span>
-          Show Drawer
+          Show in Drawer
         </span>
       </button>
     </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+          Not Show in Drawer
+        </span>
+      </button>
+    </div>
+  </div>,
+  <div
+    class=""
+    style="position: relative;"
+  >
+    <div
+      style="z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background-repeat: repeat; background-position: 0px 0px; background-image: url('data:image/png;base64,00'); background-size: 218px;"
+    />
   </div>,
   <div
     class=""

diff --git a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
@@ -810,7 +810,7 @@ Array [
         type="button"
       >
         <span>
-          Show Modal
+          Show in Modal
         </span>
       </button>
     </div>
@@ -822,7 +822,19 @@ Array [
         type="button"
       >
         <span>
-          Show Drawer
+          Show in Drawer
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+          Not Show in Drawer
         </span>
       </button>
     </div>
@@ -831,5 +843,9 @@ Array [
     class=""
     style="position:relative"
   />,
+  <div
+    class=""
+    style="position:relative"
+  />,
 ]
 `;
diff --git a/components/watermark/__tests__/index.test.tsx b/components/watermark/__tests__/index.test.tsx
@@ -134,6 +134,19 @@ describe('Watermark', () => {
       <Drawer open />,
       () => document.body.querySelector('.ant-drawer-content')!.lastChild!,
     );
+
+    it('inherit = false', async () => {
+      render(
+        <Watermark inherit={false}>
+          <Drawer open />
+        </Watermark>,
+      );
+      await waitFakeTimer();
+
+      expect(document.body.querySelector('.ant-drawer-content')!.lastChild).toHaveClass(
+        'ant-drawer-wrapper-body',
+      );
+    });
   });
 
   it('should not crash if content is empty string', async () => {

diff --git a/components/watermark/demo/portal.tsx b/components/watermark/demo/portal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Watermark, Modal, Drawer, Button, Space } from 'antd';
+import { Button, Drawer, Modal, Space, Watermark } from 'antd';
 
 const placeholder = (
   <div
@@ -18,15 +18,18 @@ const placeholder = (
 const App: React.FC = () => {
   const [showModal, setShowModal] = React.useState(false);
   const [showDrawer, setShowDrawer] = React.useState(false);
+  const [showDrawer2, setShowDrawer2] = React.useState(false);
 
   const closeModal = () => setShowModal(false);
   const closeDrawer = () => setShowDrawer(false);
+  const closeDrawer2 = () => setShowDrawer2(false);
 
   return (
     <>
       <Space>
-        <Button onClick={() => setShowModal(true)}>Show Modal</Button>
-        <Button onClick={() => setShowDrawer(true)}>Show Drawer</Button>
+        <Button onClick={() => setShowModal(true)}>Show in Modal</Button>
+        <Button onClick={() => setShowDrawer(true)}>Show in Drawer</Button>
+        <Button onClick={() => setShowDrawer2(true)}>Not Show in Drawer</Button>
       </Space>
 
       <Watermark content="Ant Design">
@@ -43,6 +46,11 @@ const App: React.FC = () => {
           {placeholder}
         </Drawer>
       </Watermark>
+      <Watermark content="Ant Design" inherit={false}>
+        <Drawer destroyOnClose open={showDrawer2} title="Drawer" onClose={closeDrawer2}>
+          {placeholder}
+        </Drawer>
+      </Watermark>
     </>
   );
 };

diff --git a/components/watermark/index.en-US.md b/components/watermark/index.en-US.md
@@ -34,6 +34,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | --- | --- | --- | --- | --- |
 | width | The width of the watermark, the default value of `content` is its own width | number | 120 |  |
 | height | The height of the watermark, the default value of `content` is its own height | number | 64 |  |
+| inherit | Pass the watermark to the pop-up component such as Modal, Drawer | boolean | true | 5.11.0 |
 | rotate | When the watermark is drawn, the rotation Angle, unit `°` | number | -22 |  |
 | zIndex | The z-index of the appended watermark element | number | 9 |  |
 | image | Image source, it is recommended to export 2x or 3x image, high priority (support base64 format) | string | - |  |

diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx
@@ -31,6 +31,7 @@ export interface WatermarkProps {
   gap?: [number, number];
   offset?: [number, number];
   children?: React.ReactNode;
+  inherit?: boolean;
 }
 
 /**
@@ -60,6 +61,7 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
     gap = [100, 100],
     offset,
     children,
+    inherit = true,
   } = props;
   const [, token] = useToken();
   const {
@@ -267,13 +269,19 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
   );
 
   // ============================= Render =============================
+  const childNode = inherit ? (
+    <WatermarkContext.Provider value={watermarkContext}>{children}</WatermarkContext.Provider>
+  ) : (
+    children
+  );
+
   return (
     <div
       ref={setContainer}
       className={classNames(className, rootClassName)}
       style={{ position: 'relative', ...style }}
     >
-      <WatermarkContext.Provider value={watermarkContext}>{children}</WatermarkContext.Provider>
+      {childNode}
     </div>
   );
 };

diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md
@@ -36,6 +36,7 @@ tag: New
 | --- | --- | --- | --- | --- |
 | width | 水印的宽度，`content` 的默认值为自身的宽度 | number | 120 |  |
 | height | 水印的高度，`content` 的默认值为自身的高度 | number | 64 |  |
+| inherit | 是否将水印传导给弹出组件如 Modal、Drawer | boolean | true | 5.11.0 |
 | rotate | 水印绘制时，旋转的角度，单位 `°` | number | -22 |  |
 | zIndex | 追加的水印元素的 z-index | number | 9 |  |
 | image | 图片源，建议导出 2 倍或 3 倍图，优先级高 (支持 base64 格式) | string | - |  |