fix #3

.prettierrc

@@ -1,5 +1,5 @@
 {
   "singleQuote": true,
-  "printWidth": 80,
+  "printWidth": 120,
   "trailingComma": "all"
 }

src/PhotoConsumer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import uniqueId from 'lodash.uniqueid';
-import isMobile from './utils/isMobile';
+import isTouchDevice from './utils/isTouchDevice';
 import PhotoContext, { PhotoContextType } from './photo-context';
 
 export interface IPhotoConsumer {
@@ -21,20 +21,17 @@ const PhotoConsumer: React.FC<IPhotoConsumer> = ({ src, intro, children }) => {
   });
   const photoTriggerRef = React.useRef<HTMLElement | null>(null);
 
-  React.useEffect(
-    () => {
-      photoContext.addItem({
-        key,
-        src,
-        originRef: photoTriggerRef.current,
-        intro,
-      });
-      return () => {
-        photoContext.removeItem(key);
-      };
-    },
-    [] as readonly [],
-  );
+  React.useEffect(() => {
+    photoContext.addItem({
+      key,
+      src,
+      originRef: photoTriggerRef.current,
+      intro,
+    });
+    return () => {
+      photoContext.removeItem(key);
+    };
+  }, [] as readonly []);
 
   function handleTouchStart(e) {
     const { clientX, clientY } = e.touches[0];
@@ -77,7 +74,7 @@ const PhotoConsumer: React.FC<IPhotoConsumer> = ({ src, intro, children }) => {
     return React.Children.only(
       React.cloneElement(
         children,
-        isMobile
+        isTouchDevice
           ? {
               onTouchStart: handleTouchStart,
               onTouchEnd: handleTouchEnd,

src/PhotoProvider.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-import PhotoContext, {
-  onShowType,
-  addItemType,
-  removeItemType,
-} from './photo-context';
+import PhotoContext, { onShowType, addItemType, removeItemType } from './photo-context';
 import PhotoSlider from './PhotoSlider';
 import { dataType, IPhotoProviderBase } from './types';
 
@@ -20,10 +16,7 @@ type PhotoProviderState = {
   removeItem: removeItemType;
 };
 
-export default class PhotoProvider extends React.Component<
-  IPhotoProvider,
-  PhotoProviderState
-> {
+export default class PhotoProvider extends React.Component<IPhotoProvider, PhotoProviderState> {
   constructor(props) {
     super(props);
 

src/PhotoSlider.tsx

@@ -5,13 +5,8 @@ import PhotoView from './PhotoView';
 import SlideWrap from './components/SlideWrap';
 import VisibleAnimationHandle from './components/VisibleAnimationHandle';
 import CloseSVG from './components/CloseSVG';
-import isMobile from './utils/isMobile';
-import {
-  dataType,
-  IPhotoProviderBase,
-  ReachTypeEnum,
-  ShowAnimateEnum,
-} from './types';
+import isTouchDevice from './utils/isTouchDevice';
+import { dataType, IPhotoProviderBase, ReachTypeEnum, ShowAnimateEnum } from './types';
 import { defaultOpacity, horizontalOffset, maxMoveOffset } from './variables';
 import './PhotoSlider.less';
 
@@ -52,10 +47,7 @@ type PhotoSliderState = {
   canPullClose: boolean;
 };
 
-export default class PhotoSlider extends React.Component<
-  IPhotoSliderProps,
-  PhotoSliderState
-> {
+export default class PhotoSlider extends React.Component<IPhotoSliderProps, PhotoSliderState> {
   static displayName = 'PhotoSlider';
 
   static defaultProps = {
@@ -66,10 +58,7 @@ export default class PhotoSlider extends React.Component<
   };
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    if (
-      nextProps.index !== undefined &&
-      nextProps.index !== prevState.photoIndex
-    ) {
+    if (nextProps.index !== undefined && nextProps.index !== prevState.photoIndex) {
       return {
         photoIndex: nextProps.index,
         translateX: -(window.innerWidth + horizontalOffset) * nextProps.index,
@@ -103,16 +92,11 @@ export default class PhotoSlider extends React.Component<
       translateX: index * -(window.innerWidth + horizontalOffset),
       photoIndex: index,
     });
-
-    if (!isMobile) {
-      window.addEventListener('keydown', this.handleKeyDown);
-    }
+    window.addEventListener('keydown', this.handleKeyDown);
   }
 
   componentWillUnmount() {
-    if (!isMobile) {
-      window.removeEventListener('keydown', this.handleKeyDown);
-    }
+    window.removeEventListener('keydown', this.handleKeyDown);
   }
 
   handleClose = () => {
@@ -183,10 +167,7 @@ export default class PhotoSlider extends React.Component<
         };
       }
       const offsetClientY = Math.abs(clientY - lastClientY);
-      const opacity = Math.max(
-        Math.min(defaultOpacity, defaultOpacity - offsetClientY / 100 / 2),
-        0,
-      );
+      const opacity = Math.max(Math.min(defaultOpacity, defaultOpacity - offsetClientY / 100 / 2), 0);
       return {
         touched: true,
         lastClientY,
@@ -221,17 +202,13 @@ export default class PhotoSlider extends React.Component<
       return {
         touched: true,
         lastClientX: lastClientX,
-        translateX:
-          -(innerWidth + horizontalOffset) * photoIndex + offsetClientX,
+        translateX: -(innerWidth + horizontalOffset) * photoIndex + offsetClientX,
         shouldTransition: true,
       };
     });
   };
 
-  handleIndexChange = (
-    photoIndex: number,
-    shouldTransition: boolean = true,
-  ) => {
+  handleIndexChange = (photoIndex: number, shouldTransition: boolean = true) => {
     const singlePageWidth = window.innerWidth + horizontalOffset;
     const translateX = -singlePageWidth * photoIndex;
     this.setState({
@@ -263,12 +240,7 @@ export default class PhotoSlider extends React.Component<
     }
   };
 
-  handleReachMove = (
-    reachState: ReachTypeEnum,
-    clientX: number,
-    clientY: number,
-    scale?: number,
-  ) => {
+  handleReachMove = (reachState: ReachTypeEnum, clientX: number, clientY: number, scale?: number) => {
     if (reachState === ReachTypeEnum.XReach) {
       this.handleReachHorizontalMove(clientX);
     } else if (reachState === ReachTypeEnum.YReach) {
@@ -278,13 +250,7 @@ export default class PhotoSlider extends React.Component<
 
   handleReachUp = (clientX: number, clientY: number) => {
     const { images } = this.props;
-    const {
-      lastClientX = clientX,
-      lastClientY = clientY,
-      photoIndex,
-      overlayVisible,
-      canPullClose,
-    } = this.state;
+    const { lastClientX = clientX, lastClientY = clientY, photoIndex, overlayVisible, canPullClose } = this.state;
 
     const offsetClientX = clientX - lastClientX;
     const offsetClientY = clientY - lastClientY;
@@ -354,47 +320,35 @@ export default class PhotoSlider extends React.Component<
         {({ photoVisible, showAnimateType, originRect, onShowAnimateEnd }) => {
           if (photoVisible) {
             const { innerWidth } = window;
-            const currentOverlayVisible =
-              overlayVisible && showAnimateType === ShowAnimateEnum.None;
+            const currentOverlayVisible = overlayVisible && showAnimateType === ShowAnimateEnum.None;
             const overlayStyle = {
               opacity: +currentOverlayVisible,
             };
             // 关闭过程中使用下拉保存的透明度
-            const currentOpacity = visible
-              ? backdropOpacity
-              : lastBackdropOpacity;
+            const currentOpacity = visible ? backdropOpacity : lastBackdropOpacity;
 
             return (
               <SlideWrap className={className}>
                 <div
-                  className={classNames(
-                    'PhotoView-PhotoSlider__Backdrop',
-                    maskClassName,
-                    {
-                      'PhotoView-PhotoSlider__fadeIn':
-                        showAnimateType === ShowAnimateEnum.In,
-                      'PhotoView-PhotoSlider__fadeOut':
-                        showAnimateType === ShowAnimateEnum.Out,
-                    },
-                  )}
+                  className={classNames('PhotoView-PhotoSlider__Backdrop', maskClassName, {
+                    'PhotoView-PhotoSlider__fadeIn': showAnimateType === ShowAnimateEnum.In,
+                    'PhotoView-PhotoSlider__fadeOut': showAnimateType === ShowAnimateEnum.Out,
+                  })}
                   style={{
                     background: `rgba(0, 0, 0, ${currentOpacity})`,
                   }}
                   onAnimationEnd={onShowAnimateEnd}
                 />
                 {bannerVisible && (
-                  <div
-                    className="PhotoView-PhotoSlider__BannerWrap"
-                    style={overlayStyle}
-                  >
+                  <div className="PhotoView-PhotoSlider__BannerWrap" style={overlayStyle}>
                     <div className="PhotoView-PhotoSlider__Counter">
                       {photoIndex + 1} / {imageLength}
                     </div>
                     <div className="PhotoView-PhotoSlider__BannerRight">
                       <CloseSVG
                         className="PhotoView-PhotoSlider__Close"
-                        onTouchEnd={isMobile ? this.handleClose : undefined}
-                        onClick={isMobile ? undefined : this.handleClose}
+                        onTouchEnd={isTouchDevice ? this.handleClose : undefined}
+                        onClick={isTouchDevice ? undefined : this.handleClose}
                       />
                     </div>
                   </div>
@@ -407,10 +361,7 @@ export default class PhotoSlider extends React.Component<
                   )
                   .map((item: dataType, index) => {
                     // 截取之前的索引位置
-                    const realIndex =
-                      photoIndex === 0
-                        ? photoIndex + index
-                        : photoIndex - 1 + index;
+                    const realIndex = photoIndex === 0 ? photoIndex + index : photoIndex - 1 + index;
                     return (
                       <PhotoView
                         key={item.key || realIndex}
@@ -422,8 +373,7 @@ export default class PhotoSlider extends React.Component<
                         viewClassName={viewClassName}
                         className={imageClassName}
                         style={{
-                          left: `${(innerWidth + horizontalOffset) *
-                            realIndex}px`,
+                          left: `${(innerWidth + horizontalOffset) * realIndex}px`,
                           WebkitTransform: transform,
                           transform,
                           transition:
@@ -440,15 +390,10 @@ export default class PhotoSlider extends React.Component<
                       />
                     );
                   })}
-                {introVisible && overlayIntro ? (
-                  <div
-                    className="PhotoView-PhotoSlider__FooterWrap"
-                    style={overlayStyle}
-                  >
+                {Boolean(introVisible && overlayIntro) && (
+                  <div className="PhotoView-PhotoSlider__FooterWrap" style={overlayStyle}>
                     {overlayIntro}
                   </div>
-                ) : (
-                  undefined
                 )}
                 {overlayRender &&
                   overlayRender({

src/PhotoView.tsx

@@ -2,19 +2,14 @@ import React from 'react';
 import classNames from 'classnames';
 import Photo from './Photo';
 import throttle from './utils/throttle';
-import isMobile from './utils/isMobile';
+import isTouchDevice from './utils/isTouchDevice';
 import getMultipleTouchPosition from './utils/getMultipleTouchPosition';
 import getPositionOnMoveOrScale from './utils/getPositionOnMoveOrScale';
 import slideToPosition from './utils/slideToPosition';
 import { getReachType, getClosedHorizontal, getClosedVertical } from './utils/getCloseEdge';
 import withContinuousTap, { TapFuncType } from './utils/withContinuousTap';
 import getAnimateOrigin from './utils/getAnimateOrigin';
-import {
-  maxScale,
-  minStartTouchOffset,
-  minScale,
-  scaleBuffer,
-} from './variables';
+import { maxScale, minStartTouchOffset, minScale, scaleBuffer } from './variables';
 import {
   ReachMoveFunction,
   ReachFunction,
@@ -108,10 +103,7 @@ const initialState = {
   reachState: ReachTypeEnum.Normal,
 };
 
-export default class PhotoView extends React.Component<
-  IPhotoViewProps,
-  typeof initialState
-> {
+export default class PhotoView extends React.Component<IPhotoViewProps, typeof initialState> {
   static displayName = 'PhotoView';
 
   readonly state = initialState;
@@ -125,17 +117,22 @@ export default class PhotoView extends React.Component<
     this.onMove = throttle(this.onMove, 8);
     this.handleResize = throttle(this.handleResize, 8);
     // 单击与双击事件处理
-    this.handlePhotoTap = withContinuousTap(
-      this.onPhotoTap,
-      this.onDoubleTap,
-    );
+    this.handlePhotoTap = withContinuousTap(this.onPhotoTap, this.onDoubleTap);
   }
 
   componentDidMount() {
-    if (isMobile) {
-      window.addEventListener('touchmove', this.handleTouchMove, { passive: false });
-      window.addEventListener('touchend', this.handleTouchEnd, { passive: false });
+    if (isTouchDevice) {
+      // window.addEventListener('touchstart', this.handleTouchStart, {
+      //   passive: false,
+      // });
+      window.addEventListener('touchmove', this.handleTouchMove, {
+        passive: false,
+      });
+      window.addEventListener('touchend', this.handleTouchEnd, {
+        passive: false,
+      });
     } else {
+      // window.addEventListener('mousedown', this.handleMouseDown);
       window.addEventListener('mousemove', this.handleMouseMove);
       window.addEventListener('mouseup', this.handleMouseUp);
     }
@@ -143,10 +140,12 @@ export default class PhotoView extends React.Component<
   }
 
   componentWillUnmount() {
-    if (isMobile) {
+    if (isTouchDevice) {
+      window.removeEventListener('touchstart', this.handleTouchStart);
       window.removeEventListener('touchmove', this.handleTouchMove);
       window.removeEventListener('touchend', this.handleTouchEnd);
     } else {
+      window.removeEventListener('mousedown', this.handleMouseDown);
       window.removeEventListener('mousemove', this.handleMouseMove);
       window.removeEventListener('mouseup', this.handleMouseUp);
     }
@@ -183,10 +182,7 @@ export default class PhotoView extends React.Component<
   };
 
   onMove = (newClientX: number, newClientY: number, touchLength: number = 0) => {
-    const {
-      onReachMove,
-      isActive,
-    } = this.props;
+    const { onReachMove, isActive } = this.props;
     const {
       width,
       height,
@@ -224,8 +220,8 @@ export default class PhotoView extends React.Component<
         this.initialTouchState = !isStillX
           ? TouchStartEnum.X
           : newClientY > clientY
-            ? TouchStartEnum.YPull
-            : TouchStartEnum.YPush;
+          ? TouchStartEnum.YPull
+          : TouchStartEnum.YPush;
       }
 
       let offsetX = newClientX - lastMoveClientX;
@@ -256,15 +252,9 @@ export default class PhotoView extends React.Component<
         });
       } else {
         // 目标倍数
-        const endScale = scale + (touchLength - lastTouchLength) / 100 / 2 * scale;
+        const endScale = scale + ((touchLength - lastTouchLength) / 100 / 2) * scale;
         // 限制最大倍数和最小倍数
-        const toScale = Math.max(
-          Math.min(
-            endScale,
-            Math.max(maxScale, naturalWidth / width)
-          ),
-          minScale - scaleBuffer,
-        );
+        const toScale = Math.max(Math.min(endScale, Math.max(maxScale, naturalWidth / width)), minScale - scaleBuffer);
         this.setState({
           lastTouchLength: touchLength,
           reachState: currentReachState,
@@ -308,19 +298,13 @@ export default class PhotoView extends React.Component<
     });
   };
 
-  handleWheel = (e) => {
+  handleWheel = e => {
     const { clientX, clientY, deltaY } = e;
     const { width, naturalWidth } = this.state;
     this.setState(({ x, y, scale }) => {
       const endScale = scale - deltaY / 100 / 2;
       // 限制最大倍数和最小倍数
-      const toScale = Math.max(
-        Math.min(
-          endScale,
-          Math.max(maxScale, naturalWidth / width)
-        ),
-        minScale,
-      );
+      const toScale = Math.max(Math.min(endScale, Math.max(maxScale, naturalWidth / width)), minScale);
       return {
         clientX,
         clientY,
@@ -346,32 +330,34 @@ export default class PhotoView extends React.Component<
     }));
   };
 
-  handleMaskMouseDown = (e) => {
+  handleMaskMouseDown = e => {
     this.handleMaskStart(e.clientX, e.clientY);
   };
 
-  handleMaskTouchStart = (e) => {
+  handleMaskTouchStart = e => {
+    e.preventDefault();
     const { clientX, clientY } = e.touches[0];
     this.handleMaskStart(clientX, clientY);
   };
 
-  handleTouchStart = (e) => {
+  handleTouchStart = e => {
+    e.preventDefault();
     const { clientX, clientY, touchLength } = getMultipleTouchPosition(e);
     this.handleStart(clientX, clientY, touchLength);
   };
 
-  handleMouseDown = (e) => {
+  handleMouseDown = e => {
     e.preventDefault();
     this.handleStart(e.clientX, e.clientY, 0);
   };
 
-  handleTouchMove = (e) => {
+  handleTouchMove = e => {
     e.preventDefault();
     const { clientX, clientY, touchLength } = getMultipleTouchPosition(e);
     this.onMove(clientX, clientY, touchLength);
   };
 
-  handleMouseMove = (e) => {
+  handleMouseMove = e => {
     e.preventDefault();
     this.onMove(e.clientX, e.clientY);
   };
@@ -397,51 +383,52 @@ export default class PhotoView extends React.Component<
     } = this.state;
     if ((touched || maskTouched) && isActive) {
       const hasMove = clientX !== newClientX || clientY !== newClientY;
-      this.setState({
-        touched: false,
-        maskTouched: false,
-        // 限制缩放
-        scale: Math.max(
-          Math.min(scale, Math.max(maxScale, naturalWidth / width)),
-          minScale,
-        ),
-        reachState: ReachTypeEnum.Normal, // 重置触发状态
-        ...hasMove
-          ? slideToPosition({
-            x,
-            y,
-            lastX,
-            lastY,
-            width,
-            height,
-            scale,
-            touchedTime,
-          }) : {
-            x,
-            y,
-          },
-      }, () => {
-        if (onReachUp) {
-          onReachUp(newClientX, newClientY);
-        }
-        // 触发 Tap 事件
-        if (!hasMove) {
-          if (touched && onPhotoTap) {
-            this.handlePhotoTap(newClientX, newClientY);
-          } else if (maskTouched && onMaskTap) {
-            onMaskTap(newClientX, newClientY);
+      this.setState(
+        {
+          touched: false,
+          maskTouched: false,
+          // 限制缩放
+          scale: Math.max(Math.min(scale, Math.max(maxScale, naturalWidth / width)), minScale),
+          reachState: ReachTypeEnum.Normal, // 重置触发状态
+          ...(hasMove
+            ? slideToPosition({
+                x,
+                y,
+                lastX,
+                lastY,
+                width,
+                height,
+                scale,
+                touchedTime,
+              })
+            : {
+                x,
+                y,
+              }),
+        },
+        () => {
+          if (onReachUp) {
+            onReachUp(newClientX, newClientY);
           }
-        }
-      });
+          // 触发 Tap 事件
+          if (!hasMove) {
+            if (touched && onPhotoTap) {
+              this.handlePhotoTap(newClientX, newClientY);
+            } else if (maskTouched && onMaskTap) {
+              onMaskTap(newClientX, newClientY);
+            }
+          }
+        },
+      );
     }
   };
 
-  handleTouchEnd = (e) => {
+  handleTouchEnd = e => {
     const { clientX, clientY } = e.changedTouches[0];
     this.handleUp(clientX, clientY);
   };
 
-  handleMouseUp = (e) => {
+  handleMouseUp = e => {
     const { clientX, clientY } = e;
     this.handleUp(clientX, clientY);
   };
@@ -458,16 +445,7 @@ export default class PhotoView extends React.Component<
       showAnimateType,
       originRect,
     } = this.props;
-    const {
-      width,
-      height,
-      loaded,
-      x,
-      y,
-      scale,
-      touched,
-      broken,
-    } = this.state;
+    const { width, height, loaded, x, y, scale, touched, broken } = this.state;
 
     const transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
 
@@ -475,8 +453,8 @@ export default class PhotoView extends React.Component<
       <div className={classNames('PhotoView__PhotoWrap', viewClassName)} style={style}>
         <div
           className="PhotoView__PhotoMask"
-          onMouseDown={!isMobile && isActive ? this.handleMaskMouseDown: undefined}
-          onTouchStart={isMobile && isActive ? this.handleMaskTouchStart : undefined}
+          onMouseDown={!isTouchDevice && isActive ? this.handleMaskMouseDown : undefined}
+          onTouchStart={isTouchDevice && isActive ? this.handleMaskTouchStart : undefined}
         />
         <div
           className={classNames({
@@ -494,15 +472,13 @@ export default class PhotoView extends React.Component<
             height={height}
             loaded={loaded}
             broken={broken}
-            onMouseDown={isMobile ? undefined : this.handleMouseDown}
-            onTouchStart={isMobile ? this.handleTouchStart : undefined}
+            onMouseDown={isTouchDevice ? undefined : this.handleMouseDown}
+            onTouchStart={isTouchDevice ? this.handleTouchStart : undefined}
             onWheel={this.handleWheel}
             style={{
               WebkitTransform: transform,
               transform,
-              transition: touched
-                ? undefined
-                : 'transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1)',
+              transition: touched ? undefined : 'transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1)',
             }}
             onImageLoad={this.handleImageLoad}
             loadingElement={loadingElement}

src/components/SlideWrap.tsx

@@ -3,43 +3,30 @@ import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import './SlideWrap.less';
 
-const SlideWrap: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  className,
-  children,
-  ...restProps
-}) => {
-  const dialogNode = React.useMemo(
-    () => {
-      // 容器
-      const dialogNode = document.createElement('section');
-      document.body.appendChild(dialogNode);
-      return dialogNode;
-    },
-    [] as readonly [],
-  );
+const SlideWrap: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...restProps }) => {
+  const dialogNode = React.useMemo(() => {
+    // 容器
+    const dialogNode = document.createElement('section');
+    document.body.appendChild(dialogNode);
+    return dialogNode;
+  }, [] as readonly []);
   const originalOverflowCallback = React.useRef('');
 
-  React.useEffect(
-    () => {
-      const { style } = document.body;
-      originalOverflowCallback.current = style.overflow;
-      style.overflow = 'hidden';
+  React.useEffect(() => {
+    const { style } = document.body;
+    originalOverflowCallback.current = style.overflow;
+    style.overflow = 'hidden';
 
-      return () => {
-        const { style } = document.body;
-        style.overflow = originalOverflowCallback.current;
-        // 清除容器
-        document.body.removeChild(dialogNode);
-      };
-    },
-    [] as readonly [],
-  );
+    return () => {
+      const { style } = document.body;
+      style.overflow = originalOverflowCallback.current;
+      // 清除容器
+      document.body.removeChild(dialogNode);
+    };
+  }, [] as readonly []);
 
   return createPortal(
-    <div
-      className={classNames('PhotoView-SlideWrap', className)}
-      {...restProps}
-    >
+    <div className={classNames('PhotoView-SlideWrap', className)} {...restProps}>
       {children}
     </div>,
     dialogNode,

src/components/Spinner.tsx

@@ -4,17 +4,8 @@ import './Spinner.less';
 function Spinner() {
   return (
     <div className="PhotoView__Spinner">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        width="36"
-        height="36"
-        fill="white"
-      >
-        <path
-          opacity=".25"
-          d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"
-        />
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="36" height="36" fill="white">
+        <path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4" />
         <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z" />
       </svg>
     </div>

src/components/VisibleAnimationHandle.tsx

@@ -17,15 +17,9 @@ interface VisibleHandleProps {
   }) => JSX.Element | null;
 }
 
-export default function VisibleAnimationHandle({
-  visible,
-  currentImage,
-  children,
-}: VisibleHandleProps) {
+export default function VisibleAnimationHandle({ visible, currentImage, children }: VisibleHandleProps) {
   const [photoVisible, updatePhotoVisible] = React.useState(visible);
-  const [showAnimateType, updateAnimateStatus] = React.useState<
-    ShowAnimateEnum
-  >(ShowAnimateEnum.None);
+  const [showAnimateType, updateAnimateStatus] = React.useState<ShowAnimateEnum>(ShowAnimateEnum.None);
   const [originRect, updateOriginRect] = React.useState<OriginRectType>();
 
   function onShowAnimateEnd() {

src/photo-context.ts

@@ -3,12 +3,7 @@ import { dataType } from './types';
 
 export type onShowType = (key?: string) => void;
 
-export type addItemType = ({
-  key,
-  src,
-  originRef,
-  intro,
-}: dataType) => void;
+export type addItemType = ({ key, src, originRef, intro }: dataType) => void;
 
 export type removeItemType = (key?: string) => void;
 

src/types.ts

@@ -54,12 +54,7 @@ export interface IPhotoProviderBase {
   brokenElement?: JSX.Element;
 }
 
-export type ReachMoveFunction = (
-  reachState: ReachTypeEnum,
-  clientX: number,
-  clientY: number,
-  scale?: number,
-) => void;
+export type ReachMoveFunction = (reachState: ReachTypeEnum, clientX: number, clientY: number, scale?: number) => void;
 
 export type ReachFunction = (clientX: number, clientY: number) => void;
 
@@ -106,7 +101,9 @@ export enum ShowAnimateEnum {
 /**
  * 触发源位置
  */
-export type OriginRectType = {
-  clientX: number;
-  clientY: number;
-} | undefined;
+export type OriginRectType =
+  | {
+      clientX: number;
+      clientY: number;
+    }
+  | undefined;

src/utils/getCloseEdge.ts

@@ -7,11 +7,7 @@ import { CloseEdgeEnum, ReachTypeEnum, TouchStartEnum } from '../types';
  * @param width
  * @return CloseEdgeEnum
  */
-export function getClosedHorizontal(
-  x: number,
-  scale: number,
-  width: number,
-): CloseEdgeEnum {
+export function getClosedHorizontal(x: number, scale: number, width: number): CloseEdgeEnum {
   const { innerWidth } = window;
   const currentWidth = width * scale;
   // 图片超出的宽度
@@ -33,11 +29,7 @@ export function getClosedHorizontal(
  * @param height
  * @return CloseEdgeEnum
  */
-export function getClosedVertical(
-  y: number,
-  scale: number,
-  height: number,
-): CloseEdgeEnum {
+export function getClosedVertical(y: number, scale: number, height: number): CloseEdgeEnum {
   const { innerHeight } = window;
   const currentHeight = height * scale;
   // 图片超出的高度
@@ -71,16 +63,11 @@ export function getReachType({
   verticalCloseEdge: CloseEdgeEnum;
   reachState: ReachTypeEnum;
 }): ReachTypeEnum {
-  if (
-    (horizontalCloseEdge > 0 &&
-      initialTouchState === TouchStartEnum.X) ||
-    reachState === ReachTypeEnum.XReach
-  ) {
+  if ((horizontalCloseEdge > 0 && initialTouchState === TouchStartEnum.X) || reachState === ReachTypeEnum.XReach) {
     return ReachTypeEnum.XReach;
   } else if (
     (verticalCloseEdge > 0 &&
-      (initialTouchState === TouchStartEnum.YPull ||
-        initialTouchState === TouchStartEnum.YPush)) ||
+      (initialTouchState === TouchStartEnum.YPull || initialTouchState === TouchStartEnum.YPush)) ||
     reachState === ReachTypeEnum.YReach
   ) {
     return ReachTypeEnum.YReach;

src/utils/getMultipleTouchPosition.ts

@@ -16,9 +16,7 @@ export default function getMultipleTouchPosition(
     return {
       clientX: (clientX + nextClientX) / 2,
       clientY: (clientY + nextClientY) / 2,
-      touchLength: Math.sqrt(
-        Math.pow(nextClientX - clientX, 2) + Math.pow(nextClientY - clientY, 2),
-      ),
+      touchLength: Math.sqrt(Math.pow(nextClientX - clientX, 2) + Math.pow(nextClientY - clientY, 2)),
     };
   }
   return { clientX, clientY, touchLength: 0 };

src/utils/getPositionOnMoveOrScale.ts

@@ -36,10 +36,8 @@ export default function getPositionOnMoveOrScale({
   // 放大偏移量
   const offsetScale = toScale / fromScale;
   // 偏移位置
-  const originX =
-    clientX - (clientX - lastPositionX) * offsetScale - centerClientX;
-  const originY =
-    clientY - (clientY - lastPositionY) * offsetScale - centerClientY;
+  const originX = clientX - (clientX - lastPositionX) * offsetScale - centerClientX;
+  const originY = clientY - (clientY - lastPositionY) * offsetScale - centerClientY;
   return {
     x: originX + offsetX,
     y: originY + offsetY,

src/utils/isMobile.ts

@@ -1,11 +0,0 @@
-/**
- * 是否为移动端设备
- */
-const isMobile =
-  (typeof window !== 'undefined' &&
-    window.navigator &&
-    window.navigator.userAgent &&
-    window.navigator.userAgent.includes('Mobile')) ||
-  false;
-
-export default isMobile;

src/utils/isTouchDevice.ts

@@ -0,0 +1,6 @@
+/**
+ * 是否支持触摸设备
+ */
+const isTouchDevice = 'ontouchstart' in document.documentElement;
+
+export default isTouchDevice;

src/utils/slideToPosition.ts

@@ -72,8 +72,7 @@ export default function slideToPosition({
   // 时间过长
   if (
     moveTime >= maxTouchTime &&
-    (horizontalCloseEdge === CloseEdgeEnum.Normal &&
-      verticalCloseEdge === CloseEdgeEnum.Normal)
+    horizontalCloseEdge === CloseEdgeEnum.Normal && verticalCloseEdge === CloseEdgeEnum.Normal
   ) {
     return {
       x,

src/utils/throttle.ts

@@ -9,6 +9,6 @@ export default function throttle(func, wait: number) {
   return debounce(func, wait, {
     leading: true,
     maxWait: wait,
-    trailing: true
+    trailing: true,
   });
 }

src/utils/withContinuousTap.ts

@@ -8,10 +8,7 @@ export type TapFuncType<T> = (...args: T[]) => void;
  * @param doubleTap - 双击事件
  * @return invokeTap
  */
-export default function withContinuousTap<T>(
-  singleTap: TapFuncType<T>,
-  doubleTap: TapFuncType<T>,
-): TapFuncType<T> {
+export default function withContinuousTap<T>(singleTap: TapFuncType<T>, doubleTap: TapFuncType<T>): TapFuncType<T> {
   // 当前连续点击次数
   let continuousClick = 0;