Development for 2.0

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.0.0",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/react-form-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-utils",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Serialize/Deserialize form input, and lookup",
   "main": "build/index.js",
   "author": "[email protected]",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/blacktangent/react-layout-builder",
   "dependencies": {
-    "form-serialize": "alvinsj/form-serialize#export-fn",
+    "@alvinsj/form-serialize": "^0.7.2-alpha.1",
     "object-assign": "^4.x.x"
   },
   "scripts": {

packages/react-form-utils/src/index.js

@@ -1,5 +1,5 @@
 import assign from 'object.assign';
-import serialize, { hash_serializer } from 'form-serialize';
+import serialize, { hash_serializer } from '@alvinsj/form-serialize';
 
 export const inputPropsLookup = (inputProps, inputName) => {
   var props = inputProps[inputName];
@@ -18,7 +18,9 @@ export const inputPropsLookup = (inputProps, inputName) => {
     props = props.fields;
   } else if (props) {
     return props;
-  } else throw new Error(inputName + ': props cannot be found.');
+  } else {
+    return undefined;
+  }
 
   var newInputName = inputName.replace(attrName, '');
   var nextAttrName = Object.keys(inputNameTree[attrName])[0];
@@ -32,7 +34,7 @@ export const inputPropsLookup = (inputProps, inputName) => {
 
 export const inputValueLookup = (serializedValues, inputName) => {
   if (!serializedValues || Object.keys(serializedValues).length === 0)
-    return null;
+    return undefined;
 
   var value = serializedValues[inputName];
   if (typeof value !== 'undefined' && value !== null) return value; // value found, easy.
@@ -42,7 +44,7 @@ export const inputValueLookup = (serializedValues, inputName) => {
   var attrName = Object.keys(inputNameTree)[0]; // inputName describes only single path
 
   var next = inputNameTree[attrName];
-  if (next == null) return null; // if it's already leaf, then no chance to be found.
+  if (next == null) return undefined; // if it's already leaf, then no chance to be found.
 
   var nextAttrName = Object.keys(next)[0];
   var newInputName = inputName.replace(attrName, '');

packages/react-form-utils/yarn.lock

@@ -2,9 +2,9 @@
 # yarn lockfile v1
 
 
-form-serialize@alvinsj/form-serialize#export-fn:
-  version "0.7.1"
-  resolved "https://codeload.github.com/alvinsj/form-serialize/tar.gz/228e1b738c3297bde5c003817fd371d7385e3c59"
+"@alvinsj/form-serialize@^0.7.2-alpha.1":
+  version "0.7.2-alpha.1"
+  resolved "https://registry.yarnpkg.com/@alvinsj/form-serialize/-/form-serialize-0.7.2-alpha.1.tgz#66a774f38139d067dad498d4e5a48eadf6592afb"
 
 object-assign@^4.x.x:
   version "4.1.1"

packages/react-form-with-layout/__tests__/index-test.js

@@ -82,6 +82,7 @@ describe('FormWithLayout', () => {
 
         return layout(
           section(
+            'main',
             'main',
             [col(3, 'name', 'age'), col(6, 'email')],
             [col(6, 'address[0]', 'address[1]')]
@@ -93,6 +94,7 @@ describe('FormWithLayout', () => {
             key={'role-husband'}
           />,
           section(
+            'second',
             'main',
             [col(3, 'name', 'age'), col(6, 'email')],
             [col(6, 'address[0]', 'address[1]')]
@@ -105,7 +107,7 @@ describe('FormWithLayout', () => {
         const { layout, section, col } = builder;
 
         return layout(
-          section('husband', [col(6, 'name', 'email')]),
+          section('husband', 'husband', [col(6, 'name', 'email')]),
           <input
             type={'hidden'}
             name={'role'}
@@ -150,10 +152,14 @@ describe('FormWithLayout', () => {
 
     it('renders same number of fields when updated', () => {
       const form = component.find('form');
-      expect(form.find('.field').length).toBe(10);
+      expect(form.find('input[type="text"]').length).toBe(8);
+      expect(form.find('input[type="email"]').length).toBe(2);
+      expect(form.find('input[type="hidden"]').length).toBe(2);
 
       component.update();
-      expect(form.find('.field').length).toBe(10);
+      expect(form.find('input[type="text"]').length).toBe(8);
+      expect(form.find('input[type="email"]').length).toBe(2);
+      expect(form.find('input[type="hidden"]').length).toBe(2);
     });
 
     it('renders 1 layout and 2 sections', () => {

packages/react-form-with-layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-with-layout",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "A helper to build form layout",
   "main": "build/index.js",
   "author": "[email protected]",
@@ -24,8 +24,8 @@
     "classnames": "^2.1.3",
     "object-assign": "^4.0.1",
     "object.assign": "^4.0.4",
-    "react-form-utils": "^1.2.0",
-    "react-layout-builder": "^1.2.0"
+    "react-form-utils": "^2.0.0",
+    "react-layout-builder": "^2.0.0"
   },
   "devDependencies": {
     "babel": "^6.5.x",

packages/react-form-with-layout/src/index.js

@@ -16,14 +16,7 @@ export default class FormWithLayout extends React.Component {
       'props.renderLayout and props.renderField is required.'
     );
 
-    this._isMounted = false;
-
     this.renderField = this.renderField.bind(this);
-    this.fields = {};
-  }
-
-  componentDidMount() {
-    this._isMounted = true;
   }
 
   render() {
@@ -44,48 +37,57 @@ export default class FormWithLayout extends React.Component {
         : props.renderLayout(formBuilder, props);
 
     return (
-      <form {...formProps} className={props.className || 'form-horizontal'}>
+      <form
+        ref={c => (this.form = c)}
+        {...formProps}
+        className={props.className || 'form-horizontal'}
+      >
         {children}
         {props.renderButtons ? props.renderButtons(props) : <div />}
       </form>
     );
   }
 
   renderField(name) {
-    const props = this.props;
-
-    const value = inputValueLookup(props.values || {}, name);
-    const error = props.errors ? props.errors[name] : null;
-    const def = props.getFieldProps(name);
-
-    // form.defaultValues(field).defaultValue
-    var defaultValue = inputValueLookup(props.defaultValues || {}, name);
-
-    // fieldProps.value > form.defaultValues(field).defaultValue
-    defaultValue =
-      def.defaultValue === null || typeof def.defaultValue === 'undefined'
-        ? defaultValue
-        : def.defaultValue;
-
-    // form.props.disabled > fieldProps.disabled
-    var disabled = props.disabled || def.disabled;
-
-    var label = def.label ? def.label : humanize(name);
-
-    const fieldProps = assign({}, def, {
-      className: 'field',
-      field: def,
+    const formProps = this.props;
+    const fieldProps = formProps.getFieldProps(name);
+
+    const label =
+      typeof fieldProps.label !== 'undefined'
+        ? fieldProps.label
+        : humanize(name);
+
+    // fieldProps.disabled > formProps.disabled >
+    const disabled =
+      typeof fieldProps.disabled !== 'undefined'
+        ? fieldProps.disabled
+        : formProps.disabled;
+
+    // fieldProps.defaultValue > formProps.defaultValues(field).defaultValue
+    const defaultValue =
+      typeof fieldProps.defaultValue !== 'undefined'
+        ? fieldProps.defaultValue
+        : inputValueLookup(formProps.defaultValues || {}, name);
+
+    // fieldProps.value > formProps.values(field).value
+    const value =
+      typeof fieldProps.value !== 'undefined'
+        ? fieldProps.value
+        : inputValueLookup(formProps.values || {}, name);
+
+    const inputProps = assign({}, fieldProps, {
       name: name,
       value: value,
-      defaultValue: defaultValue,
       label: label,
-      error: error,
-      disabled: disabled
+      disabled: disabled,
+
+      defaultValue: typeof value !== 'undefined' ? undefined : defaultValue,
+      formProps: formProps
     });
 
-    return def.input
-      ? React.createElement(def.input, fieldProps)
-      : props.renderField(name, fieldProps);
+    return fieldProps.input
+      ? React.createElement(fieldProps.input, inputProps)
+      : formProps.renderField(name, inputProps);
   }
 }
 

packages/react-layout-builder/__tests__/index-test.js

@@ -27,6 +27,7 @@ describe('builder', () => {
   it('section(...)', () => {
     const heading = 'Section 1';
     const el = section(
+      'section-1',
       heading,
       [
         <div key="1" className="row1 col1" />,
@@ -77,6 +78,7 @@ describe('builder', () => {
     it('layout with many sections', () => {
       const heading = 'Section 1';
       const section1 = section(
+        'section-1',
         heading,
         [
           <div key="1" className="row1 col1" />,
@@ -88,6 +90,7 @@ describe('builder', () => {
         ]
       );
       const section2 = section(
+        'section-2',
         <i>hello</i>,
         [
           <div key="2" className="row1 col1" />,
@@ -112,8 +115,8 @@ describe('builder', () => {
 
       const heading = 'Section 1';
       const section1 = layout(
-        section(heading, [el, another, another, el], [el, another, el]),
-        section(heading, [el, el, another], [el, another, el])
+        section('section-1', heading, [el, another, another, el], [el, another, el]),
+        section('section-2', heading, [el, el, another], [el, another, el])
       );
 
       mount(React.createElement(props => section1, null));

packages/react-layout-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-builder",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Build form layout",
   "main": "build/index.js",
   "author": "[email protected]",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "object-assign": "^4.x.x",
-    "react-form-utils": "^1.2.0"
+    "react-form-utils": "^2.0.0"
   },
   "scripts": {
     "jest": "NODE_PATH=src:NODE_PATH jest",

packages/react-layout-builder/src/index.js

@@ -1,16 +1,14 @@
 import React from 'react';
 
-var layoutCount = 0;
 export const layout = (...children) => {
   return (
-    <div key={`layout-${layoutCount++}`} className="layout">
+    <div className="layout">
       {children}
     </div>
   );
 };
 
-var sectionCount = 0;
-export const section = (name, ...rows) => {
+export const section = (key, name, ...rows) => {
   const renderedRows = rows.map((cols, index) => {
     return (
       <div key={`columns-${index}`} className="columns">
@@ -19,7 +17,7 @@ export const section = (name, ...rows) => {
     );
   });
   return (
-    <div key={`section-${sectionCount++}`} className="section">
+    <div key={key} className="section">
       {name && name !== ''
         ? <h5>
             {name}