Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: add controlled preview demo for Image #33727

Merged
merged 4 commits into from Jan 14, 2022
Merged

docs: add controlled preview demo for Image #33727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ba16de7
docs: add controlled preview demo for Image
MadCcc Jan 14, 2022
cfeadde
test: update snapshot
MadCcc Jan 14, 2022
dbd600f
test: fix lint error
MadCcc Jan 14, 2022
4140cff
docs: update text
MadCcc Jan 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
51 changes: 51 additions & 0 deletions components/image/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Expand Up @@ -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"
Expand Down
51 changes: 51 additions & 0 deletions components/image/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Expand Up @@ -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"
Expand Down
44 changes: 44 additions & 0 deletions components/image/demo/controlled-preview.md
View file
Open in desktop
@@ -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);
```