Merge pull request #59 from nkbt/Fix-bug-with-sticky-onChange-props

Fix bug with sticky on change props, rebased #34

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "./node_modules/react-component-template/.eslintrc"
+  "extends": "./node_modules/react-component-template/.eslintrc",
+  "rules": {
+    "react/jsx-sort-props": 0
+  }
 }

src/Component.js

@@ -69,25 +69,32 @@ export const DebounceInput = React.createClass({
     if (debounceTimeout < 0) {
       this.notify = () => null;
     } else if (debounceTimeout === 0) {
-      this.notify = this.props.onChange;
+      this.notify = this.doNotify;
     } else {
-      this.notify = debounce(this.props.onChange, debounceTimeout);
+      this.notify = debounce(this.doNotify, debounceTimeout);
     }
   },
 
 
+  doNotify(...args) {
+    const {onChange} = this.props;
+
+    onChange(...args);
+  },
+
+
   forceNotify(event) {
     if (this.notify.cancel) {
       this.notify.cancel();
     }
 
     const {value} = this.state;
-    const {minLength, onChange} = this.props;
+    const {minLength} = this.props;
 
     if (value.length >= minLength) {
-      onChange(event);
+      this.doNotify(event);
     } else {
-      onChange({...event, target: {...event.target, value}});
+      this.doNotify({...event, target: {...event.target, value}});
     }
   },
 
@@ -122,27 +129,29 @@ export const DebounceInput = React.createClass({
       debounceTimeout: _debounceTimeout,
       forceNotifyByEnter,
       forceNotifyOnBlur,
+      onKeyDown,
+      onBlur,
       ...props
     } = this.props;
 
-    const onKeyDown = forceNotifyByEnter ? {
+    const maybeOnKeyDown = forceNotifyByEnter ? {
       onKeyDown: event => {
         if (event.key === 'Enter') {
           this.forceNotify(event);
         }
         // Invoke original onKeyDown if present
-        if (this.props.onKeyDown) {
-          this.props.onKeyDown(event);
+        if (onKeyDown) {
+          onKeyDown(event);
         }
       }
     } : {};
 
-    const onBlur = forceNotifyOnBlur ? {
+    const maybeOnBlur = forceNotifyOnBlur ? {
       onBlur: event => {
         this.forceNotify(event);
         // Invoke original onBlur if present
-        if (this.props.onBlur) {
-          this.props.onBlur(event);
+        if (onBlur) {
+          onBlur(event);
         }
       }
     } : {};
@@ -152,8 +161,8 @@ export const DebounceInput = React.createClass({
       ...props,
       onChange: this.onChange,
       value: this.state.value,
-      ...onKeyDown,
-      ...onBlur
+      ...maybeOnKeyDown,
+      ...maybeOnBlur
     });
   }
 });

src/example/App/UndoRedo.js

@@ -35,22 +35,21 @@ const UndoRedo = React.createClass({
   },
 
 
-  redo() {
+  onRedo() {
     this.setValueFromHistory(this.state.historyIndex + 1);
   },
 
 
-  undo() {
+  onUndo() {
     this.setValueFromHistory(this.state.historyIndex - 1);
   },
 
 
   render() {
-    const history = this.state.history.map((value, key) => (
+    const history = this.state.history.map((value, key) =>
       <span className={css.item} key={key}>
         {key === this.state.historyIndex ? <b>"{value}"</b> : <span>"{value}"</span>}
-      </span>
-    ));
+      </span>);
 
 
     return (
@@ -67,11 +66,11 @@ const UndoRedo = React.createClass({
           </label>
 
           <label className={css.label}>
-            <button className={css.input} onClick={this.undo}>Undo</button>
+            <button className={css.input} onClick={this.onUndo}>Undo</button>
           </label>
 
           <label className={css.label}>
-            <button className={css.input} onClick={this.redo}>Redo</button>
+            <button className={css.input} onClick={this.onRedo}>Redo</button>
           </label>
         </div>
 

src/example/App/index.js

@@ -6,7 +6,7 @@ import Textarea from './Textarea';
 import css from './App.css';
 
 
-const App = () => (
+const App = () =>
   <div className={css.app}>
     <h1>react-debounce-input</h1>
     <section className={css.section}>
@@ -28,8 +28,7 @@ const App = () => (
       <h2>Example 4. Debounced Textarea</h2>
       <Textarea />
     </section>
-  </div>
-);
+  </div>;
 
 
 export default App;