import React, {PropTypes} from 'react'
import ObjectContainer from '../../../src/state/ObjectContainer'
import Field from '../../../src/Field'
import Fieldset from '../../../src/Fieldset'


export default class MyCustomLatLonInput extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.handleLatChange = this.handleLatChange.bind(this)
    this.handleLonChange = this.handleLonChange.bind(this)
  }

  static valueContainer = ObjectContainer;

  static propTypes = {
    value: PropTypes.object,
    onChange: PropTypes.func
  };

  static defaultProps = {
    onChange() {}
  };

  static contextTypes = {
    resolveInputComponent: PropTypes.func,
    schema: PropTypes.object
  };

  handleLatChange(event) {
    this.handleFieldChange('lat', event.target.value)
  }

  handleLonChange(event) {
    this.handleFieldChange('lon', event.target.value)
  }

  handleFieldChange(fieldName, value) {
    this.props.onChange({
      patch: {
        [fieldName]: {$set: value}
      }
    })
  }

  render() {
    const {value} = this.props
    return (
      <Fieldset title="Langitude and Latitude">
        <Field label="Latitude" role="inFieldset">
          <input type="number" value={value && value.getFieldValue('lat')} onChange={this.handleLatChange} />
        </Field>
        <Field label="Longitude" role="inFieldset">
          <input type="number" value={value && value.getFieldValue('lon')} onChange={this.handleLonChange} />
        </Field>
      </Fieldset>
    )
  }
}

@@ -36,449 +36,75 @@
 ct'%0A
-import ObjectContainer from '../../../src/state/ObjectContainer'%0Aimport Field from '../../../src/Field'%0Aimport Fieldset from '../../../src/Fieldset'%0A%0A%0Aexport default class MyCustomLatLonInput extends React.Component %7B%0A  constructor(props, context) %7B%0A    super(props, context)%0A    this.handleLatChange = this.handleLatChange.bind(this)%0A    this.handleLonChange = this.handleLonChange.bind(this)%0A  %7D%0A%0A  static valueContainer = ObjectContainer;
+%0Aexport default class MyCustomLatLonInput extends React.Component %7B
 %0A%0A  
@@ -228,16 +228,31 @@
 Change()
+ %7B%7D,%0A    value:
  %7B%7D%0A  %7D;
@@ -357,16 +357,197 @@
 t%0A  %7D;%0A%0A
+  constructor(props, context) %7B%0A    super(props, context)%0A    this.handleLatChange = this.handleLatChange.bind(this)%0A    this.handleLonChange = this.handleLonChange.bind(this)%0A  %7D%0A%0A
   handle
@@ -741,17 +741,22 @@
 ldName, 
-v
+fieldV
 alue) %7B%0A
@@ -763,47 +763,94 @@
     
-this.props.onChange(%7B%0A      patch:
+const %7Bvalue, onChange%7D = this.props%0A    const nextValue = Object.assign(%7B%7D, value,
  %7B%0A
-  
     
@@ -868,34 +868,101 @@
 e%5D: 
-%7B$set: value%7D%0A  
+fieldValue.trim() ? Number(fieldValue) : void 0%0A
     %7D
+)
 %0A    
+onChange(%7Bpatch: %7B$set: nextValue%7D
 %7D)%0A 
@@ -1033,109 +1033,25 @@
    %3C
-Fieldset title=%22Langitude and Latitude%22%3E%0A        %3CField label=%22Latitude%22 role=%22inFieldset%22%3E%0A         
+div%3E%0A        lat:
  %3Cin
@@ -1084,38 +1084,18 @@
 alue
- && value.getFieldValue('lat')
+.lat %7C%7C ''
 %7D on
@@ -1139,78 +1139,12 @@
     
-%3C/Field%3E%0A        %3CField label=%22Longitude%22 role=%22inFieldset%22%3E%0A         
+lon:
  %3Cin
@@ -1177,38 +1177,18 @@
 alue
- && value.getFieldValue('lon')
+.lon %7C%7C ''
 %7D on
@@ -1230,35 +1230,13 @@
     
-  %3C/Field%3E%0A      %3C/Fieldset
+%3C/div
 %3E%0A  

Simplify custom lat lon input