Fix / IE 11 deep object optimization

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-components-form",
-  "version": "2.10.0",
+  "version": "2.11.1",
   "description": "React form components",
   "main": "main.js",
   "jsnext:main": "src/index.js",
@@ -49,6 +49,7 @@
     "form-schema-validation": "^1.6.0",
     "jest": "^18.1.0",
     "jsdom": "^9.11.0",
+    "lodash": "^4.17.4",
     "react": "^15.4.1",
     "react-addons-test-utils": "^15.4.2",
     "react-dom": "^15.4.1",

src/components/FieldConnect.jsx

@@ -1,5 +1,7 @@
 import React, { PropTypes } from 'react';
-import { isNotEqualObject, isNotEqualValue, cloneArray, cloneObject } from '../helpers';
+import isEqual from 'lodash/isEqual';
+
+import { cloneArray, cloneObject } from '../helpers';
 
 export const FieldConnect = (Component) => {
     class FieldConnector extends React.Component {
@@ -19,14 +21,14 @@ export const FieldConnect = (Component) => {
         }
 
         shouldComponentUpdate(nextProps) {
-            const newProps = Object.assign({}, nextProps, { children: '' });
-            const oldProps = Object.assign({}, this.props, { children: '' });
+            const newProps = Object.assign({}, nextProps);
+            const oldProps = Object.assign({}, this.props);
             const { name } = this.props;
             const { getModel, getErrors } = this.context;
             return (
-                isNotEqualValue(getModel(name), this.fieldValue) ||
-                isNotEqualValue(getErrors(name), this.fieldErrors) ||
-                isNotEqualObject(newProps, oldProps)
+                !isEqual(getModel(name), this.fieldValue) ||
+                !isEqual(getErrors(name), this.fieldErrors) ||
+                !isEqual(newProps, oldProps)
             );
         }
 

src/components/Form.jsx

@@ -135,6 +135,7 @@ class Form extends React.Component {
     runSubmit(errors, modelData) {
         const model = cloneObject(modelData);
         if (Object.keys(errors).length > 0) {
+            if (this.eventsListener) this.eventsListener.callEvent('error', errors);
             if (this.props.onError) this.props.onError(errors, model);
             return;
         }

src/components/FormEventsListener.js

@@ -5,6 +5,7 @@ class FormEventsListener {
             validate: [],
             changeModel: [],
             reset: [],
+            error: [],
         };
     }
     registerEvent(name) {

src/demo/book/index.jsx

@@ -104,41 +104,56 @@ const resetModel = {
 };
 
 const eventsListener = new FormEventsListener();
-const BookForm = () => (
-    <Form
-        schema={postSchema}
-        onSubmit={data => console.log(data)}
-        onError={(errors, data) => console.log('error', errors, data)}
-        eventsListener={eventsListener}
-    >
-        <h4>BOOK FORM</h4>
-        <TextField name="title" type="text" />
-        <SelectField name="category" />
-        <ListField
-            name="authors"
-            className={listWrapper}
-            addButton={{value: <span>add button</span>}}
-            minLength={1}
-        >
-            <ObjectField wrapperClassName={objectFieldClassName}>
-                <div className={objectFormField}>
-                    <TextField name="name" placeholder="name"/>
-                </div>
-                <div className={objectFormField}>
-                    <TextField name="surname" placeholder="surname"/>
-                </div>
-                <div>
-                    <SelectField name="age" />
-                </div>
-            </ObjectField>
-        </ListField>
-        <ListField name="languages" label="Languages" className={listWrapper}>
-            <TextField placeholder="language" />
-        </ListField>
-        <CheckboxField name="status" label="Published" />
-        <SubmitField value="Submit" />
-        <a onClick={() => {eventsListener.callEvent('reset', resetModel)}} >RESET</a>
-    </Form>
-);
+class BookForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            counter: 0,
+        }
+    }
+    render() {
+        console.log(this.state.counter);
+        return (
+            <Form
+                schema={postSchema}
+                onSubmit={data => console.log(data)}
+                onError={(errors, data) => console.log('error', errors, data)}
+                eventsListener={eventsListener}
+            >
+
+                <h4>BOOK FORM</h4>
+                <TextField name="title" type="text" />
+                <SelectField name="category" />
+                <ListField
+                    name="authors"
+                    className={listWrapper}
+                    addButton={{value: <span>add button</span>}}
+                    minLength={1}
+                >
+                    <ObjectField wrapperClassName={objectFieldClassName}>
+                        {this.state.counter}
+                        <div className={objectFormField}>
+                            <TextField name="name" placeholder="name"/>
+                        </div>
+                        <div className={objectFormField}>
+                            <TextField name="surname" placeholder="surname"/>
+                        </div>
+                        <div>
+                            <SelectField name="age" />
+                        </div>
+                    </ObjectField>
+                </ListField>
+                <ListField name="languages" label="Languages" className={listWrapper}>
+                    <TextField placeholder="language" />
+                </ListField>
+                <CheckboxField name="status" label="Published" />
+                <SubmitField value="Submit" />
+                <a onClick={() => {eventsListener.callEvent('reset', resetModel)}} >RESET</a>
+                <a onClick={() => { this.setState({counter: this.state.counter + 1 }) }} >ddd</a>
+            </Form>
+        )
+    }
+}
+
 
 export default BookForm;

src/helpers.js

@@ -27,6 +27,9 @@ export const cloneArray = (array) => {
 
 export const cloneObject = (object) => {
     const results = {};
+    if (typeof object !== 'object' || object === null) {
+        return object;
+    }
     Object.keys(object).forEach((key) => {
         const data = cloneArray(object[key]);
         if (

tests/FormEventsListener.test.js

@@ -17,7 +17,7 @@ describe('FormEventsListener', () => {
 
     it('should not unregister event if not exists', () => {
         eventsListener.unregisterEvent('afterSubmit');
-        expect(Object.keys(eventsListener.eventsListeners).length).toBe(4);
+        expect(Object.keys(eventsListener.eventsListeners).length).toBe(5);
     });
 
     it('should register event listener', () => {

tests/helpers.test.js

@@ -71,6 +71,10 @@ describe('helpers', () => {
             expect (clonedObject).not.toBe(objectWithArrays);
             expect (clonedObject).toEqual(objectWithArrays);
         });
+        it('should do return recived argument when argument isnt object', () => {
+            const clonedObject = cloneObject(null);
+            expect (clonedObject).toEqual(null);
+        });
     });
 
     describe('isNotEqualObject', () => {