From 380cae80bcb22c822910b3fba3a1417ac119ece3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=A0=E9=B1=BC=E6=80=AA?= Date: Wed, 11 Sep 2024 23:32:37 +0800 Subject: [PATCH] feat(Image): add `onActive` to `toolbarRender` (#50812) Co-authored-by: afc163 --- .../__snapshots__/demo-extend.test.ts.snap | 102 +++++++++++----- .../__tests__/__snapshots__/demo.test.ts.snap | 102 +++++++++++----- components/image/demo/toolbarRender.md | 4 - components/image/demo/toolbarRender.tsx | 114 +++++++++++------- components/image/index.en-US.md | 1 + components/image/index.zh-CN.md | 1 + package.json | 2 +- 7 files changed, 217 insertions(+), 109 deletions(-) diff --git a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap index 20734512a3..2b5bc2fb01 100644 --- a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -829,44 +829,84 @@ exports[`renders components/image/demo/previewSrc.tsx extend context correctly 1 exports[`renders components/image/demo/previewSrc.tsx extend context correctly 2`] = `[]`; exports[`renders components/image/demo/toolbarRender.tsx extend context correctly 1`] = ` -
- +Array [
+
- - - - Preview + + + Preview +
-
- + , +
+ +
+
+ + + + Preview +
+
+
, +] `; exports[`renders components/image/demo/toolbarRender.tsx extend context correctly 2`] = `[]`; diff --git a/components/image/__tests__/__snapshots__/demo.test.ts.snap b/components/image/__tests__/__snapshots__/demo.test.ts.snap index 812c61bae1..e33f84978d 100644 --- a/components/image/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/image/__tests__/__snapshots__/demo.test.ts.snap @@ -804,42 +804,82 @@ exports[`renders components/image/demo/previewSrc.tsx correctly 1`] = ` `; exports[`renders components/image/demo/toolbarRender.tsx correctly 1`] = ` -
- +Array [
+
- - - - Preview + + + Preview +
-
- + , +
+ +
+
+ + + + Preview +
+
+
, +] `; diff --git a/components/image/demo/toolbarRender.md b/components/image/demo/toolbarRender.md index a6bded7035..00afc0266c 100644 --- a/components/image/demo/toolbarRender.md +++ b/components/image/demo/toolbarRender.md @@ -8,15 +8,11 @@ You can customize the toolbar and add a button for downloading the original imag ```css .toolbar-wrapper { - position: fixed; - bottom: 32px; - inset-inline-start: 50%; padding: 0px 24px; color: #fff; font-size: 20px; background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; - transform: translateX(-50%); } .toolbar-wrapper .anticon { diff --git a/components/image/demo/toolbarRender.tsx b/components/image/demo/toolbarRender.tsx index d80626b9cf..1c046605ea 100644 --- a/components/image/demo/toolbarRender.tsx +++ b/components/image/demo/toolbarRender.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { DownloadOutlined, + LeftOutlined, + RightOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, @@ -10,51 +12,79 @@ import { } from '@ant-design/icons'; import { Image, Space } from 'antd'; -const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'; +const imageList = [ + 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', + 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg', +]; // you can download flipped and rotated image // https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp -const onDownload = (imgUrl: string) => { - fetch(imgUrl) - .then((response) => response.blob()) - .then((blob) => { - const url = URL.createObjectURL(new Blob([blob])); - const link = document.createElement<'a'>('a'); - link.href = url; - link.download = 'image.png'; - document.body.appendChild(link); - link.click(); - URL.revokeObjectURL(url); - link.remove(); - }); +const App: React.FC = () => { + const [current, setCurrent] = React.useState(0); + + // or you can download flipped and rotated image + // https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp + const onDownload = () => { + const url = imageList[current]; + const suffix = url.slice(url.lastIndexOf('.')); + const filename = Date.now() + suffix; + + fetch(url) + .then((response) => response.blob()) + .then((blob) => { + const blobUrl = URL.createObjectURL(new Blob([blob])); + const link = document.createElement('a'); + link.href = blobUrl; + link.download = filename; + document.body.appendChild(link); + link.click(); + URL.revokeObjectURL(blobUrl); + link.remove(); + }); + }; + + return ( + ( + + onActive?.(-1)} /> + onActive?.(1)} /> + + + + + + + + + + ), + onChange: (index) => { + setCurrent(index); + }, + }} + > + {imageList.map((item) => ( + + ))} + + ); }; -const App: React.FC = () => ( - ( - - onDownload(url)} /> - - - - - - - - - ), - }} - /> -); - export default App; diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index a500a1f938..822899ccd0 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -150,6 +150,7 @@ type TransformAction = zoomInIcon: React.ReactNode; }; actions: { + onActive?: (index: number) => void; // support after 5.21.0 onFlipY: () => void; onFlipX: () => void; onRotateLeft: () => void; diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index 1044e9100f..46d59225b3 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -152,6 +152,7 @@ type TransformAction = zoomInIcon: React.ReactNode; }; actions: { + onActive?: (index: number) => void; // 5.21.0 δΉ‹εŽζ”―ζŒ onFlipY: () => void; onFlipX: () => void; onRotateLeft: () => void; diff --git a/package.json b/package.json index 066a5eb1bc..c2a96123ff 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "rc-drawer": "~7.2.0", "rc-dropdown": "~4.2.0", "rc-field-form": "~2.4.0", - "rc-image": "~7.9.0", + "rc-image": "~7.10.0", "rc-input": "~1.6.3", "rc-input-number": "~9.2.0", "rc-mentions": "~2.16.0",