Release 0.11.1

Author: seeden

README.md

@@ -122,6 +122,47 @@ export default class Example extends Component {
 }
 ```
 
+## Simple arrays
+
+If you are using fieldset with simple array do not enter the name attribute.
+
+```js
+import React, { Component } from 'react';
+import Form from 'react-form-controlled';
+
+export default class Example extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      items: [123, 222]
+    };
+  }
+
+  handleChange(state) {
+    this.setState(state);
+  }
+
+  handleSubmit(state) {
+    alert(`Hi ${state.users[0].firstName}`);
+  }
+
+  render() {
+    const formData = this.state;
+
+    return (
+      <Form value={formData} onChange={this.handleChange.bind(this)} onSubmit={this.handleSubmit.bind(this)}>
+        <fieldset name="items">
+          <input type="text" />
+        </fieldset>
+
+        <button type="submit">Submit</button>
+      </Form>
+    );
+  }
+}
+```
+
 ## Complex objects
 
 If you want to use complex names you can use dot or array notation.
@@ -237,8 +278,8 @@ export default class Example extends Component {
 ## Indexes
 
 If you are using arrays with fieldset you want to use indexes.
-Index component has one parameter named value.
-It is an function and it is optional. You can format your index value with it.
+Index component has one parameter named format.
+It is a function and it is optional. You can format your index value with it.
 Default behavior is: 1. 2. 3. etc...
 
 ```js
