From 2fe979bf19bb7d412e82a09b80da42486783564d Mon Sep 17 00:00:00 2001
From: kiner-tang <1127031143@qq.com>
Date: Tue, 28 Nov 2023 17:18:31 +0800
Subject: [PATCH] feat: operation default icons (#297)

* feat: operation default icons

* feat: operation default icons

* feat: operation default icons

* feat: operation default icons

* feat: operation default icons
---
 docs/examples/album.tsx               |  2 ++
 docs/examples/basic.tsx               | 29 ++++++---------------------
 docs/examples/common.tsx              | 25 +++++++++++++++++++++++
 docs/examples/controlled.tsx          |  2 ++
 docs/examples/controlledWithGroup.tsx |  2 ++
 docs/examples/fallback.tsx            |  3 ++-
 docs/examples/imageRender.tsx         |  2 ++
 docs/examples/placeholder.tsx         |  3 +++
 docs/examples/thumbnail.tsx           |  4 +++-
 docs/examples/toolbarRender.tsx       |  2 ++
 src/PreviewGroup.tsx                  |  4 ++--
 11 files changed, 51 insertions(+), 27 deletions(-)
 create mode 100644 docs/examples/common.tsx

diff --git a/docs/examples/album.tsx b/docs/examples/album.tsx
index a7df9898..d4430cd2 100644
--- a/docs/examples/album.tsx
+++ b/docs/examples/album.tsx
@@ -1,11 +1,13 @@
 import Image from 'rc-image';
 import React from 'react';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
 export default function PreviewGroup() {
   return (
     <div>
       <Image.PreviewGroup
+        icons={defaultIcons}
         items={[require('./images/1.jpeg'), require('./images/2.jpeg'), require('./images/3.jpeg')]}
       >
         <Image src={require('./images/1.jpeg')} />
diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
index 186916d7..67d2b174 100644
--- a/docs/examples/basic.tsx
+++ b/docs/examples/basic.tsx
@@ -1,28 +1,8 @@
-import {
-  CloseOutlined,
-  LeftOutlined,
-  RightOutlined,
-  RotateLeftOutlined,
-  RotateRightOutlined,
-  SwapOutlined,
-  ZoomInOutlined,
-  ZoomOutOutlined,
-} from '@ant-design/icons';
 import Image from 'rc-image';
 import * as React from 'react';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
-const icons = {
-  rotateLeft: <RotateLeftOutlined />,
-  rotateRight: <RotateRightOutlined />,
-  zoomIn: <ZoomInOutlined />,
-  zoomOut: <ZoomOutOutlined />,
-  close: <CloseOutlined />,
-  left: <LeftOutlined />,
-  right: <RightOutlined />,
-  flipX: <SwapOutlined />,
-  flipY: <SwapOutlined rotate={90} />,
-};
 
 export default function Base() {
   return (
@@ -37,7 +17,7 @@ export default function Base() {
           console.log('click');
         }}
         preview={{
-          icons,
+          icons: defaultIcons,
           onVisibleChange: visible => {
             console.log('visible', visible);
           },
@@ -51,7 +31,7 @@ export default function Base() {
         style={{
           marginRight: 24,
         }}
-        preview={{ mask: 'Click to Preview' }}
+        preview={{ icons: defaultIcons, mask: 'Click to Preview' }}
       />
       <Image
         src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ngiJQaLQELEAAAAAAAAAAABkARQnAQ"
@@ -59,16 +39,19 @@ export default function Base() {
         style={{
           marginRight: 24,
         }}
+        preview={{icons: defaultIcons}}
       />
       <Image
         src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NZuwQp_vcIQAAAAAAAAAAABkARQnAQ"
         width={200}
+        preview={{icons: defaultIcons}}
       />
 
       <Image
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
         width={200}
         height={100}
+        preview={{icons: defaultIcons}}
       />
     </div>
   );
diff --git a/docs/examples/common.tsx b/docs/examples/common.tsx
new file mode 100644
index 00000000..5ec407a3
--- /dev/null
+++ b/docs/examples/common.tsx
@@ -0,0 +1,25 @@
+
+import React from 'react';
+import type { PreviewProps } from '@/Preview';
+import {
+    CloseOutlined,
+    LeftOutlined,
+    RightOutlined,
+    RotateLeftOutlined,
+    RotateRightOutlined,
+    SwapOutlined,
+    ZoomInOutlined,
+    ZoomOutOutlined,
+  } from '@ant-design/icons';
+  
+  export const defaultIcons: PreviewProps['icons'] = {
+    rotateLeft: <RotateLeftOutlined />,
+    rotateRight: <RotateRightOutlined />,
+    zoomIn: <ZoomInOutlined />,
+    zoomOut: <ZoomOutOutlined />,
+    close: <CloseOutlined />,
+    left: <LeftOutlined />,
+    right: <RightOutlined />,
+    flipX: <SwapOutlined />,
+    flipY: <SwapOutlined rotate={90} />,
+  };
\ No newline at end of file
diff --git a/docs/examples/controlled.tsx b/docs/examples/controlled.tsx
index 0e6fbe5a..6ae65ac6 100644
--- a/docs/examples/controlled.tsx
+++ b/docs/examples/controlled.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Image from 'rc-image';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
 export default function Base() {
   const [visible, setVisible] = React.useState(false);
@@ -20,6 +21,7 @@ export default function Base() {
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
         width={200}
         preview={{
+          icons: defaultIcons,
           visible,
           onVisibleChange: value => {
             setVisible(value);
diff --git a/docs/examples/controlledWithGroup.tsx b/docs/examples/controlledWithGroup.tsx
index ec6fa03f..3120df93 100644
--- a/docs/examples/controlledWithGroup.tsx
+++ b/docs/examples/controlledWithGroup.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import Image from 'rc-image';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
 export default function Base() {
   const [visible, setVisible] = React.useState(false);
@@ -19,6 +20,7 @@ export default function Base() {
       </div>
       <Image.PreviewGroup
         preview={{
+          icons: defaultIcons,
           visible,
           onVisibleChange: value => {
             setVisible(value);
diff --git a/docs/examples/fallback.tsx b/docs/examples/fallback.tsx
index 1643243f..7393568c 100644
--- a/docs/examples/fallback.tsx
+++ b/docs/examples/fallback.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 import Image from 'rc-image';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
 export default function Base() {
   return (
     <Image
-      preview={{ mask: 'preview!' }}
+      preview={{ mask: 'preview!', icons: defaultIcons }}
       src="error1"
       fallback="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
       width={200}
diff --git a/docs/examples/imageRender.tsx b/docs/examples/imageRender.tsx
index cfb9f9fe..e7d7a61a 100644
--- a/docs/examples/imageRender.tsx
+++ b/docs/examples/imageRender.tsx
@@ -1,6 +1,7 @@
 import Image from 'rc-image';
 import React from 'react';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
 export default function imageRender() {
   return (
@@ -9,6 +10,7 @@ export default function imageRender() {
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
         width={200}
         preview={{
+          icons: defaultIcons,
           toolbarRender: () => null,
           imageRender: () => (
             <video
diff --git a/docs/examples/placeholder.tsx b/docs/examples/placeholder.tsx
index 983b90f3..4faf058e 100644
--- a/docs/examples/placeholder.tsx
+++ b/docs/examples/placeholder.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Image from 'rc-image';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
 export default function Base() {
   const [random, setRandom] = React.useState(Date.now());
@@ -21,6 +22,7 @@ export default function Base() {
           src={`${require('./images/placeholder.png')}?random=${random}`}
           width={400}
           placeholder
+          preview={{icons: defaultIcons}}
         />
       </div>
 
@@ -30,6 +32,7 @@ export default function Base() {
         // eslint-disable-next-line global-require
         src={`${require('./images/placeholder.png')}?random=${random + 1}`}
         width={400}
+        preview={{icons: defaultIcons}}
         placeholder={
           <Image
             width="100%"
diff --git a/docs/examples/thumbnail.tsx b/docs/examples/thumbnail.tsx
index d284c42c..c0edfcef 100644
--- a/docs/examples/thumbnail.tsx
+++ b/docs/examples/thumbnail.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Image from 'rc-image';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
 export default function Thumbnail() {
   return (
@@ -8,6 +9,7 @@ export default function Thumbnail() {
       <Image
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10"
         preview={{
+          icons: defaultIcons,
           src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
         }}
         width={200}
@@ -15,7 +17,7 @@ export default function Thumbnail() {
 
       <br />
       <h1>PreviewGroup</h1>
-      <Image.PreviewGroup>
+      <Image.PreviewGroup preview={{icons: defaultIcons}}>
         <Image
           key={1}
           src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10"
diff --git a/docs/examples/toolbarRender.tsx b/docs/examples/toolbarRender.tsx
index c323d36f..13e3c238 100644
--- a/docs/examples/toolbarRender.tsx
+++ b/docs/examples/toolbarRender.tsx
@@ -1,6 +1,7 @@
 import Image from 'rc-image';
 import React from 'react';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
 export default function ToolbarRender() {
   return (
@@ -9,6 +10,7 @@ export default function ToolbarRender() {
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
         width={200}
         preview={{
+          icons: defaultIcons,
           toolbarRender: (
             _,
             {
diff --git a/src/PreviewGroup.tsx b/src/PreviewGroup.tsx
index 045b6030..7485d447 100644
--- a/src/PreviewGroup.tsx
+++ b/src/PreviewGroup.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { PreviewGroupContext } from './context';
 import type { TransformType } from './hooks/useImageTransform';
 import usePreviewItems from './hooks/usePreviewItems';
-import type { ImagePreviewType } from './Image';
+import { type ImagePreviewType } from './Image';
 import type { ImageElementProps, OnGroupPreview } from './interface';
 import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
 import Preview from './Preview';
@@ -12,7 +12,7 @@ import Preview from './Preview';
 export interface PreviewGroupPreview
   extends Omit<
     ImagePreviewType,
-    'icons' | 'mask' | 'maskClassName' | 'onVisibleChange' | 'toolbarRender' | 'imageRender'
+    | 'mask' | 'maskClassName' | 'onVisibleChange' | 'toolbarRender' | 'imageRender'
   > {
   /**
    * If Preview the show img index