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>
    )
  }
}

import React, {PropTypes} from 'react'

export default class MyCustomLatLonInput extends React.Component {

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

  static defaultProps = {
    onChange() {},
    value: {}
  };

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

  constructor(props, context) {
    super(props, context)
    this.handleLatChange = this.handleLatChange.bind(this)
    this.handleLonChange = this.handleLonChange.bind(this)
  }

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

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

  handleFieldChange(fieldName, fieldValue) {
    const {value, onChange} = this.props
    const nextValue = Object.assign({}, value, {
      [fieldName]: fieldValue.trim() ? Number(fieldValue) : void 0
    })
    onChange({patch: {$set: nextValue}})
  }

  render() {
    const {value} = this.props
    return (
      <div>
        lat: <input type="number" value={value.lat || ''} onChange={this.handleLatChange} />
        lon: <input type="number" value={value.lon || ''} onChange={this.handleLonChange} />
      </div>
    )
  }
}

Simplify custom lat lon input