Refactor buffered inputs for sprite info

src/components/buffered-input/buffered-input.jsx

+const bindAll = require('lodash.bindall');
+const PropTypes = require('prop-types');
+const React = require('react');
+
+class BufferedInput extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleChange',
+            'handleKeyPress',
+            'handleFlush'
+        ]);
+        this.state = {
+            value: null
+        };
+    }
+    handleKeyPress (e) {
+        if (e.key === 'Enter') {
+            this.handleFlush();
+            e.target.blur();
+        }
+    }
+    handleFlush () {
+        const isNumeric = typeof this.props.value === 'number';
+        const validatesNumeric = isNumeric ? !isNaN(this.state.value) : true;
+        if (this.state.value !== null && validatesNumeric) {
+            this.props.onSubmit(isNumeric ? Number(this.state.value) : this.state.value);
+        }
+        this.setState({value: null});
+    }
+    handleChange (e) {
+        this.setState({value: e.target.value});
+    }
+    render () {
+        const bufferedValue = this.state.value === null ? this.props.value : this.state.value;
+        return (
+            <input
+                {...this.props}
+                value={bufferedValue}
+                onBlur={this.handleFlush}
+                onChange={this.handleChange}
+                onKeyPress={this.handleKeyPress}
+            />
+        );
+    }
+}
+
+BufferedInput.propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+module.exports = BufferedInput;

src/components/sprite-info/sprite-info.jsx

@@ -3,6 +3,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const Box = require('../box/box.jsx');
+const BufferedInput = require('../buffered-input/buffered-input.jsx');
 const styles = require('./sprite-info.css');
 
 const xIcon = require('./icon--x.svg');
