react-photo-view - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

es/components/BannerWrap.d.ts

 import React from 'react';
-export declare const BannerWrap: import("../../node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const Counter: import("../../node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const BannerRight: import("../../node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const Close: import("../../node_modules/styled-components").StyledComponentClass<any, any, Pick<any, string | number> & {
+export declare const BannerWrap: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const Counter: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const BannerRight: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const Close: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<any, any, Pick<any, string | number> & {
     theme?: any;
 } & React.HTMLAttributes<any>>;

es/components/FooterWrap.d.ts

 import React from 'react';
-declare const FooterWrap: import("../../node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+declare const FooterWrap: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export default FooterWrap;

es/components/Spinner.d.ts

@@ -1,2 +0,2 @@
-declare const _default: import("../../node_modules/styled-components").StyledComponentClass<{
+declare const _default: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<{
     className?: string | undefined;
@@ -3,0 +3,0 @@ }, any, Pick<{

es/PhotoView.d.ts

@@ -50,3 +50,4 @@ import React from 'react';
     };
-    private photoRef;
+    private readonly photoRef;
+    private readonly handlePhotoTap;
     constructor(props: any);
@@ -56,5 +57,5 @@ componentDidMount(): void;
     handleStart: (clientX: number, clientY: number, touchLength?: number) => void;
-    handleMove: (newClientX: number, newClientY: number, touchLength?: number) => void;
-    handlePhotoTap: (clientX: number, clientY: number) => void;
-    handleDoubleClick: (e: any) => void;
+    onMove: (newClientX: number, newClientY: number, touchLength?: number) => void;
+    onPhotoTap: (clientX: number, clientY: number) => void;
+    onDoubleTap: (clientX: any, clientY: any) => void;
     handleWheel: (e: any) => void;
@@ -72,6 +73,14 @@ handleMaskStart: (clientX: number, clientY: number) => void;
     handleResize: () => void;
-    handleReachCallback: (x: number, y: number, scale: number, newClientX: number, newClientY: number, reachState: ReachTypeEnum) => number;
-    handlePhotoRef: (ref: any) => void;
+    handleReachCallback: ({ x, y, width, height, scale, clientX, clientY, reachState, }: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        scale: number;
+        clientX: number;
+        clientY: number;
+        reachState: ReachTypeEnum;
+    }) => number;
     render(): JSX.Element;
 }
 export {};

es/PhotoView.js

@@ -7,3 +7,2 @@ import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
-import debounce from 'lodash.debounce';
 import Photo from './Photo';
@@ -18,2 +17,3 @@ import PhotoWrap from './components/PhotoWrap';
 import { getClosedHorizontal, getClosedVertical } from './utils/getCloseEdge';
+import withContinuousTap from './utils/withContinuousTap';
 import { maxScale, minReachOffset, minScale, scaleBuffer } from './variables';
@@ -57,2 +57,3 @@ import { ReachTypeEnum } from './types';
         _this.state = initialState;
+        _this.photoRef = React.createRef();
         _this.handleStart = function (clientX, clientY) {
@@ -73,3 +74,3 @@ var touchLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
         };
-        _this.handleMove = function (newClientX, newClientY) {
+        _this.onMove = function (newClientX, newClientY) {
             var touchLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -79,7 +80,9 @@ var _this$state = _this.state,
                 maskTouched = _this$state.maskTouched;
+            var current = _this.photoRef.current;
 
-            if (touched || maskTouched) {
-                var _this$photoRef$state = _this.photoRef.state,
-                    width = _this$photoRef$state.width,
-                    naturalWidth = _this$photoRef$state.naturalWidth;
+            if ((touched || maskTouched) && current) {
+                var _current$state = current.state,
+                    width = _current$state.width,
+                    height = _current$state.height,
+                    naturalWidth = _current$state.naturalWidth;
                 var _this$state2 = _this.state,
@@ -104,3 +107,12 @@ x = _this$state2.x,
                     // 边缘触发检测
-                    currentReachState = _this.handleReachCallback(currentX, currentY, scale, newClientX, newClientY, reachState);
+                    currentReachState = _this.handleReachCallback({
+                        x: currentX,
+                        y: currentY,
+                        width: width,
+                        height: height,
+                        scale: scale,
+                        clientX: newClientX,
+                        clientY: newClientY,
+                        reachState: reachState
+                    });
                 }
@@ -128,3 +140,3 @@ // 横向边缘触发、背景触发禁用当前滑动
         };
-        _this.handlePhotoTap = function (clientX, clientY) {
+        _this.onPhotoTap = function (clientX, clientY) {
             var onPhotoTap = _this.props.onPhotoTap;
@@ -136,18 +148,15 @@
         };
-        _this.handleDoubleClick = function (e) {
-            e.preventDefault();
-            // @ts-ignore 取消 Tap 事件
-            _this.handlePhotoTap.cancel();
-            var clientX = e.clientX,
-                clientY = e.clientY;
-            var _this$photoRef$state2 = _this.photoRef.state,
-                width = _this$photoRef$state2.width,
-                naturalWidth = _this$photoRef$state2.naturalWidth;
+        _this.onDoubleTap = function (clientX, clientY) {
+            var current = _this.photoRef.current;
 
-            _this.setState(function (_ref) {
-                var x = _ref.x,
-                    y = _ref.y,
-                    scale = _ref.scale;
+            if (current) {
+                var _current$state2 = current.state,
+                    width = _current$state2.width,
+                    naturalWidth = _current$state2.naturalWidth;
+                var _this$state3 = _this.state,
+                    x = _this$state3.x,
+                    y = _this$state3.y,
+                    scale = _this$state3.scale;
 
-                return _extends({ clientX: clientX,
+                _this.setState(_extends({ clientX: clientX,
                     clientY: clientY }, getPositionOnMoveOrScale({
@@ -161,32 +170,36 @@ x: x,
                     toScale: scale !== 1 ? 1 : Math.max(2, naturalWidth / width)
-                }));
-            });
+                })));
+            }
         };
         _this.handleWheel = function (e) {
             e.preventDefault();
-            var clientX = e.clientX,
-                clientY = e.clientY,
-                deltaY = e.deltaY;
-            var _this$photoRef$state3 = _this.photoRef.state,
-                width = _this$photoRef$state3.width,
-                naturalWidth = _this$photoRef$state3.naturalWidth;
+            var current = _this.photoRef.current;
 
-            _this.setState(function (_ref2) {
-                var x = _ref2.x,
-                    y = _ref2.y,
-                    scale = _ref2.scale;
+            if (current) {
+                var clientX = e.clientX,
+                    clientY = e.clientY,
+                    deltaY = e.deltaY;
+                var _current$state3 = current.state,
+                    width = _current$state3.width,
+                    naturalWidth = _current$state3.naturalWidth;
 
-                var endScale = scale - deltaY / 100 / 2;
-                // 限制最大倍数和最小倍数
-                var toScale = Math.max(Math.min(endScale, Math.max(maxScale, naturalWidth / width)), minScale);
-                return _extends({ clientX: clientX,
-                    clientY: clientY }, getPositionOnMoveOrScale({
-                    x: x,
-                    y: y,
-                    clientX: clientX,
-                    clientY: clientY,
-                    fromScale: scale,
-                    toScale: toScale
-                }));
-            });
+                _this.setState(function (_ref) {
+                    var x = _ref.x,
+                        y = _ref.y,
+                        scale = _ref.scale;
+
+                    var endScale = scale - deltaY / 100 / 2;
+                    // 限制最大倍数和最小倍数
+                    var toScale = Math.max(Math.min(endScale, Math.max(maxScale, naturalWidth / width)), minScale);
+                    return _extends({ clientX: clientX,
+                        clientY: clientY }, getPositionOnMoveOrScale({
+                        x: x,
+                        y: y,
+                        clientX: clientX,
+                        clientY: clientY,
+                        fromScale: scale,
+                        toScale: toScale
+                    }));
+                });
+            }
         };
@@ -242,3 +255,3 @@ _this.handleMaskStart = function (clientX, clientY) {
 
-                _this.handleMove(clientX, clientY, touchLength);
+                _this.onMove(clientX, clientY, touchLength);
             } else {
@@ -249,3 +262,3 @@ var _e$touches$3 = e.touches[0],
 
-                _this.handleMove(_clientX2, _clientY2);
+                _this.onMove(_clientX2, _clientY2);
             }
@@ -255,10 +268,11 @@ };
             e.preventDefault();
-            _this.handleMove(e.clientX, e.clientY);
+            _this.onMove(e.clientX, e.clientY);
         };
         _this.handleUp = function (newClientX, newClientY) {
-            var _this$state3 = _this.state,
-                touched = _this$state3.touched,
-                maskTouched = _this$state3.maskTouched;
+            var _this$state4 = _this.state,
+                touched = _this$state4.touched,
+                maskTouched = _this$state4.maskTouched;
+            var current = _this.photoRef.current;
 
-            if (touched || maskTouched) {
+            if ((touched || maskTouched) && current) {
                 var _this$props = _this.props,
@@ -268,22 +282,36 @@ onReachUp = _this$props.onReachUp,
                     onMaskTap = _this$props.onMaskTap;
-                var _this$photoRef$state4 = _this.photoRef.state,
-                    width = _this$photoRef$state4.width,
-                    naturalWidth = _this$photoRef$state4.naturalWidth,
-                    height = _this$photoRef$state4.height;
+                var _current$state4 = current.state,
+                    width = _current$state4.width,
+                    naturalWidth = _current$state4.naturalWidth,
+                    height = _current$state4.height;
+                var _this$state5 = _this.state,
+                    x = _this$state5.x,
+                    y = _this$state5.y,
+                    lastX = _this$state5.lastX,
+                    lastY = _this$state5.lastY,
+                    scale = _this$state5.scale,
+                    touchedTime = _this$state5.touchedTime,
+                    clientX = _this$state5.clientX,
+                    clientY = _this$state5.clientY;
 
-                _this.setState(function (_ref3) {
-                    var x = _ref3.x,
-                        y = _ref3.y,
-                        lastX = _ref3.lastX,
-                        lastY = _ref3.lastY,
-                        scale = _ref3.scale,
-                        touchedTime = _ref3.touchedTime,
-                        clientX = _ref3.clientX,
-                        clientY = _ref3.clientY;
-
-                    var hasMove = clientX !== newClientX || clientY !== newClientY;
+                var hasMove = clientX !== newClientX || clientY !== newClientY;
+                _this.setState(_extends({ touched: false, maskTouched: false,
+                    // 限制缩放
+                    scale: Math.max(Math.min(scale, Math.max(maxScale, naturalWidth / width)), minScale), reachState: ReachTypeEnum.Normal }, hasMove ? slideToSuitableOffset({
+                    x: x,
+                    y: y,
+                    lastX: lastX,
+                    lastY: lastY,
+                    width: width,
+                    height: height,
+                    scale: scale,
+                    touchedTime: touchedTime
+                }) : {
+                    x: x,
+                    y: y
+                }), function () {
                     if (onReachUp) {
                         onReachUp(newClientX, newClientY);
                     }
-                    // 没有移动触发 Tap 事件
+                    // 触发 Tap 事件
                     if (!hasMove) {
@@ -296,17 +324,2 @@ if (touched && onPhotoTap) {
                     }
-                    return _extends({ touched: false, maskTouched: false,
-                        // 限制缩放
-                        scale: Math.max(Math.min(scale, Math.max(maxScale, naturalWidth / width)), minScale), reachState: ReachTypeEnum.Normal }, hasMove ? slideToSuitableOffset({
-                        x: x,
-                        y: y,
-                        lastX: lastX,
-                        lastY: lastY,
-                        width: width,
-                        height: height,
-                        scale: scale,
-                        touchedTime: touchedTime
-                    }) : {
-                        x: x,
-                        y: y
-                    });
                 });
@@ -336,6 +349,11 @@ }
         };
-        _this.handleReachCallback = function (x, y, scale, newClientX, newClientY, reachState) {
-            var _this$photoRef$state5 = _this.photoRef.state,
-                width = _this$photoRef$state5.width,
-                height = _this$photoRef$state5.height;
+        _this.handleReachCallback = function (_ref2) {
+            var x = _ref2.x,
+                y = _ref2.y,
+                width = _ref2.width,
+                height = _ref2.height,
+                scale = _ref2.scale,
+                clientX = _ref2.clientX,
+                clientY = _ref2.clientY,
+                reachState = _ref2.reachState;
 
@@ -352,12 +370,12 @@ var horizontalType = getClosedHorizontal(x, scale, width);
             if (onReachLeftMove && (horizontalType && x > minReachOffset && reachState === ReachTypeEnum.Normal || reachState === ReachTypeEnum.XReach)) {
-                onReachLeftMove(newClientX, newClientY);
+                onReachLeftMove(clientX, clientY);
                 return ReachTypeEnum.XReach;
             } else if (onReachRightMove && (horizontalType && x < -minReachOffset && reachState === ReachTypeEnum.Normal || reachState === ReachTypeEnum.XReach)) {
-                onReachRightMove(newClientX, newClientY);
+                onReachRightMove(clientX, clientY);
                 return ReachTypeEnum.XReach;
             } else if (onReachTopMove && (verticalType && y > minReachOffset && reachState === ReachTypeEnum.Normal || reachState === ReachTypeEnum.YReach)) {
-                onReachTopMove(newClientX, newClientY);
+                onReachTopMove(clientX, clientY);
                 return ReachTypeEnum.YReach;
             } else if (onReachBottomMove && (verticalType && y < -minReachOffset && reachState === ReachTypeEnum.Normal || reachState === ReachTypeEnum.YReach)) {
-                onReachBottomMove(newClientX, newClientY);
+                onReachBottomMove(clientX, clientY);
                 return ReachTypeEnum.YReach;
@@ -367,8 +385,5 @@ }
         };
-        _this.handlePhotoRef = function (ref) {
-            _this.photoRef = ref;
-        };
-        _this.handleMove = throttle(_this.handleMove, 8);
-        // 延迟触发，与双击事件区分
-        _this.handlePhotoTap = debounce(_this.handlePhotoTap, 300);
+        _this.onMove = throttle(_this.onMove, 8);
+        // 单击与双击事件处理
+        _this.handlePhotoTap = withContinuousTap(_this.onPhotoTap, _this.onDoubleTap);
         return _this;
@@ -382,3 +397,3 @@ }
                 window.addEventListener('touchmove', this.handleTouchMove, { passive: false });
-                window.addEventListener('touchend', this.handleTouchEnd);
+                window.addEventListener('touchend', this.handleTouchEnd, { passive: false });
             } else {
@@ -423,3 +438,3 @@ window.addEventListener('mousemove', this.handleMouseMove);
                 React.createElement(PhotoMask, { onMouseDown: isMobile ? undefined : this.handleMaskMouseDown, onTouchStart: isMobile ? this.handleMaskTouchStart : undefined }),
-                React.createElement(Photo, { className: className, src: src, ref: this.handlePhotoRef, onDoubleClick: this.handleDoubleClick, onMouseDown: isMobile ? undefined : this.handleMouseDown, onTouchStart: isMobile ? this.handleTouchStart : undefined, onWheel: this.handleWheel, onPhotoResize: this.handleResize, style: {
+                React.createElement(Photo, { className: className, src: src, ref: this.photoRef, onMouseDown: isMobile ? undefined : this.handleMouseDown, onTouchStart: isMobile ? this.handleTouchStart : undefined, onWheel: this.handleWheel, onPhotoResize: this.handleResize, style: {
                         WebkitTransform: transform,
@@ -426,0 +441,0 @@ transform: transform,

lib/components/BannerWrap.d.ts

 import React from 'react';
-export declare const BannerWrap: import("../../node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const Counter: import("../../node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const BannerRight: import("../../node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const Close: import("../../node_modules/styled-components").StyledComponentClass<any, any, Pick<any, string | number> & {
+export declare const BannerWrap: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const Counter: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const BannerRight: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const Close: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<any, any, Pick<any, string | number> & {
     theme?: any;
 } & React.HTMLAttributes<any>>;

lib/components/FooterWrap.d.ts

 import React from 'react';
-declare const FooterWrap: import("../../node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+declare const FooterWrap: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export default FooterWrap;

lib/components/Spinner.d.ts

@@ -1,2 +0,2 @@
-declare const _default: import("../../node_modules/styled-components").StyledComponentClass<{
+declare const _default: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<{
     className?: string | undefined;
@@ -3,0 +3,0 @@ }, any, Pick<{

lib/PhotoView.d.ts

@@ -50,3 +50,4 @@ import React from 'react';
     };
-    private photoRef;
+    private readonly photoRef;
+    private readonly handlePhotoTap;
     constructor(props: any);
@@ -56,5 +57,5 @@ componentDidMount(): void;
     handleStart: (clientX: number, clientY: number, touchLength?: number) => void;
-    handleMove: (newClientX: number, newClientY: number, touchLength?: number) => void;
-    handlePhotoTap: (clientX: number, clientY: number) => void;
-    handleDoubleClick: (e: any) => void;
+    onMove: (newClientX: number, newClientY: number, touchLength?: number) => void;
+    onPhotoTap: (clientX: number, clientY: number) => void;
+    onDoubleTap: (clientX: any, clientY: any) => void;
     handleWheel: (e: any) => void;
@@ -72,6 +73,14 @@ handleMaskStart: (clientX: number, clientY: number) => void;
     handleResize: () => void;
-    handleReachCallback: (x: number, y: number, scale: number, newClientX: number, newClientY: number, reachState: ReachTypeEnum) => number;
-    handlePhotoRef: (ref: any) => void;
+    handleReachCallback: ({ x, y, width, height, scale, clientX, clientY, reachState, }: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        scale: number;
+        clientX: number;
+        clientY: number;
+        reachState: ReachTypeEnum;
+    }) => number;
     render(): JSX.Element;
 }
 export {};

lib/PhotoView.js

@@ -31,6 +31,2 @@ 'use strict';
 
-var _lodash = require('lodash.debounce');
-
-var _lodash2 = _interopRequireDefault(_lodash);
-
 var _Photo = require('./Photo');
@@ -70,2 +66,6 @@
 
+var _withContinuousTap = require('./utils/withContinuousTap');
+
+var _withContinuousTap2 = _interopRequireDefault(_withContinuousTap);
+
 var _variables = require('./variables');
@@ -113,2 +113,3 @@
         _this.state = initialState;
+        _this.photoRef = _react2['default'].createRef();
         _this.handleStart = function (clientX, clientY) {
@@ -129,3 +130,3 @@ var touchLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
         };
-        _this.handleMove = function (newClientX, newClientY) {
+        _this.onMove = function (newClientX, newClientY) {
             var touchLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -135,7 +136,9 @@ var _this$state = _this.state,
                 maskTouched = _this$state.maskTouched;
+            var current = _this.photoRef.current;
 
-            if (touched || maskTouched) {
-                var _this$photoRef$state = _this.photoRef.state,
-                    width = _this$photoRef$state.width,
-                    naturalWidth = _this$photoRef$state.naturalWidth;
+            if ((touched || maskTouched) && current) {
+                var _current$state = current.state,
+                    width = _current$state.width,
+                    height = _current$state.height,
+                    naturalWidth = _current$state.naturalWidth;
                 var _this$state2 = _this.state,
@@ -160,3 +163,12 @@ x = _this$state2.x,
                     // 边缘触发检测
-                    currentReachState = _this.handleReachCallback(currentX, currentY, scale, newClientX, newClientY, reachState);
+                    currentReachState = _this.handleReachCallback({
+                        x: currentX,
+                        y: currentY,
+                        width: width,
+                        height: height,
+                        scale: scale,
+                        clientX: newClientX,
+                        clientY: newClientY,
+                        reachState: reachState
+                    });
                 }
@@ -184,3 +196,3 @@ // 横向边缘触发、背景触发禁用当前滑动
         };
-        _this.handlePhotoTap = function (clientX, clientY) {
+        _this.onPhotoTap = function (clientX, clientY) {
             var onPhotoTap = _this.props.onPhotoTap;
@@ -192,18 +204,15 @@
         };
-        _this.handleDoubleClick = function (e) {
-            e.preventDefault();
-            // @ts-ignore 取消 Tap 事件
-            _this.handlePhotoTap.cancel();
-            var clientX = e.clientX,
-                clientY = e.clientY;
-            var _this$photoRef$state2 = _this.photoRef.state,
-                width = _this$photoRef$state2.width,
-                naturalWidth = _this$photoRef$state2.naturalWidth;
+        _this.onDoubleTap = function (clientX, clientY) {
+            var current = _this.photoRef.current;
 
-            _this.setState(function (_ref) {
-                var x = _ref.x,
-                    y = _ref.y,
-                    scale = _ref.scale;
+            if (current) {
+                var _current$state2 = current.state,
+                    width = _current$state2.width,
+                    naturalWidth = _current$state2.naturalWidth;
+                var _this$state3 = _this.state,
+                    x = _this$state3.x,
+                    y = _this$state3.y,
+                    scale = _this$state3.scale;
 
-                return (0, _extends3['default'])({ clientX: clientX,
+                _this.setState((0, _extends3['default'])({ clientX: clientX,
                     clientY: clientY }, (0, _getPositionOnMoveOrScale2['default'])({
@@ -217,32 +226,36 @@ x: x,
                     toScale: scale !== 1 ? 1 : Math.max(2, naturalWidth / width)
-                }));
-            });
+                })));
+            }
         };
         _this.handleWheel = function (e) {
             e.preventDefault();
-            var clientX = e.clientX,
-                clientY = e.clientY,
-                deltaY = e.deltaY;
-            var _this$photoRef$state3 = _this.photoRef.state,
-                width = _this$photoRef$state3.width,
-                naturalWidth = _this$photoRef$state3.naturalWidth;
+            var current = _this.photoRef.current;
 
-            _this.setState(function (_ref2) {
-                var x = _ref2.x,
-                    y = _ref2.y,
-                    scale = _ref2.scale;
+            if (current) {
+                var clientX = e.clientX,
+                    clientY = e.clientY,
+                    deltaY = e.deltaY;
+                var _current$state3 = current.state,
+                    width = _current$state3.width,
+                    naturalWidth = _current$state3.naturalWidth;
 
-                var endScale = scale - deltaY / 100 / 2;
-                // 限制最大倍数和最小倍数
-                var toScale = Math.max(Math.min(endScale, Math.max(_variables.maxScale, naturalWidth / width)), _variables.minScale);
-                return (0, _extends3['default'])({ clientX: clientX,
-                    clientY: clientY }, (0, _getPositionOnMoveOrScale2['default'])({
-                    x: x,
-                    y: y,
-                    clientX: clientX,
-                    clientY: clientY,
-                    fromScale: scale,
-                    toScale: toScale
-                }));
-            });
+                _this.setState(function (_ref) {
+                    var x = _ref.x,
+                        y = _ref.y,
+                        scale = _ref.scale;
+
+                    var endScale = scale - deltaY / 100 / 2;
+                    // 限制最大倍数和最小倍数
+                    var toScale = Math.max(Math.min(endScale, Math.max(_variables.maxScale, naturalWidth / width)), _variables.minScale);
+                    return (0, _extends3['default'])({ clientX: clientX,
+                        clientY: clientY }, (0, _getPositionOnMoveOrScale2['default'])({
+                        x: x,
+                        y: y,
+                        clientX: clientX,
+                        clientY: clientY,
+                        fromScale: scale,
+                        toScale: toScale
+                    }));
+                });
+            }
         };
@@ -298,3 +311,3 @@ _this.handleMaskStart = function (clientX, clientY) {
 
-                _this.handleMove(clientX, clientY, touchLength);
+                _this.onMove(clientX, clientY, touchLength);
             } else {
@@ -305,3 +318,3 @@ var _e$touches$3 = e.touches[0],
 
-                _this.handleMove(_clientX2, _clientY2);
+                _this.onMove(_clientX2, _clientY2);
             }
@@ -311,10 +324,11 @@ };
             e.preventDefault();
-            _this.handleMove(e.clientX, e.clientY);
+            _this.onMove(e.clientX, e.clientY);
         };
         _this.handleUp = function (newClientX, newClientY) {
-            var _this$state3 = _this.state,
-                touched = _this$state3.touched,
-                maskTouched = _this$state3.maskTouched;
+            var _this$state4 = _this.state,
+                touched = _this$state4.touched,
+                maskTouched = _this$state4.maskTouched;
+            var current = _this.photoRef.current;
 
-            if (touched || maskTouched) {
+            if ((touched || maskTouched) && current) {
                 var _this$props = _this.props,
@@ -324,22 +338,36 @@ onReachUp = _this$props.onReachUp,
                     onMaskTap = _this$props.onMaskTap;
-                var _this$photoRef$state4 = _this.photoRef.state,
-                    width = _this$photoRef$state4.width,
-                    naturalWidth = _this$photoRef$state4.naturalWidth,
-                    height = _this$photoRef$state4.height;
+                var _current$state4 = current.state,
+                    width = _current$state4.width,
+                    naturalWidth = _current$state4.naturalWidth,
+                    height = _current$state4.height;
+                var _this$state5 = _this.state,
+                    x = _this$state5.x,
+                    y = _this$state5.y,
+                    lastX = _this$state5.lastX,
+                    lastY = _this$state5.lastY,
+                    scale = _this$state5.scale,
+                    touchedTime = _this$state5.touchedTime,
+                    clientX = _this$state5.clientX,
+                    clientY = _this$state5.clientY;
 
-                _this.setState(function (_ref3) {
-                    var x = _ref3.x,
-                        y = _ref3.y,
-                        lastX = _ref3.lastX,
-                        lastY = _ref3.lastY,
-                        scale = _ref3.scale,
-                        touchedTime = _ref3.touchedTime,
-                        clientX = _ref3.clientX,
-                        clientY = _ref3.clientY;
-
-                    var hasMove = clientX !== newClientX || clientY !== newClientY;
+                var hasMove = clientX !== newClientX || clientY !== newClientY;
+                _this.setState((0, _extends3['default'])({ touched: false, maskTouched: false,
+                    // 限制缩放
+                    scale: Math.max(Math.min(scale, Math.max(_variables.maxScale, naturalWidth / width)), _variables.minScale), reachState: _types.ReachTypeEnum.Normal }, hasMove ? (0, _slideToSuitableOffset2['default'])({
+                    x: x,
+                    y: y,
+                    lastX: lastX,
+                    lastY: lastY,
+                    width: width,
+                    height: height,
+                    scale: scale,
+                    touchedTime: touchedTime
+                }) : {
+                    x: x,
+                    y: y
+                }), function () {
                     if (onReachUp) {
                         onReachUp(newClientX, newClientY);
                     }
-                    // 没有移动触发 Tap 事件
+                    // 触发 Tap 事件
                     if (!hasMove) {
@@ -352,17 +380,2 @@ if (touched && onPhotoTap) {
                     }
-                    return (0, _extends3['default'])({ touched: false, maskTouched: false,
-                        // 限制缩放
-                        scale: Math.max(Math.min(scale, Math.max(_variables.maxScale, naturalWidth / width)), _variables.minScale), reachState: _types.ReachTypeEnum.Normal }, hasMove ? (0, _slideToSuitableOffset2['default'])({
-                        x: x,
-                        y: y,
-                        lastX: lastX,
-                        lastY: lastY,
-                        width: width,
-                        height: height,
-                        scale: scale,
-                        touchedTime: touchedTime
-                    }) : {
-                        x: x,
-                        y: y
-                    });
                 });
@@ -392,6 +405,11 @@ }
         };
-        _this.handleReachCallback = function (x, y, scale, newClientX, newClientY, reachState) {
-            var _this$photoRef$state5 = _this.photoRef.state,
-                width = _this$photoRef$state5.width,
-                height = _this$photoRef$state5.height;
+        _this.handleReachCallback = function (_ref2) {
+            var x = _ref2.x,
+                y = _ref2.y,
+                width = _ref2.width,
+                height = _ref2.height,
+                scale = _ref2.scale,
+                clientX = _ref2.clientX,
+                clientY = _ref2.clientY,
+                reachState = _ref2.reachState;
 
@@ -408,12 +426,12 @@ var horizontalType = (0, _getCloseEdge.getClosedHorizontal)(x, scale, width);
             if (onReachLeftMove && (horizontalType && x > _variables.minReachOffset && reachState === _types.ReachTypeEnum.Normal || reachState === _types.ReachTypeEnum.XReach)) {
-                onReachLeftMove(newClientX, newClientY);
+                onReachLeftMove(clientX, clientY);
                 return _types.ReachTypeEnum.XReach;
             } else if (onReachRightMove && (horizontalType && x < -_variables.minReachOffset && reachState === _types.ReachTypeEnum.Normal || reachState === _types.ReachTypeEnum.XReach)) {
-                onReachRightMove(newClientX, newClientY);
+                onReachRightMove(clientX, clientY);
                 return _types.ReachTypeEnum.XReach;
             } else if (onReachTopMove && (verticalType && y > _variables.minReachOffset && reachState === _types.ReachTypeEnum.Normal || reachState === _types.ReachTypeEnum.YReach)) {
-                onReachTopMove(newClientX, newClientY);
+                onReachTopMove(clientX, clientY);
                 return _types.ReachTypeEnum.YReach;
             } else if (onReachBottomMove && (verticalType && y < -_variables.minReachOffset && reachState === _types.ReachTypeEnum.Normal || reachState === _types.ReachTypeEnum.YReach)) {
-                onReachBottomMove(newClientX, newClientY);
+                onReachBottomMove(clientX, clientY);
                 return _types.ReachTypeEnum.YReach;
@@ -423,8 +441,5 @@ }
         };
-        _this.handlePhotoRef = function (ref) {
-            _this.photoRef = ref;
-        };
-        _this.handleMove = (0, _throttle2['default'])(_this.handleMove, 8);
-        // 延迟触发，与双击事件区分
-        _this.handlePhotoTap = (0, _lodash2['default'])(_this.handlePhotoTap, 300);
+        _this.onMove = (0, _throttle2['default'])(_this.onMove, 8);
+        // 单击与双击事件处理
+        _this.handlePhotoTap = (0, _withContinuousTap2['default'])(_this.onPhotoTap, _this.onDoubleTap);
         return _this;
@@ -438,3 +453,3 @@ }
                 window.addEventListener('touchmove', this.handleTouchMove, { passive: false });
-                window.addEventListener('touchend', this.handleTouchEnd);
+                window.addEventListener('touchend', this.handleTouchEnd, { passive: false });
             } else {
@@ -479,3 +494,3 @@ window.addEventListener('mousemove', this.handleMouseMove);
                 _react2['default'].createElement(_PhotoMask2['default'], { onMouseDown: _isMobile2['default'] ? undefined : this.handleMaskMouseDown, onTouchStart: _isMobile2['default'] ? this.handleMaskTouchStart : undefined }),
-                _react2['default'].createElement(_Photo2['default'], { className: className, src: src, ref: this.handlePhotoRef, onDoubleClick: this.handleDoubleClick, onMouseDown: _isMobile2['default'] ? undefined : this.handleMouseDown, onTouchStart: _isMobile2['default'] ? this.handleTouchStart : undefined, onWheel: this.handleWheel, onPhotoResize: this.handleResize, style: {
+                _react2['default'].createElement(_Photo2['default'], { className: className, src: src, ref: this.photoRef, onMouseDown: _isMobile2['default'] ? undefined : this.handleMouseDown, onTouchStart: _isMobile2['default'] ? this.handleTouchStart : undefined, onWheel: this.handleWheel, onPhotoResize: this.handleResize, style: {
                         WebkitTransform: transform,
@@ -482,0 +497,0 @@ transform: transform,

package.json

 {
   "name": "react-photo-view",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "React photo preview.",
@@ -5,0 +5,0 @@ "main": "./lib/index",

No alert changes

Improved metrics

Total package byte prevSize

165224

increased by2.61%

Number of package files

97

increased by4.3%

Lines of code

3861

increased by3.29%

No dependency changes