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
react-component · Nov 28, 2023 · 2fe979b · 2fe979b · vercel · Nov 28, 2023
1 parent 1ba3514
commit 2fe979b
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 27 deletions.
diff --git 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
@@ -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,24 +31,27 @@ 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"
         width={200}
         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
@@ -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} />,
+  };
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,21 +1,23 @@
 import * as React from 'react';
 import Image from 'rc-image';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
 export default function Thumbnail() {
   return (
     <div>
       <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}
       />
 
       <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
@@ -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
@@ -4,15 +4,15 @@ 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';
 
 export interface PreviewGroupPreview
   extends Omit<
     ImagePreviewType,
-    'icons' | 'mask' | 'maskClassName' | 'onVisibleChange' | 'toolbarRender' | 'imageRender'
+    | 'mask' | 'maskClassName' | 'onVisibleChange' | 'toolbarRender' | 'imageRender'
   > {
   /**
    * If Preview the show img index