Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-fastclick-alt

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-fastclick-alt - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

index.jsx

382

dist/react-fastclick-alt.js

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc