From c54b9cd892606072d267dd7adc8fc18a45b5aff5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B8=8C=E4=BA=9A=E7=9A=84=E8=A5=BF=E7=BA=A2=E6=9F=BF?= <97817985+nova1751@users.noreply.github.com> Date: Sat, 4 May 2024 18:04:15 +0800 Subject: [PATCH] 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 --- .../__snapshots__/demo-extend.test.ts.snap | 46 +++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 44 ++++++++++++++++++ components/image/demo/preview-imgInfo.md | 7 +++ components/image/demo/preview-imgInfo.tsx | 19 ++++++++ components/image/index.en-US.md | 18 ++++++-- components/image/index.zh-CN.md | 17 ++++++- package.json | 2 +- 7 files changed, 147 insertions(+), 6 deletions(-) create mode 100644 components/image/demo/preview-imgInfo.md create mode 100644 components/image/demo/preview-imgInfo.tsx diff --git a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap index 9804e1b8a4..424b4ee63a 100644 --- a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -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`] = ` +
+ test +
+
+ + + + Preview +
+
+
+`; + +exports[`renders components/image/demo/preview-imgInfo.tsx extend context correctly 2`] = `[]`; + exports[`renders components/image/demo/preview-mask.tsx extend context correctly 1`] = `
`; +exports[`renders components/image/demo/preview-imgInfo.tsx correctly 1`] = ` +
+ test +
+
+ + + + Preview +
+
+
+`; + exports[`renders components/image/demo/preview-mask.tsx correctly 1`] = `
( + test
{JSON.stringify(image)}
, + toolbarRender: (_, { image }) =>
{JSON.stringify(image)}
, + }} + /> +); + +export default App; diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index 4fbf54934a..eb3effeee2 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -29,6 +29,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA nested Top progress customization when previewing multiple images Custom component token +Gets image info in the render function ## 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; } ``` diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index caed1d6c16..3c05196fb1 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -30,6 +30,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA 嵌套 多图预览时顶部进度自定义 自定义组件 Token +在渲染函数中获取图片信息 ## 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; } ``` diff --git a/package.json b/package.json index 926578c847..8c2367c0ea 100644 --- a/package.json +++ b/package.json @@ -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",