Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
Showing
with
73 additions
and
5 deletions.
-
+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> |
|
|
); |
|
|