react-keybinding-component - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/react-keybinding-component.js

@@ -33,2 +33,3 @@ 'use strict';
         _this.onKey = _this.onKey.bind(_this);
+        _this.blacklistTargets = ['textarea', 'input', 'select'];
         return _this;
@@ -40,3 +41,2 @@ }
         value: function render() {
-
             return false;
@@ -47,3 +47,5 @@ }
         value: function onKey(e) {
-            if (!(this.props.preventInputConflict && (e.target.tagName.toLowerCase() === 'input' || e.target.tagName.toLowerCase() === 'textarea'))) this.props.onKey(e);
+            if (this.props.preventDefault) e.preventDefault();
+            if (this.props.stopPropagation) e.stopPropagation();
+            if (!(this.props.preventInputConflict && e.target.tagName.toLowerCase().indexOf(this.blacklistTargets) > -1)) this.props.onKey(e);
         }
@@ -69,3 +71,5 @@ }, {
     target: document,
-    preventInputConflict: false
+    preventInputConflict: false,
+    preventDefault: false,
+    stopPropagation: false
 };
@@ -77,5 +81,7 @@
     target: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-    preventInputConflict: _react2.default.PropTypes.bool
+    preventInputConflict: _react2.default.PropTypes.bool,
+    preventDefault: _react2.default.PropTypes.bool,
+    stopPropagation: _react2.default.PropTypes.bool
 };
 
 exports.default = KeybindingComponent;

gulpfile.js

@@ -0,0 +0,0 @@ const gulp   = require('gulp');

js/react-keybinding-component.jsx

@@ -12,6 +12,6 @@ import React, { Component } from 'react';
         this.onKey = this.onKey.bind(this);
+        this.blacklistTargets = ['textarea', 'input', 'select'];
     }
 
     render() {
-
         return false;
@@ -21,3 +21,5 @@ }
     onKey(e) {
-        if(!(this.props.preventInputConflict && (e.target.tagName.toLowerCase() === 'input' || e.target.tagName.toLowerCase() === 'textarea'))) this.props.onKey(e);
+        if(this.props.preventDefault) e.preventDefault();
+        if(this.props.stopPropagation) e.stopPropagation();
+        if(!(this.props.preventInputConflict && (e.target.tagName.toLowerCase().indexOf(this.blacklistTargets) > -1))) this.props.onKey(e);
     }
@@ -40,3 +42,5 @@
     target               :  document,
-    preventInputConflict :  false
+    preventInputConflict :  false,
+    preventDefault       :  false,
+    stopPropagation      :  false
 };
@@ -48,5 +52,7 @@
     target               : React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object ]),
-    preventInputConflict : React.PropTypes.bool
+    preventInputConflict : React.PropTypes.bool,
+    preventDefault       : React.PropTypes.bool,
+    stopPropagation      : React.PropTypes.bool
 };
 
 export default KeybindingComponent;

package.json

 {
   "name": "react-keybinding-component",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "A React keybinding component, usable with es6, no mixin",
@@ -5,0 +5,0 @@ "main": "dist/react-keybinding-component.js",

README.md

@@ -37,2 +37,4 @@ # react-keybinding-component
 | target             | the element you want to attach the event to, it can be an **existing** DOM element or a CSS selector (in that case, you will need to add a `tabIndex='0'` to your element, otherwise the event won't be caught) | `document`    |
-| preventInputConflict | prevent onKey from firing if you have an onChange on an input | `false` |
+| preventInputConflict | prevent onKey from firing if you have an onChange on an input, a textarea or a select | `false` |
+| preventDefault     | prevent event default                       | `false` |
+| preventPropagation | prevent event propagation                   | `false` |

No alert changes

Improved metrics

Total package byte prevSize

10418

7.28%

Lines of code

119

13.33%

Number of lines in readme file

40

5.26%

No dependency changes