feat: operation default icons

react-component · Nov 28, 2023 · 1d6c82f · 1d6c82f
1 parent 06939db
commit 1d6c82f
Show file tree

Hide file tree

Showing 12 changed files with 29 additions and 31 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,6 +1,7 @@
 import Image from 'rc-image';
 import * as React from 'react';
 import '../../assets/index.less';
+import { defaultIcons } from './common';
 
 
 export default function Base() {
@@ -16,6 +17,7 @@ export default function Base() {
           console.log('click');
         }}
         preview={{
+          icons: defaultIcons,
           onVisibleChange: visible => {
             console.log('visible', visible);
           },
@@ -29,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/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/Image.tsx b/src/Image.tsx
@@ -15,29 +15,6 @@ import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
 import Preview from './Preview';
 import PreviewGroup from './PreviewGroup';
 
-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} />,
-};
-
 export interface ImagePreviewType
   extends Omit<
     IDialogPropTypes,
@@ -121,7 +98,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     mask: previewMask,
     maskClassName,
     movable,
-    icons = defaultIcons,
+    icons,
     scaleStep,
     minScale,
     maxScale,

diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -105,7 +105,7 @@ const Preview: React.FC<PreviewProps> = props => {
     movable = true,
     onClose,
     visible,
-    icons,
+    icons = {},
     rootClassName,
     closeIcon,
     getContainer,

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 { defaultIcons, 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
@@ -44,7 +44,7 @@ export interface GroupConsumerProps {
 const Group: React.FC<GroupConsumerProps> = ({
   previewPrefixCls = 'rc-image-preview',
   children,
-  icons = defaultIcons,
+  icons = {},
   items,
   preview,
   fallback,