refactor: Preview code logic (#167)

Author: JarvisArt

assets/index.less

@@ -102,7 +102,6 @@
       pointer-events: auto;
       &-wrapper {
         .box;
-        transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
         &::before {
           content: '';
           display: inline-block;

src/Operations.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import CSSMotion from 'rc-motion';
+import Portal from '@rc-component/portal';
+import { MIN_SCALE, MAX_SCALE } from './previewConfig';
+import type { PreviewProps } from './Preview';
+
+interface OperationsProps
+  extends Pick<
+    PreviewProps,
+    | 'visible'
+    | 'maskTransitionName'
+    | 'getContainer'
+    | 'prefixCls'
+    | 'rootClassName'
+    | 'icons'
+    | 'countRender'
+    | 'onClose'
+  > {
+  showSwitch: boolean;
+  showProgress: boolean;
+  current: number;
+  count: number;
+  scale: number;
+  onSwitchLeft: React.MouseEventHandler<HTMLDivElement>;
+  onSwitchRight: React.MouseEventHandler<HTMLDivElement>;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onRotateRight: () => void;
+  onRotateLeft: () => void;
+}
+
+const Operations: React.FC<OperationsProps> = (props) => {
+  const {
+    visible,
+    maskTransitionName,
+    getContainer,
+    prefixCls,
+    rootClassName,
+    icons,
+    countRender,
+    showSwitch,
+    showProgress,
+    current,
+    count,
+    scale,
+    onSwitchLeft,
+    onSwitchRight,
+    onClose,
+    onZoomIn,
+    onZoomOut,
+    onRotateRight,
+    onRotateLeft,
+  } = props;
+  const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right } = icons;
+  const toolClassName = `${prefixCls}-operations-operation`;
+  const iconClassName = `${prefixCls}-operations-icon`;
+  const tools = [
+    {
+      icon: close,
+      onClick: onClose,
+      type: 'close',
+    },
+    {
+      icon: zoomIn,
+      onClick: onZoomIn,
+      type: 'zoomIn',
+      disabled: scale === MAX_SCALE,
+    },
+    {
+      icon: zoomOut,
+      onClick: onZoomOut,
+      type: 'zoomOut',
+      disabled: scale === MIN_SCALE,
+    },
+    {
+      icon: rotateRight,
+      onClick: onRotateRight,
+      type: 'rotateRight',
+    },
+    {
+      icon: rotateLeft,
+      onClick: onRotateLeft,
+      type: 'rotateLeft',
+    },
+  ];
+
+  const operations = (
+    <>
+      {showSwitch && (
+        <>
+          <div
+            className={classnames(`${prefixCls}-switch-left`, {
+              [`${prefixCls}-switch-left-disabled`]: current === 0,
+            })}
+            onClick={onSwitchLeft}
+          >
+            {left}
+          </div>
+          <div
+            className={classnames(`${prefixCls}-switch-right`, {
+              [`${prefixCls}-switch-right-disabled`]: current === count - 1,
+            })}
+            onClick={onSwitchRight}
+          >
+            {right}
+          </div>
+        </>
+      )}
+      <ul className={`${prefixCls}-operations`}>
+        {showProgress && (
+          <li className={`${prefixCls}-operations-progress`}>
+            {countRender?.(current + 1, count) ??
+              `${current + 1} / ${count}`}
+          </li>
+        )}
+        {tools.map(({ icon, onClick, type, disabled }) => (
+          <li
+            className={classnames(toolClassName, {
+              [`${prefixCls}-operations-operation-${type}`]: true,
+              [`${prefixCls}-operations-operation-disabled`]: !!disabled,
+            })}
+            onClick={onClick}
+            key={type}
+          >
+            {React.isValidElement(icon)
+              ? React.cloneElement<{ className?: string }>(icon, { className: iconClassName })
+              : icon}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+
+  return (
+    <CSSMotion visible={visible} motionName={maskTransitionName}>
+      {({ className, style }) => (
+        <Portal open getContainer={getContainer ?? document.body}>
+          <div
+            className={classnames(`${prefixCls}-operations-wrapper`, className, rootClassName)}
+            style={style}
+          >
+            {operations}
+          </div>
+        </Portal>
+      )}
+    </CSSMotion>
+  )
+};
+
+export default Operations;