feat(Image): add onActive to toolbarRender (#50812)

Co-authored-by: afc163 <afc163@gmail.com>
2024-11-29 18:50:00 +08:00 · 2024-09-11 23:32:37 +08:00 · 2024-09-11 23:32:37 +08:00 · 380cae80bc
commit 380cae80bc
parent 8d8bef000d
7 changed files with 217 additions and 109 deletions
--- 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`] = `
-<div
-  class="ant-image"
-  style="width: 200px;"
->
-  <img
-    class="ant-image-img"
-    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-    width="200"
-  />
+Array [
  <div
-    class="ant-image-mask"
+    class="ant-image"
+    style="width: 200px;"
  >
+    <img
+      class="ant-image-img"
+      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+      width="200"
+    />
    <div
-      class="ant-image-mask-info"
+      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"
        >
-          <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
+          <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
+    class="ant-image"
+    style="width: 200px;"
+  >
+    <img
+      class="ant-image-img"
+      src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+      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/toolbarRender.tsx extend context correctly 2`] = `[]`;
--- 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`] = `
-<div
-  class="ant-image"
-  style="width:200px"
->
-  <img
-    class="ant-image-img"
-    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-    width="200"
-  />
+Array [
  <div
-    class="ant-image-mask"
+    class="ant-image"
+    style="width:200px"
  >
+    <img
+      class="ant-image-img"
+      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+      width="200"
+    />
    <div
-      class="ant-image-mask-info"
+      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"
        >
-          <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
+          <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
+    class="ant-image"
+    style="width:200px"
+  >
+    <img
+      class="ant-image-img"
+      src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+      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>,
+]
 `;
--- 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 {
--- 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 (
+    <Image.PreviewGroup
+      preview={{
+        toolbarRender: (
+          _,
+          {
+            transform: { scale },
+            actions: {
+              onActive,
+              onFlipY,
+              onFlipX,
+              onRotateLeft,
+              onRotateRight,
+              onZoomOut,
+              onZoomIn,
+              onReset,
+            },
+          },
+        ) => (
+          <Space size={12} className="toolbar-wrapper">
+            <LeftOutlined onClick={() => onActive?.(-1)} />
+            <RightOutlined onClick={() => onActive?.(1)} />
+            <DownloadOutlined onClick={onDownload} />
+            <SwapOutlined rotate={90} onClick={onFlipY} />
+            <SwapOutlined onClick={onFlipX} />
+            <RotateLeftOutlined onClick={onRotateLeft} />
+            <RotateRightOutlined onClick={onRotateRight} />
+            <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
+            <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
+            <UndoOutlined onClick={onReset} />
+          </Space>
+        ),
+        onChange: (index) => {
+          setCurrent(index);
+        },
+      }}
+    >
+      {imageList.map((item) => (
+        <Image key={item} src={item} width={200} />
+      ))}
+    </Image.PreviewGroup>
+  );
 };

-const App: React.FC = () => (
-  <Image
-    width={200}
-    src={src}
-    preview={{
-      toolbarRender: (
-        _,
-        {
-          image: { url },
-          transform: { scale },
-          actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn, onReset },
-        },
-      ) => (
-        <Space size={12} className="toolbar-wrapper">
-          <DownloadOutlined onClick={() => onDownload(url)} />
-          <SwapOutlined rotate={90} onClick={onFlipY} />
-          <SwapOutlined onClick={onFlipX} />
-          <RotateLeftOutlined onClick={onRotateLeft} />
-          <RotateRightOutlined onClick={onRotateRight} />
-          <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
-          <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
-          <UndoOutlined onClick={onReset} />
-        </Space>
-      ),
-    }}
-  />
-);
-
 export default App;
--- 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;
--- 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;
--- 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",