react-photo-view - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

es/components/BannerWrap.d.ts

 import React from 'react';
-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> & {
+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> & {
     theme?: any;
 } & React.HTMLAttributes<any>>;

es/components/FooterWrap.d.ts

 import React from 'react';
-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>>;
+declare const FooterWrap: import("../../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("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<{
+declare const _default: import("../../node_modules/styled-components").StyledComponentClass<{
     className?: string | undefined;
@@ -3,0 +3,0 @@ }, any, Pick<{

es/PhotoSlider.d.ts

@@ -7,3 +7,3 @@ import React from 'react';
     visible: boolean;
-    onClose: (evt?: React.MouseEvent) => void;
+    onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
     onIndexChange?: Function;
@@ -35,4 +35,4 @@ }
     componentWillUnmount(): void;
-    handlePhotoClick: () => void;
-    handlePhotoMaskClick: () => void;
+    handlePhotoTap: () => void;
+    handlePhotoMaskTap: () => void;
     handleResize: () => void;
@@ -39,0 +39,0 @@ handleReachVerticalMove: (clientX: any, clientY: any) => void;

es/PhotoSlider.js

@@ -11,2 +11,3 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 import FooterWrap from './components/FooterWrap';
+import isMobile from './utils/isMobile';
 import { defaultOpacity, horizontalOffset, maxMoveOffset } from './variables';
@@ -22,3 +23,3 @@
 
-        _this.handlePhotoClick = function () {
+        _this.handlePhotoTap = function () {
             _this.setState(function (prevState) {
@@ -30,3 +31,3 @@ return {
         };
-        _this.handlePhotoMaskClick = function () {
+        _this.handlePhotoMaskTap = function () {
             var _this$props = _this.props,
@@ -237,3 +238,3 @@ maskClosable = _this$props.maskClosable,
                             null,
-                            React.createElement(Close, { onClick: onClose })
+                            React.createElement(Close, { onTouchEnd: isMobile ? onClose : undefined, onClick: isMobile ? undefined : onClose })
                         )
@@ -245,3 +246,3 @@ ) : undefined,
                         var realIndex = photoIndex === 0 ? photoIndex + index : photoIndex - 1 + index;
-                        return React.createElement(PhotoView, { key: item.key || realIndex, src: item.src, onReachTopMove: _this2.handleReachVerticalMove, onReachBottomMove: _this2.handleReachVerticalMove, onReachRightMove: realIndex < imageLength - 1 ? _this2.handleReachHorizontalMove : undefined, onReachLeftMove: realIndex > 0 ? _this2.handleReachHorizontalMove : undefined, onReachUp: _this2.handleReachUp, onPhotoClick: _this2.handlePhotoClick, onMaskClick: _this2.handlePhotoMaskClick, photoScale: photoIndex === realIndex ? photoScale : 1, wrapClassName: viewClassName, className: imageClassName, style: {
+                        return React.createElement(PhotoView, { key: item.key || realIndex, src: item.src, onReachTopMove: _this2.handleReachVerticalMove, onReachBottomMove: _this2.handleReachVerticalMove, onReachRightMove: realIndex < imageLength - 1 ? _this2.handleReachHorizontalMove : undefined, onReachLeftMove: realIndex > 0 ? _this2.handleReachHorizontalMove : undefined, onReachUp: _this2.handleReachUp, onPhotoTap: _this2.handlePhotoTap, onMaskTap: _this2.handlePhotoMaskTap, photoScale: photoIndex === realIndex ? photoScale : 1, wrapClassName: viewClassName, className: imageClassName, style: {
                                 left: (innerWidth + horizontalOffset) * realIndex + 'px',
@@ -248,0 +249,0 @@ WebkitTransform: transform,

es/PhotoView.d.ts

 import React from 'react';
-import { ReachFunction, PhotoClickFunction, ReachTypeEnum } from './types';
+import { ReachFunction, PhotoTapFunction, ReachTypeEnum } from './types';
 interface IPhotoViewProps {
@@ -11,4 +11,4 @@ src: string;
     brokenElement?: JSX.Element;
-    onPhotoClick?: PhotoClickFunction;
-    onMaskClick?: PhotoClickFunction;
+    onPhotoTap?: PhotoTapFunction;
+    onMaskTap?: PhotoTapFunction;
     onReachTopMove?: ReachFunction;
@@ -18,3 +18,3 @@ onReachRightMove?: ReachFunction;
     onReachLeftMove?: ReachFunction;
-    onReachUp?: (clientX: number, clientY: number) => void;
+    onReachUp?: ReachFunction;
     onPhotoResize?: () => void;
@@ -58,4 +58,3 @@ }
     handleMove: (newClientX: number, newClientY: number, touchLength?: number) => void;
-    photoClick: (newClientX: number, newClientY: number) => void;
-    handlePhotoClick: (e: any) => void;
+    handlePhotoTap: (clientX: number, clientY: number) => void;
     handleDoubleClick: (e: any) => void;
@@ -66,3 +65,2 @@ handleWheel: (e: any) => void;
     handleMaskTouchStart: (e: any) => void;
-    handleMaskClick: (e: any) => void;
     handleTouchStart: (e: any) => void;
@@ -69,0 +67,0 @@ handleMouseDown: (e: any) => void;

es/PhotoView.js

@@ -13,3 +13,2 @@ import _extends from 'babel-runtime/helpers/extends';
 import isMobile from './utils/isMobile';
-import getCurrentFromEvent from './utils/getCurrentFromEvent';
 import getMultipleTouchPosition from './utils/getMultipleTouchPosition';
@@ -124,23 +123,13 @@ import getPositionOnMoveOrScale from './utils/getPositionOnMoveOrScale';
         };
-        _this.photoClick = function (newClientX, newClientY) {
-            var onPhotoClick = _this.props.onPhotoClick;
-            var _this$state3 = _this.state,
-                clientX = _this$state3.clientX,
-                clientY = _this$state3.clientY;
+        _this.handlePhotoTap = function (clientX, clientY) {
+            var onPhotoTap = _this.props.onPhotoTap;
 
-            if (onPhotoClick && Math.abs(clientX - newClientX) < 5 && Math.abs(clientY - newClientY) < 5) {
-                onPhotoClick(newClientX, newClientY);
+            if (onPhotoTap) {
+                onPhotoTap(clientX, clientY);
             }
         };
-        _this.handlePhotoClick = function (e) {
-            var _getCurrentFromEvent = getCurrentFromEvent(e),
-                clientX = _getCurrentFromEvent.clientX,
-                clientY = _getCurrentFromEvent.clientY;
-
-            _this.photoClick(clientX, clientY);
-        };
         _this.handleDoubleClick = function (e) {
             e.preventDefault();
-            // @ts-ignore 取消 click 事件
-            _this.photoClick.cancel();
+            // @ts-ignore 取消 Tap 事件
+            _this.handlePhotoTap.cancel();
             var clientX = e.clientX,
@@ -218,13 +207,2 @@ clientY = e.clientY;
         };
-        _this.handleMaskClick = function (e) {
-            var evt = getCurrentFromEvent(e);
-            var onMaskClick = _this.props.onMaskClick;
-            var _this$state4 = _this.state,
-                clientX = _this$state4.clientX,
-                clientY = _this$state4.clientY;
-
-            if (onMaskClick && Math.abs(clientX - evt.clientX) < 5 && Math.abs(clientY - evt.clientY) < 5) {
-                onMaskClick(clientX, clientY);
-            }
-        };
         _this.handleTouchStart = function (e) {
@@ -272,8 +250,11 @@ if (e.touches.length >= 2) {
         _this.handleUp = function (newClientX, newClientY) {
-            var _this$state5 = _this.state,
-                touched = _this$state5.touched,
-                maskTouched = _this$state5.maskTouched;
+            var _this$state3 = _this.state,
+                touched = _this$state3.touched,
+                maskTouched = _this$state3.maskTouched;
 
             if (touched || maskTouched) {
-                var onReachUp = _this.props.onReachUp;
+                var _this$props = _this.props,
+                    onReachUp = _this$props.onReachUp,
+                    onPhotoTap = _this$props.onPhotoTap,
+                    onMaskTap = _this$props.onMaskTap;
                 var _this$photoRef$state4 = _this.photoRef.state,
@@ -294,9 +275,17 @@ width = _this$photoRef$state4.width,
 
+                    var hasMove = clientX !== newClientX || clientY !== newClientY;
                     if (onReachUp) {
                         onReachUp(newClientX, newClientY);
                     }
-                    var hasMove = clientX !== newClientX || clientY !== newClientY;
-                    // 缩放弹性效果
-                    var toScale = Math.max(Math.min(scale, Math.max(maxScale, naturalWidth / width)), minScale);
-                    return _extends({ touched: false, maskTouched: false, scale: toScale, reachState: ReachTypeEnum.Normal }, hasMove ? slideToSuitableOffset({
+                    // 没有移动触发 Tap 事件
+                    if (!hasMove) {
+                        if (touched && onPhotoTap) {
+                            _this.handlePhotoTap(newClientX, newClientY);
+                        } else if (maskTouched && onMaskTap) {
+                            onMaskTap(newClientX, newClientY);
+                        }
+                    }
+                    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,
@@ -345,7 +334,7 @@ y: y,
             var verticalType = getClosedVertical(y, scale, height);
-            var _this$props = _this.props,
-                onReachTopMove = _this$props.onReachTopMove,
-                onReachRightMove = _this$props.onReachRightMove,
-                onReachBottomMove = _this$props.onReachBottomMove,
-                onReachLeftMove = _this$props.onReachLeftMove;
+            var _this$props2 = _this.props,
+                onReachTopMove = _this$props2.onReachTopMove,
+                onReachRightMove = _this$props2.onReachRightMove,
+                onReachBottomMove = _this$props2.onReachBottomMove,
+                onReachLeftMove = _this$props2.onReachLeftMove;
             //  触碰到边缘
@@ -371,5 +360,5 @@
         };
-        // 加入延迟触发，避免与双击混淆
-        _this.photoClick = debounce(_this.photoClick, 300);
         _this.handleMove = throttle(_this.handleMove, 8);
+        // 延迟触发，与双击事件区分
+        _this.handlePhotoTap = debounce(_this.handlePhotoTap, 300);
         return _this;
@@ -422,4 +411,4 @@ }
                 { className: wrapClassName, style: style },
-                React.createElement(PhotoMask, { onMouseDown: isMobile ? undefined : this.handleMaskMouseDown, onTouchStart: isMobile ? this.handleMaskTouchStart : undefined, onClick: this.handleMaskClick }),
-                React.createElement(Photo, { className: className, src: src, ref: this.handlePhotoRef, onClick: this.handlePhotoClick, onDoubleClick: this.handleDoubleClick, onMouseDown: isMobile ? undefined : this.handleMouseDown, onTouchStart: isMobile ? this.handleTouchStart : undefined, onWheel: this.handleWheel, onPhotoResize: this.handleResize, style: {
+                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: {
                         WebkitTransform: transform,
@@ -426,0 +415,0 @@ transform: transform,

es/types.d.ts

@@ -23,3 +23,3 @@ /**
 export declare type ReachFunction = (clientX: number, clientY: number) => void;
-export declare type PhotoClickFunction = (clientX: number, clientY: number) => void;
+export declare type PhotoTapFunction = (clientX: number, clientY: number) => void;
 /**
@@ -26,0 +26,0 @@ * 边缘超出状态

lib/components/BannerWrap.d.ts

 import React from 'react';
-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> & {
+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> & {
     theme?: any;
 } & React.HTMLAttributes<any>>;

lib/components/FooterWrap.d.ts

 import React from 'react';
-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>>;
+declare const FooterWrap: import("../../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("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<{
+declare const _default: import("../../node_modules/styled-components").StyledComponentClass<{
     className?: string | undefined;
@@ -3,0 +3,0 @@ }, any, Pick<{

lib/PhotoSlider.d.ts

@@ -7,3 +7,3 @@ import React from 'react';
     visible: boolean;
-    onClose: (evt?: React.MouseEvent) => void;
+    onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
     onIndexChange?: Function;
@@ -35,4 +35,4 @@ }
     componentWillUnmount(): void;
-    handlePhotoClick: () => void;
-    handlePhotoMaskClick: () => void;
+    handlePhotoTap: () => void;
+    handlePhotoMaskTap: () => void;
     handleResize: () => void;
@@ -39,0 +39,0 @@ handleReachVerticalMove: (clientX: any, clientY: any) => void;

lib/PhotoSlider.js

@@ -45,2 +45,6 @@ 'use strict';
 
+var _isMobile = require('./utils/isMobile');
+
+var _isMobile2 = _interopRequireDefault(_isMobile);
+
 var _variables = require('./variables');
@@ -58,3 +62,3 @@
 
-        _this.handlePhotoClick = function () {
+        _this.handlePhotoTap = function () {
             _this.setState(function (prevState) {
@@ -66,3 +70,3 @@ return {
         };
-        _this.handlePhotoMaskClick = function () {
+        _this.handlePhotoMaskTap = function () {
             var _this$props = _this.props,
@@ -273,3 +277,3 @@ maskClosable = _this$props.maskClosable,
                             null,
-                            _react2['default'].createElement(_BannerWrap.Close, { onClick: onClose })
+                            _react2['default'].createElement(_BannerWrap.Close, { onTouchEnd: _isMobile2['default'] ? onClose : undefined, onClick: _isMobile2['default'] ? undefined : onClose })
                         )
@@ -281,3 +285,3 @@ ) : undefined,
                         var realIndex = photoIndex === 0 ? photoIndex + index : photoIndex - 1 + index;
-                        return _react2['default'].createElement(_PhotoView2['default'], { key: item.key || realIndex, src: item.src, onReachTopMove: _this2.handleReachVerticalMove, onReachBottomMove: _this2.handleReachVerticalMove, onReachRightMove: realIndex < imageLength - 1 ? _this2.handleReachHorizontalMove : undefined, onReachLeftMove: realIndex > 0 ? _this2.handleReachHorizontalMove : undefined, onReachUp: _this2.handleReachUp, onPhotoClick: _this2.handlePhotoClick, onMaskClick: _this2.handlePhotoMaskClick, photoScale: photoIndex === realIndex ? photoScale : 1, wrapClassName: viewClassName, className: imageClassName, style: {
+                        return _react2['default'].createElement(_PhotoView2['default'], { key: item.key || realIndex, src: item.src, onReachTopMove: _this2.handleReachVerticalMove, onReachBottomMove: _this2.handleReachVerticalMove, onReachRightMove: realIndex < imageLength - 1 ? _this2.handleReachHorizontalMove : undefined, onReachLeftMove: realIndex > 0 ? _this2.handleReachHorizontalMove : undefined, onReachUp: _this2.handleReachUp, onPhotoTap: _this2.handlePhotoTap, onMaskTap: _this2.handlePhotoMaskTap, photoScale: photoIndex === realIndex ? photoScale : 1, wrapClassName: viewClassName, className: imageClassName, style: {
                                 left: (innerWidth + _variables.horizontalOffset) * realIndex + 'px',
@@ -284,0 +288,0 @@ WebkitTransform: transform,

lib/PhotoView.d.ts

 import React from 'react';
-import { ReachFunction, PhotoClickFunction, ReachTypeEnum } from './types';
+import { ReachFunction, PhotoTapFunction, ReachTypeEnum } from './types';
 interface IPhotoViewProps {
@@ -11,4 +11,4 @@ src: string;
     brokenElement?: JSX.Element;
-    onPhotoClick?: PhotoClickFunction;
-    onMaskClick?: PhotoClickFunction;
+    onPhotoTap?: PhotoTapFunction;
+    onMaskTap?: PhotoTapFunction;
     onReachTopMove?: ReachFunction;
@@ -18,3 +18,3 @@ onReachRightMove?: ReachFunction;
     onReachLeftMove?: ReachFunction;
-    onReachUp?: (clientX: number, clientY: number) => void;
+    onReachUp?: ReachFunction;
     onPhotoResize?: () => void;
@@ -58,4 +58,3 @@ }
     handleMove: (newClientX: number, newClientY: number, touchLength?: number) => void;
-    photoClick: (newClientX: number, newClientY: number) => void;
-    handlePhotoClick: (e: any) => void;
+    handlePhotoTap: (clientX: number, clientY: number) => void;
     handleDoubleClick: (e: any) => void;
@@ -66,3 +65,2 @@ handleWheel: (e: any) => void;
     handleMaskTouchStart: (e: any) => void;
-    handleMaskClick: (e: any) => void;
     handleTouchStart: (e: any) => void;
@@ -69,0 +67,0 @@ handleMouseDown: (e: any) => void;

lib/PhotoView.js

@@ -55,6 +55,2 @@ 'use strict';
 
-var _getCurrentFromEvent2 = require('./utils/getCurrentFromEvent');
-
-var _getCurrentFromEvent3 = _interopRequireDefault(_getCurrentFromEvent2);
-
 var _getMultipleTouchPosition = require('./utils/getMultipleTouchPosition');
@@ -183,23 +179,13 @@
         };
-        _this.photoClick = function (newClientX, newClientY) {
-            var onPhotoClick = _this.props.onPhotoClick;
-            var _this$state3 = _this.state,
-                clientX = _this$state3.clientX,
-                clientY = _this$state3.clientY;
+        _this.handlePhotoTap = function (clientX, clientY) {
+            var onPhotoTap = _this.props.onPhotoTap;
 
-            if (onPhotoClick && Math.abs(clientX - newClientX) < 5 && Math.abs(clientY - newClientY) < 5) {
-                onPhotoClick(newClientX, newClientY);
+            if (onPhotoTap) {
+                onPhotoTap(clientX, clientY);
             }
         };
-        _this.handlePhotoClick = function (e) {
-            var _getCurrentFromEvent = (0, _getCurrentFromEvent3['default'])(e),
-                clientX = _getCurrentFromEvent.clientX,
-                clientY = _getCurrentFromEvent.clientY;
-
-            _this.photoClick(clientX, clientY);
-        };
         _this.handleDoubleClick = function (e) {
             e.preventDefault();
-            // @ts-ignore 取消 click 事件
-            _this.photoClick.cancel();
+            // @ts-ignore 取消 Tap 事件
+            _this.handlePhotoTap.cancel();
             var clientX = e.clientX,
@@ -277,13 +263,2 @@ clientY = e.clientY;
         };
-        _this.handleMaskClick = function (e) {
-            var evt = (0, _getCurrentFromEvent3['default'])(e);
-            var onMaskClick = _this.props.onMaskClick;
-            var _this$state4 = _this.state,
-                clientX = _this$state4.clientX,
-                clientY = _this$state4.clientY;
-
-            if (onMaskClick && Math.abs(clientX - evt.clientX) < 5 && Math.abs(clientY - evt.clientY) < 5) {
-                onMaskClick(clientX, clientY);
-            }
-        };
         _this.handleTouchStart = function (e) {
@@ -331,8 +306,11 @@ if (e.touches.length >= 2) {
         _this.handleUp = function (newClientX, newClientY) {
-            var _this$state5 = _this.state,
-                touched = _this$state5.touched,
-                maskTouched = _this$state5.maskTouched;
+            var _this$state3 = _this.state,
+                touched = _this$state3.touched,
+                maskTouched = _this$state3.maskTouched;
 
             if (touched || maskTouched) {
-                var onReachUp = _this.props.onReachUp;
+                var _this$props = _this.props,
+                    onReachUp = _this$props.onReachUp,
+                    onPhotoTap = _this$props.onPhotoTap,
+                    onMaskTap = _this$props.onMaskTap;
                 var _this$photoRef$state4 = _this.photoRef.state,
@@ -353,9 +331,17 @@ width = _this$photoRef$state4.width,
 
+                    var hasMove = clientX !== newClientX || clientY !== newClientY;
                     if (onReachUp) {
                         onReachUp(newClientX, newClientY);
                     }
-                    var hasMove = clientX !== newClientX || clientY !== newClientY;
-                    // 缩放弹性效果
-                    var toScale = Math.max(Math.min(scale, Math.max(_variables.maxScale, naturalWidth / width)), _variables.minScale);
-                    return (0, _extends3['default'])({ touched: false, maskTouched: false, scale: toScale, reachState: _types.ReachTypeEnum.Normal }, hasMove ? (0, _slideToSuitableOffset2['default'])({
+                    // 没有移动触发 Tap 事件
+                    if (!hasMove) {
+                        if (touched && onPhotoTap) {
+                            _this.handlePhotoTap(newClientX, newClientY);
+                        } else if (maskTouched && onMaskTap) {
+                            onMaskTap(newClientX, newClientY);
+                        }
+                    }
+                    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,
@@ -404,7 +390,7 @@ y: y,
             var verticalType = (0, _getCloseEdge.getClosedVertical)(y, scale, height);
-            var _this$props = _this.props,
-                onReachTopMove = _this$props.onReachTopMove,
-                onReachRightMove = _this$props.onReachRightMove,
-                onReachBottomMove = _this$props.onReachBottomMove,
-                onReachLeftMove = _this$props.onReachLeftMove;
+            var _this$props2 = _this.props,
+                onReachTopMove = _this$props2.onReachTopMove,
+                onReachRightMove = _this$props2.onReachRightMove,
+                onReachBottomMove = _this$props2.onReachBottomMove,
+                onReachLeftMove = _this$props2.onReachLeftMove;
             //  触碰到边缘
@@ -430,5 +416,5 @@
         };
-        // 加入延迟触发，避免与双击混淆
-        _this.photoClick = (0, _lodash2['default'])(_this.photoClick, 300);
         _this.handleMove = (0, _throttle2['default'])(_this.handleMove, 8);
+        // 延迟触发，与双击事件区分
+        _this.handlePhotoTap = (0, _lodash2['default'])(_this.handlePhotoTap, 300);
         return _this;
@@ -481,4 +467,4 @@ }
                 { className: wrapClassName, style: style },
-                _react2['default'].createElement(_PhotoMask2['default'], { onMouseDown: _isMobile2['default'] ? undefined : this.handleMaskMouseDown, onTouchStart: _isMobile2['default'] ? this.handleMaskTouchStart : undefined, onClick: this.handleMaskClick }),
-                _react2['default'].createElement(_Photo2['default'], { className: className, src: src, ref: this.handlePhotoRef, onClick: this.handlePhotoClick, 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(_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: {
                         WebkitTransform: transform,
@@ -485,0 +471,0 @@ transform: transform,

lib/types.d.ts

@@ -23,3 +23,3 @@ /**
 export declare type ReachFunction = (clientX: number, clientY: number) => void;
-export declare type PhotoClickFunction = (clientX: number, clientY: number) => void;
+export declare type PhotoTapFunction = (clientX: number, clientY: number) => void;
 /**
@@ -26,0 +26,0 @@ * 边缘超出状态

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

157892

decreased by-1.84%

Number of package files

93

decreased by-4.12%

Lines of code

3653

decreased by-1.7%

No dependency changes