@@ -273,7 +314,7 @@ export default class Component extends Component {
       <Form value={formData} onChange={this.handleChange.bind(this)} onSubmit={this.handleSubmit.bind(this)}>
         <fieldset name="users">
           <label>
-            <Index value={(index) => `${index})`} />
+            <Index format={(index) => `${index})`} />
             <input type="text" name="firstName" placeholder="First name" />
           </label>
         </fieldset>
@@ -285,6 +326,60 @@ export default class Component extends Component {
 }
 ```
 
+## Combination with other components
+
+If you want to disable autoreplace of the standard components like an input, select, textarea etc...
+You can disable this behavior with the form parameter replace={false}.
+This feature is great if you want to use this library with other 3rd libraries.
+You will be able to use Input, Select, Textarea and Fieldset.
+
+```js
+import Form, { Input, Select, Textarea, Fieldset } from from 'react-form-controlled';
+
+export default class Component extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      users: [{
+        firstName: 'Zlatko',
+      }, {
+        firstName: 'Livia',
+      }]
+    };
+  }
+
+  handleChange(state) {
+    this.setState(state);
+  }
+
+  handleSubmit(state) {
+    alert(`Hi ${state.users[0].firstName}`);
+  }
+
+  render() {
+    const formData = this.state;
+
+    return (
+      <Form
+        value={formData}
+        replace={false}
+        onChange={this.handleChange.bind(this)}
+        onSubmit={this.handleSubmit.bind(this)}>
+        <Fieldset name="users">
+          <label>
+            <Index format={(index) => `${index})`} />
+            <Input type="text" name="firstName" placeholder="First name" />
+          </label>
+        </Fieldset>
+
+        <button type="submit">Submit</button>
+      </Form>
+    );
+  }
+}
+```
+
 # Support for schemas and validation?
 
 Yes, you can use JSON schema as property to the form. Why JSON schema? Because it is a standard.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-controlled",
-  "version": "0.10.5",
+  "version": "0.11.1",
   "description": "React controlled form components. The main idea is to make forms as simple as possible.",
   "author": {
     "name": "Zlatko Fedor",

src/Element.jsx

@@ -7,10 +7,15 @@ export default class Element extends Component {
     name: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number,
-    ]).isRequired,
+    ]),
     originalProps: PropTypes.object,
+    className: PropTypes.string,
   };
 
+  getPath() {
+    return this.props.path;
+  }
+
   render() {
     return null;
   }

src/Fieldset.jsx

@@ -9,10 +9,7 @@ import traverse from './utils/traverse';
 import Input from './Input';
 import Select from './Select';
 import Textarea from './Textarea';
-
-function isNumeric(value) {
-  return !isNaN(parseFloat(value)) && isFinite(value);
-}
+import Index from './Index';
 
 export default class Fieldset extends Element {
   static isElement = true;
@@ -21,30 +18,36 @@ export default class Fieldset extends Element {
     ...Element.propTypes,
     onChange: PropTypes.func,
     map: PropTypes.bool.isRequired,
+    index: PropTypes.number,
   };
 
   static defaultProps = {
     map: true,
   };
 
   getValue(name) {
-    const value = this.props.value || {};
+    const { value = {} } = this.props;
+
+    if (typeof name === 'undefined' || name === null) {
+      return value;
+    }
+
     return get(value, name);
   }
 
-  setValue(name, value) {
+  setValue(name, value, component) {
     const currentValue = this.props.value;
     const newState = isArray(currentValue)
       ? [...this.props.value]
       : {...this.props.value};
 
     set(newState, name, value);
 
-    this.props.onChange(newState);
+    this.props.onChange(newState, component);
   }
 
-  getPath(name) {
-    if (!name) {
+  buildPath(name) {
+    if (typeof name === 'undefined' || name === null) {
       return void 0;
     }
 
@@ -57,44 +60,11 @@ export default class Fieldset extends Element {
     return this.props.form.props;
   }
 
-  handleChange(evn) {
-    const target = evn.target;
-    if (!target) {
-      return;
-    }
-
-    const propertyName = target.getAttribute('data-property');
-    if (!propertyName) {
-      return;
-    }
-
-    // IE < 10 bug catcher
-    try {
-      evn.stopPropagation();
-    } catch (err) {
-      console.log(err.message);
-    }
-
-    let value = target.type === 'checkbox'
-      ? !!target.checked
-      : target.value;
-
-    if (target.type === 'number' && isNumeric(value)) {
-      // fix decimal numbers
-      const numberValue = Number(value);
-      if (numberValue.toString() === value) {
-        value = numberValue;
-      }
-    }
-
-    this.setValue(propertyName, value);
-  }
-
   _registerChildren(children, topLevel) {
     const { value, map } = this.props;
 
     if (topLevel && map && isArray(value)) {
-      return value.map((value, index) => {
+      return value.map((currentValue, index) => {
         return this._registerChildren((
           <Fieldset name={index} key={index} index={index}>
             {children}
@@ -108,24 +78,17 @@ export default class Fieldset extends Element {
         return void 0;
       }
 
-      if (!child.props.name && child.props.name !== 0) {
-        return cloneElement(child, {
-          originalProps: child.props,
-          form: this.props.form || this,
-          fieldset: this,
-        });
-      }
-
       const currentValue = this.getValue(child.props.name);
+      const currentPath = this.buildPath(child.props.name);
 
       return cloneElement(child, {
         originalProps: child.props,
         value: typeof child.props.value !== 'undefined' ? child.props.value : currentValue,
         currentValue,
         form: this.props.form || this,
         fieldset: this,
-        path: this.getPath(child.props.name),
-        onChange: (value) => this.setValue(child.props.name, value),
+        path: currentPath,
+        onChange: (value, component) => this.setValue(child.props.name, value, component),
       });
     }, (child) => {
       const { replace } = this.getFormProps();
@@ -149,7 +112,7 @@ export default class Fieldset extends Element {
     const children = this._registerChildren(this.props.children, true);
 
     return (
-      <fieldset onChange={this.handleChange.bind(this)} name={this.props.name}>
+      <fieldset name={this.props.name}>
         {children}
       </fieldset>
     );

src/FieldsetIndex.jsx

@@ -6,17 +6,19 @@ export default class FieldsetIndex extends Element {
 
   static propTypes = {
     ...Element.propTypes,
-    name: PropTypes.string,
+    format: PropTypes.func,
   };
 
+  static omg = 123;
+
   render() {
-    const { fieldset, value, className } = this.props;
+    const { format, className, fieldset } = this.props;
     const index = fieldset.props.index;
 
-    if (typeof value === 'function') {
-      return <span className={className}>{value(index)}</span>;
+    if (typeof format === 'function') {
+      return <span className={className}>{format(index)}</span>;
     }
 
-    return <span className={className}>{value ? value : `${index + 1}.`}</span>;
+    return <span className={className}>{`${index + 1}.`}</span>;
   }
 }

src/Form.jsx

@@ -39,6 +39,9 @@ export default class Form extends Fieldset {
 
     const ajv = Ajv(props.ajvOptions);
     this.validateData = ajv.compile(props.schema || {});
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
   }
 
   getFormProps() {
@@ -130,8 +133,6 @@ export default class Form extends Fieldset {
 
   handleChange(evn) {
     this.errors = [];
-
-    super.handleChange(evn);
   }
 
   render() {
@@ -146,8 +147,8 @@ export default class Form extends Fieldset {
         method={this.props.method}
         action={this.props.action}
         className={this.props.className || 'form'}
-        onSubmit={this.handleSubmit.bind(this)}
-        onChange={this.handleChange.bind(this)}>
+        onSubmit={this.handleSubmit}
+        onChange={this.handleChange}>
         {children}
       </form>
     );