Permalink
Browse files

Added logic to allow the user to type-in new values for the color com…

…ponents, which involves listening to changes to the text fields, parsing the entered value, and making sure that it is valid in the range 0 to 255.
  • Loading branch information...
maratbn committed Jul 2, 2018
1 parent c002e8c commit eee3928417185ee28cdc100d94f816d9d5f812f2
Showing with 73 additions and 5 deletions.
  1. +73 −5 webpack_in/entry.jsx
@@ -240,15 +240,53 @@ class ColorComponentEntry extends React.Component {
size='4'
maxLength='4'
style={{ textAlign: 'center' }}
value={ this.props.value } />
value={ this.props.value }
onChange={ event => {
const strValueEntered = event.target.value;
// Need to normalize the user input to a valid
// value, which is 0 <= valid <= 255
// Inputs of non-digits will be ignored.
if (!strValueEntered.match(/^\d*$/g)) {
return;
}
// Value must be converted to an integer.
const convertValue = strValueToConvert => {
// Blank / falsy input will be treated as 0.
if (!strValueToConvert) {
return 0;
}
const valueConverted = parseInt(
strValueToConvert);
// If the integer is <= 255 then it is a valid
// value and safe to return.
if (valueConverted <= 255) {
return valueConverted;
}
// Otherwise will remove the left-most digit
// and try to convert again until the value
// becomes <= 255
return convertValue(strValueToConvert
.substr(1));
};
this.props.onChangeValue(convertValue(
strValueEntered));
}} />
</div>
);
}
}
ColorComponentEntry.propTypes = {
label: PropTypes.string.isRequired,
value: PropTypes.number.isRequired
value: PropTypes.number.isRequired,
onChangeValue: PropTypes.func.isRequired
};
class ColorSelector extends React.Component {
@@ -272,9 +310,39 @@ class ColorSelector extends React.Component {
height: '3em',
border: 'solid 2px black' }} />
<div style={{ marginTop: '-1em'}}>
<ColorComponentEntry label="R" value={ this.state.color.r } />
<ColorComponentEntry label="G" value={ this.state.color.g } />
<ColorComponentEntry label="B" value={ this.state.color.b } />
<ColorComponentEntry label="R" value={ this.state.color.r } onChangeValue={
(value) => {
this.setState({
...this.state,
color: {
...this.state.color,
r: value
}
});
}
} />
<ColorComponentEntry label="G" value={ this.state.color.g } onChangeValue={
(value) => {
this.setState({
...this.state,
color: {
...this.state.color,
g: value
}
});
}
} />
<ColorComponentEntry label="B" value={ this.state.color.b } onChangeValue={
(value) => {
this.setState({
...this.state,
color: {
...this.state.color,
b: value
}
});
}
} />
</div>
</div>
);

0 comments on commit eee3928

Please sign in to comment.