Merge branch 'issue/gh-122' into develop

* issue/gh-122:
  check min too
  Validate max value in live input
  create liveinput hoc instead
  change size inputs to input with custon onChange

# Conflicts:
#	src/components/mode-tools/mode-tools.jsx

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

@@ -2,10 +2,6 @@
 @todo This file is copied from GUI and should be pulled out into a shared library.
 See https://github.com/LLK/scratch-paint/issues/13 */
 
-/* ACTUALLY, THIS HAS BEEN EDITED ;)
-handleChange() was adjusted here to actually send a change to `onSubmit()` so that
-brush/eraser sizes change immediately on a numeric input*/
-
 import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -43,11 +39,6 @@ export default function (Input) {
             this.setState({value: null});
         }
         handleChange (e) {
-            const isNumeric = typeof this.props.value === 'number';
-            const validatesNumeric = isNumeric ? !isNaN(e.target.value) : true;
-            if (e.target.value !== null && validatesNumeric) {
-                this.props.onSubmit(isNumeric ? Number(e.target.value) : e.target.value);
-            }
             this.setState({value: e.target.value});
         }
         render () {

src/components/forms/live-input-hoc.jsx

@@ -0,0 +1,69 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+/**
+ * Higher Order Component to manage inputs that submit on change and <enter>
+ * @param {React.Component} Input text input that consumes onChange, onBlur, onKeyPress
+ * @returns {React.Component} Live input that calls onSubmit on change and <enter>
+ */
+export default function (Input) {
+    class LiveInput extends React.Component {
+        constructor (props) {
+            super(props);
+            bindAll(this, [
+                'handleChange',
+                'handleKeyPress',
+                'handleFlush'
+            ]);
+            this.state = {
+                value: null
+            };
+        }
+        handleKeyPress (e) {
+            if (e.key === 'Enter') {
+                this.handleChange(e);
+                e.target.blur();
+            }
+        }
+        handleFlush () {
+            this.setState({value: null});
+        }
+        handleChange (e) {
+            const isNumeric = typeof this.props.value === 'number';
+            const validatesNumeric = isNumeric ? !isNaN(e.target.value) : true;
+            if (e.target.value !== null && validatesNumeric ) {
+                let val = Number(e.target.value);
+                if (typeof this.props.max !== 'undefined' && val > Number(this.props.max)) {
+                    val = this.props.max;
+                }
+                if (typeof this.props.min !== 'undefined' && val < Number(this.props.min)) {
+                    val = this.props.min;
+                }
+                this.props.onSubmit(val);
+            }
+            this.setState({value: e.target.value});
+        }
+        render () {
+            const liveValue = this.state.value === null ? this.props.value : this.state.value;
+            return (
+                <Input
+                    {...this.props}
+                    value={liveValue}
+                    onBlur={this.handleFlush}
+                    onChange={this.handleChange}
+                    onKeyPress={this.handleKeyPress}
+                />
+            );
+        }
+    }
+
+    LiveInput.propTypes = {
+        max: PropTypes.number,
+        min: PropTypes.number,
+        onSubmit: PropTypes.func.isRequired,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    };
+
+    return LiveInput;
+}

src/components/mode-tools/mode-tools.jsx

@@ -7,7 +7,7 @@ import React from 'react';
 import {changeBrushSize} from '../../reducers/brush-mode';
 import {changeBrushSize as changeEraserSize} from '../../reducers/eraser-mode';
 
-import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
+import LiveInputHOC from '../forms/live-input-hoc.jsx';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import Input from '../forms/input.jsx';
 import InputGroup from '../input-group/input-group.jsx';
@@ -28,7 +28,7 @@ import eraserIcon from '../eraser-mode/eraser.svg';
 
 import {MAX_STROKE_WIDTH} from '../../reducers/stroke-width';
 
-const BufferedInput = BufferedInputHOC(Input);
+const LiveInput = LiveInputHOC(Input);
 const ModeToolsComponent = props => {
     const messages = defineMessages({
         brushSize: {
@@ -64,7 +64,7 @@ const ModeToolsComponent = props => {
                         src={brushIcon}
                     />
                 </div>
-                <BufferedInput
+                <LiveInput
                     small
                     max={MAX_STROKE_WIDTH}
                     min="1"
@@ -84,7 +84,7 @@ const ModeToolsComponent = props => {
                         src={eraserIcon}
                     />
                 </div>
-                <BufferedInput
+                <LiveInput
                     small
                     max={MAX_STROKE_WIDTH}
                     min="1"

src/components/stroke-width-indicator.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import BufferedInputHOC from './forms/buffered-input-hoc.jsx';
 import Input from './forms/input.jsx';
 import InputGroup from './input-group/input-group.jsx';
+import LiveInputHOC from './forms/live-input-hoc.jsx';
 
 import {MAX_STROKE_WIDTH} from '../reducers/stroke-width';
 
-const BufferedInput = BufferedInputHOC(Input);
+const LiveInput = LiveInputHOC(Input);
 const StrokeWidthIndicatorComponent = props => (
     <InputGroup disabled={props.disabled}>
-        <BufferedInput
+        <LiveInput
             small
             disabled={props.disabled}
             max={MAX_STROKE_WIDTH}