fix(@embark/cockpit/converter): allow decimal numbers

Prior to this commit, it wasn't possible to enter decimal numbers
with dots. The reason for that is that all units are recalculated
on form control change and values like `2.` are simply converted to
`2`.

As every change will cause a `setState()` in Cockpit, users never had
a chance to get "beyond" the first dot of their input value.

This is now fixed by preventing the recalculation all together when
the last character in the entered value is a `.`

In that case, we simply update the form control using `setState()` and
don't touch all the other values. The next key stroke will cause a full
recalculation again.
This commit is contained in:
Pascal Precht 2018-12-10 13:47:01 +01:00 committed by Pascal Precht
parent 8cbbcfe89e
commit 8a5871e606
1 changed files with 18 additions and 2 deletions

View File

@ -27,8 +27,24 @@ class Converter extends React.Component {
} }
handleOnChange(event, key) { handleOnChange(event, key) {
const newUnits = calculateUnits(event.target.value, key); const value = event.target.value;
let newUnits;
if (value.slice(-1) === '.') {
// `calculateUnits()` turns `1.` to `1` which makes it impossible
// for users to get beyond the first dot when typing decimal values.
// That's why we bypass recalculation all together when the last character
// is a dot and only update the form control in question.
newUnits = this.state.etherConversions.map(unit => {
if (unit.key === key) {
unit.value = value;
}
return unit;
});
this.setState({etherConversions: newUnits}); this.setState({etherConversions: newUnits});
} else {
newUnits = calculateUnits(value, key);
this.setState({etherConversions: newUnits});
}
const newBaseEther = newUnits.find(unit => unit.key === 'ether'); const newBaseEther = newUnits.find(unit => unit.key === 'ether');
this.props.updateBaseEther(newBaseEther.value); this.props.updateBaseEther(newBaseEther.value);
} }