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

Added another fix attempt and yet more logging.

Browse source
This commit is contained in:
orangemug 2019-10-27 15:56:22 +00:00
parent 5aa0b4e7d9
commit 88841b56e7
1 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,8 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
let IDX = 0;
class NumberInput extends React.Component { class NumberInput extends React.Component {
static propTypes = { static propTypes = {
value: PropTypes.number, value: PropTypes.number,
@ -21,6 +23,7 @@ class NumberInput extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
uuid: IDX++,
editing: false, editing: false,
value: props.value, value: props.value,
dirtyValue: props.value, dirtyValue: props.value,
@ -29,6 +32,7 @@ class NumberInput extends React.Component {
static getDerivedStateFromProps(props, state) { static getDerivedStateFromProps(props, state) {
if (!state.editing) { if (!state.editing) {
console.log("getDerivedStateFromProps[%s]", state.uuid, props.value);
return { return {
value: props.value, value: props.value,
dirtyValue: props.value, dirtyValue: props.value,
@ -38,13 +42,14 @@ class NumberInput extends React.Component {
} }
changeValue(newValue) { changeValue(newValue) {
this.setState({editing: true});
const value = (newValue === "" || newValue === undefined) ? const value = (newValue === "" || newValue === undefined) ?
undefined : undefined :
parseFloat(newValue); parseFloat(newValue);
const hasChanged = this.state.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({
@ -92,9 +97,9 @@ class NumberInput extends React.Component {
} }
onChangeRange = (e) => { onChangeRange = (e) => {
console.log(">> onChangeRange"); console.log("onChangeRange[%s]", this.state.uuid);
if (this._cancelNextChangeEvent) { if (this._cancelNextChangeEvent) {
console.log("onChangeRange:cancel"); console.log("onChangeRange[%s]:cancel", this.state.uuid);
this._cancelNextChangeEvent = false; this._cancelNextChangeEvent = false;
return; return;
} }
@ -126,6 +131,7 @@ 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,16 +148,14 @@ class NumberInput extends React.Component {
onPointerDown={() => { onPointerDown={() => {
this._cancelNextChangeEvent = false; this._cancelNextChangeEvent = false;
}} }}
onBlur={() => {
console.log("onBlur[%s]", this.state.uuid);
this.changeValue(this.state.dirtyValue);
}}
onPointerUp={() => { onPointerUp={() => {
console.log("onPointerUp[%s]", this.state.uuid);
this._cancelNextChangeEvent = true; this._cancelNextChangeEvent = true;
console.log(">> onPointerUp"); this.changeValue(this.state.dirtyValue);
const {dirtyValue} = this.state;
const hasChanged = this.state.props !== dirtyValue
if(this.isValid(dirtyValue) && hasChanged) {
this.setState({editing: false}, () => {
this.props.onChange(dirtyValue);
});
}
}} }}
/> />
<input <input