react-fastclick-alt
Advanced tools
Comparing version 1.1.1 to 2.0.0
@@ -1,381 +0,1 @@ | ||
(function webpackUniversalModuleDefinition(root, factory) { | ||
if(typeof exports === 'object' && typeof module === 'object') | ||
module.exports = factory(require("react")); | ||
else if(typeof define === 'function' && define.amd) | ||
define(["react"], factory); | ||
else if(typeof exports === 'object') | ||
exports["ReactFastClick"] = factory(require("react")); | ||
else | ||
root["ReactFastClick"] = factory(root["React"]); | ||
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) { | ||
return /******/ (function(modules) { // webpackBootstrap | ||
/******/ // The module cache | ||
/******/ var installedModules = {}; | ||
/******/ // The require function | ||
/******/ function __webpack_require__(moduleId) { | ||
/******/ // Check if module is in cache | ||
/******/ if(installedModules[moduleId]) | ||
/******/ return installedModules[moduleId].exports; | ||
/******/ // Create a new module (and put it into the cache) | ||
/******/ var module = installedModules[moduleId] = { | ||
/******/ exports: {}, | ||
/******/ id: moduleId, | ||
/******/ loaded: false | ||
/******/ }; | ||
/******/ // Execute the module function | ||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | ||
/******/ // Flag the module as loaded | ||
/******/ module.loaded = true; | ||
/******/ // Return the exports of the module | ||
/******/ return module.exports; | ||
/******/ } | ||
/******/ // expose the modules object (__webpack_modules__) | ||
/******/ __webpack_require__.m = modules; | ||
/******/ // expose the module cache | ||
/******/ __webpack_require__.c = installedModules; | ||
/******/ // __webpack_public_path__ | ||
/******/ __webpack_require__.p = ""; | ||
/******/ // Load entry module and return exports | ||
/******/ return __webpack_require__(0); | ||
/******/ }) | ||
/************************************************************************/ | ||
/******/ ([ | ||
/* 0 */ | ||
/***/ function(module, exports, __webpack_require__) { | ||
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.default = undefined; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
var _class, _temp2; | ||
var _react = __webpack_require__(1); | ||
var _react2 = _interopRequireDefault(_react); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
var isFocused = function isFocused(el) { | ||
return document.activeElement === el; | ||
}; | ||
var isTag = function isTag(el, tagName) { | ||
return el && typeof el.tagName === 'string' && el.tagName.toLowerCase() === tagName.toLowerCase(); | ||
}; | ||
var isInput = function isInput(el) { | ||
return isTag(el, 'input'); | ||
}; | ||
var isFocusedInput = function isFocusedInput(el) { | ||
return isInput(el) && isFocused(el); | ||
}; | ||
var isCheckbox = function isCheckbox(el) { | ||
return isInput(el) && el.type && el.type.toLowerCase() === 'checkbox'; | ||
}; | ||
var isSelect = function isSelect(el) { | ||
return isTag(el, 'select'); | ||
}; | ||
var isTextArea = function isTextArea(el) { | ||
return isTag(el, 'textarea'); | ||
}; | ||
var isFocusedTextArea = function isFocusedTextArea(el) { | ||
return isFocused(el) && isTextArea(el); | ||
}; | ||
var ReactFastClick = (_temp2 = _class = function (_Component) { | ||
_inherits(ReactFastClick, _Component); | ||
function ReactFastClick() { | ||
var _Object$getPrototypeO; | ||
var _temp, _this, _ret; | ||
_classCallCheck(this, ReactFastClick); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ReactFastClick)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | ||
touchId: null, | ||
touchX: null, | ||
touchY: null, | ||
touchTime: null | ||
}, _temp), _possibleConstructorReturn(_this, _ret); | ||
} | ||
_createClass(ReactFastClick, [{ | ||
key: 'shouldComponentUpdate', | ||
/** | ||
* We only re-render if the children have changed-the state changes in this component do not affect the rendered html | ||
* @param nextProps | ||
* @returns {boolean} | ||
*/ | ||
value: function shouldComponentUpdate(nextProps) { | ||
return this.props.children !== nextProps.children; | ||
} | ||
/** | ||
* Clear all touch data | ||
* @param callback | ||
*/ | ||
}, { | ||
key: 'clearTouchData', | ||
value: function clearTouchData(callback) { | ||
this.setState({ | ||
touchId: null, | ||
touchX: null, | ||
touchY: null, | ||
touchTime: null | ||
}, callback); | ||
} | ||
/** | ||
* Handle the touch start event | ||
* @param e | ||
*/ | ||
}, { | ||
key: 'handleTouchStart', | ||
value: function handleTouchStart(e) { | ||
// one+ touches means the user isn't trying to tap this element | ||
if (e.touches.length !== 1 || e.targetTouches.length !== 1) { | ||
this.clearTouchData(); | ||
return; | ||
} | ||
var tch = e.targetTouches[0]; | ||
this.setState({ | ||
touchId: tch.identifier, | ||
touchX: tch.screenX, | ||
touchY: tch.screenY, | ||
touchTime: new Date().getTime() | ||
}); | ||
} | ||
/** | ||
* Handle the touch move event | ||
* @param e | ||
*/ | ||
}, { | ||
key: 'handleTouchMove', | ||
value: function handleTouchMove(e) { | ||
var touchId = this.state.touchId; | ||
var threshold = this.props.threshold; | ||
if (touchId === null) { | ||
return; | ||
} | ||
if (e.touches.length !== 1 || e.targetTouches.length !== 1) { | ||
this.clearTouchData(); | ||
return; | ||
} | ||
var touch = e.targetTouches[0]; | ||
if (touchId !== touch.identifier) { | ||
this.clearTouchData(); | ||
return; | ||
} | ||
// verify that the touch did not move outside the threshold | ||
var dist = this.calculateTouchDistanceFromOrigin(touch); | ||
// if it was moved farther than the allowed amount, then we should cancel the touch | ||
if (dist > threshold) { | ||
this.clearTouchData(); | ||
} | ||
} | ||
}, { | ||
key: 'calculateTouchDistanceFromOrigin', | ||
value: function calculateTouchDistanceFromOrigin(touch) { | ||
var _state = this.state; | ||
var touchX = _state.touchX; | ||
var touchY = _state.touchY; | ||
var screenX = touch.screenX; | ||
var screenY = touch.screenY; | ||
return Math.sqrt(Math.pow(screenX - touchX, 2) + Math.pow(screenY - touchY, 2)); | ||
} | ||
}, { | ||
key: 'handleTouchEnd', | ||
value: function handleTouchEnd(e) { | ||
var _state2 = this.state; | ||
var touchId = _state2.touchId; | ||
var touchTime = _state2.touchTime; | ||
var _props = this.props; | ||
var timeThreshold = _props.timeThreshold; | ||
var threshold = _props.threshold; | ||
if (touchId === null) { | ||
return; | ||
} | ||
if (timeThreshold !== null) { | ||
// length of press exceeds the amount of time that we are doing anything for | ||
if (new Date().getTime() - touchTime > timeThreshold) { | ||
this.clearTouchData(); | ||
return; | ||
} | ||
} | ||
// still a touch remaining | ||
if (e.touches.length !== 0) { | ||
this.clearTouchData(); | ||
return; | ||
} | ||
// get the touch from the list of changed touches | ||
var touch = null; | ||
for (var i = 0; i < e.changedTouches.length; i++) { | ||
var oneTouch = e.changedTouches[i]; | ||
if (oneTouch.identifier === this.state.touchId) { | ||
touch = oneTouch; | ||
break; | ||
} | ||
} | ||
if (touch === null) { | ||
this.clearTouchData(); | ||
return; | ||
} | ||
// verify that the touch did not move outside the threshold | ||
var dist = this.calculateTouchDistanceFromOrigin(touch); | ||
// if it was moved farther than the allowed amount, then we should cancel the touch | ||
if (dist > threshold) { | ||
this.clearTouchData(); | ||
return; | ||
} | ||
var targetEl = touch.target; | ||
// if it's an input where typing is allowed and it's already focused, | ||
// don't do anything. this is probably an attempt to move the cursor | ||
if ((isFocusedInput(targetEl) || isFocusedTextArea(targetEl)) && !isCheckbox(targetEl)) { | ||
this.clearTouchData(); | ||
return; | ||
} | ||
// prevent the simulated mouse events | ||
e.preventDefault(); | ||
// we don't need this touch end event to be handled multiple times if it's interpreted as a click | ||
e.stopPropagation(); | ||
// clear the data and then trigger the click | ||
this.clearTouchData(function () { | ||
ReactFastClick.triggerClick(targetEl); | ||
}); | ||
} | ||
}, { | ||
key: 'handleTouchCancel', | ||
value: function handleTouchCancel() { | ||
this.clearTouchData(); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _this2 = this; | ||
var children = this.props.children; | ||
var touchProps = { | ||
onTouchStart: function onTouchStart(e) { | ||
return _this2.handleTouchStart(e); | ||
}, | ||
onTouchMove: function onTouchMove(e) { | ||
return _this2.handleTouchMove(e); | ||
}, | ||
onTouchEnd: function onTouchEnd(e) { | ||
return _this2.handleTouchEnd(e); | ||
}, | ||
onTouchCancel: function onTouchCancel(e) { | ||
return _this2.handleTouchCancel(e); | ||
} | ||
}; | ||
return _react2.default.createElement( | ||
'span', | ||
touchProps, | ||
children | ||
); | ||
} | ||
}], [{ | ||
key: 'triggerClick', | ||
value: function triggerClick(target) { | ||
while (target && typeof target.click !== "function") { | ||
target = target.parentNode; | ||
} | ||
if (!target) { | ||
return; | ||
} | ||
target.click(); | ||
// if it's an input and not a checkbox, focus it | ||
// or if it's a select | ||
// or if it's a textarea | ||
if (isInput(target) && !isCheckbox(target) || isSelect(target) || isTextArea(target)) { | ||
target.focus(); | ||
} | ||
} | ||
}]); | ||
return ReactFastClick; | ||
}(_react.Component), _class.propTypes = { | ||
// The number of px that the finger may move before the gesture is no longer considered a tap | ||
threshold: _react2.default.PropTypes.number, | ||
// The amount of time in ms that the finger may be down before the gesture is no longer considered a tap by this | ||
// component | ||
timeThreshold: _react2.default.PropTypes.number | ||
}, _class.defaultProps = { | ||
threshold: 15, | ||
timeThreshold: 125 | ||
}, _temp2); | ||
exports.default = ReactFastClick; | ||
/***/ }, | ||
/* 1 */ | ||
/***/ function(module, exports) { | ||
module.exports = __WEBPACK_EXTERNAL_MODULE_1__; | ||
/***/ } | ||
/******/ ]) | ||
}); | ||
; | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactFastClick=t(require("react")):e.ReactFastClick=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=n(1),l=r(i),s=n(2),h=r(s),f=function(e){return document.activeElement===e},p=function(e,t){return e&&"string"==typeof e.tagName&&e.tagName.toLowerCase()===t.toLowerCase()},d=function(e){return p(e,"input")},T=function(e){return d(e)&&f(e)},v=function(e){return d(e)&&e.type&&"checkbox"===e.type.toLowerCase()},y=function(e){return p(e,"select")},m=function(e){return p(e,"textarea")},g=function(e){return f(e)&&m(e)},b=function(e){function t(){var e,n,r,c;o(this,t);for(var a=arguments.length,i=Array(a),l=0;l<a;l++)i[l]=arguments[l];return n=r=u(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(i))),r.state={touchId:null,touchX:null,touchY:null,touchTime:null},r.handleTouchStart=function(e){if(1!==e.touches.length||1!==e.targetTouches.length)return void r.clearTouchData();var t=e.targetTouches[0];r.setState({touchId:t.identifier,touchX:t.screenX,touchY:t.screenY,touchTime:(new Date).getTime()})},r.handleTouchMove=function(e){var t=r.state.touchId,n=r.props.threshold;if(null!==t){if(1!==e.touches.length||1!==e.targetTouches.length)return void r.clearTouchData();var o=e.targetTouches[0];if(t!==o.identifier)return void r.clearTouchData();r.calculateTouchDistanceFromOrigin(o)>n&&r.clearTouchData()}},r.handleTouchEnd=function(e){var n=r.state,o=n.touchId,u=n.touchTime,c=r.props,a=c.timeThreshold,i=c.threshold;if(null!==o){if(null!==a&&(new Date).getTime()-u>a)return void r.clearTouchData();if(0!==e.touches.length)return void r.clearTouchData();for(var l=null,s=0;s<e.changedTouches.length;s++){var h=e.changedTouches[s];if(h.identifier===r.state.touchId){l=h;break}}if(null===l)return void r.clearTouchData();if(r.calculateTouchDistanceFromOrigin(l)>i)return void r.clearTouchData();var f=l.target;if((T(f)||g(f))&&!v(f))return void r.clearTouchData();e.preventDefault(),e.stopPropagation(),r.clearTouchData(function(){t.triggerClick(f)})}},r.handleTouchCancel=function(e){r.clearTouchData()},c=n,u(r,c)}return c(t,e),a(t,[{key:"shouldComponentUpdate",value:function(e){return this.props.children!==e.children}},{key:"clearTouchData",value:function(e){this.setState({touchId:null,touchX:null,touchY:null,touchTime:null},e)}},{key:"calculateTouchDistanceFromOrigin",value:function(e){var t=this.state,n=t.touchX,r=t.touchY,o=e.screenX,u=e.screenY;return Math.sqrt(Math.pow(o-n,2)+Math.pow(u-r,2))}},{key:"render",value:function(){var e=this.props.children,t={onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd,onTouchCancel:this.handleTouchCancel};return l.default.createElement("span",t,e)}}],[{key:"triggerClick",value:function(e){for(;e&&"function"!=typeof e.click;)e=e.parentNode;e&&(e.click(),(d(e)&&!v(e)||y(e)||m(e))&&e.focus())}}]),t}(i.Component);b.propTypes={threshold:h.default.number,timeThreshold:h.default.number},b.defaultProps={threshold:15,timeThreshold:125},t.default=b},function(t,n){t.exports=e},function(e,t,n){e.exports=n(3)()},function(e,t,n){"use strict";var r=n(4),o=n(5),u=n(6);e.exports=function(){function e(e,t,n,r,c,a){a!==u&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,u,c,a,i){if(o(t),!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[n,r,u,c,a,i],h=0;l=new Error(t.replace(/%s/g,function(){return s[h++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}])}); |
{ | ||
"name": "react-fastclick-alt", | ||
"version": "1.1.1", | ||
"version": "2.0.0", | ||
"description": "A react component that triggers click and focus events for taps of children components", | ||
"main": "dist/react-fastclick-alt.js", | ||
"files": [ | ||
"dist/react-fastclick-alt.js" | ||
"dist/react-fastclick-alt.js", | ||
"index.jsx" | ||
], | ||
@@ -13,3 +14,3 @@ "scripts": { | ||
"prepublish": "npm test", | ||
"build": "webpack" | ||
"build": "webpack -p" | ||
}, | ||
@@ -36,14 +37,11 @@ "repository": { | ||
"peerDepenncies": { | ||
"react": "^15.3.0" | ||
"react": ">=15.0.0" | ||
}, | ||
"devDependencies": { | ||
"babel-core": "^6.13.2", | ||
"babel-loader": "^6.2.4", | ||
"babel-loader": "^7.1.2", | ||
"babel-plugin-transform-class-properties": "^6.11.5", | ||
"babel-plugin-transform-decorators-legacy": "^1.3.4", | ||
"babel-plugin-transform-require-ignore": "0.0.2", | ||
"babel-plugin-transform-strict-mode": "^6.11.3", | ||
"babel-preset-es2015": "^6.13.2", | ||
"babel-preset-env": "^1.6.0", | ||
"babel-preset-react": "^6.11.1", | ||
"babel-preset-stage-1": "^6.13.0", | ||
"jquery": "^2.1.4", | ||
@@ -53,3 +51,3 @@ "karma": "^0.13.19", | ||
"karma-mocha": "^0.2.1", | ||
"karma-webpack": "^1.7.0", | ||
"karma-webpack": "^2.0.4", | ||
"mocha": "^2.3.4", | ||
@@ -59,5 +57,5 @@ "object-assign": "^4.0.1", | ||
"react-addons-test-utils": "^15.3.0", | ||
"react-dom": "^15.3.0", | ||
"webpack": "^1.12.9" | ||
"react-dom": "^15.6.2", | ||
"webpack": "^3.6.0" | ||
} | ||
} |
@@ -6,8 +6,6 @@ # [![Build Status](https://travis-ci.org/moodysalem/react-fastclick.svg)](https://travis-ci.org/moodysalem/react-fastclick) [![npm version](https://img.shields.io/npm/v/react-fastclick-alt.svg)](https://www.npmjs.com/package/react-fastclick-alt) react-fastclick | ||
## Deprecation | ||
This isn't needed now that iOS and Android have both eliminated the click delay in their native browsers for pages that can't zoom | ||
## Deprecation (Updated 1/11/2017) | ||
This isn't needed now that iOS and Android have both eliminated the click delay in their native browsers for pages that can't zoom. | ||
_CAVEAT:_ it appears iOS 10 has brought back this issue for mobile web apps added to the home screen :( | ||
# Demo | ||
[Live Demo](http://moodysalem.github.io/react-fastclick/) | ||
# Install | ||
@@ -21,5 +19,5 @@ | ||
var React = require('react'); | ||
var FastClick = require('react-fastclick-alt'); | ||
var ReactDOM = require('react-dom'); | ||
import React, { DOM, PropTypes } from 'react'; | ||
import FastClick from 'react-fastclick-alt'; | ||
import ReactDOM from 'react-dom'; | ||
ReactDOM.render(<FastClick><MyApp/></FastClick>, document.getElementById('app')); | ||
@@ -26,0 +24,0 @@ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
17
5
15961
195
1
35