schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 17:31:14 +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) { static getDerivedStateFromProps(props, state) {
console.log("getDerivedStateFromProps[%s]", state.uuid, props.value, state.value);
if (!state.editing) { if (!state.editing) {
return { return {
value: props.value, value: props.value,
@ -46,9 +45,7 @@ class NumberInput extends React.Component {
parseFloat(newValue); parseFloat(newValue);
const hasChanged = this.props.value !== value; 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) { if(this.isValid(value) && hasChanged) {
console.log("changeValue[%s]->onChange", this.state.uuid, value);
this.props.onChange(value) this.props.onChange(value)
} }
this.setState({ this.setState({
@ -96,13 +93,7 @@ class NumberInput extends React.Component {
} }
onChangeRange = (e) => { onChangeRange = (e) => {
console.log("onChangeRange[%s]", this.state.uuid); let value = parseFloat(e.target.value, 10);
if (this._cancelNextChangeEvent) {
console.log("onChangeRange[%s]:cancel", this.state.uuid);
this._cancelNextChangeEvent = false;
return;
}
const value = parseFloat(e.target.value, 10);
const step = this.props.rangeStep; const step = this.props.rangeStep;
let dirtyValue = value; let dirtyValue = value;
@ -111,15 +102,35 @@ class NumberInput extends React.Component {
const snap = value % step; const snap = value % step;
// Round up/down to step // Round up/down to step
if (snap < step/2) { if (this._keyboardEvent) {
dirtyValue = value - snap; // 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 { 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.setState({editing: true, value, dirtyValue});
this.props.onChange(value);
} }
render() { render() {
@ -130,7 +141,6 @@ class NumberInput extends React.Component {
) { ) {
const value = this.state.value === undefined ? this.props.default : this.state.value; const value = this.state.value === undefined ? this.props.default : this.state.value;
const rangeValue = Number.isNaN(parseFloat(value, 10)) ? this.props.default : 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"> return <div className="maputnik-number-container">
<input <input
@ -142,21 +152,13 @@ class NumberInput extends React.Component {
step="any" step="any"
spellCheck="false" spellCheck="false"
value={rangeValue} value={rangeValue}
onInput={this.onChangeRange} aria-hidden="true"
onMouseUp={() => console.log("mouseup")} onChange={this.onChangeRange}
onPointerDown={() => { onKeyDown={() => {
this._cancelNextChangeEvent = false; this._keyboardEvent = true;
}} }}
onBlur={() => { onBlur={() => {
console.log("onBlur[%s]", this.state.uuid);
this.setState({editing: false}); 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 <input
@ -165,10 +167,11 @@ class NumberInput extends React.Component {
spellCheck="false" spellCheck="false"
className="maputnik-number" className="maputnik-number"
placeholder={this.props.default} placeholder={this.props.default}
value={this.state.dirtyValue === undefined ? "" : this.state.dirtyValue} value={this.state.value === undefined ? "" : this.state.value}
onChange={e => { onChange={e => {
console.log("input.text->onChange[%s]", this.state.uuid, e.target.value); if (!this.state.editing) {
this.changeValue(e.target.value) this.changeValue(e.target.value);
}
}} }}
onBlur={this.resetValue} onBlur={this.resetValue}
/> />