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

Fixed another bug with change events for <NumberInput/> and added range input keyboard support. Remove logging as react props/state is enough for debugging.

Browse source
This commit is contained in:
orangemug 2020-01-19 10:30:08 +00:00
parent c88f9ab5dc
commit 655877f67e
1 changed files with 33 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,6 @@ class NumberInput extends React.Component {
}
static getDerivedStateFromProps(props, state) {
console.log("getDerivedStateFromProps[%s]", state.uuid, props.value, state.value);
if (!state.editing) {
return {
value: props.value,
@ -46,9 +45,7 @@ class NumberInput extends React.Component {
parseFloat(newValue);
const hasChanged = this.props.value !== value;
console.log("changeValue[%s]->hasChanged", this.state.uuid, value, this.isValid(value), this.props.value, "!==", value)
if(this.isValid(value) && hasChanged) {
console.log("changeValue[%s]->onChange", this.state.uuid, value);
this.props.onChange(value)
}
this.setState({
@ -96,13 +93,7 @@ class NumberInput extends React.Component {
}
onChangeRange = (e) => {
console.log("onChangeRange[%s]", this.state.uuid);
if (this._cancelNextChangeEvent) {
console.log("onChangeRange[%s]:cancel", this.state.uuid);
this._cancelNextChangeEvent = false;
return;
}
const value = parseFloat(e.target.value, 10);
let value = parseFloat(e.target.value, 10);
const step = this.props.rangeStep;
let dirtyValue = value;
@ -111,15 +102,35 @@ class NumberInput extends React.Component {
const snap = value % step;
// Round up/down to step
if (snap < step/2) {
dirtyValue = value - snap;
if (this._keyboardEvent) {
// If it's keyboard event we might get a low positive/negative value,
// for example we might go from 13 to 13.23, however because we know
// that came from a keyboard event we always want to increase by a
// single step value.
if (value < this.state.value) {
value = value - snap;
}
else {
value = value - snap + snap;
}
}
else {
dirtyValue = value + (step - snap);
};
if (snap < step/2) {
value = value - snap;
}
else {
value = value + (step - snap);
};
}
}
this._keyboardEvent = false;
// Clamp between min/max
value = Math.max(this.props.min, Math.min(this.props.max, value));
this.setState({editing: true, value, dirtyValue});
this.props.onChange(value);
}
render() {
@ -130,7 +141,6 @@ class NumberInput extends React.Component {
) {
const value = this.state.value === undefined ? this.props.default : this.state.value;
const rangeValue = Number.isNaN(parseFloat(value, 10)) ? this.props.default : value;
console.log("render[%s]", this.state.uuid, value, rangeValue);
return <div className="maputnik-number-container">
<input
@ -142,21 +152,13 @@ class NumberInput extends React.Component {
step="any"
spellCheck="false"
value={rangeValue}
onInput={this.onChangeRange}
onMouseUp={() => console.log("mouseup")}
onPointerDown={() => {
this._cancelNextChangeEvent = false;
aria-hidden="true"
onChange={this.onChangeRange}
onKeyDown={() => {
this._keyboardEvent = true;
}}
onBlur={() => {
console.log("onBlur[%s]", this.state.uuid);
this.setState({editing: false});
this.changeValue(this.state.dirtyValue);
}}
onPointerUp={() => {
console.log("onPointerUp[%s]", this.state.uuid);
this._cancelNextChangeEvent = true;
this.setState({editing: false});
this.changeValue(this.state.dirtyValue);
}}
/>
<input
@ -165,10 +167,11 @@ class NumberInput extends React.Component {
spellCheck="false"
className="maputnik-number"
placeholder={this.props.default}
value={this.state.dirtyValue === undefined ? "" : this.state.dirtyValue}
value={this.state.value === undefined ? "" : this.state.value}
onChange={e => {
console.log("input.text->onChange[%s]", this.state.uuid, e.target.value);
this.changeValue(e.target.value)
if (!this.state.editing) {
this.changeValue(e.target.value);
}
}}
onBlur={this.resetValue}
/>