From f65f533232376114335f954e4b969a45dddc19b9 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Wed, 9 Jan 2019 11:18:39 -0500 Subject: [PATCH 1/4] add error state when !isNumber to Numeric component --- src/components/widgets/NumericInput.js | 25 +++++++++++++++---- .../components/widgets/_numeric-input.scss | 20 +++++++++++++++ 2 files changed, 40 insertions(+), 5 deletions(-) diff --git a/src/components/widgets/NumericInput.js b/src/components/widgets/NumericInput.js index a47d51479..e68aa9cee 100644 --- a/src/components/widgets/NumericInput.js +++ b/src/components/widgets/NumericInput.js @@ -12,13 +12,25 @@ export default class NumericInput extends Component { constructor(props) { super(props); - this.state = {value: props.value}; + this.state = { + value: props.value, + numericInputClassName: this.getNumericInputClassName(props.value), + }; + this.onChange = this.onChange.bind(this); this.updateValue = this.updateValue.bind(this); this.onKeyDown = this.onKeyDown.bind(this); this.onWheel = this.onWheel.bind(this); } + getNumericInputClassName(value) { + return isNumeric(value) + ? `numeric-input__number ${this.props.editableClassName ? this.props.editableClassName : ''}` + : `numeric-input__number--error ${ + this.props.editableClassName ? this.props.editableClassName : '' + }`; + } + componentWillReceiveProps(nextProps) { if (nextProps.value !== this.state.value) { this.setState({value: nextProps.value}); @@ -49,17 +61,20 @@ export default class NumericInput extends Component { } onChange(value) { - this.setState({value}); + this.setState({value, numericInputClassName: this.getNumericInputClassName(value)}); } updateValue(newValue) { - const {max, min, integerOnly, value: propsValue} = this.props; + const {max, min, integerOnly} = this.props; let updatedValue = newValue; // When the user blurs on non-numeric data reset the component // to the last known good value (this.props.value). if (!isNumeric(updatedValue)) { - this.setState({value: propsValue}); + this.setState({ + value: updatedValue, + numericInputClassName: this.getNumericInputClassName(updatedValue), + }); return; } @@ -151,7 +166,7 @@ export default class NumericInput extends Component { return (
Date: Wed, 9 Jan 2019 14:02:20 -0500 Subject: [PATCH 2/4] extend scss class --- .../components/widgets/_numeric-input.scss | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/styles/components/widgets/_numeric-input.scss b/src/styles/components/widgets/_numeric-input.scss index b933ff029..48cf1abbd 100644 --- a/src/styles/components/widgets/_numeric-input.scss +++ b/src/styles/components/widgets/_numeric-input.scss @@ -50,23 +50,8 @@ } .numeric-input__number--error { - display: inline-block; - border: var(--border-default); + @extend .numeric-input__number; border-color: var(--color-sienna); - background: var(--color-background-inputs); - cursor: text; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - text-align: left; - border-radius: var(--border-radius-small); - padding: var(--spacing-quarter-unit) var(--spacing-quarter-unit) var(--spacing-quarter-unit) - var(--spacing-half-unit); - width: 62px; - vertical-align: middle; - font-size: inherit; - color: inherit; - font-family: inherit; } .numeric-input__caret-box { From f0b6396019778401c3c679463b22e93c3e3a3857 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Wed, 9 Jan 2019 14:18:03 -0500 Subject: [PATCH 3/4] make outline color on focus sienna as well --- src/styles/components/widgets/_numeric-input.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/components/widgets/_numeric-input.scss b/src/styles/components/widgets/_numeric-input.scss index 48cf1abbd..df30a413e 100644 --- a/src/styles/components/widgets/_numeric-input.scss +++ b/src/styles/components/widgets/_numeric-input.scss @@ -54,6 +54,12 @@ border-color: var(--color-sienna); } +.numeric-input__number--error:focus { + @extend .numeric-input__number; + border-color: var(--color-sienna); + outline-color: var(--color-sienna); +} + .numeric-input__caret-box { display: inline-block; max-height: 32px; From 9bd9bfd013f183abed3e473f9e2870694cb771fe Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Wed, 9 Jan 2019 20:36:12 -0500 Subject: [PATCH 4/4] get back defaults --- src/components/widgets/NumericInput.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/widgets/NumericInput.js b/src/components/widgets/NumericInput.js index e68aa9cee..2557172cc 100644 --- a/src/components/widgets/NumericInput.js +++ b/src/components/widgets/NumericInput.js @@ -24,7 +24,7 @@ export default class NumericInput extends Component { } getNumericInputClassName(value) { - return isNumeric(value) + return isNumeric(value) || value === '' ? `numeric-input__number ${this.props.editableClassName ? this.props.editableClassName : ''}` : `numeric-input__number--error ${ this.props.editableClassName ? this.props.editableClassName : '' @@ -68,6 +68,14 @@ export default class NumericInput extends Component { const {max, min, integerOnly} = this.props; let updatedValue = newValue; + if (updatedValue === '') { + this.setState({ + value: this.props.value, + numericInputClassName: this.getNumericInputClassName(this.props.value), + }); + return; + } + // When the user blurs on non-numeric data reset the component // to the last known good value (this.props.value). if (!isNumeric(updatedValue)) {