react-keybinding-component
Advanced tools
Comparing version 0.3.2 to 0.4.0
@@ -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; |
@@ -0,0 +0,0 @@ const gulp = require('gulp'); |
@@ -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; |
{ | ||
"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", |
@@ -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` | |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
10418
119
40