feat: add previous and next toggle to toolbar (#320)

* feat: add left and right switches to toolbar * test: update case * fix: improve * test: update test * test: update test * test: update test --------- Co-authored-by: 二货机器人 <smith3816@gmail.com>
react-component · Jun 11, 2024 · b4ecdee · b4ecdee
1 parent 292424f
commit b4ecdee
Show file tree

Hide file tree

Showing 4 changed files with 270 additions and 160 deletions.
diff --git a/README.md b/README.md
@@ -172,6 +172,8 @@ type TransformAction =
 ```typescript
 {
   icons: {
+    prevIcon?: React.ReactNode;
+    nextIcon?: React.ReactNode;
     flipYIcon: React.ReactNode;
     flipXIcon: React.ReactNode;
     rotateLeftIcon: React.ReactNode;
@@ -180,6 +182,7 @@ type TransformAction =
     zoomInIcon: React.ReactNode;
   };
   actions: {
+    onActive?: (offset: number) => void;
     onFlipY: () => void;
     onFlipX: () => void;
     onRotateLeft: () => void;

diff --git a/src/Operations.tsx b/src/Operations.tsx
@@ -9,6 +9,23 @@ import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
 import { PreviewGroupContext } from './context';
 import type { TransformType } from './hooks/useImageTransform';
 
+type OperationType =
+  | 'prev'
+  | 'next'
+  | 'flipY'
+  | 'flipX'
+  | 'rotateLeft'
+  | 'rotateRight'
+  | 'zoomOut'
+  | 'zoomIn';
+
+interface RenderOperationParams {
+  icon: React.ReactNode;
+  type: OperationType;
+  disabled?: boolean;
+  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+
 interface OperationsProps
   extends Pick<
     PreviewProps,
@@ -30,8 +47,7 @@ interface OperationsProps
   scale: number;
   minScale: number;
   maxScale: number;
-  onSwitchLeft: React.MouseEventHandler<HTMLDivElement>;
-  onSwitchRight: React.MouseEventHandler<HTMLDivElement>;
+  onActive: (offset: number) => void;
   onZoomIn: () => void;
   onZoomOut: () => void;
   onRotateRight: () => void;
@@ -65,8 +81,7 @@ const Operations: React.FC<OperationsProps> = props => {
     minScale,
     maxScale,
     closeIcon,
-    onSwitchLeft,
-    onSwitchRight,
+    onActive,
     onClose,
     onZoomIn,
     onZoomOut,
@@ -99,55 +114,96 @@ const Operations: React.FC<OperationsProps> = props => {
     };
   }, [visible]);
 
-  const tools = [
-    {
-      icon: flipY,
-      onClick: onFlipY,
-      type: 'flipY',
-    },
-    {
-      icon: flipX,
-      onClick: onFlipX,
-      type: 'flipX',
-    },
-    {
-      icon: rotateLeft,
-      onClick: onRotateLeft,
-      type: 'rotateLeft',
-    },
-    {
-      icon: rotateRight,
-      onClick: onRotateRight,
-      type: 'rotateRight',
-    },
-    {
-      icon: zoomOut,
-      onClick: onZoomOut,
-      type: 'zoomOut',
-      disabled: scale <= minScale,
-    },
-    {
-      icon: zoomIn,
-      onClick: onZoomIn,
-      type: 'zoomIn',
-      disabled: scale === maxScale,
+  const handleActive = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, offset: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    onActive(offset);
+  };
+
+  const renderOperation = React.useCallback(
+    ({ type, disabled, onClick, icon }: RenderOperationParams) => {
+      return (
+        <div
+          key={type}
+          className={classnames(toolClassName, `${prefixCls}-operations-operation-${type}`, {
+            [`${prefixCls}-operations-operation-disabled`]: !!disabled,
+          })}
+          onClick={onClick}
+        >
+          {icon}
+        </div>
+      );
     },
-  ];
-
-  const toolsNode = tools.map(({ icon, onClick, type, disabled }) => (
-    <div
-      className={classnames(toolClassName, {
-        [`${prefixCls}-operations-operation-${type}`]: true,
-        [`${prefixCls}-operations-operation-disabled`]: !!disabled,
-      })}
-      onClick={onClick}
-      key={type}
-    >
-      {icon}
-    </div>
-  ));
+    [toolClassName, prefixCls],
+  );
+
+  const switchPrevNode = showSwitch
+    ? renderOperation({
+        icon: left,
+        onClick: e => handleActive(e, -1),
+        type: 'prev',
+        disabled: current === 0,
+      })
+    : undefined;
+
+  const switchNextNode = showSwitch
+    ? renderOperation({
+        icon: right,
+        onClick: e => handleActive(e, 1),
+        type: 'next',
+        disabled: current === count - 1,
+      })
+    : undefined;
+
+  const flipYNode = renderOperation({
+    icon: flipY,
+    onClick: onFlipY,
+    type: 'flipY',
+  });
+
+  const flipXNode = renderOperation({
+    icon: flipX,
+    onClick: onFlipX,
+    type: 'flipX',
+  });
+
+  const rotateLeftNode = renderOperation({
+    icon: rotateLeft,
+    onClick: onRotateLeft,
+    type: 'rotateLeft',
+  });
 
-  const toolbarNode = <div className={`${prefixCls}-operations`}>{toolsNode}</div>;
+  const rotateRightNode = renderOperation({
+    icon: rotateRight,
+    onClick: onRotateRight,
+    type: 'rotateRight',
+  });
+
+  const zoomOutNode = renderOperation({
+    icon: zoomOut,
+    onClick: onZoomOut,
+    type: 'zoomOut',
+    disabled: scale <= minScale,
+  });
+
+  const zoomInNode = renderOperation({
+    icon: zoomIn,
+    onClick: onZoomIn,
+    type: 'zoomIn',
+    disabled: scale === maxScale,
+  });
+
+  const toolbarNode = (
+    <div className={`${prefixCls}-operations`}>
+      {flipYNode}
+      {flipXNode}
+      {rotateLeftNode}
+      {rotateRightNode}
+      {zoomOutNode}
+      {zoomInNode}
+    </div>
+  );
 
   return (
     <CSSMotion visible={visible} motionName={maskTransitionName}>
@@ -172,15 +228,15 @@ const Operations: React.FC<OperationsProps> = props => {
                   className={classnames(`${prefixCls}-switch-left`, {
                     [`${prefixCls}-switch-left-disabled`]: current === 0,
                   })}
-                  onClick={onSwitchLeft}
+                  onClick={e => handleActive(e, -1)}
                 >
                   {left}
                 </div>
                 <div
                   className={classnames(`${prefixCls}-switch-right`, {
                     [`${prefixCls}-switch-right-disabled`]: current === count - 1,
                   })}
-                  onClick={onSwitchRight}
+                  onClick={e => handleActive(e, 1)}
                 >
                   {right}
                 </div>
@@ -197,22 +253,25 @@ const Operations: React.FC<OperationsProps> = props => {
               {toolbarRender
                 ? toolbarRender(toolbarNode, {
                     icons: {
-                      flipYIcon: toolsNode[0],
-                      flipXIcon: toolsNode[1],
-                      rotateLeftIcon: toolsNode[2],
-                      rotateRightIcon: toolsNode[3],
-                      zoomOutIcon: toolsNode[4],
-                      zoomInIcon: toolsNode[5],
+                      prevIcon: switchPrevNode,
+                      nextIcon: switchNextNode,
+                      flipYIcon: flipYNode,
+                      flipXIcon: flipXNode,
+                      rotateLeftIcon: rotateLeftNode,
+                      rotateRightIcon: rotateRightNode,
+                      zoomOutIcon: zoomOutNode,
+                      zoomInIcon: zoomInNode,
                     },
                     actions: {
+                      onActive,
                       onFlipY,
                       onFlipX,
                       onRotateLeft,
                       onRotateRight,
                       onZoomOut,
                       onZoomIn,
                       onReset,
-                      onClose
+                      onClose,
                     },
                     transform,
                     ...(groupContext ? { current, total: count } : {}),

diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -16,6 +16,8 @@ import { BASE_SCALE_RATIO } from './previewConfig';
 
 export type ToolbarRenderInfoType = {
   icons: {
+    prevIcon?: React.ReactNode;
+    nextIcon?: React.ReactNode;
     flipYIcon: React.ReactNode;
     flipXIcon: React.ReactNode;
     rotateLeftIcon: React.ReactNode;
@@ -24,6 +26,7 @@ export type ToolbarRenderInfoType = {
     zoomInIcon: React.ReactNode;
   };
   actions: {
+    onActive?: (offset: number) => void;
     onFlipY: () => void;
     onFlipX: () => void;
     onRotateLeft: () => void;
@@ -207,33 +210,25 @@ const Preview: React.FC<PreviewProps> = props => {
     resetTransform('reset');
   };
 
-  const onSwitchLeft = (event?: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-    if (current > 0) {
-      setEnableTransition(false);
-      resetTransform('prev');
-      onChange?.(current - 1, current);
-    }
-  };
+  const onActive = (offset: number) => {
+    const position = current + offset;
 
-  const onSwitchRight = (event?: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-    if (current < count - 1) {
-      setEnableTransition(false);
-      resetTransform('next');
-      onChange?.(current + 1, current);
+    if (!Number.isInteger(position) || position < 0 || position > count - 1) {
+      return;
     }
-  };
+
+    setEnableTransition(false);
+    resetTransform(offset < 0 ? 'prev' : 'next');
+    onChange?.(position, current);
+  }
 
   const onKeyDown = (event: KeyboardEvent) => {
     if (!visible || !showLeftOrRightSwitches) return;
 
     if (event.keyCode === KeyCode.LEFT) {
-      onSwitchLeft();
+      onActive(-1);
     } else if (event.keyCode === KeyCode.RIGHT) {
-      onSwitchRight();
+      onActive(1);
     }
   };
 
@@ -269,9 +264,8 @@ const Preview: React.FC<PreviewProps> = props => {
       className={`${prefixCls}-img`}
       alt={alt}
       style={{
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale3d(${
-          transform.flipX ? '-' : ''
-        }${scale}, ${transform.flipY ? '-' : ''}${scale}, 1) rotate(${rotate}deg)`,
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale3d(${transform.flipX ? '-' : ''
+          }${scale}, ${transform.flipY ? '-' : ''}${scale}, 1) rotate(${rotate}deg)`,
         transitionDuration: (!enableTransition || isTouching) && '0s',
       }}
       fallback={fallback}
@@ -334,8 +328,7 @@ const Preview: React.FC<PreviewProps> = props => {
         minScale={minScale}
         maxScale={maxScale}
         toolbarRender={toolbarRender}
-        onSwitchLeft={onSwitchLeft}
-        onSwitchRight={onSwitchRight}
+        onActive={onActive}
         onZoomIn={onZoomIn}
         onZoomOut={onZoomOut}
         onRotateRight={onRotateRight}