schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-27 08:15:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #635 from orangemug/fix/issue-633

Browse source 
Fixes for <NumberInput/>
This commit is contained in:
Orange Mug 2020-04-06 13:10:48 +01:00 committed by GitHub
commit 33b4a40c35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/components/inputs/NumberInput.jsx
View file

@ -31,7 +31,7 @@ class NumberInput extends React.Component {
}
static getDerivedStateFromProps(props, state) {
if (!state.editing) {
if (!state.editing && props.value !== state.value) {
return {
value: props.value,
dirtyValue: props.value,
@ -49,12 +49,17 @@ class NumberInput extends React.Component {
if(this.isValid(value) && hasChanged) {
this.props.onChange(value)
this.setState({
dirtyValue: newValue,
value: newValue,
});
}
else if (!this.isValid(value) && hasChanged) {
this.setState({
value: undefined,
});
}
this.setState({
value: newValue,
dirtyValue: newValue === "" ? undefined : newValue,
})
}
@ -90,8 +95,10 @@ class NumberInput extends React.Component {
if (!this.isValid(this.state.value)) {
if(this.isValid(this.props.value)) {
this.changeValue(this.props.value)
this.setState({dirtyValue: this.props.value});
} else {
this.changeValue(undefined);
this.setState({dirtyValue: undefined});
}
}
}
@ -144,8 +151,15 @@ class NumberInput extends React.Component {
this.props.min !== undefined && this.props.max !== undefined &&
this.props.allowRange
) {
const dirtyValue = this.state.dirtyValue === undefined ? this.props.default : this.state.dirtyValue
const value = this.state.value === undefined ? "" : this.state.value;
const value = this.state.editing ? this.state.dirtyValue : this.state.value;
const defaultValue = this.props.default === undefined ? "" : this.props.default;
let inputValue;
if (this.state.editingRange) {
inputValue = this.state.value;
}
else {
inputValue = value;
}
return <div className="maputnik-number-container">
<input
@ -156,21 +170,25 @@ class NumberInput extends React.Component {
min={this.props.min}
step="any"
spellCheck="false"
value={dirtyValue}
value={value === undefined ? defaultValue : value}
aria-hidden="true"
onChange={this.onChangeRange}
onKeyDown={() => {
this._keyboardEvent = true;
}}
onPointerDown={() => {
this.setState({editing: true});
this.setState({editing: true, editingRange: true});
}}
onPointerUp={() => {
// Safari doesn't get onBlur event
this.setState({editing: false});
this.setState({editing: false, editingRange: false});
}}
onBlur={() => {
this.setState({editing: false});
this.setState({
editing: false,
editingRange: false,
dirtyValue: this.state.value,
});
}}
/>
<input
@ -179,25 +197,32 @@ class NumberInput extends React.Component {
spellCheck="false"
className="maputnik-number"
placeholder={this.props.default}
value={value}
onChange={e => {
if (!this.state.editing) {
this.changeValue(e.target.value);
}
value={inputValue === undefined ? "" : inputValue}
onFocus={e => {
this.setState({editing: true});
}}
onChange={e => {
this.changeValue(e.target.value);
}}
onBlur={e => {
this.setState({editing: false});
this.resetValue()
}}
onBlur={this.resetValue}
/>
</div>
}
else {
const value = this.state.value === undefined ? "" : this.state.value;
const value = this.state.editing ? this.state.dirtyValue : this.state.value;
return <input
spellCheck="false"
className="maputnik-number"
placeholder={this.props.default}
value={value}
value={value === undefined ? "" : value}
onChange={e => this.changeValue(e.target.value)}
onFocus={() => {
this.setState({editing: true});
}}
onBlur={this.resetValue}
required={this.props.required}
/>