react-touch-position - npm Package Compare versions

Comparing version 1.0.5 to 2.0.0

dist/ReactTouchPosition.js

 (function (global, factory) {
     if (typeof define === "function" && define.amd) {
-        define(['exports', 'react', 'lodash.noop', 'lodash.omit'], factory);
+        define(['exports', 'react', 'lodash.omit', './utils/addEventListener'], factory);
     } else if (typeof exports !== "undefined") {
-        factory(exports, require('react'), require('lodash.noop'), require('lodash.omit'));
+        factory(exports, require('react'), require('lodash.omit'), require('./utils/addEventListener'));
     } else {
@@ -10,6 +10,6 @@ var mod = {
         };
-        factory(mod.exports, global.react, global.lodash, global.lodash);
+        factory(mod.exports, global.react, global.lodash, global.addEventListener);
         global.ReactTouchPosition = mod.exports;
     }
-})(this, function (exports, _react, _lodash, _lodash3) {
+})(this, function (exports, _react, _lodash, _addEventListener) {
     'use strict';
@@ -25,3 +25,3 @@
 
-    var _lodash4 = _interopRequireDefault(_lodash3);
+    var _addEventListener2 = _interopRequireDefault(_addEventListener);
 
@@ -41,3 +41,3 @@ function _interopRequireDefault(obj) {
                 isActive: false,
-                isTouchOutside: false,
+                isPositionOutside: true,
                 touchPosition: {
@@ -55,3 +55,3 @@ x: 0,
             isActivatedOnTouch: _react.PropTypes.bool,
-            mapPropNames: _react.PropTypes.func,
+            mapChildProps: _react.PropTypes.func,
             onActivationChanged: _react.PropTypes.func,
@@ -66,17 +66,11 @@ onPositionChanged: _react.PropTypes.func,
         getDefaultProps: function getDefaultProps() {
+            var noop = function noop() {};
+
             return {
                 isActivatedOnTouch: false,
-                mapPropNames: function mapPropNames(_ref) {
-                    var isActive = _ref.isActive;
-                    var isTouchOutside = _ref.isTouchOutside;
-                    var touchPosition = _ref.touchPosition;
-
-                    return {
-                        isActive: isActive,
-                        isTouchOutside: isTouchOutside,
-                        touchPosition: touchPosition
-                    };
+                mapChildProps: function mapChildProps(props) {
+                    return props;
                 },
-                onActivationChanged: _lodash2.default,
-                onPositionChanged: _lodash2.default,
+                onActivationChanged: noop,
+                onPositionChanged: noop,
                 pressDuration: 500,
@@ -88,4 +82,7 @@ pressMoveThreshold: 5,
         onTouchStart: function onTouchStart(e) {
+            var touch0 = e.touches[0];
+            var viewportRelativePosition = this.getViewportRelativeTouchPosition(touch0);
+
             this.elementOffsetRect = this.getViewportRelativeElementRect(e.currentTarget);
-            this.setPosition(e);
+            this.setPosition(viewportRelativePosition);
 
@@ -104,3 +101,3 @@ if (this.props.isActivatedOnTouch) {
 
-            this.initPressEventCriteria(e.touches[0]);
+            this.initPressEventCriteria(viewportRelativePosition);
 
@@ -110,9 +107,11 @@ this.setPressEventTimer();
         onTouchMove: function onTouchMove(e) {
-            this.setPressEventCriteria(e.touches[0]);
+            var touch0 = e.touches[0];
+            var viewportRelativePosition = this.getViewportRelativeTouchPosition(touch0);
 
             if (!this.state.isActive) {
+                this.setPressEventCriteria(viewportRelativePosition);
                 return;
             }
 
-            this.setPosition(e);
+            this.setPosition(viewportRelativePosition);
 
@@ -122,7 +121,7 @@ e.preventDefault();
         unsetIsActive: function unsetIsActive() {
-            this.clearTimers();
+            this.clearPressDurationTimer();
 
             this.setState({
                 isActive: false,
-                isTouchOutside: false
+                isPositionOutside: true
             });
@@ -132,4 +131,3 @@
         },
-        setPosition: function setPosition(e) {
-            var viewportRelativeTouchPosition = this.getViewportRelativeTouchPosition(e);
+        setPosition: function setPosition(viewportRelativeTouchPosition) {
             var elementOffsetRect = this.elementOffsetRect;
@@ -144,3 +142,3 @@ var touchPosition = this.getElementRelativeTouchPosition(viewportRelativeTouchPosition, elementOffsetRect);
 
-            this.props.onPositionChanged(Object.assign({ isPositionOutside: isPositionOutside }, touchPosition));
+            this.props.onPositionChanged({ isPositionOutside: isPositionOutside, touchPosition: touchPosition });
         },
@@ -150,20 +148,20 @@ setPressEventTimer: function setPressEventTimer() {
 
+            var _props = this.props;
+            var onActivationChanged = _props.onActivationChanged;
+            var pressDuration = _props.pressDuration;
+            var pressMoveThreshold = _props.pressMoveThreshold;
+
+
             this.pressDurationTimerId = setTimeout(function () {
-                if (Math.abs(_this.currentElTop - _this.initialElTop) < _this.props.pressMoveThreshold) {
+                if (Math.abs(_this.currentElTop - _this.initialElTop) < pressMoveThreshold) {
                     _this.setState({ isActive: true });
-                    _this.props.onActivationChanged({ isActive: true });
+                    onActivationChanged({ isActive: true });
                 }
-            }, this.props.pressDuration);
+            }, pressDuration);
         },
-        setPressEventCriteria: function setPressEventCriteria(touch) {
-            if (!this.props.isActivatedOnTouch) {
-                if (!this.state.isActive) {
-                    this.currentElTop = touch.clientY;
-                } else {
-                    this.initialElTop = touch.clientY;
-                }
-            }
+        setPressEventCriteria: function setPressEventCriteria(position) {
+            this.currentElTop = position.y;
         },
-        initPressEventCriteria: function initPressEventCriteria(touch) {
-            var top = touch.clientY;
+        initPressEventCriteria: function initPressEventCriteria(position) {
+            var top = position.y;
             this.initialElTop = top;
@@ -183,6 +181,6 @@ this.currentElTop = top;
 
+
             return viewportRelativeTouchX < offsetLeft || viewportRelativeTouchX > offsetRight || viewportRelativeTouchY < offsetTop || viewportRelativeTouchY > offsetBottom;
         },
-        getViewportRelativeTouchPosition: function getViewportRelativeTouchPosition(event) {
-            var touch = event.touches[0];
+        getViewportRelativeTouchPosition: function getViewportRelativeTouchPosition(touch) {
             return {
@@ -221,26 +219,44 @@ x: touch.clientX,
         },
-        clearTimers: function clearTimers() {
+        clearPressDurationTimer: function clearPressDurationTimer() {
             clearTimeout(this.pressDurationTimerId);
         },
+
+
+        eventListeners: [],
+
+        addEventListeners: function addEventListeners() {
+            this.eventListeners.push((0, _addEventListener2.default)(this.el, 'touchstart', this.onTouchStart, { passive: false }), (0, _addEventListener2.default)(this.el, 'touchmove', this.onTouchMove, { passive: false }), (0, _addEventListener2.default)(this.el, 'touchend', this.unsetIsActive, { passive: true }), (0, _addEventListener2.default)(this.el, 'touchcancel', this.unsetIsActive, { passive: true }));
+        },
+        removeEventListeners: function removeEventListeners() {
+            while (this.eventListeners.length) {
+                this.eventListeners.pop().removeEventListener();
+            }
+        },
+        componentDidMount: function componentDidMount() {
+            this.addEventListeners();
+        },
         componentWillUnmount: function componentWillUnmount() {
-            this.clearTimers();
+            this.clearPressDurationTimer();
+            this.removeEventListeners();
         },
         getPassThroughProps: function getPassThroughProps() {
             var ownPropNames = Object.keys(this.constructor.propTypes);
-            return (0, _lodash4.default)(this.props, ownPropNames);
+            return (0, _lodash2.default)(this.props, ownPropNames);
         },
         render: function render() {
-            var _props = this.props;
-            var children = _props.children;
-            var className = _props.className;
-            var mapPropNames = _props.mapPropNames;
-            var style = _props.style;
+            var _this3 = this;
+
+            var _props2 = this.props;
+            var children = _props2.children;
+            var className = _props2.className;
+            var mapChildProps = _props2.mapChildProps;
+            var style = _props2.style;
             var _state = this.state;
             var isActive = _state.isActive;
-            var isTouchOutside = _state.isTouchOutside;
+            var isPositionOutside = _state.isPositionOutside;
             var touchPosition = _state.touchPosition;
 
-            var props = Object.assign({}, mapPropNames({
+            var props = Object.assign({}, mapChildProps({
                 isActive: isActive,
-                isTouchOutside: isTouchOutside,
+                isPositionOutside: isPositionOutside,
                 touchPosition: touchPosition
@@ -252,7 +268,6 @@ }), this.getPassThroughProps());
                 {
-                    onTouchStart: this.onTouchStart,
-                    onTouchMove: this.onTouchMove,
-                    onTouchEnd: this.unsetIsActive,
-                    onTouchCancel: this.unsetIsActive,
                     className: className,
+                    ref: function ref(el) {
+                        return _this3.el = el;
+                    },
                     style: Object.assign({}, style, {
@@ -259,0 +274,0 @@ WebkitUserSelect: 'none'

package.json

 {
   "name": "react-touch-position",
-  "version": "1.0.5",
+  "version": "2.0.0",
   "description": "A React component that decorates its children with touch coordinates, plotted relative to itself.",
@@ -45,3 +45,5 @@ "repository": {
     "test": "npm run lint && npm run testonly",
-    "test-watch": "npm run testonly -- --watch --watch-extensions js"
+    "test-watch": "npm run testonly -- --watch --watch-extensions js",
+    "test-cov": "gulp test:coverage",
+    "test-coveralls": "gulp test:coveralls"
   },
@@ -51,3 +53,3 @@ "devDependencies": {
     "babel-core": "^6.7.4",
-    "babel-eslint": "^6.0.2",
+    "babel-eslint": "^7.1.1",
     "babel-plugin-transform-es2015-modules-umd": "^6.6.5",
@@ -60,8 +62,15 @@ "babel-polyfill": "^6.7.4",
     "enzyme": "^2.2.0",
-    "eslint": "^2.7.0",
-    "eslint-plugin-babel": "^3.1.0",
-    "eslint-plugin-react": "^4.2.3",
-    "jsdom": "^8.1.0",
+    "eslint": "^3.16.0",
+    "eslint-plugin-babel": "^4.0.1",
+    "eslint-plugin-react": "^6.10.0",
+    "gulp": "^3.9.1",
+    "gulp-coveralls": "^0.1.4",
+    "gulp-istanbul": "^1.1.1",
+    "gulp-mocha": "^3.0.1",
+    "gulp-util": "^3.0.8",
+    "isparta": "^4.0.0",
+    "istanbul": "^0.4.5",
+    "jsdom": "^9.11.0",
     "lodash": "^4.17.2",
-    "mocha": "^2.4.5",
+    "mocha": "^3.2.0",
     "nodemon": "^1.9.1",
@@ -71,2 +80,3 @@ "react": "^15.0.0",
     "react-dom": "^15.0.0",
+    "run-sequence": "^1.2.2",
     "sinon": "^1.17.6"
@@ -80,5 +90,4 @@ },
     "babel-runtime": "^6.6.1",
-    "lodash.noop": "^3.0.1",
     "lodash.omit": "^4.5.0"
   }
 }

README.md

 # react-touch-position
+React Touch Position is a primitive component for composing UI features that require notification of
+touch position status.
 
-A React component that decorates its children with touch coordinates, plotted relative to itself.
+It plots touch coordinates relative to itself and re-renders child components with new touch
+position props when touch position changes.
 
-Supports [long press and pan gestures](https://material.google.com/patterns/gestures.html).
+React Touch Position Supports [long press and pan gestures](https://material.google.com/patterns/gestures.html).
 
-Safe for server rendering and cleans up after unmount on the client.
+It is safe for server rendering and cleans up after unmount on the client.
 
 ## Status
-[![CircleCI](https://circleci.com/gh/ethanselzer/react-touch-position.svg?style=svg)](https://circleci.com/gh/ethanselzer/react-touch-position)
+[![CircleCI](https://img.shields.io/circleci/project/github/ethanselzer/react-touch-position.svg)](https://circleci.com/gh/ethanselzer/react-touch-position)
+[![Coverage Status](https://coveralls.io/repos/github/ethanselzer/react-touch-position/badge.svg?branch=V2.0)](https://coveralls.io/github/ethanselzer/react-touch-position?branch=V2.0)
+[![npm](https://img.shields.io/npm/v/react-touch-position.svg)](https://www.npmjs.com/package/react-touch-position)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-[![npm](https://nodei.co/npm/react-touch-position.svg?downloads=true)](https://nodei.co/npm/react-touch-position/)
-
 ## Demo
-The react-image-magnify package depends on react-touch-position for touch coordinate observation.
-Please have a look at the [react-image-magnify](https://www.npmjs.com/package/react-image-magnify)
-demo to see this package in action.
+Please see the [react-touch-position demo site](https://ethanselzer.github.io/react-touch-position).
 
 ## Related Project
 For mouse position tracking, please consider [react-cursor-position](https://www.npmjs.com/package/react-cursor-position).
-It has a similar architecture and interface to this project.
 
 ## Installation
-
 ```sh
@@ -30,7 +30,5 @@ npm install --save react-touch-position
 ## Usage
-
-Intended as a primitive for composing features that require notification of
-touch position coordinates.
-
 ```JSX
+import ReactTouchPosition from 'react-touch-position';
+...
 <ReactTouchPosition>
@@ -44,33 +42,38 @@ <YourComponentOne/>
 
-Each child component will receive a prop named `touchPosition`, which
-has the following structure.
+Each child component will receive the following props:
 
 ```JavaScript
 {
-    x: Number,
-    y: Number
+    isActive: Boolean,
+    isPositionOutside: Boolean,
+    touchPosition: {
+        x: Number,
+        y: Number
+    }
 }
 ```
-Optionally map custom prop names to your component interface with the `mapPropNames` feature.
+This structure may be customized by implementing `mapChildProps` API feature.
 
-### props API
+### Props API
 
 `className` : String - Optionally provide a CSS class to be applied to the div rendered by react-touch-position.
 
-`style` : String - Optionally provide a style object to be applied to the div rendered by react-touch-position.
+`style` : Object - Optionally provide a style object to be applied to the div rendered by react-touch-position.
 
 `isActivatedOnTouch` : Boolean - Optionally activate immediately on touch. Scrolling may not be possible when scroll
-gesture begins on image. Recommended only when scrolling is not an expected use case.
+gesture begins on target area. Recommended only when scrolling is not an expected use case.
 
-`mapPropNames` : Function - Optionally provide a function that returns an object, which maps property names to
-your component interface. Function receives one parameter with the signature `{ isActive, isTouchOutside, touchPosition }`.
+`mapChildProps` : Function - Optionally model child component props to your custom shape.
+Function receives one parameter with the signature `{ isActive, isPositionOutside, touchPosition }`,
+and returns an object that is compatible with the props interface of your components.
 
 `onActivationChanged` : Function - Optionally provide a function that will be called when the component is active.
+Function receives one parameter with the signature `{ isActive }`
 
 `onPositionChanged` : Function - Optionally provide a function that will be called when touch position changes.
-Function will receive an object with the signature `{ isPositionOutside, x, y }`, as a single parameter.
+Function will receive an object with the signature `{ isPositionOutside, touchPosition: { x, y } }`, as a single parameter.
 
 `pressDuration` : Number - Milliseconds delay before press gesture is activated. Defaults to 500.
 
-`pressMoveThreshold`: Number - Amount of movement allowed during press event. Defaults to 5.
+`pressMoveThreshold`: Number - Amount of movement allowed during press event detection. Defaults to 5.
 
@@ -90,7 +93,4 @@ `shouldDecorateChildren` : Boolean - Defaults to true. Optionally suppress `touchPosition` decoration of child components by
 npm install
+npm run #print available commands
 ```
-See available commands:
-```ssh
-npm run
-```
 
@@ -101,1 +101,4 @@ ## Contributing
 add commits, and [open a pull request](https://github.com/ethanselzer/react-touch-position/compare/).
+
+## License
+MIT

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17796

increased by9.39%

Dependency count

4

decreased by-20%

Lines of code

226

increased by3.67%

Number of lines in readme file

101

increased by3.06%

Worsened metrics

Dev dependency count

29

increased by38.1%

Dependency changes

• - Removedlodash.noop@^3.0.1

• - Removedlodash.noop@3.0.1(transitive)