Release 0.11.7

Author: seeden

package.json

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

src/Fieldset.jsx

@@ -4,12 +4,44 @@ import isArray from 'lodash/lang/isArray';
 import isFunction from 'lodash/lang/isFunction';
 import set from 'lodash/object/set';
 import get from 'lodash/object/get';
+import forOwn from 'lodash/object/forOwn';
 import traverse from './utils/traverse';
-
 import Input from './Input';
 import Select from './Select';
 import Textarea from './Textarea';
 
+function extendCallbacks(child, index) {
+  const props = child.props;
+
+  if (typeof index === 'undefined' || props['data-extended']) {
+    return child;
+  }
+
+  const newProps = {};
+  let extendedCount = 0;
+
+  forOwn(props, (fn, key) => {
+    if (typeof fn !== 'function' || fn._extended) {
+      return;
+    }
+
+    extendedCount++;
+
+    const newFn = (...args) => fn(...args, index);
+    newFn._extended = true;
+
+    newProps[key] = newFn;
+  });
+
+  if (extendedCount) {
+    newProps['data-extended'] = true;
+    const newChild = cloneElement(child, newProps);
+    return newChild;
+  }
+
+  return child;
+}
+
 export default class Fieldset extends Element {
   static isElement = true;
 
@@ -18,10 +50,12 @@ export default class Fieldset extends Element {
     onChange: PropTypes.func,
     map: PropTypes.bool.isRequired,
     index: PropTypes.number,
+    extend: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
     map: true,
+    extend: false,
   };
 
   getValue(name) {
@@ -60,18 +94,20 @@ export default class Fieldset extends Element {
   }
 
   _registerChildren(children, topLevel) {
-    const { value, map } = this.props;
+    const { value, map, index, extend } = this.props;
 
     if (topLevel && map && isArray(value)) {
       return value.map((currentValue, index) => {
         return this._registerChildren((
-          <Fieldset name={index} key={index} index={index}>
+          <Fieldset name={index} key={index} index={index} extend={extend}>
             {children}
           </Fieldset>
         ));
       });
     }
 
+    const hasIndex = typeof index !== 'undefined';
+
     return traverse(children, (child) => {
       if (!isFunction(child.type) || !child.type.isElement) {
         return void 0;
@@ -90,7 +126,14 @@ export default class Fieldset extends Element {
         onChange: (value, component) => this.setValue(child.props.name, value, component),
       });
     }, (child) => {
-      const { replace } = this.getFormProps();
+      const { replace, extend: formExtend } = this.getFormProps();
+      if (hasIndex && extend && formExtend) {
+        const updatedChild = extendCallbacks(child, index);
+        if (updatedChild !== child) {
+          return updatedChild;
+        }
+      }
+
       if (!replace) {
         return void 0;
       }

src/Form.jsx

@@ -20,6 +20,7 @@ export default class Form extends Fieldset {
     onError: PropTypes.func,
     ajvOptions: PropTypes.object.isRequired,
     replace: PropTypes.bool.isRequired,
+    extend: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -30,6 +31,7 @@ export default class Form extends Fieldset {
     onChange: () => {},
     onSubmit: () => {},
     replace: true,
+    extend: true,
   };
 
   constructor(props, context) {

tests/input.jsx

@@ -548,4 +548,27 @@ describe('Fieldset', () => {
     const ele = findDOMNode(node).querySelector('input');
     ele.value.should.equal('123');
   });
+
+  it('should be able to use onClick with index', (done) => {
+    const value = {
+      data: [123, 222],
+    };
+
+    function onClick(evn, id, index) {
+      index.should.equal(0);
+      done();
+    }
+
+    const node = renderJSX(
+      <Form value={value}>
+        <Fieldset name="data" extend={true}>
+          <Input />
+          <button onClick={onClick} />
+        </Fieldset>
+      </Form>
+    );
+
+    const ele = findDOMNode(node).querySelector('button');
+    TestUtils.Simulate.click(ele);
+  });
 });