mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-11-10 10:27:45 +01:00
Merge pull request #517 from orangemug/fix/editing-of-number-and-string-inputs
Fix for string/number inputs when inputting invalid of intermediate values
This commit is contained in:
commit
cc3c17078d
2 changed files with 21 additions and 10 deletions
|
@ -13,25 +13,28 @@ class NumberInput extends React.Component {
|
|||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
value: props.value
|
||||
editing: false,
|
||||
value: props.value,
|
||||
}
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
return {
|
||||
value: props.value
|
||||
};
|
||||
if (!state.editing) {
|
||||
return {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
changeValue(newValue) {
|
||||
this.setState({editing: true});
|
||||
const value = parseFloat(newValue)
|
||||
|
||||
const hasChanged = this.state.value !== value
|
||||
if(this.isValid(value) && hasChanged) {
|
||||
this.props.onChange(value)
|
||||
} else {
|
||||
this.setState({ value: newValue })
|
||||
}
|
||||
this.setState({ value: newValue })
|
||||
}
|
||||
|
||||
isValid(v) {
|
||||
|
@ -52,6 +55,7 @@ class NumberInput extends React.Component {
|
|||
}
|
||||
|
||||
resetValue = () => {
|
||||
this.setState({editing: false});
|
||||
// Reset explicitly to default value if value has been cleared
|
||||
if(this.state.value === "") {
|
||||
return this.changeValue(this.props.default)
|
||||
|
|
|
@ -14,13 +14,16 @@ class StringInput extends React.Component {
|
|||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
editing: false,
|
||||
value: props.value || ''
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if(this.props.value !== prevProps.value) {
|
||||
this.setState({value: this.props.value})
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
if (!state.editing) {
|
||||
return {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -51,11 +54,15 @@ class StringInput extends React.Component {
|
|||
placeholder: this.props.default,
|
||||
onChange: e => {
|
||||
this.setState({
|
||||
editing: true,
|
||||
value: e.target.value
|
||||
})
|
||||
},
|
||||
onBlur: () => {
|
||||
if(this.state.value!==this.props.value) this.props.onChange(this.state.value)
|
||||
if(this.state.value!==this.props.value) {
|
||||
this.setState({editing: false});
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue