Inject dependencies for Form component

components/form/Form.js

@@ -1,71 +1,86 @@
 import React, { Component, PropTypes } from 'react';
-import Autocomplete from '../autocomplete';
-import Button from '../button';
-import Checkbox from '../checkbox';
-import DatePicker from '../date_picker';
-import Dropdown from '../dropdown';
-import Input from '../input';
-import RadioGroup from '../radio/RadioGroup';
-import Slider from '../slider';
-import Switch from '../switch';
-import TimePicker from '../time_picker';
+import InjectAutocomplete from '../autocomplete/Autocomplete.js';
+import InjectButton from '../button/Button.js';
+import InjectCheckbox from '../checkbox/Checkbox.js';
+import InjectDatePicker from '../date_picker/DatePicker.js';
+import InjectDropdown from '../dropdown/Dropdown.js';
+import InjectInput from '../input/Input.js';
+import InjectRadioGroup from '../radio/RadioGroup.js';
+import InjectSlider from '../slider/Slider.js';
+import InjectSwitch from '../switch/Switch.js';
+import InjectTimePicker from '../time_picker/TimePicker.js';
 
-const COMPONENTS = {
-  'autocomplete': Autocomplete,
-  'button': Button,
-  'checkbox': Checkbox,
-  'datepicker': DatePicker,
-  'dropdown': Dropdown,
-  'input': Input,
-  'radioGroup': RadioGroup,
-  'slider': Slider,
-  'switch': Switch,
-  'timepicker': TimePicker
+const factory = (
+    Autocomplete, Button, Checkbox, DatePicker, Dropdown,
+    Input, RadioGroup, Slider, Switch, TimePicker
+  ) => {
+
+  const COMPONENTS = {
+    'autocomplete': Autocomplete,
+    'button': Button,
+    'checkbox': Checkbox,
+    'datepicker': DatePicker,
+    'dropdown': Dropdown,
+    'input': Input,
+    'radioGroup': RadioGroup,
+    'slider': Slider,
+    'switch': Switch,
+    'timepicker': TimePicker
+  };
+
+  class Form extends Component {
+    static propTypes = {
+      attributes: PropTypes.array,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      model: PropTypes.object,
+      onChange: PropTypes.func,
+      onError: PropTypes.func,
+      onSubmit: PropTypes.func,
+      onValid: PropTypes.func,
+      storage: PropTypes.string
+    };
+
+    static defaultProps = {
+      attributes: [],
+      className: ''
+    };
+
+    onSubmit = (event) => {
+      event.preventDefault();
+      if (this.props.onSubmit) this.props.onSubmit(event);
+    };
+
+    onChange = (field, value, event) => {
+      if (this.props.onChange) this.props.onChange(field, value, event);
+    };
+
+    renderFields () {
+      return Object.keys(this.props.model).map((field, index) => {
+        const properties = this.props.model[field];
+        const Field = COMPONENTS[properties.kind.toLowerCase()];
+        return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />;
+      });
+    }
+
+    render () {
+      return (
+        <form data-react-toolbox='form' className={this.props.className} onSubmit={this.onSubmit}>
+          {this.renderFields()}
+          {this.props.children}
+        </form>
+      );
+    }
+  }
+
+  return Form;
 };
 
-class Form extends Component {
-  static propTypes = {
-    attributes: PropTypes.array,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    model: PropTypes.object,
-    onChange: PropTypes.func,
-    onError: PropTypes.func,
-    onSubmit: PropTypes.func,
-    onValid: PropTypes.func,
-    storage: PropTypes.string
-  };
-
-  static defaultProps = {
-    attributes: [],
-    className: ''
-  };
-
-  onSubmit = (event) => {
-    event.preventDefault();
-    if (this.props.onSubmit) this.props.onSubmit(event);
-  };
-
-  onChange = (field, value, event) => {
-    if (this.props.onChange) this.props.onChange(field, value, event);
-  };
-
-  renderFields () {
-    return Object.keys(this.props.model).map((field, index) => {
-      const properties = this.props.model[field];
-      const Field = COMPONENTS[properties.kind.toLowerCase()];
-      return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />;
-    });
-  }
-
-  render () {
-    return (
-      <form data-react-toolbox='form' className={this.props.className} onSubmit={this.onSubmit}>
-        {this.renderFields()}
-        {this.props.children}
-      </form>
-    );
-  }
-}
+const Form = factory(
+  InjectAutocomplete, InjectButton, InjectCheckbox, InjectDatePicker, InjectDropdown,
+  InjectInput, InjectRadioGroup, InjectSlider, InjectSwitch, InjectTimePicker
+);
 
 export default Form;
+export { factory as formFactory };
+export { Form };

components/form/index.js

@@ -1 +1,19 @@
-export default from './Form';
+import { formFactory } from './Form.js';
+import Autocomplete from '../autocomplete';
+import Button from '../button';
+import Checkbox from '../checkbox';
+import DatePicker from '../date_picker';
+import Dropdown from '../dropdown';
+import Input from '../input';
+import RadioGroup from '../radio';
+import Slider from '../slider';
+import Switch from '../switch';
+import TimePicker from '../time_picker';
+
+const ThemedForm = formFactory(
+  Autocomplete, Button, Checkbox, DatePicker, Dropdown,
+  Input, RadioGroup, Slider, Switch, TimePicker
+);
+
+export default ThemedForm;
+export { ThemedForm as Form };

components/form/readme.md

@@ -22,19 +22,3 @@ var fields : [
 | **onSubmit**      | Function      |                 | Dispatch callback when user clicks on submit <Button/> |
 | **onValid**       | Function      |                 | Dispatch callback when all required fields are full-filled.|
 | **Storage**       | String        |                 | Sets a localStorage key for save all current field values.|
-
-## Methods
-
-#### getValue
-Returns the value of the form.
-
-```
-form_instance.getValue();
-```
-
-#### setValue
-Sets the value of the form component.
-
-```
-form_instance.setValue(newValue);
-```