react-attach-handler - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

build/react-attach-handler.js

@@ -126,3 +126,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	    debounce: false,
-	    debounceDelay: 250
+	    throttle: false,
+	    debounceDelay: 250,
+	    throttleDelay: 250
 	};
@@ -158,3 +160,57 @@
 	};
+	// Inspired from underscore throttle https://github.com/jashkenas/underscore/blob/master/underscore.js
+	var throttleFn = function throttleFn(cb, delay) {
+	    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
+	    var context = void 0;
+	    var args = void 0;
+	    var result = void 0;
+
+	    var timeout = null;
+	    var previous = 0;
+
+	    var _options$leading = options.leading,
+	        leading = _options$leading === undefined ? true : _options$leading,
+	        _options$trailing = options.trailing,
+	        trailing = _options$trailing === undefined ? false : _options$trailing;
+
+	    var later = function later() {
+	        previous = !leading ? 0 : Date.now();
+	        timeout = null;
+	        result = cb.apply(context, args);
+	        if (!timeout) {
+	            context = args = null;
+	        }
+	    };
+
+	    return function () {
+	        context = this;
+	        args = arguments;
+
+	        var now = Date.now();
+	        if (!previous && !leading) {
+	            previous = now;
+	        }
+
+	        var remaining = wait - (now - previous);
+
+	        if (remaining <= 0 || remaining > wait) {
+	            if (timeout) {
+	                clearTimeout(timeout);
+	                timeout = null;
+	            }
+
+	            previous = now;
+	            result = cb.apply(context, args);
+
+	            if (!timeout) {
+	                context = args = null;
+	            }
+	        } else if (!timeout && trailing) {
+	            timeout = setTimeout(later, remaining);
+	        }
+	        return result;
+	    };
+	};
+
 	var switchOn = function switchOn(target, eventName, cb) {
@@ -167,6 +223,16 @@ var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
 	            debounce = _opts$debounce === undefined ? false : _opts$debounce,
-	            debounceDelay = opts.debounceDelay;
+	            _opts$throttle = opts.throttle,
+	            throttle = _opts$throttle === undefined ? false : _opts$throttle,
+	            debounceDelay = opts.debounceDelay,
+	            throttleDelay = opts.throttleDelay;
+
+	        var handler = cb;
+	        if (debounce) {
+	            handler = debounceFn(cb, debounceDelay);
+	        } else if (throttle) {
+	            handler = throttleFn(cb, throttleDelay);
+	        }
+
 	        // http://stackoverflow.com/questions/2891096/addeventlistener-using-apply
-
-	        target.addEventListener.apply(target, getEventsArgs(eventName, debounce ? debounceFn(cb, debounceDelay) : cb, opts));
+	        target.addEventListener.apply(target, getEventsArgs(eventName, handler, opts));
 	    }
@@ -173,0 +239,0 @@ };

lib/AttachHandler.js

@@ -34,3 +34,5 @@ Object.defineProperty(exports, "__esModule", {
     debounce: false,
-    debounceDelay: 250
+    throttle: false,
+    debounceDelay: 250,
+    throttleDelay: 250
 };
@@ -67,3 +69,58 @@
 };
+// Inspired from underscore throttle https://github.com/jashkenas/underscore/blob/master/underscore.js
+var throttleFn = function throttleFn(cb, delay) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
+    var context = void 0;
+    var args = void 0;
+    var result = void 0;
+
+    var timeout = null;
+    var previous = 0;
+
+    var _options$leading = options.leading,
+        leading = _options$leading === undefined ? true : _options$leading,
+        _options$trailing = options.trailing,
+        trailing = _options$trailing === undefined ? false : _options$trailing;
+
+
+    var later = function later() {
+        previous = !leading ? 0 : Date.now();
+        timeout = null;
+        result = cb.apply(context, args);
+        if (!timeout) {
+            context = args = null;
+        }
+    };
+
+    return function () {
+        context = this;
+        args = arguments;
+
+        var now = Date.now();
+        if (!previous && !leading) {
+            previous = now;
+        }
+
+        var remaining = wait - (now - previous);
+
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+
+            previous = now;
+            result = cb.apply(context, args);
+
+            if (!timeout) {
+                context = args = null;
+            }
+        } else if (!timeout && trailing) {
+            timeout = setTimeout(later, remaining);
+        }
+        return result;
+    };
+};
+
 var switchOn = function switchOn(target, eventName, cb) {
@@ -76,6 +133,17 @@ var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
             debounce = _opts$debounce === undefined ? false : _opts$debounce,
-            debounceDelay = opts.debounceDelay;
+            _opts$throttle = opts.throttle,
+            throttle = _opts$throttle === undefined ? false : _opts$throttle,
+            debounceDelay = opts.debounceDelay,
+            throttleDelay = opts.throttleDelay;
+
+
+        var handler = cb;
+        if (debounce) {
+            handler = debounceFn(cb, debounceDelay);
+        } else if (throttle) {
+            handler = throttleFn(cb, throttleDelay);
+        }
+
         // http://stackoverflow.com/questions/2891096/addeventlistener-using-apply
-
-        target.addEventListener.apply(target, getEventsArgs(eventName, debounce ? debounceFn(cb, debounceDelay) : cb, opts));
+        target.addEventListener.apply(target, getEventsArgs(eventName, handler, opts));
     }
