mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
feat(Image): imageRender、toolbarRender、onTransform、items、minScale、max… (#43075)
* feat(Image): imageRender、toolbarRender、onTransform、items、minScale、maxScale * test: update snapshots * demo: revokeObjectURL url * docs: update * docs: update * docs: update * fix: revert style * docs: update md
This commit is contained in:
daisy
GitHub
parent
326de2dc05
commit
ab0103f33a
@ -298,6 +298,47 @@ exports[`renders components/image/demo/fallback.tsx extend context correctly 1`]
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/image/demo/imageRender.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-image"
|
||||
style="width: 200px;"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
width="200"
|
||||
/>
|
||||
<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/placeholder.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
@ -576,158 +617,44 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders components/image/demo/preview-group-visible.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-image"
|
||||
style="width: 200px;"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
|
||||
width="200"
|
||||
/>
|
||||
<div
|
||||
class="ant-image"
|
||||
style="width: 200px;"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
|
||||
width="200"
|
||||
/>
|
||||
<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>,
|
||||
<div
|
||||
style="display: none;"
|
||||
class="ant-image-mask"
|
||||
>
|
||||
<div
|
||||
class="ant-image"
|
||||
class="ant-image-mask-info"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
|
||||
/>
|
||||
<div
|
||||
class="ant-image-mask"
|
||||
<span
|
||||
aria-label="eye"
|
||||
class="anticon anticon-eye"
|
||||
role="img"
|
||||
>
|
||||
<div
|
||||
class="ant-image-mask-info"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="eye"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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>
|
||||
<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
|
||||
class="ant-image"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
|
||||
/>
|
||||
<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>
|
||||
<div
|
||||
class="ant-image"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp"
|
||||
/>
|
||||
<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>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/image/demo/preview-mask.tsx extend context correctly 1`] = `
|
||||
@ -820,3 +747,44 @@ exports[`renders components/image/demo/previewSrc.tsx extend context correctly 1
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/image/demo/toolbarRender.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-image"
|
||||
style="width: 200px;"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
width="200"
|
||||
/>
|
||||
<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>
|
||||
`;
|
||||
|
||||
@ -299,6 +299,47 @@ exports[`renders components/image/demo/fallback.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/image/demo/imageRender.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-image"
|
||||
style="width:200px"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
width="200"
|
||||
/>
|
||||
<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/placeholder.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
@ -577,158 +618,44 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders components/image/demo/preview-group-visible.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-image"
|
||||
style="width:200px"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
|
||||
width="200"
|
||||
/>
|
||||
<div
|
||||
class="ant-image"
|
||||
style="width:200px"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
|
||||
width="200"
|
||||
/>
|
||||
<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>,
|
||||
<div
|
||||
style="display:none"
|
||||
class="ant-image-mask"
|
||||
>
|
||||
<div
|
||||
class="ant-image"
|
||||
class="ant-image-mask-info"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
|
||||
/>
|
||||
<div
|
||||
class="ant-image-mask"
|
||||
<span
|
||||
aria-label="eye"
|
||||
class="anticon anticon-eye"
|
||||
role="img"
|
||||
>
|
||||
<div
|
||||
class="ant-image-mask-info"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="eye"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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>
|
||||
<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
|
||||
class="ant-image"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
|
||||
/>
|
||||
<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>
|
||||
<div
|
||||
class="ant-image"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp"
|
||||
/>
|
||||
<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>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/image/demo/preview-mask.tsx correctly 1`] = `
|
||||
@ -821,3 +748,44 @@ exports[`renders components/image/demo/previewSrc.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/image/demo/toolbarRender.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-image"
|
||||
style="width:200px"
|
||||
>
|
||||
<img
|
||||
class="ant-image-img"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
width="200"
|
||||
/>
|
||||
<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>
|
||||
`;
|
||||
|
||||
@ -52,39 +52,40 @@ exports[`Image Default Group preview props 1`] = `
|
||||
1 / 1
|
||||
</li>
|
||||
<li
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-close"
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipY"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-image-preview-operations-icon"
|
||||
aria-label="swap"
|
||||
class="anticon anticon-swap ant-image-preview-operations-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
data-icon="swap"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
style="transform: rotate(90deg);"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomIn"
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipX"
|
||||
>
|
||||
<span
|
||||
aria-label="zoom-in"
|
||||
class="anticon anticon-zoom-in ant-image-preview-operations-icon"
|
||||
aria-label="swap"
|
||||
class="anticon anticon-swap ant-image-preview-operations-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="zoom-in"
|
||||
data-icon="swap"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
@ -92,59 +93,7 @@ exports[`Image Default Group preview props 1`] = `
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomOut ant-image-preview-operations-operation-disabled"
|
||||
>
|
||||
<span
|
||||
aria-label="zoom-out"
|
||||
class="anticon anticon-zoom-out ant-image-preview-operations-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="zoom-out"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateRight"
|
||||
>
|
||||
<span
|
||||
aria-label="rotate-right"
|
||||
class="anticon anticon-rotate-right ant-image-preview-operations-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="rotate-right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<defs>
|
||||
<style />
|
||||
</defs>
|
||||
<path
|
||||
d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"
|
||||
/>
|
||||
<path
|
||||
d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"
|
||||
d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
@ -179,48 +128,99 @@ exports[`Image Default Group preview props 1`] = `
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipX"
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateRight"
|
||||
>
|
||||
<span
|
||||
aria-label="swap"
|
||||
class="anticon anticon-swap ant-image-preview-operations-icon"
|
||||
aria-label="rotate-right"
|
||||
class="anticon anticon-rotate-right ant-image-preview-operations-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="swap"
|
||||
data-icon="rotate-right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<defs>
|
||||
<style />
|
||||
</defs>
|
||||
<path
|
||||
d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
|
||||
d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"
|
||||
/>
|
||||
<path
|
||||
d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipY"
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomOut ant-image-preview-operations-operation-disabled"
|
||||
>
|
||||
<span
|
||||
aria-label="swap"
|
||||
class="anticon anticon-swap ant-image-preview-operations-icon"
|
||||
aria-label="zoom-out"
|
||||
class="anticon anticon-zoom-out ant-image-preview-operations-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="swap"
|
||||
data-icon="zoom-out"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
style="transform: rotate(90deg);"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
|
||||
d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomIn"
|
||||
>
|
||||
<span
|
||||
aria-label="zoom-in"
|
||||
class="anticon anticon-zoom-in ant-image-preview-operations-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="zoom-in"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-close"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-image-preview-operations-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
7
components/image/demo/imageRender.md
Normal file
7
components/image/demo/imageRender.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
可以自定义预览内容。
|
||||
|
||||
## en-US
|
||||
|
||||
You can customize the preview content.
|
||||
24
components/image/demo/imageRender.tsx
Normal file
24
components/image/demo/imageRender.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { Image } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Image
|
||||
width={200}
|
||||
preview={{
|
||||
imageRender: () => (
|
||||
<video
|
||||
muted
|
||||
width="100%"
|
||||
controls
|
||||
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
|
||||
/>
|
||||
),
|
||||
toolbarRender: (_, { icons: { closeIcon } }) => (
|
||||
<ul className="ant-image-preview-operations">{closeIcon}</ul>
|
||||
),
|
||||
}}
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,26 +1,19 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Image } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Image
|
||||
preview={{ visible: false }}
|
||||
width={200}
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
|
||||
onClick={() => setVisible(true)}
|
||||
/>
|
||||
<div style={{ display: 'none' }}>
|
||||
<Image.PreviewGroup preview={{ visible, onVisibleChange: (vis) => setVisible(vis) }}>
|
||||
<Image src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp" />
|
||||
</Image.PreviewGroup>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const App: React.FC = () => (
|
||||
<Image.PreviewGroup
|
||||
items={[
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||
]}
|
||||
>
|
||||
<Image
|
||||
width={200}
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
|
||||
/>
|
||||
</Image.PreviewGroup>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
7
components/image/demo/toolbarRender.md
Normal file
7
components/image/demo/toolbarRender.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
可以自定义工具栏。
|
||||
|
||||
## en-US
|
||||
|
||||
You can customize the toolbar.
|
||||
60
components/image/demo/toolbarRender.tsx
Normal file
60
components/image/demo/toolbarRender.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
import { Image } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onDownload = () => {
|
||||
fetch(src)
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const url = URL.createObjectURL(new Blob([blob]));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'image.jpg';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
link.remove();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Image
|
||||
width={200}
|
||||
preview={{
|
||||
toolbarRender: (
|
||||
_,
|
||||
{
|
||||
icons: {
|
||||
flipYIcon,
|
||||
flipXIcon,
|
||||
rotateLeftIcon,
|
||||
rotateRightIcon,
|
||||
zoomOutIcon,
|
||||
zoomInIcon,
|
||||
closeIcon,
|
||||
},
|
||||
},
|
||||
) => (
|
||||
<ul className="ant-image-preview-operations">
|
||||
<li className="ant-image-preview-operations-operation" onClick={onDownload}>
|
||||
<DownloadOutlined className="ant-image-preview-operations-icon" />
|
||||
</li>
|
||||
{flipYIcon}
|
||||
{flipXIcon}
|
||||
{rotateLeftIcon}
|
||||
{rotateRightIcon}
|
||||
{zoomOutIcon}
|
||||
{zoomInIcon}
|
||||
{closeIcon}
|
||||
</ul>
|
||||
),
|
||||
}}
|
||||
src={src}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -24,43 +24,138 @@ Previewable image.
|
||||
<code src="./demo/preview-group-visible.tsx">Preview from one image</code>
|
||||
<code src="./demo/previewSrc.tsx">Custom preview image</code>
|
||||
<code src="./demo/controlled-preview.tsx">Controlled Preview</code>
|
||||
<code src="./demo/toolbarRender.tsx">Custom toolbar render</code>
|
||||
<code src="./demo/imageRender.tsx">Custom preview render</code>
|
||||
<code src="./demo/preview-mask.tsx" debug>Custom preview mask</code>
|
||||
<code src="./demo/preview-group-top-progress.tsx" debug>Top progress customization when previewing multiple images</code>
|
||||
<code src="./demo/component-token.tsx" debug>Custom component token</code>
|
||||
|
||||
## API
|
||||
|
||||
### Image
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| alt | Image description | string | - | 4.6.0 |
|
||||
| fallback | Load failure fault-tolerant src | string | - | 4.6.0 |
|
||||
| height | Image height | string \| number | - | 4.6.0 |
|
||||
| placeholder | Load placeholder, use default placeholder when set `true` | ReactNode | - | 4.6.0 |
|
||||
| preview | preview config, disabled when `false` | boolean \| [previewType](#previewtype) | true | 4.6.0 [previewType](#previewtype):4.7.0 |
|
||||
| preview | preview config, disabled when `false` | boolean \| [PreviewType](#PreviewType) | true | 4.6.0 [PreviewType](#PreviewType):4.7.0 |
|
||||
| src | Image path | string | - | 4.6.0 |
|
||||
| width | Image width | string \| number | - | 4.6.0 |
|
||||
| onError | Load failed callback | (event: Event) => void | - | 4.12.0 |
|
||||
| rootClassName | add custom className for image root DOM and preview mode root DOM | string | - | 4.20.0 |
|
||||
| rootClassName | Add custom className for image root DOM and preview mode root DOM | string | - | 4.20.0 |
|
||||
|
||||
### previewType
|
||||
Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
|
||||
|
||||
### PreviewType
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| visible | Whether the preview dialog is visible or not | boolean | - | - |
|
||||
| src | Custom preview src | string | - | 4.10.0 |
|
||||
| getContainer | The mounted node for preview dialog but still display at fullScreen | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
||||
| mask | Thumbnail mask | ReactNode | - | 4.9.0 |
|
||||
| maskClassName | The className of the mask | string | - | 4.11.0 |
|
||||
| rootClassName | The classname of the preview root DOM | string | - | 5.4.0 |
|
||||
| scaleStep | `1 + scaleStep` is the step to increase or decrease the scale | number | 0.5 | - |
|
||||
| minScale | Min scale | number | 1 | 5.7.0 |
|
||||
| maxScale | Max scale | number | 50 | 5.7.0 |
|
||||
| forceRender | Force render preview dialog | boolean | - | - |
|
||||
| toolbarRender | Custom toolbar render | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#ToolbarRenderInfoType), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 |
|
||||
| imageRender | Custom preview content | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType) }) => React.ReactNode | - | 5.7.0 |
|
||||
| onTransform | Callback when the transform of image changed | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
|
||||
| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean) => void | - | - |
|
||||
|
||||
## PreviewGroup
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| preview | Preview config, `disabled` when false | boolean \| [PreviewGroupType](#PreviewGroupType) | true | 4.6.0 [PreviewGroupType](#PreviewGroupType):4.7.0 |
|
||||
| items | Preview items | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
|
||||
|
||||
### PreviewGroupType
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| visible | Whether the preview dialog is visible or not | boolean | - | - |
|
||||
| getContainer | The mounted node for preview dialog but still display at fullScreen | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
||||
| current | The index of the current preview | number | - | 4.12.0 |
|
||||
| mask | Thumbnail mask | ReactNode | - | 4.9.0 |
|
||||
| maskClassName | The className of the mask | string | - | 4.11.0 |
|
||||
| rootClassName | The classname of the preview root DOM | string | - | 5.4.0 |
|
||||
| scaleStep | `1 + scaleStep` is the step to increase or decrease the scale | number | 0.5 | - |
|
||||
| minScale | Min scale | number | 1 | 5.7.0 |
|
||||
| maxScale | Max scale | number | 50 | 5.7.0 |
|
||||
| forceRender | Force render preview dialog | boolean | - | - |
|
||||
| countRender | Custom preview count content | (current: number, total: number) => string | - | 4.20.0 |
|
||||
| toolbarRender | Custom toolbar render | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | 5.7.0 |
|
||||
| imageRender | Custom preview content | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | 5.7.0 |
|
||||
| onTransform | Callback when the transform of image changed | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
|
||||
| onChange | Callback when switch preview image | (current: number, prevCurrent: number) => void | - | 5.3.0 |
|
||||
| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
|
||||
|
||||
## Interface
|
||||
|
||||
### TransformType
|
||||
|
||||
```typescript
|
||||
{
|
||||
visible?: boolean;
|
||||
onVisibleChange?: (visible, prevVisible, current: number) => void; // `current` only support after v5.3.0
|
||||
getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0 The mounted node for preview dialog but still display at fullScreen
|
||||
src?: string; // v4.10.0
|
||||
mask?: ReactNode; // v4.9.0
|
||||
maskClassName?: string; // v4.11.0
|
||||
rootClassName?: string; // only support after v5.4.0
|
||||
current?: number; // v4.12.0 Only support PreviewGroup
|
||||
countRender?: (current: number, total: number) => string // v4.20.0 Only support PreviewGroup
|
||||
scaleStep?: number;
|
||||
onChange?: (current: number, prevCurrent: number) => void; // only support after v5.3.0
|
||||
x: number;
|
||||
y: number;
|
||||
rotate: number;
|
||||
scale: number;
|
||||
flipX: boolean;
|
||||
flipY: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
|
||||
### TransformAction
|
||||
|
||||
```typescript
|
||||
type TransformAction =
|
||||
| 'flipY'
|
||||
| 'flipX'
|
||||
| 'rotateLeft'
|
||||
| 'rotateRight'
|
||||
| 'zoomIn'
|
||||
| 'zoomOut'
|
||||
| 'close'
|
||||
| 'prev'
|
||||
| 'next'
|
||||
| 'wheel'
|
||||
| 'doubleClick'
|
||||
| 'move'
|
||||
| 'dragRebound';
|
||||
```
|
||||
|
||||
### ToolbarRenderInfoType
|
||||
|
||||
```typescript
|
||||
{
|
||||
icons: {
|
||||
flipYIcon: React.ReactNode;
|
||||
flipXIcon: React.ReactNode;
|
||||
rotateLeftIcon: React.ReactNode;
|
||||
rotateRightIcon: React.ReactNode;
|
||||
zoomOutIcon: React.ReactNode;
|
||||
zoomInIcon: React.ReactNode;
|
||||
closeIcon: React.ReactNode;
|
||||
};
|
||||
actions: {
|
||||
onFlipY: () => void;
|
||||
onFlipX: () => void;
|
||||
onRotateLeft: () => void;
|
||||
onRotateRight: () => void;
|
||||
onZoomOut: () => void;
|
||||
onZoomIn: () => void;
|
||||
onClose: () => void;
|
||||
};
|
||||
transform: TransformType,
|
||||
current: number;
|
||||
total: number;
|
||||
}
|
||||
```
|
||||
|
||||
## Design Token
|
||||
|
||||
|
||||
@ -25,44 +25,138 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
|
||||
<code src="./demo/preview-group-visible.tsx">相册模式</code>
|
||||
<code src="./demo/previewSrc.tsx">自定义预览图片</code>
|
||||
<code src="./demo/controlled-preview.tsx">受控的预览</code>
|
||||
<code src="./demo/toolbarRender.tsx">自定义工具栏</code>
|
||||
<code src="./demo/imageRender.tsx">自定义预览内容</code>
|
||||
<code src="./demo/preview-mask.tsx" debug>自定义预览文本</code>
|
||||
<code src="./demo/preview-group-top-progress.tsx" debug>多图预览时顶部进度自定义</code>
|
||||
<code src="./demo/component-token.tsx" debug>自定义组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
### Image
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| alt | 图像描述 | string | - | 4.6.0 |
|
||||
| fallback | 加载失败容错地址 | string | - | 4.6.0 |
|
||||
| height | 图像高度 | string \| number | - | 4.6.0 |
|
||||
| placeholder | 加载占位, 为 `true` 时使用默认占位 | ReactNode | - | 4.6.0 |
|
||||
| preview | 预览参数，为 `false` 时禁用 | boolean \| [previewType](#previewtype) | true | 4.6.0 [previewType](#previewtype):4.7.0 |
|
||||
| preview | 预览参数，为 `false` 时禁用 | boolean \| [PreviewType](#PreviewType) | true | 4.6.0 [PreviewType](#PreviewType):4.7.0 |
|
||||
| src | 图片地址 | string | - | 4.6.0 |
|
||||
| width | 图像宽度 | string \| number | - | 4.6.0 |
|
||||
| onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 |
|
||||
| rootClassName | 为展示图片根 DOM 和预览大图根 DOM 提供自定义 className | string | - | 4.20.0 |
|
||||
|
||||
### previewType
|
||||
其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
|
||||
|
||||
### PreviewType
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| visible | 是否显示 | boolean | - | - |
|
||||
| src | 自定义预览 src | string | - | 4.10.0 |
|
||||
| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
||||
| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
|
||||
| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
|
||||
| rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 |
|
||||
| scaleStep | `1 + scaleStep` 为缩放放大的每步倍数 | number | 0.5 | - |
|
||||
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
|
||||
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
|
||||
| forceRender | 强制渲染预览图 | boolean | - | - |
|
||||
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#ToolbarRenderInfoType), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 |
|
||||
| imageRender | 自定义预览内容 | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType) }) => React.ReactNode | - | 5.7.0 |
|
||||
| onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
|
||||
| onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean) => void | - | - |
|
||||
|
||||
## PreviewGroup
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| preview | 预览参数，为 `false` 时禁用 | boolean \| [PreviewGroupType](#PreviewGroupType) | true | 4.6.0 [PreviewGroupType](#PreviewGroupType):4.7.0 |
|
||||
| items | 预览数组 | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
|
||||
|
||||
### PreviewGroupType
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| visible | 是否显示 | boolean | - | - |
|
||||
| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
||||
| current | 当前预览图的 index | number | - | 4.12.0 |
|
||||
| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
|
||||
| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
|
||||
| rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 |
|
||||
| scaleStep | `1 + scaleStep` 为缩放放大的每步倍数 | number | 0.5 | - |
|
||||
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
|
||||
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
|
||||
| forceRender | 强制渲染预览图 | boolean | - | - |
|
||||
| countRender | 自定义预览计数内容 | (current: number, total: number) => string | - | 4.20.0 |
|
||||
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | 5.7.0 |
|
||||
| imageRender | 自定义预览内容 | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | 5.7.0 |
|
||||
| onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
|
||||
| onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
|
||||
| onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
|
||||
|
||||
## Interface
|
||||
|
||||
### TransformType
|
||||
|
||||
```typescript
|
||||
{
|
||||
visible?: boolean;
|
||||
onVisibleChange?: (visible, prevVisible, current: number) => void; // current 参数 v5.3.0 后支持
|
||||
getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0 指定预览窗口挂载的节点，但依旧为全屏展示
|
||||
src?: string; // v4.10.0
|
||||
mask?: ReactNode; // v4.9.0
|
||||
maskClassName?: string; // v4.11.0
|
||||
rootClassName?: string; // v5.4.0 后支持
|
||||
current?: number; // v4.12.0 仅支持 PreviewGroup
|
||||
countRender?: (current: number, total: number) => string // v4.20.0 仅支持 PreviewGroup
|
||||
scaleStep?: number;
|
||||
forceRender?: boolean;
|
||||
onChange?: (current: number, prevCurrent: number) => void; // v5.3.0 后支持
|
||||
x: number;
|
||||
y: number;
|
||||
rotate: number;
|
||||
scale: number;
|
||||
flipX: boolean;
|
||||
flipY: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
|
||||
### TransformAction
|
||||
|
||||
```typescript
|
||||
type TransformAction =
|
||||
| 'flipY'
|
||||
| 'flipX'
|
||||
| 'rotateLeft'
|
||||
| 'rotateRight'
|
||||
| 'zoomIn'
|
||||
| 'zoomOut'
|
||||
| 'close'
|
||||
| 'prev'
|
||||
| 'next'
|
||||
| 'wheel'
|
||||
| 'doubleClick'
|
||||
| 'move'
|
||||
| 'dragRebound';
|
||||
```
|
||||
|
||||
### ToolbarRenderInfoType
|
||||
|
||||
```typescript
|
||||
{
|
||||
icons: {
|
||||
flipYIcon: React.ReactNode;
|
||||
flipXIcon: React.ReactNode;
|
||||
rotateLeftIcon: React.ReactNode;
|
||||
rotateRightIcon: React.ReactNode;
|
||||
zoomOutIcon: React.ReactNode;
|
||||
zoomInIcon: React.ReactNode;
|
||||
closeIcon: React.ReactNode;
|
||||
};
|
||||
actions: {
|
||||
onFlipY: () => void;
|
||||
onFlipX: () => void;
|
||||
onRotateLeft: () => void;
|
||||
onRotateRight: () => void;
|
||||
onZoomOut: () => void;
|
||||
onZoomIn: () => void;
|
||||
onClose: () => void;
|
||||
};
|
||||
transform: TransformType,
|
||||
current: number;
|
||||
total: number;
|
||||
}
|
||||
```
|
||||
|
||||
## Design Token
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
|
||||
[`${previewCls}-operations`]: {
|
||||
...resetComponent(token),
|
||||
display: 'flex',
|
||||
flexDirection: 'row-reverse',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
color: token.previewOperationColor,
|
||||
listStyle: 'none',
|
||||
@ -87,7 +87,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
'&:last-of-type': {
|
||||
'&:first-of-type': {
|
||||
marginInlineStart: 0,
|
||||
},
|
||||
},
|
||||
@ -192,7 +192,6 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
|
||||
cursor: 'grab',
|
||||
transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
|
||||
userSelect: 'none',
|
||||
pointerEvents: 'auto',
|
||||
|
||||
'&-wrapper': {
|
||||
...genBoxStyle(),
|
||||
@ -205,6 +204,10 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
|
||||
'& > *': {
|
||||
pointerEvents: 'auto',
|
||||
},
|
||||
|
||||
'&::before': {
|
||||
display: 'inline-block',
|
||||
width: 1,
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
"rc-drawer": "~6.2.0",
|
||||
"rc-dropdown": "~4.1.0",
|
||||
"rc-field-form": "~1.32.0",
|
||||
"rc-image": "~5.17.1",
|
||||
"rc-image": "~6.0.0",
|
||||
"rc-input": "~1.1.0",
|
||||
"rc-input-number": "~8.0.0",
|
||||
"rc-mentions": "~2.4.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user