form.js

import React from 'react';
import Form from '../../components/form';

const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'France'];

const countries = [
  { value: 'EN-gb', label: 'England', img: 'http://' },
  { value: 'ES-es', label: 'Spain', img: 'http://' },
  { value: 'TH-th', label: 'Thailand', img: 'http://' },
  { value: 'EN-en', label: 'USA', img: 'http://' },
  { value: 'FR-fr', label: 'France', img: 'http://' }
];

const FormFields = {
  autocomplete: {kind: 'Autocomplete', label: 'Autocomplete', source: countriesArray, value: ''},
  input: {kind: 'Input', type: 'text', label: 'Input', value: '@soyjavi', required: true},
  multiline: {kind: 'Input', type: 'text', label: 'Input (multiline)', multiline: true},
  number: {kind: 'Input', type: 'number', label: 'Input (number)'},
  checkbox: {kind: 'Checkbox', label: 'Checkbox'},
  date: {kind: 'DatePicker', label: 'DatePicker', value: undefined},
  dropdown: {kind: 'Dropdown', label: 'Dropdown', source: countries, value: countries[2].value},
  time: {kind: 'TimePicker', label: 'TimePicker', value: undefined},
  switch: {kind: 'Switch', label: 'Switch'},
  slider: {kind: 'Slider', label: 'Slider', min: 0, max: 10, value: 4, pinned: true},
  submit: {kind: 'Button', type: 'submit', label: 'Button () you a nomad?'}
};

class FormTest extends React.Component {
  state = {
    model: {
      autocomplete: countriesArray[3],
      input: 'soyjavi',
      multiline: 'Overwritten',
      number: 0,
      checkbox: true
    }
  };

  handleEvent = (type, event, form) => {
    console.log(`[FORM.${type}]`, event, form);
  };

  handleChange = (field, value) => {
    console.log('FORM.change', field, value);
    const model = {
      ...this.state.model,
     [field]: value
    };
    this.setState({ model });
  };

  render () {
    Object.keys(this.state.model).map((field) => {
      const formField = FormFields[field];
      formField[formField.hasOwnProperty('value') ? 'value' : 'checked'] = this.state.model[field];
    });

    console.log(FormFields);

    return (
      <section>
        <h5>Form</h5>
        <p>lorem ipsum...</p>

        <Form
          model={FormFields}
          onChange={this.handleChange}
          onError={this.handleEvent.bind(this, 'error')}
          onValid={this.handleEvent.bind(this, 'valid')}
          onSubmit={this.handleEvent.bind(this, 'submit')} />
      </section>
    );
  }
}

export default FormTest;