From 9de67a44bf375ab8027bd9d9f121355f73b8d14b Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 11:26:33 +0700
Subject: [PATCH] First version of stateless form

---
 components/form/Form.jsx | 150 ++++++++-------------------------------
 1 file changed, 31 insertions(+), 119 deletions(-)

diff --git a/components/form/Form.jsx b/components/form/Form.jsx
index 532a2e2c..afcb528a 100644
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './style';
+import ReactDOM from 'react-dom';
 import Autocomplete from '../autocomplete';
 import Button from '../button';
 import Checkbox from '../checkbox';
@@ -10,12 +10,27 @@ import RadioGroup from '../radio/RadioGroup';
 import Slider from '../slider';
 import Switch from '../switch';
 import TimePicker from '../time_picker';
+import style from './style';
+
+const Component = {
+  'autocomplete': Autocomplete,
+  'button': Button,
+  'checkbox': Checkbox,
+  'datepicker': DatePicker,
+  'dropdown': Dropdown,
+  'input': Input,
+  'radioGroup': RadioGroup,
+  'slider': Slider,
+  'switch': Switch,
+  'timepicker': TimePicker
+};
 
 class Form extends React.Component {
   static propTypes = {
     attributes: React.PropTypes.array,
     children: React.PropTypes.node,
     className: React.PropTypes.string,
+    model: React.PropTypes.object,
     onChange: React.PropTypes.func,
     onError: React.PropTypes.func,
     onSubmit: React.PropTypes.func,
@@ -28,135 +43,32 @@ class Form extends React.Component {
     className: ''
   };
 
-  state = {
-    attributes: this.storage(this.props)
-  };
-
-  componentWillReceiveProps (next_props) {
-    if (next_props.attributes) {
-      const attributes = this.storage(next_props);
-      this.setState({attributes});
-      this.setValue(attributes.map((item) => { return item; }));
-    }
-  }
-
   onSubmit = (event) => {
     event.preventDefault();
-    if (this.props.onSubmit) {
-      this.props.onSubmit(event, this);
+    if (this.props.onSubmit) this.props.onSubmit(event);
+  };
+
+  onChange = (field, event) => {
+    if (this.props.onChange) {
+      const value = event.target.value;
+      this.props.onChange(field, value, event);
     }
   };
 
-  onChange = (event) => {
-    let is_valid = true;
-    const value = this.getValue();
-    for (const attr of this.state.attributes) {
-      if (attr.required && value[attr.ref] !== undefined && value[attr.ref].trim() === '') {
-        is_valid = false;
-        if (this.refs[attr.ref].setError) this.refs[attr.ref].setError('Requited field');
-        break;
-      }
-    }
-
-    if (this.props.onChange) this.props.onChange(event, this);
-    if (this.props.storage) this.storage(this.props, value);
-
-    if (is_valid) {
-      if (this.refs.submit) this.refs.submit.getDOMNode().removeAttribute('disabled');
-      if (this.props.onValid) this.props.onValid(event, this);
-    } else {
-      if (this.refs.submit) this.refs.submit.getDOMNode().setAttribute('disabled', true);
-      if (this.props.onError) this.props.onError(event, this);
-    }
-  };
-
-  storage (props, value) {
-    const key = `react-toolbox-form-${props.storage}`;
-    if (value) {
-      const store = {};
-      for (const attr of props.attributes) {
-        if (attr.storage) store[attr.ref] = value[attr.ref];
-      }
-      window.localStorage.setItem(key, JSON.stringify(store));
-    } else if (props.storage) {
-      const store = JSON.parse(window.localStorage.getItem(key) || {});
-      for (const input of props.attributes) {
-        if (store && store[input.ref]) {
-          input.value = store[input.ref];
-        }
-      }
-    }
-
-    return props.attributes;
-  }
-
-  getValue () {
-    const value = {};
-    for (const ref of Object.keys(this.refs)) {
-      const el = this.refs[ref];
-      if (el.getValue) {
-        if (ref.indexOf('.') === -1) {
-          value[ref] = el.getValue();
-        } else {
-          let parent = value;
-          const hierarchy = ref.split('.');
-          hierarchy.forEach((attr, index) => {
-            if (index === hierarchy.length - 1) {
-              parent[attr] = el.getValue();
-            } else {
-              parent[attr] = parent[attr] || {};
-              parent = parent[attr];
-            }
-          });
-        }
-      }
-    }
-
-    return value;
-  }
-
-  setValue (data = {}) {
-    for (const field of data) {
-      if (this.refs[field.ref].setValue) {
-        this.refs[field.ref].setValue(field.value);
-      }
-    }
+  renderFields () {
+    return Object.keys(this.props.model).map((field, index) => {
+      const properties = this.props.model[field];
+      const Field = Component[properties.kind.toLowerCase()];
+      return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />
+    });
   }
 
   render () {
     const className = `${style.root} ${this.props.className}`;
-    const attributes = this.state.attributes.map((attribute, index) => {
-      if (attribute.type === 'autocomplete') {
-        return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'submit') {
-        return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
-      } else if (attribute.type === 'checkbox') {
-        return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'date_picker') {
-        return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'dropdown') {
-        return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'radio_group') {
-        return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'slider') {
-        return <Slider key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'switch') {
-        return <Switch key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'time_picker') {
-        return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else {
-        return <Input key={index} {...attribute} />;
-      }
-    });
 
     return (
-      <form
-        data-react-toolbox='form'
-        className={className}
-        onChange={this.onChange}
-        onSubmit={this.onSubmit}
-      >
-        {attributes}
+      <form data-react-toolbox='form' className={className} onSubmit={this.onSubmit}>
+        {this.renderFields()}
         {this.props.children}
       </form>
     );