From 879bc707b5d0fb2797839c9104b3fcc470e4915c Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 14 Jan 2022 18:24:08 +0800
Subject: [PATCH] docs: add controlled preview demo for Image (#33727)

* docs: add controlled preview demo for Image

* test: update snapshot

* test: fix lint error
---
 .../__snapshots__/demo-extend.test.ts.snap    | 51 +++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.js.snap | 51 +++++++++++++++++++
 components/image/demo/controlled-preview.md   | 44 ++++++++++++++++
 3 files changed, 146 insertions(+)
 create mode 100644 components/image/demo/controlled-preview.md

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"
diff --git a/components/image/demo/controlled-preview.md b/components/image/demo/controlled-preview.md
new file mode 100644
index 000000000000..b9e5f3f35758
--- /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: value => {
+            setVisible(value);
+          },
+        }}
+      />
+    </>
+  );
+}
+
+ReactDOM.render(<ImageDemo />, mountNode);
+```