Using the new interface for all form fields components.

components/form/Form.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import Autocomplete from '../autocomplete';
 import Button from '../button';
 import Checkbox from '../checkbox';

spec/components/form.jsx

@@ -1,39 +1,70 @@
 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 = {
-    attributes: [
-      { ref: 'name', label: 'Your Name', required: true, storage: true},
-      { ref: 'description', multiline: true, label: 'Description', value: 'Doer'},
-      { ref: 'birthdate', type: 'date', label: 'Birthdate'},
-      { ref: 'years', type: 'number', label: 'Years'},
-      { ref: 'twitter', label: 'Nickname', disabled: true},
-      { ref: 'nomad', type: 'checkbox', label: 'Are you a nomad?', value: true},
-      { ref: 'cow', type: 'checkbox', label: 'Are you a cow?', value: false},
-      { ref: 'girl', type: 'checkbox', label: 'Are you a girl?', value: false, disabled: true},
-      { ref: 'nomad_2', type: 'radio', label: 'Are you a nomad_2?', value: true},
-      { ref: 'cow_2', type: 'radio', label: 'Are you a cow_2?', value: false},
-      { ref: 'girl_2', type: 'radio', label: 'Are you a girl_2?', value: false, disabled: true},
-      { ref: 'type_user', type: 'dropdown', label: 'Type of user', dataSource: [{value: 1, label: 'Normal'}, {value: 2, label: 'Root'}]},
-      { type: 'submit', label: 'Send', style: 'primary anchor', disabled: true}
-    ]
+    model: {
+      autocomplete: countriesArray[3],
+      input: 'soyjavi',
+      multiline: 'Overwritten',
+      number: 0,
+      checkbox: true
+    }
   };
 
   handleEvent = (type, event, form) => {
-    console.log(`[FORM.${type}]`, form.getValue());
+    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>
-        <h2>Form</h2>
+        <h5>Form</h5>
         <p>lorem ipsum...</p>
 
         <Form
-          attributes={this.state.attributes}
-          storage="example-form"
-          onChange={this.handleEvent.bind(this, 'change')}
+          model={FormFields}
+          onChange={this.handleChange}
           onError={this.handleEvent.bind(this, 'error')}
           onValid={this.handleEvent.bind(this, 'valid')}
           onSubmit={this.handleEvent.bind(this, 'submit')} />

spec/root.jsx

@@ -10,6 +10,7 @@ import Checkbox from './components/checkbox';
 import Dialog from './components/dialog';
 import Drawer from './components/drawer';
 import Dropdown from './components/dropdown';
+import Form from './components/form';
 import IconMenu from './components/icon_menu';
 import Input from './components/input';
 import List from './components/list';
@@ -49,6 +50,7 @@ const Root = () => (
     <Dialog />
     <Drawer />
     <Dropdown />
+    <Form />
     <IconMenu />
     <Input />
     <List />