@@ -32,16 +33,14 @@ class SpriteInfo extends React.Component {
                 <div className={classNames(styles.row, styles.rowPrimary)}>
                     <div className={styles.group}>
                         <span className={styles.inputLabel}>Sprite</span>
-                        <input
+                        <BufferedInput
                             className={classNames(styles.inputForm, styles.spriteName)}
                             disabled={this.props.disabled}
                             placeholder="Name"
                             tabIndex="1"
                             type="text"
                             value={this.props.disabled ? '' : this.props.name}
-                            onBlur={this.props.onBlurName}
-                            onChange={this.props.onChangeName}
-                            onKeyPress={this.props.onKeyPress}
+                            onSubmit={this.props.onChangeName}
                         />
                     </div>
 
@@ -53,16 +52,14 @@ class SpriteInfo extends React.Component {
                             />
                         </div>
                         <span className={styles.inputLabel}>x</span>
-                        <input
+                        <BufferedInput
                             className={classNames(styles.inputForm, styles.x)}
                             disabled={this.props.disabled}
                             placeholder="x"
                             tabIndex="2"
                             type="text"
                             value={this.props.disabled ? '' : this.props.x}
-                            onBlur={this.props.onBlurX}
-                            onChange={this.props.onChangeX}
-                            onKeyPress={this.props.onKeyPress}
+                            onSubmit={this.props.onChangeX}
                         />
                     </div>
 
@@ -74,16 +71,14 @@ class SpriteInfo extends React.Component {
                             />
                         </div>
                         <span className={styles.inputLabel}>y</span>
-                        <input
+                        <BufferedInput
                             className={classNames(styles.inputForm, styles.y)}
                             disabled={this.props.disabled}
                             placeholder="y"
                             tabIndex="3"
                             type="text"
                             value={this.props.disabled ? '' : this.props.y}
-                            onBlur={this.props.onBlurY}
-                            onChange={this.props.onChangeY}
-                            onKeyPress={this.props.onKeyPress}
+                            onSubmit={this.props.onChangeY}
                         />
                     </div>
                 </div>
@@ -134,15 +129,13 @@ class SpriteInfo extends React.Component {
                     </div>
                     <div className={styles.group}>
                         <span className={styles.inputLabelSecondary}>Direction</span>
-                        <input
+                        <BufferedInput
                             className={classNames(styles.inputForm, styles.direction)}
                             disabled={this.props.disabled}
                             tabIndex="5"
                             type="text"
                             value={this.props.disabled ? '' : this.props.direction}
-                            onBlur={this.props.onBlurDirection}
-                            onChange={this.props.onChangeDirection}
-                            onKeyPress={this.props.onKeyPress}
+                            onSubmit={this.props.onChangeDirection}
                         />
                     </div>
                     <div className={styles.group}>
@@ -178,10 +171,6 @@ SpriteInfo.propTypes = {
     ]),
     disabled: PropTypes.bool,
     name: PropTypes.string,
-    onBlurDirection: PropTypes.func,
-    onBlurName: PropTypes.func,
-    onBlurX: PropTypes.func,
-    onBlurY: PropTypes.func,
     onChangeDirection: PropTypes.func,
     onChangeName: PropTypes.func,
     onChangeRotationStyle: PropTypes.func,
@@ -189,7 +178,6 @@ SpriteInfo.propTypes = {
     onChangeY: PropTypes.func,
     onClickNotVisible: PropTypes.func,
     onClickVisible: PropTypes.func,
-    onKeyPress: PropTypes.func,
     rotationStyle: PropTypes.oneOf(ROTATION_STYLES),
     visible: PropTypes.bool,
     x: PropTypes.oneOfType([

src/containers/sprite-info.jsx

@@ -8,64 +8,14 @@ class SpriteInfo extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleChangeName',
             'handleChangeRotationStyle',
-            'handleChangeDirection',
-            'handleChangeX',
-            'handleChangeY',
             'handleClickVisible',
-            'handleClickNotVisible',
-            'handleFlush',
-            'handleKeyPress'
+            'handleClickNotVisible'
         ]);
-        this.state = {
-            direction: null,
-            name: null,
-            x: null,
-            y: null
-        };
-    }
-    handleKeyPress (e) {
-        if (e.key === 'Enter') {
-            this.handleFlush();
-            e.target.blur();
-        }
-    }
-    handleFlush () {
-        if (this.state.direction !== null && !isNaN(this.state.direction)) {
-            this.props.onChangeDirection(this.state.direction);
-        }
-        if (this.state.name !== null) {
-            this.props.onChangeName(this.state.name);
-        }
-        if (this.state.x !== null && !isNaN(this.state.x)) {
-            this.props.onChangeX(this.state.x);
-        }
-        if (this.state.y !== null && !isNaN(this.state.y)) {
-            this.props.onChangeY(this.state.y);
-        }
-        this.setState({
-            direction: null,
-            name: null,
-            x: null,
-            y: null
-        });
-    }
-    handleChangeDirection (e) {
-        this.setState({direction: e.target.value});
-    }
-    handleChangeName (e) {
-        this.setState({name: e.target.value});
     }
     handleChangeRotationStyle (e) {
         this.props.onChangeRotationStyle(e.target.value);
     }
-    handleChangeX (e) {
-        this.setState({x: e.target.value});
-    }
-    handleChangeY (e) {
-        this.setState({y: e.target.value});
-    }
     handleClickVisible (e) {
         e.preventDefault();
         this.props.onChangeVisibility(true);
@@ -75,28 +25,12 @@ class SpriteInfo extends React.Component {
         this.props.onChangeVisibility(false);
     }
     render () {
-        const bufferedInputs = {
-            direction: this.state.direction === null ? this.props.direction : this.state.direction,
-            name: this.state.name === null ? this.props.name : this.state.name,
-            x: this.state.x === null ? this.props.x : this.state.x,
-            y: this.state.y === null ? this.props.y : this.state.y
-        };
         return (
             <SpriteInfoComponent
                 {...this.props}
-                {...bufferedInputs}
-                onBlurDirection={this.handleFlush}
-                onBlurName={this.handleFlush}
-                onBlurX={this.handleFlush}
-                onBlurY={this.handleFlush}
-                onChangeDirection={this.handleChangeDirection}
-                onChangeName={this.handleChangeName}
                 onChangeRotationStyle={this.handleChangeRotationStyle}
-                onChangeX={this.handleChangeX}
-                onChangeY={this.handleChangeY}
                 onClickNotVisible={this.handleClickNotVisible}
                 onClickVisible={this.handleClickVisible}
-                onKeyPress={this.handleKeyPress}
             />
         );
     }