Merge pull request #23 from redux-autoform/experimental

TabsForm Support

Author: andrerpena

demo/presets.js

@@ -116,5 +116,13 @@ export default [
         layoutName: 'edit',
         formTitle: 'Edit contact',
         schema: require('./presets/componentsFieldGroup.txt')
+    },
+    {
+        name: 'Layout Tabs',
+        displayName: 'Layout Tabs',
+        entityName: 'contact',
+        layoutName: 'edit',
+        formTitle: 'Edit contact',
+        schema: require('./presets/layoutsTabs.txt')
     }
 ]

demo/presets/layoutsTabs.txt

@@ -0,0 +1,77 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                { name: "f1", displayName: "Field 1", type: "string" },
+                { name: "f2", displayName: "Field 2", type: "string" },
+                { name: "f3", displayName: "Field 3", type: "string" },
+                { name: "f4", displayName: "Field 4", type: "string" },
+                { name: "f5", displayName: "Field 5", type: "string" },
+                { name: "f6", displayName: "Field 6", type: "string" },
+                { name: "f7", displayName: "Field 7", type: "string" },
+                { name: "f8", displayName: "Field 8", type: "string" },
+            ],
+            layouts: [
+                {
+                    name: 'edit',
+                    type: 'tabs',
+                    groups: [
+                        {
+                            title: 'First',
+                            fields: [
+                                {
+                                    name: 'f1'
+                                },
+                                {
+                                    name: 'f2',
+                                    size: 8
+                                }
+                            ]
+                        },
+                        {
+                            title: 'Second',
+                            orientation: 'horizontal',
+                            fields: [
+                                {
+                                    name: 'f3'
+                                },
+                                {
+                                    name: 'f4'
+                                }
+                            ]
+                        },
+                        {
+                            title: 'Third',
+                            orientation: 'horizontal',
+                            fields: [
+                                {
+                                    name: 'f5',
+                                    size: 4
+                                },
+                                {
+                                    name: 'f6',
+                                    size: 8
+                                }
+                            ]
+                        },
+                        {
+                            title: 'Fourth',
+                            orientation: 'horizontal',
+                            fields: [
+                                {
+                                    name: 'f7',
+                                    innerSize: 3
+                                },
+                                {
+                                    name: 'f8',
+                                    innerSize: 3
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}

package.json

@@ -29,6 +29,7 @@
   "homepage": "https://github.com/redux-autoform/redux-autoform-bootstrap-ui#readme",
   "dependencies": {
     "bootstrap": "^3.3.6",
+    "font-awesome": "^4.6.3",
     "isomorphic-fetch": "^2.2.1",
     "react": "^15.1.0",
     "react-bootstrap": "^0.30.0",

src/components/common/AlertMessage.js

@@ -0,0 +1,15 @@
+import React, { Component, PropTypes } from 'react';
+import { Alert } from 'react-bootstrap';
+
+const AlertMessage = ({ error }) => (
+	<Alert bsStyle='danger'>
+		<h4>
+			Could not render the MetaFormGroup component. The schema is not valid.
+		</h4>
+		<p>Detailed information:
+			<b>{ error.message }</b>
+		</p>
+	</Alert>
+);
+
+export default AlertMessage;