fix: #10

refactor: rollback scale end handle
MinJieLiu · Apr 25, 2020 · 533773a · 533773a
1 parent 61801fc
commit 533773a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-photo-view",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "一款精致的 React 的图片预览组件",
   "author": "MinJieLiu",
   "license": "MIT",

diff --git a/src/PhotoSlider.tsx b/src/PhotoSlider.tsx
@@ -101,10 +101,10 @@ export default class PhotoSlider extends React.Component<IPhotoSliderProps, Phot
     window.removeEventListener('keydown', this.handleKeyDown);
   }
 
-  handleClose = () => {
+  handleClose = (evt?: React.MouseEvent | React.TouchEvent) => {
     const { onClose } = this.props;
     const { backdropOpacity } = this.state;
-    onClose();
+    onClose(evt);
     this.setState({
       overlayVisible: true,
       // 记录当前关闭时的透明度
@@ -328,7 +328,8 @@ export default class PhotoSlider extends React.Component<IPhotoSliderProps, Phot
 
             return (
               <SlideWrap
-                className={classNames({ 'PhotoView-PhotoSlider__clean': !currentOverlayVisible }, className)}
+                className={classNames({ 'PhotoView-PhotoSlider__clean': !visible }, className)}
+                onClick={e => e.stopPropagation()}
               >
                 <div
                   className={classNames('PhotoView-PhotoSlider__Backdrop', maskClassName, {
@@ -346,11 +347,7 @@ export default class PhotoSlider extends React.Component<IPhotoSliderProps, Phot
                       {photoIndex + 1} / {imageLength}
                     </div>
                     <div className="PhotoView-PhotoSlider__BannerRight">
-                      <CloseSVG
-                        className="PhotoView-PhotoSlider__Close"
-                        onTouchEnd={isTouchDevice ? this.handleClose : undefined}
-                        onClick={isTouchDevice ? undefined : this.handleClose}
-                      />
+                      <CloseSVG className="PhotoView-PhotoSlider__Close" onClick={this.handleClose} />
                     </div>
                   </div>
                 )}

diff --git a/src/PhotoView.tsx b/src/PhotoView.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import debounce from 'lodash.debounce';
 import Photo from './Photo';
 import throttle from './utils/throttle';
 import isTouchDevice from './utils/isTouchDevice';
@@ -112,14 +111,11 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
   private initialTouchState = TouchStartEnum.Normal;
 
   private readonly handlePhotoTap: TapFuncType<number>;
-  private readonly handleScaleEnd;
 
   constructor(props: IPhotoViewProps) {
     super(props);
     this.onMove = throttle(this.onMove, 8);
     this.handleResize = throttle(this.handleResize, 8);
-    // 放大/缩小后自适应
-    this.handleScaleEnd = debounce(this.onScaleEnd, 600);
     // 单击与双击事件处理
     this.handlePhotoTap = withContinuousTap(this.onPhotoTap, this.onDoubleTap);
   }
@@ -162,7 +158,6 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
   };
 
   handleStart = (clientX: number, clientY: number, touchLength: number = 0) => {
-    this.handleScaleEnd.cancel();
     this.setState(prevState => ({
       touched: true,
       clientX,
@@ -274,22 +269,6 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
     }
   };
 
-  onScaleEnd = () => {
-    const { width, height, x, y, lastX, lastY, scale, touchedTime } = this.state;
-    this.setState(
-      slideToPosition({
-        x,
-        y,
-        lastX,
-        lastY,
-        width,
-        height,
-        scale,
-        touchedTime,
-      }),
-    );
-  };
-
   onDoubleTap: TapFuncType<number> = (clientX, clientY) => {
     const { width, naturalWidth, x, y, scale, reachState } = this.state;
     if (reachState !== ReachTypeEnum.Normal) {
@@ -308,7 +287,6 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
         toScale: scale !== 1 ? 1 : Math.max(2, naturalWidth / width),
       }),
     });
-    this.handleScaleEnd();
   };
 
   handleWheel = e => {
@@ -334,7 +312,6 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
         }),
       };
     });
-    this.handleScaleEnd();
   };
 
   handleMaskStart = (clientX: number, clientY: number) => {