react-photo-view - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

es/PhotoConsumer.js

@@ -16,2 +16,3 @@ import _extends from 'babel-runtime/helpers/extends';
 import uniqueId from 'lodash.uniqueid';
+import isMobile from './utils/isMobile';
 import PhotoContext from './photo-context';
@@ -27,8 +28,53 @@
 
+        _this.state = {
+            clientX: undefined,
+            clientY: undefined
+        };
         _this.key = uniqueId();
-        _this.handleShow = function (e) {
+        _this.handleTouchStart = function (e) {
+            var _e$touches$ = e.touches[0],
+                clientX = _e$touches$.clientX,
+                clientY = _e$touches$.clientY;
+
+            _this.setState({
+                clientX: clientX,
+                clientY: clientY
+            });
+            var children = _this.props.children;
+
+            if (children) {
+                var onTouchStart = children.props.onTouchStart;
+
+                if (onTouchStart) {
+                    onTouchStart(e);
+                }
+            }
+        };
+        _this.handleTouchEnd = function (e) {
             var _this$props = _this.props,
                 onShow = _this$props.onShow,
                 children = _this$props.children;
+            var _e$changedTouches$ = e.changedTouches[0],
+                newClientX = _e$changedTouches$.clientX,
+                newClientY = _e$changedTouches$.clientY;
+            var _this$state = _this.state,
+                clientX = _this$state.clientX,
+                clientY = _this$state.clientY;
 
+            if (clientX === newClientX && clientY === newClientY) {
+                onShow(_this.key);
+            }
+            if (children) {
+                var onTouchEnd = children.props.onTouchEnd;
+
+                if (onTouchEnd) {
+                    onTouchEnd(e);
+                }
+            }
+        };
+        _this.handleClick = function (e) {
+            var _this$props2 = _this.props,
+                onShow = _this$props2.onShow,
+                children = _this$props2.children;
+
             onShow(_this.key);
@@ -66,8 +112,9 @@ if (children) {
         value: function render() {
-            var _props2 = this.props,
-                src = _props2.src,
-                children = _props2.children;
+            var children = this.props.children;
 
             if (children) {
-                return React.cloneElement(children, _extends({ onClick: this.handleShow }, children.props.src === undefined ? { src: src } : undefined));
+                return React.Children.only(React.cloneElement(children, isMobile ? {
+                    onTouchStart: this.handleTouchStart,
+                    onTouchEnd: this.handleTouchEnd
+                } : { onClick: this.handleClick }));
             }
@@ -74,0 +121,0 @@ return null;

es/types.d.ts

@@ -0,5 +1,5 @@
+import React from 'react';
 /**
  * 图片 item 类型
  */
-import React from 'react';
 export declare type dataType = {
@@ -6,0 +6,0 @@ key?: string;

lib/PhotoConsumer.js

@@ -35,2 +35,6 @@ 'use strict';
 
+var _isMobile = require('./utils/isMobile');
+
+var _isMobile2 = _interopRequireDefault(_isMobile);
+
 var _photoContext = require('./photo-context');
@@ -59,8 +63,53 @@
 
+        _this.state = {
+            clientX: undefined,
+            clientY: undefined
+        };
         _this.key = (0, _lodash2['default'])();
-        _this.handleShow = function (e) {
+        _this.handleTouchStart = function (e) {
+            var _e$touches$ = e.touches[0],
+                clientX = _e$touches$.clientX,
+                clientY = _e$touches$.clientY;
+
+            _this.setState({
+                clientX: clientX,
+                clientY: clientY
+            });
+            var children = _this.props.children;
+
+            if (children) {
+                var onTouchStart = children.props.onTouchStart;
+
+                if (onTouchStart) {
+                    onTouchStart(e);
+                }
+            }
+        };
+        _this.handleTouchEnd = function (e) {
             var _this$props = _this.props,
                 onShow = _this$props.onShow,
                 children = _this$props.children;
+            var _e$changedTouches$ = e.changedTouches[0],
+                newClientX = _e$changedTouches$.clientX,
+                newClientY = _e$changedTouches$.clientY;
+            var _this$state = _this.state,
+                clientX = _this$state.clientX,
+                clientY = _this$state.clientY;
 
+            if (clientX === newClientX && clientY === newClientY) {
+                onShow(_this.key);
+            }
+            if (children) {
+                var onTouchEnd = children.props.onTouchEnd;
+
+                if (onTouchEnd) {
+                    onTouchEnd(e);
+                }
+            }
+        };
+        _this.handleClick = function (e) {
+            var _this$props2 = _this.props,
+                onShow = _this$props2.onShow,
+                children = _this$props2.children;
+
             onShow(_this.key);
@@ -98,8 +147,9 @@ if (children) {
         value: function render() {
-            var _props2 = this.props,
-                src = _props2.src,
-                children = _props2.children;
+            var children = this.props.children;
 
             if (children) {
-                return _react2['default'].cloneElement(children, (0, _extends3['default'])({ onClick: this.handleShow }, children.props.src === undefined ? { src: src } : undefined));
+                return _react2['default'].Children.only(_react2['default'].cloneElement(children, _isMobile2['default'] ? {
+                    onTouchStart: this.handleTouchStart,
+                    onTouchEnd: this.handleTouchEnd
+                } : { onClick: this.handleClick }));
             }
@@ -106,0 +156,0 @@ return null;

lib/types.d.ts

@@ -0,5 +1,5 @@
+import React from 'react';
 /**
  * 图片 item 类型
  */
-import React from 'react';
 export declare type dataType = {
@@ -6,0 +6,0 @@ key?: string;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

161029

increased by1.99%

Lines of code

3738

increased by2.33%

No dependency changes