Added back in 'light position' and 'center' with fixes for <ArrayInput/>

This also improves the usage of *-translate which uses the <ArrayInput/>

src/components/fields/PropertyGroup.jsx

@@ -59,7 +59,7 @@ export default class PropertyGroup extends React.Component {
         onChange={this.onPropertyChange}
         key={fieldName}
         fieldName={fieldName}
-        value={fieldValue === undefined ? fieldSpec.default : fieldValue}
+        value={fieldValue}
         fieldSpec={fieldSpec}
       />
     })

src/components/inputs/ArrayInput.jsx

@@ -17,27 +17,84 @@ class ArrayInput extends React.Component {
     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) {
-    console.log(idx, newValue)
-    const values = this.props.value.slice(0)
-    values[idx] = newValue
-    this.props.onChange(values)
+    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 {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}
-          default={this.props.default[i]}
-          value={this.props.value[i]}
+          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}
-          default={this.props.default[i]}
-          value={this.props.value[i]}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
         />
       }

src/components/inputs/NumberInput.jsx

@@ -83,9 +83,10 @@ class NumberInput extends React.Component {
       spellCheck="false"
       className="maputnik-number"
       placeholder={this.props.default}
-      value={this.state.value || ""}
+      value={this.state.value === undefined ? "" : this.state.value}
       onChange={e => this.changeValue(e.target.value)}
       onBlur={this.resetValue}
+      required={this.props.required}
     />
   }
 }

src/components/inputs/StringInput.jsx

@@ -50,7 +50,7 @@ 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({
@@ -63,7 +63,8 @@ class StringInput extends React.Component {
           this.setState({editing: false});
           this.props.onChange(this.state.value);
         }
-      }
+      },
+      required: this.props.required,
     });
   }
 }

src/components/modals/SettingsModal.jsx

@@ -139,6 +139,16 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
+      <InputBlock label={"Center"} doc={latest.$root.center.doc}>
+        <ArrayInput
+          length={2}
+          type="number"
+          value={mapStyle.center}
+          default={latest.$root.center.default || [0, 0]}
+          onChange={this.changeStyleProperty.bind(this, "center")}
+        />
+      </InputBlock>
+
       <InputBlock label={"Zoom"} doc={latest.$root.zoom.doc}>
         <NumberInput
           {...inputProps}
@@ -194,6 +204,17 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
+      <InputBlock label={"Light position"} doc={latest.light.position.doc}>
+        <ArrayInput
+          {...inputProps}
+          type="number"
+          length={latest.light.position.length}
+          value={light.position}
+          default={latest.light.position.default}
+          onChange={this.changeLightProperty.bind(this, "position")}
+        />
+      </InputBlock>
+
       <InputBlock label={"Transition delay"} doc={latest.transition.delay.doc}>
         <NumberInput
           {...inputProps}