Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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 Aug 5, 2018
1 parent c002e8c commit eee3928
Showing 1 changed file with 73 additions and 5 deletions.
78 changes: 73 additions & 5 deletions webpack_in/entry.jsx
Expand Up @@ -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 {
Expand All @@ -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>
);
Expand Down

0 comments on commit eee3928

Please sign in to comment.