From ba16de7fb22ac61c184a74deba77a2d4b8d60769 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 14 Jan 2022 16:48:08 +0800
Subject: [PATCH 1/4] docs: add controlled preview demo for Image

---
 components/image/demo/controlled-preview.md | 44 +++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 components/image/demo/controlled-preview.md

diff --git a/components/image/demo/controlled-preview.md b/components/image/demo/controlled-preview.md
new file mode 100644
index 000000000000..e13247c1fff6
--- /dev/null
+++ b/components/image/demo/controlled-preview.md
@@ -0,0 +1,44 @@
+---
+order: 7
+title:
+  zh-CN: 受控的预览
+  en-US: Controlled Preview
+---
+
+## zh-CN
+
+可以使预览受控。
+
+## en-US
+
+You can make preview controlled
+
+```jsx
+import React, { useState } from 'react';
+import { Image, Button } from 'antd';
+
+function ImageDemo() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button type="primary" onClick={() => setVisible(true)}>
+        show image preview
+      </Button>
+      <Image
+        width={200}
+        style={{ display: 'none' }}
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
+        preview={{
+          visible,
+          src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          onVisibleChange: visible => {
+            setVisible(visible);
+          },
+        }}
+      />
+    </>
+  );
+}
+
+ReactDOM.render(<ImageDemo />, mountNode);
+```

From cfeaddeb177d142daf9bbb53b35f70d496de34e6 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 14 Jan 2022 16:51:53 +0800
Subject: [PATCH 2/4] test: update snapshot

---
 .../__snapshots__/demo-extend.test.ts.snap    | 51 +++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.js.snap | 51 +++++++++++++++++++
 2 files changed, 102 insertions(+)

diff --git a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0c75544b26ed..e2eebf3e5ba5 100644
--- a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -40,6 +40,57 @@ exports[`renders ./components/image/demo/basic.md extend context correctly 1`] =
 </div>
 `;
 
+exports[`renders ./components/image/demo/controlled-preview.md extend context correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      show image preview
+    </span>
+  </button>,
+  <div
+    class="ant-image"
+    style="width:200px"
+  >
+    <img
+      class="ant-image-img"
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
+      style="display:none"
+    />
+    <div
+      class="ant-image-mask"
+    >
+      <div
+        class="ant-image-mask-info"
+      >
+        <span
+          aria-label="eye"
+          class="anticon anticon-eye"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="eye"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+            />
+          </svg>
+        </span>
+        Preview
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/image/demo/fallback.md extend context correctly 1`] = `
 <div
   class="ant-image"
diff --git a/components/image/__tests__/__snapshots__/demo.test.js.snap b/components/image/__tests__/__snapshots__/demo.test.js.snap
index 39b5c718a616..82647906af1b 100644
--- a/components/image/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/image/__tests__/__snapshots__/demo.test.js.snap
@@ -40,6 +40,57 @@ exports[`renders ./components/image/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/image/demo/controlled-preview.md correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      show image preview
+    </span>
+  </button>,
+  <div
+    class="ant-image"
+    style="width:200px"
+  >
+    <img
+      class="ant-image-img"
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
+      style="display:none"
+    />
+    <div
+      class="ant-image-mask"
+    >
+      <div
+        class="ant-image-mask-info"
+      >
+        <span
+          aria-label="eye"
+          class="anticon anticon-eye"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="eye"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+            />
+          </svg>
+        </span>
+        Preview
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/image/demo/fallback.md correctly 1`] = `
 <div
   class="ant-image"

From dbd600fc3cc7a9e3b3bbb60e785659590b0a73e7 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 14 Jan 2022 17:00:48 +0800
Subject: [PATCH 3/4] test: fix lint error

---
 components/image/demo/controlled-preview.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/image/demo/controlled-preview.md b/components/image/demo/controlled-preview.md
index e13247c1fff6..17457d0115c4 100644
--- a/components/image/demo/controlled-preview.md
+++ b/components/image/demo/controlled-preview.md
@@ -31,8 +31,8 @@ function ImageDemo() {
         preview={{
           visible,
           src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-          onVisibleChange: visible => {
-            setVisible(visible);
+          onVisibleChange: value => {
+            setVisible(value);
           },
         }}
       />

From 4140cff48a6abda854972243a819f2e035acf306 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 14 Jan 2022 18:03:39 +0800
Subject: [PATCH 4/4] docs: update text

---
 components/image/demo/controlled-preview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/image/demo/controlled-preview.md b/components/image/demo/controlled-preview.md
index 17457d0115c4..b9e5f3f35758 100644
--- a/components/image/demo/controlled-preview.md
+++ b/components/image/demo/controlled-preview.md
@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-You can make preview controlled
+You can make preview controlled.
 
 ```jsx
 import React, { useState } from 'react';