From 7dbabf60a90637f39e80e3df91891884461ef283 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 1 Nov 2017 13:41:36 -0400
Subject: [PATCH] change size inputs to input with custon onChange

This fixes #122 by reverting the changes to `bufferedInputHOC`, and adding a custom `onChange` handler to the mode tools for brush and eraser, and making them `Input` components. Same goes for the strok width indicator.
---
 src/components/forms/buffered-input-hoc.jsx |  9 ---------
 src/components/mode-tools/mode-tools.jsx    | 16 ++++++++++++----
 src/components/stroke-width-indicator.jsx   | 10 +++++++---
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/forms/buffered-input-hoc.jsx b/src/components/forms/buffered-input-hoc.jsx
index e7bc25a3..b3561136 100644
--- a/src/components/forms/buffered-input-hoc.jsx
+++ b/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 () {
diff --git a/src/components/mode-tools/mode-tools.jsx b/src/components/mode-tools/mode-tools.jsx
index ef6dad32..3fe3332f 100644
--- a/src/components/mode-tools/mode-tools.jsx
+++ b/src/components/mode-tools/mode-tools.jsx
@@ -6,7 +6,6 @@ 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 {injectIntl, intlShape} from 'react-intl';
 import Input from '../forms/input.jsx';
 // import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
@@ -22,7 +21,6 @@ import eraserIcon from '../eraser-mode/eraser.svg';
 
 import {MAX_STROKE_WIDTH} from '../../reducers/stroke-width';
 
-const BufferedInput = BufferedInputHOC(Input);
 const ModeToolsComponent = props => {
     const brushMessage = props.intl.formatMessage({
         defaultMessage: 'Brush',
@@ -46,12 +44,17 @@ const ModeToolsComponent = props => {
                         src={brushIcon}
                     />
                 </div>
-                <BufferedInput
+                <Input
                     small
                     max={MAX_STROKE_WIDTH}
                     min="1"
                     type="number"
                     value={props.brushValue}
+                    onChange={function (e) {
+                        if (e.target.value !== null && !isNaN(e.target.value)) {
+                            props.onBrushSliderChange(Number(e.target.value));
+                        }
+                    }}
                     onSubmit={props.onBrushSliderChange}
                 />
             </div>
@@ -66,12 +69,17 @@ const ModeToolsComponent = props => {
                         src={eraserIcon}
                     />
                 </div>
-                <BufferedInput
+                <Input
                     small
                     max={MAX_STROKE_WIDTH}
                     min="1"
                     type="number"
                     value={props.eraserValue}
+                    onChange={function (e) {
+                        if (e.target.value !== null && !isNaN(e.target.value)) {
+                            props.onEraserSliderChange(Number(e.target.value));
+                        }
+                    }}
                     onSubmit={props.onEraserSliderChange}
                 />
             </div>
diff --git a/src/components/stroke-width-indicator.jsx b/src/components/stroke-width-indicator.jsx
index a0947b67..c7ecb7a2 100644
--- a/src/components/stroke-width-indicator.jsx
+++ b/src/components/stroke-width-indicator.jsx
@@ -1,22 +1,26 @@
 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 {MAX_STROKE_WIDTH} from '../reducers/stroke-width';
 
-const BufferedInput = BufferedInputHOC(Input);
 const StrokeWidthIndicatorComponent = props => (
     <InputGroup disabled={props.disabled}>
-        <BufferedInput
+        <Input
             small
             disabled={props.disabled}
             max={MAX_STROKE_WIDTH}
             min="0"
             type="number"
             value={props.strokeWidth ? props.strokeWidth : 0}
+            onChange={function (e) {
+                if (e.target.value !== null && !isNaN(e.target.value)) {
+                    props.onChangeStrokeWidth(Number(e.target.value));
+                }
+
+            }}
             onSubmit={props.onChangeStrokeWidth}
         />
     </InputGroup>