Merge remote-tracking branch 'upstream/master' into fix/issue-567-better-solution-for-tooltips

src/components/inputs/ArrayInput.jsx

@@ -12,29 +12,89 @@ class ArrayInput extends React.Component {
     onChange: PropTypes.func,
   }
 
-  changeValue(idx, newValue) {
-    console.log(idx, newValue)
-    const values = this.values.slice(0)
-    values[idx] = newValue
-    this.props.onChange(values)
+  static defaultProps = {
+    value: [],
+    default: [],
   }
 
-  get values() {
-    return this.props.value || this.props.default || []
+  constructor (props) {
+    super(props);
+    this.state = {
+      value: this.props.value.slice(0),
+      // This is so we can compare changes in getDerivedStateFromProps
+      initialPropsValue: this.props.value.slice(0),
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const value = [];
+    const initialPropsValue = state.initialPropsValue.slice(0);
+
+    Array(props.length).fill(null).map((_, i) => {
+      if (props.value[i] === state.initialPropsValue[i]) {
+        value[i] = state.value[i];
+      }
+      else {
+        value[i] = state.value[i];
+        initialPropsValue[i] = state.value[i];
+      }
+    })
+
+    return {
+      value,
+      initialPropsValue,
+    };
+  }
+
+  isComplete (value) {
+    return Array(this.props.length).fill(null).every((_, i) => {
+      const val = value[i]
+      return !(val === undefined || val === "");
+    });
+  }
+
+  changeValue(idx, newValue) {
+    const value = this.state.value.slice(0);
+    value[idx] = newValue;
+
+    this.setState({
+      value,
+    }, () => {
+      if (this.isComplete(value)) {
+        this.props.onChange(value);
+      }
+      else {
+        // Unset until complete
+        this.props.onChange(undefined);
+      }
+    });
   }
 
   render() {
-    const inputs = this.values.map((v, i) => {
+    const {value} = this.state;
+
+    const containsValues = (
+      value.length > 0 &&
+      !value.every(val => {
+        return (val === "" || val === undefined)
+      })
+    );
+
+    const inputs = Array(this.props.length).fill(null).map((_, i) => {
       if(this.props.type === 'number') {
         return <NumberInput
           key={i}
-          value={v}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
         />
       } else {
         return <StringInput
           key={i}
-          value={v}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
         />
       }

src/components/inputs/EnumInput.jsx

@@ -29,17 +29,17 @@ class EnumInput extends React.Component {
     if(options.length <= 3 && optionsLabelLength(options) <= 20) {
       return <MultiButtonInput
         options={options}
-        value={value}
+        value={value || this.props.default}
         onChange={onChange}
       />
     } else {
       return <SelectInput
         options={options}
-        value={value}
+        value={value || this.props.default}
         onChange={onChange}
       />
     }
   }
 }
 
-export default StringInput
+export default EnumInput

src/components/inputs/NumberInput.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+let IDX = 0;
+
 class NumberInput extends React.Component {
   static propTypes = {
     value: PropTypes.number,
@@ -8,36 +10,52 @@ class NumberInput extends React.Component {
     min: PropTypes.number,
     max: PropTypes.number,
     onChange: PropTypes.func,
+    allowRange: PropTypes.bool,
+    rangeStep: PropTypes.number,
+    wdKey: PropTypes.string,
+    required: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    rangeStep: 1
   }
 
   constructor(props) {
     super(props)
     this.state = {
+      uuid: IDX++,
       editing: false,
       value: props.value,
+      dirtyValue: props.value,
     }
   }
 
   static getDerivedStateFromProps(props, state) {
     if (!state.editing) {
       return {
-        value: props.value
+        value: props.value,
+        dirtyValue: props.value,
       };
     }
-    return {};
+    return null;
   }
 
   changeValue(newValue) {
-    this.setState({editing: true});
     const value = (newValue === "" || newValue === undefined) ?
       undefined :
       parseFloat(newValue);
 
-    const hasChanged = this.state.value !== value
+    const hasChanged = this.props.value !== value;
     if(this.isValid(value) && hasChanged) {
       this.props.onChange(value)
+      this.setState({
+        dirtyValue: newValue,
+      });
     }
-    this.setState({ value: newValue })
+
+    this.setState({
+      value: newValue,
+    })
   }
 
   isValid(v) {
@@ -65,7 +83,7 @@ class NumberInput extends React.Component {
     this.setState({editing: false});
     // Reset explicitly to default value if value has been cleared
     if(this.state.value === "") {
-      return this.changeValue(this.props.default)
+      return;
     }
 
     // If set value is invalid fall back to the last valid value from props or at last resort the default value
@@ -73,20 +91,117 @@ class NumberInput extends React.Component {
       if(this.isValid(this.props.value)) {
         this.changeValue(this.props.value)
       } else {
-        this.changeValue(this.props.default)
+        this.changeValue(undefined);
       }
     }
   }
 
+  onChangeRange = (e) => {
+    let value = parseFloat(e.target.value, 10);
+    const step = this.props.rangeStep;
+    let dirtyValue = value;
+
+    if(step) {
+      // Can't do this with the <input/> range step attribute else we won't be able to set a high precision value via the text input.
+      const snap = value % step;
+
+      // Round up/down to step
+      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.dirtyValue) {
+          value = this.state.value - step;
+        }
+        else {
+          value = this.state.value + step
+        }
+        dirtyValue = value;
+      }
+      else {
+        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({value, dirtyValue});
+    this.props.onChange(value);
+  }
+
   render() {
-    return <input
-      spellCheck="false"
-      className="maputnik-number"
-      placeholder={this.props.default}
-      value={this.state.value || ""}
-      onChange={e => this.changeValue(e.target.value)}
-      onBlur={this.resetValue}
-    />
+    if(
+      this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
+      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;
+
+      return <div className="maputnik-number-container">
+        <input
+          className="maputnik-number-range"
+          key="range"
+          type="range"
+          max={this.props.max}
+          min={this.props.min}
+          step="any"
+          spellCheck="false"
+          value={dirtyValue}
+          aria-hidden="true"
+          onChange={this.onChangeRange}
+          onKeyDown={() => {
+            this._keyboardEvent = true;
+          }}
+          onPointerDown={() => {
+            this.setState({editing: true});
+          }}
+          onPointerUp={() => {
+            // Safari doesn't get onBlur event
+            this.setState({editing: false});
+          }}
+          onBlur={() => {
+            this.setState({editing: false});
+          }}
+        />
+        <input
+          key="text"
+          type="text"
+          spellCheck="false"
+          className="maputnik-number"
+          placeholder={this.props.default}
+          value={value}
+          onChange={e => {
+            if (!this.state.editing) {
+              this.changeValue(e.target.value);
+            }
+          }}
+          onBlur={this.resetValue}
+        />
+      </div>
+    }
+    else {
+      const value = this.state.value === undefined ? "" : this.state.value;
+
+      return <input
+        spellCheck="false"
+        className="maputnik-number"
+        placeholder={this.props.default}
+        value={value}
+        onChange={e => this.changeValue(e.target.value)}
+        onBlur={this.resetValue}
+        required={this.props.required}
+      />
+    }
   }
 }
 

src/components/inputs/StringInput.jsx

@@ -8,7 +8,13 @@ class StringInput extends React.Component {
     style: PropTypes.object,
     default: PropTypes.string,
     onChange: PropTypes.func,
+    onInput: PropTypes.func,
     multi: PropTypes.bool,
+    required: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    onInput: () => {},
   }
 
   constructor(props) {
@@ -50,20 +56,23 @@ class StringInput extends React.Component {
       spellCheck: !(tag === "input"),
       className: classes.join(" "),
       style: this.props.style,
-      value: this.state.value,
+      value: this.state.value === undefined ? "" : this.state.value,
       placeholder: this.props.default,
       onChange: e => {
         this.setState({
           editing: true,
           value: e.target.value
-        })
+        }, () => {
+          this.props.onInput(this.state.value);
+        });
       },
       onBlur: () => {
         if(this.state.value!==this.props.value) {
           this.setState({editing: false});
           this.props.onChange(this.state.value);
         }
-      }
+      },
+      required: this.props.required,
     });
   }
 }

src/components/inputs/UrlInput.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import StringInput from './StringInput'
+import SmallError from '../util/SmallError'
+
+
+function validate (url) {
+  let error;
+  const getProtocol = (url) => {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.protocol;
+    }
+    catch (err) {
+      return undefined;
+    }
+  };
+  const protocol = getProtocol(url);
+  if (
+    protocol &&
+    protocol === "http:" &&
+    window.location.protocol === "https:"
+  ) {
+    error = (
+      <SmallError>
+        CORS policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
+      </SmallError>
+    );
+  }
+
+  return error;
+}
+
+class UrlInput extends React.Component {
+  static propTypes = {
+    "data-wd-key": PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    onChange: PropTypes.func,
+    onInput: PropTypes.func,
+    multi: PropTypes.bool,
+    required: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    onInput: () => {},
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      error: validate(props.value)
+    };
+  }
+
+  onInput = (url) => {
+    this.setState({
+      error: validate(url)
+    });
+    this.props.onInput(url);
+  }
+
+  render () {
+    return (
+      <div>
+        <StringInput
+          {...this.props}
+          onInput={this.onInput}
+        />
+        {this.state.error}
+      </div>
+    );
+  }
+}
+
+export default UrlInput