mirror of https://github.com/embarklabs/embark.git
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:
parent
8cbbcfe89e
commit
8a5871e606
|
@ -27,8 +27,24 @@ class Converter extends React.Component {
|
|||
}
|
||||
|
||||
handleOnChange(event, key) {
|
||||
const newUnits = calculateUnits(event.target.value, key);
|
||||
this.setState({etherConversions: newUnits});
|
||||
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});
|
||||
} else {
|
||||
newUnits = calculateUnits(value, key);
|
||||
this.setState({etherConversions: newUnits});
|
||||
}
|
||||
const newBaseEther = newUnits.find(unit => unit.key === 'ether');
|
||||
this.props.updateBaseEther(newBaseEther.value);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue