diff --git a/README.md b/README.md
index 02174e3..841f333 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,9 @@ render() {
+ timeout={/* Duration to show your easter egg, easter egg is displayed forever if prop is not set */}
+ onKeysCoincide={/* Callback to call when the code is correctly inserted*/}
+ onTimeout={/* Callback to call when the timer runs out*/}>
{/* Your easter egg JSX goes here */}
);
diff --git a/package.json b/package.json
index a8986cf..f30f546 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
"dependencies": {
"bluebird": "3.4.7",
"lodash": "^4.17.4",
- "react": "15.4.2",
+ "react": "^15.4.2",
"react-dom": "^15.4.2",
"react-shortcut": "1.0.6"
},
diff --git a/src/Component.js b/src/Component.js
index f17ee42..7cdaca2 100644
--- a/src/Component.js
+++ b/src/Component.js
@@ -2,12 +2,13 @@ var React = require('react');
var HotKey = require('react-shortcut');
-
module.exports = React.createClass({
propTypes: {
keys: React.PropTypes.array,
simultaneous: React.PropTypes.bool,
timeout: React.PropTypes.number,
+ onKeysCoincide: React.PropTypes.func,
+ onTimeout: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.element
@@ -43,17 +44,17 @@ module.exports = React.createClass({
onKeysCoincide: function keysCoincide() {
var props = this.props || {};
var timeout = props.timeout || null;
+ var onKeysCoincide = props.onKeysCoincide || null;
+ var onTimeout = props.onTimeout || null;
+ if (onKeysCoincide) onKeysCoincide();
if (timeout) {
this.setState({
timer: setTimeout((function resolveTimeout() {
- var state = this.state || {};
-
- clearTimeout(state.timer);
+ clearTimeout(this.state.timer);
+ if (onTimeout) onTimeout();
- this.setState({
- timer: null
- });
+ this.setState({ timer: null });
}).bind(this), timeout)
});
} else {
diff --git a/test/Component.js b/test/Component.js
index 2f1cf08..0568b51 100644
--- a/test/Component.js
+++ b/test/Component.js
@@ -1,13 +1,12 @@
var React = require('react');
var enzyme = require('enzyme');
+var sinon = require('sinon');
var Promise = require('bluebird');
var Component = require('../src/Component');
-
var mount = enzyme.mount;
-
function Page(wrapper) {
this.wrapper = function() {
return wrapper;
@@ -128,4 +127,72 @@ describe('', function() {
expect(page.wrapper().contains(child)).toEqual(false);
});
});
+
+ it('Should fire callback when keys are correct', function() {
+ var handleKeysCoincide = sinon.stub();
+
+ var child = createChild();
+ var created = createComponent({
+ keys: ['t', 'e', 's', 't'],
+ onKeysCoincide: handleKeysCoincide
+ }, child);
+
+ var wrapper = created.wrapper;
+ var page = created.page;
+
+ return new Promise(function(resolveAll) {
+ return new Promise(function(resolve) {
+ expect(page.wrapper().contains(child)).toEqual(false);
+
+ document.dispatchEvent(new KeyboardEvent('keydown', {'key': 't'}));
+ document.dispatchEvent(new KeyboardEvent('keydown', {'key': 'e'}));
+ document.dispatchEvent(new KeyboardEvent('keydown', {'key': 's'}));
+ document.dispatchEvent(new KeyboardEvent('keydown', {'key': 't'}));
+
+ setTimeout(function() {
+ resolve();
+ }, 500);
+ }).then(function() {
+ expect(page.wrapper().contains(child)).toEqual(true);
+ expect(handleKeysCoincide.callCount).toEqual(1);
+ setTimeout(function() {
+ resolveAll();
+ }, 500);
+ });
+ }).then(function() {
+ expect(page.wrapper().contains(child)).toEqual(true);
+ });
+ });
+
+ it('Should fire callback when timer runs out', function() {
+ var handleTimeout = sinon.stub();
+
+ var child = createChild();
+ var created = createComponent({
+ keys: ['t', 'e', 's', 't'],
+ timeout: 300,
+ onTimeout: handleTimeout
+ }, child);
+
+ var wrapper = created.wrapper;
+ var page = created.page;
+
+ return new Promise(function(resolve) {
+ expect(page.wrapper().contains(child)).toEqual(false);
+
+ document.dispatchEvent(new KeyboardEvent('keydown', {'key': 't'}));
+ document.dispatchEvent(new KeyboardEvent('keydown', {'key': 'e'}));
+ document.dispatchEvent(new KeyboardEvent('keydown', {'key': 's'}));
+ document.dispatchEvent(new KeyboardEvent('keydown', {'key': 't'}));
+
+ expect(page.wrapper().contains(child)).toEqual(true);
+
+ setTimeout(function() {
+ resolve();
+ }, 1000);
+ }).then(function() {
+ expect(handleTimeout.callCount).toEqual(1);
+ expect(page.wrapper().contains(child)).toEqual(false);
+ });
+ });
});