scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-23 05:52:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

change size inputs to input with custon onChange

Browse source 
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.
This commit is contained in:
Matthew Taylor 2017-11-01 13:41:36 -04:00
parent 28b9c4149e
commit 7dbabf60a9
3 changed files with 19 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/forms/buffered-input-hoc.jsx
View file

@ -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 () {

16
src/components/mode-tools/mode-tools.jsx
View file

@ -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>

10
src/components/stroke-width-indicator.jsx
View file

@ -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>