@@ -82,0 +150,0 @@ };

package.json

 {
   "name": "react-attach-handler",
   "moduleName": "AttachHandler",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "React attach event handlers to targets.",
@@ -6,0 +6,0 @@ "main": "build/react-attach-handler",

README.md

@@ -14,3 +14,3 @@ # react-attach-handler
 ## Why?
-THis module provides a reactjs way to bind events to global `targets`. It uses native React lifecycle to bind and unbind events.
+This module provides a reactjs way to bind events to global `targets`. It uses native React lifecycle to bind and unbind events.
 
@@ -21,3 +21,3 @@ ## Props
 * `events`, (required) Function or Object,
-    * If events is an Object its accepts `capture`, `passive` & `debounce` as options.
+    * If events is an Object its accepts `capture`, `passive` `debounce` & `debounceDelay` as options.
 
@@ -24,0 +24,0 @@ ## Usage

src/AttachHandler.jsx

@@ -9,3 +9,5 @@ import React, {Component, PropTypes} from 'react'; //eslint-disable-line no-unused-vars
     debounce: false,
+    throttle: false,
     debounceDelay: 250,
+    throttleDelay: 250,
 };
@@ -41,3 +43,55 @@
 };
+// Inspired from underscore throttle https://github.com/jashkenas/underscore/blob/master/underscore.js
+const throttleFn = function (cb, delay, options = {}) {
+    let context;
+    let args;
+    let result;
 
+    let timeout = null;
+    let previous = 0;
+
+    const {
+        leading = true,
+        trailing = false,
+    } = options;
+
+    const later = function() {
+        previous = !leading ? 0 : Date.now();
+        timeout = null;
+        result = cb.apply(context, args);
+        if (!timeout) {
+            context = args = null;
+        }
+    };
+
+    return function() {
+        context = this;
+        args = arguments;
+
+        const now = Date.now();
+        if (!previous && !leading) {
+            previous = now;
+        }
+
+        const remaining = wait - (now - previous);
+
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+
+            previous = now;
+            result = cb.apply(context, args);
+
+            if (!timeout) {
+                context = args = null;
+            }
+        } else if (!timeout && trailing) {
+            timeout = setTimeout(later, remaining);
+        }
+        return result;
+    };
+};
+
 const switchOn = (target, eventName, cb, opts = {}) => {
@@ -48,10 +102,18 @@ // Only supports modern browsers Sorry IE10- users
             debounce = false,
+            throttle = false,
             debounceDelay,
+            throttleDelay,
         } = opts;
+
+        let handler = cb;
+        if (debounce) {
+            handler = debounceFn(cb, debounceDelay);
+        } else if (throttle) {
+            handler = throttleFn(cb, throttleDelay);
+        }
+
         // http://stackoverflow.com/questions/2891096/addeventlistener-using-apply
         target
             .addEventListener
-            .apply(target, getEventsArgs(eventName, debounce
-                ? debounceFn(cb, debounceDelay)
-                : cb, opts));
+            .apply(target, getEventsArgs(eventName, handler, opts));
     }
@@ -58,0 +120,0 @@ };

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

1915048

0.76%

Number of package files

31

3.33%

Lines of code

23823

1.05%

No dependency changes