mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
feat: get image info in the render function of Image component. (#48729)
* feat: add imgInfo for render function * fix: remove useless code * fix: revert demo * chore: bump rc-image verison from 7.6.0 to 7.7.0 * test: update snapshot * fix: update snapshot * docs: update version * docs: update
This commit is contained in:
希亚的西红柿
GitHub
parent
d2e85498e5
commit
c54b9cd892
@ -688,6 +688,52 @@ exports[`renders components/image/demo/preview-group-visible.tsx extend context
|
||||
|
||||
exports[`renders components/image/demo/preview-group-visible.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/image/demo/preview-imgInfo.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-image"
|
||||
style="width: 200px; height: 200px;"
|
||||
>
|
||||
<img
|
||||
alt="test"
|
||||
class="ant-image-img"
|
||||
height="200px"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
style="height: 200px;"
|
||||
width="200px"
|
||||
/>
|
||||
<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/preview-imgInfo.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/image/demo/preview-mask.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-image"
|
||||
|
||||
@ -669,6 +669,50 @@ exports[`renders components/image/demo/preview-group-visible.tsx correctly 1`] =
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/image/demo/preview-imgInfo.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-image"
|
||||
style="width:200px;height:200px"
|
||||
>
|
||||
<img
|
||||
alt="test"
|
||||
class="ant-image-img"
|
||||
height="200px"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
style="height:200px"
|
||||
width="200px"
|
||||
/>
|
||||
<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/preview-mask.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-image"
|
||||
|
||||
7
components/image/demo/preview-imgInfo.md
Normal file
7
components/image/demo/preview-imgInfo.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
在渲染函数中获取图片的信息。
|
||||
|
||||
## en-US
|
||||
|
||||
Gets image info in the render function.
|
||||
19
components/image/demo/preview-imgInfo.tsx
Normal file
19
components/image/demo/preview-imgInfo.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import { Image } from 'antd';
|
||||
|
||||
const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Image
|
||||
src={src}
|
||||
width="200px"
|
||||
height="200px"
|
||||
alt="test"
|
||||
preview={{
|
||||
imageRender: (_, { image }) => <div>{JSON.stringify(image)}</div>,
|
||||
toolbarRender: (_, { image }) => <div>{JSON.stringify(image)}</div>,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -29,6 +29,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
|
||||
<code src="./demo/nested.tsx">nested</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>
|
||||
<code src="./demo/preview-imgInfo.tsx" debug>Gets image info in the render function</code>
|
||||
|
||||
## API
|
||||
|
||||
@ -95,8 +96,8 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
|
||||
| closeIcon | Custom close icon | React.ReactNode | - | 5.7.0 |
|
||||
| forceRender | Force render preview dialog | boolean | - | - |
|
||||
| countRender | Custom preview count content | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
|
||||
| toolbarRender | Custom toolbar render | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | 5.7.0 |
|
||||
| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 |
|
||||
| toolbarRender | Custom toolbar render | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | 5.7.0, `info.image`: 5.18.0 |
|
||||
| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), image: [ImgInfo](#imginfo), current: number }) => React.ReactNode | - | 5.7.0, image: 5.18.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 Property 5.3.0 |
|
||||
@ -157,7 +158,18 @@ type TransformAction =
|
||||
};
|
||||
transform: TransformType,
|
||||
current: number;
|
||||
total: number;
|
||||
image: ImgInfo
|
||||
}
|
||||
```
|
||||
|
||||
### ImgInfo
|
||||
|
||||
```typescript
|
||||
{
|
||||
url: string;
|
||||
alt: string;
|
||||
width: string | number;
|
||||
height: string | number;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
|
||||
<code src="./demo/nested.tsx">嵌套</code>
|
||||
<code src="./demo/preview-group-top-progress.tsx" debug>多图预览时顶部进度自定义</code>
|
||||
<code src="./demo/component-token.tsx" debug>自定义组件 Token</code>
|
||||
<code src="./demo/preview-imgInfo.tsx" debug>在渲染函数中获取图片信息</code>
|
||||
|
||||
## API
|
||||
|
||||
@ -96,8 +97,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
|
||||
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
|
||||
| forceRender | 强制渲染预览图 | boolean | - | - |
|
||||
| countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
|
||||
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | 5.7.0 |
|
||||
| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 |
|
||||
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | 5.7.0, `info.image`: 5.18.0 |
|
||||
| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), image: [ImgInfo](#imginfo), current: number }) => React.ReactNode | - | 5.7.0, image: 5.18.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 |
|
||||
@ -159,6 +160,18 @@ type TransformAction =
|
||||
transform: TransformType,
|
||||
current: number;
|
||||
total: number;
|
||||
image: ImgInfo
|
||||
}
|
||||
```
|
||||
|
||||
### ImgInfo
|
||||
|
||||
```typescript
|
||||
{
|
||||
url: string;
|
||||
alt: string;
|
||||
width: string | number;
|
||||
height: string | number;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
"rc-drawer": "~7.1.0",
|
||||
"rc-dropdown": "~4.2.0",
|
||||
"rc-field-form": "~2.0.0",
|
||||
"rc-image": "~7.6.0",
|
||||
"rc-image": "~7.7.0",
|
||||
"rc-input": "~1.4.5",
|
||||
"rc-input-number": "~9.0.0",
|
||||
"rc-mentions": "~2.11.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user