From 9fbba0e3a3ea64b78c4acb6c88e5ed3f71fa5b57 Mon Sep 17 00:00:00 2001 From: jonisaa Date: Mon, 8 Aug 2016 11:39:56 -0300 Subject: [PATCH 01/15] Start to play with tabs --- package.json | 1 + src/components/groupComponents/Group.js | 54 +++++++++++++++++++------ src/components/groupComponents/Tabs.js | 27 +++++++++++++ 3 files changed, 70 insertions(+), 12 deletions(-) create mode 100644 src/components/groupComponents/Tabs.js diff --git a/package.json b/package.json index 0b6e904..078d8b2 100644 --- a/package.json +++ b/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", diff --git a/src/components/groupComponents/Group.js b/src/components/groupComponents/Group.js index f0347a2..62e7df9 100644 --- a/src/components/groupComponents/Group.js +++ b/src/components/groupComponents/Group.js @@ -1,5 +1,5 @@ import React, { Component, PropTypes } from 'react'; -import { Alert } from 'react-bootstrap'; +import { Alert, Nav, NavItem } from 'react-bootstrap'; class Group extends Component { static propTypes = { @@ -96,27 +96,57 @@ class Group extends Component { } }; + handleSelect = (eventKey) => { + event.preventDefault(); + }; + render() { // the passed in layout can contain either fields or groups. // in case it contains 'fields', we're gonna render each of the fields. - // in case it contains 'groups', we're gonna render render each group, passing the fields as a parameter + // in case it contains 'groups', we're gonna render each group, passing the fields as a parameter try { let content = this.getContent(); let header = this.getHeader(); + + let { layout } = this.props; - return ( -
-
-
- { header } -
- { content } + if (layout.type == "tabs") { + return( +
+
+
+ { header } + +
+ { content } +
-
-
- ); + + ); + } else { + return ( +
+
+
+ { header } +
+ { content } +
+
+
+
+ ); + } } catch (ex) { return ( diff --git a/src/components/groupComponents/Tabs.js b/src/components/groupComponents/Tabs.js new file mode 100644 index 0000000..3351864 --- /dev/null +++ b/src/components/groupComponents/Tabs.js @@ -0,0 +1,27 @@ +import React, { Component, PropTypes } from 'react'; +import { Alert, Nav, NavItem } from 'react-bootstrap'; + +export default class Tabs extends Component { + static propTypes = { + header: PropTypes.object, + content: PropTypes.object, + layout: PropTypes.object + }; + + render() { + let { header, content, layout } = this.props; + + return ( +
+
+
+ { header } +
+ { content } +
+
+
+
+ ); + } +} From 3937df4eca9f42a88359049a36dbc42eb8289914 Mon Sep 17 00:00:00 2001 From: jonisaa Date: Mon, 8 Aug 2016 13:51:09 -0300 Subject: [PATCH 02/15] Start to play with tabs --- src/components/AlertMessage.js | 15 +++++ src/components/Header.js | 17 +++++ src/components/groupComponents/Group.js | 81 +++--------------------- src/components/groupComponents/Normal.js | 26 ++++++++ src/components/groupComponents/Tabs.js | 31 +++++++-- 5 files changed, 93 insertions(+), 77 deletions(-) create mode 100644 src/components/AlertMessage.js create mode 100644 src/components/Header.js create mode 100644 src/components/groupComponents/Normal.js diff --git a/src/components/AlertMessage.js b/src/components/AlertMessage.js new file mode 100644 index 0000000..0d573e6 --- /dev/null +++ b/src/components/AlertMessage.js @@ -0,0 +1,15 @@ +import React, { Component, PropTypes } from 'react'; +import { Alert } from 'react-bootstrap'; + +const AlertMessage = ({ error }) => ( + +

+ Could not render the MetaFormGroup component. The schema is not valid. +

+

Detailed information: + { error.message } +

+ +); + +export default AlertMessage; \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..159d1ff --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,17 @@ +import React, { Component, PropTypes } from 'react'; + +const Header = ({ title }) => { + if (title) { + return ( +
+ + {title} + +
+ ) + } + + return null; +}; + +export default Header; \ No newline at end of file diff --git a/src/components/groupComponents/Group.js b/src/components/groupComponents/Group.js index 62e7df9..c445319 100644 --- a/src/components/groupComponents/Group.js +++ b/src/components/groupComponents/Group.js @@ -1,5 +1,7 @@ import React, { Component, PropTypes } from 'react'; -import { Alert, Nav, NavItem } from 'react-bootstrap'; +import AlertMessage from '../AlertMessage'; +import NormalForm from './Normal'; +import TabsForm from './Tabs'; class Group extends Component { static propTypes = { @@ -79,86 +81,23 @@ class Group extends Component { ); }); }; - - getHeader = () => { - let { layout } = this.props; - - if (layout.title) { - return ( -
- - { layout.title } - -
- ); - } else { - return null; - } - }; - - handleSelect = (eventKey) => { - event.preventDefault(); - }; render() { - + let { layout } = this.props; + // the passed in layout can contain either fields or groups. // in case it contains 'fields', we're gonna render each of the fields. // in case it contains 'groups', we're gonna render each group, passing the fields as a parameter try { let content = this.getContent(); - let header = this.getHeader(); - let { layout } = this.props; - - if (layout.type == "tabs") { - return( -
-
-
- { header } - -
- { content } -
-
-
-
- ); - } else { - return ( -
-
-
- { header } -
- { content } -
-
-
-
- ); + if (layout.type == 'tabs') { + return ; } - + + return } catch (ex) { - return ( - -

- Could not render the MetaFormGroup component. The schema is not valid. -

-

Detailed information: - { ex.message } -

- - ) + return } } } diff --git a/src/components/groupComponents/Normal.js b/src/components/groupComponents/Normal.js new file mode 100644 index 0000000..e6e5bb8 --- /dev/null +++ b/src/components/groupComponents/Normal.js @@ -0,0 +1,26 @@ +import React, { Component, PropTypes } from 'react'; +import Header from '../Header'; + +export default class Tabs extends Component { + static propTypes = { + content: PropTypes.array, + title: PropTypes.string + }; + + render() { + let { title } = this.props; + + return ( +
+
+
+
+
+ { content } +
+
+
+
+ ); + } +} diff --git a/src/components/groupComponents/Tabs.js b/src/components/groupComponents/Tabs.js index 3351864..65b00e7 100644 --- a/src/components/groupComponents/Tabs.js +++ b/src/components/groupComponents/Tabs.js @@ -1,23 +1,42 @@ import React, { Component, PropTypes } from 'react'; -import { Alert, Nav, NavItem } from 'react-bootstrap'; +import { Nav, NavItem } from 'react-bootstrap'; +import Header from '../Header'; export default class Tabs extends Component { static propTypes = { - header: PropTypes.object, - content: PropTypes.object, + content: PropTypes.array, layout: PropTypes.object }; + + state = { + position: 0 + }; + + handleSelect = (eventKey) => { + event.preventDefault(); + this.setState({ position: eventKey }); + }; render() { - let { header, content, layout } = this.props; + let { layout } = this.props; + let { position } = this.state; return (
- { header } +
+
- { content } + { content[position] }
From 354f189aa5f4825f4751abd659740686a9e5dbd1 Mon Sep 17 00:00:00 2001 From: jonisaa Date: Mon, 8 Aug 2016 13:52:19 -0300 Subject: [PATCH 03/15] Start to play with tabs --- src/components/groupComponents/Group.js | 2 +- src/components/groupComponents/Tabs.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/groupComponents/Group.js b/src/components/groupComponents/Group.js index c445319..58461f2 100644 --- a/src/components/groupComponents/Group.js +++ b/src/components/groupComponents/Group.js @@ -92,7 +92,7 @@ class Group extends Component { let content = this.getContent(); if (layout.type == 'tabs') { - return ; + return ; } return diff --git a/src/components/groupComponents/Tabs.js b/src/components/groupComponents/Tabs.js index 65b00e7..6fe8c26 100644 --- a/src/components/groupComponents/Tabs.js +++ b/src/components/groupComponents/Tabs.js @@ -28,9 +28,9 @@ export default class Tabs extends Component {
- { content[position] } + { content }
From 8370fb34fb524a52ea3c7f98744ec418a57ec492 Mon Sep 17 00:00:00 2001 From: jonisaa Date: Mon, 8 Aug 2016 14:03:47 -0300 Subject: [PATCH 05/15] Tabs are working! Yay! --- src/components/groupComponents/Tabs.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/groupComponents/Tabs.js b/src/components/groupComponents/Tabs.js index 2031524..906ce01 100644 --- a/src/components/groupComponents/Tabs.js +++ b/src/components/groupComponents/Tabs.js @@ -29,14 +29,14 @@ export default class Tabs extends Component {
- { content } + { content[position] }
From d271514fa90081fdd2b1c697800808faa6877858 Mon Sep 17 00:00:00 2001 From: jonisaa Date: Mon, 8 Aug 2016 14:11:52 -0300 Subject: [PATCH 06/15] Refactor of fieldComponents and groupComponents --- .../ArrayContainer.js | 0 .../{fieldComponents => field}/CheckBox.js | 0 .../DateTimePicker.js | 0 .../{fieldComponents => field}/FieldGroup.js | 0 .../{fieldComponents => field}/Lookup.js | 0 .../{fieldComponents => field}/Radio.js | 0 .../{fieldComponents => field}/Select.js | 0 .../{fieldComponents => field}/Static.js | 0 .../{fieldComponents => field}/TextArea.js | 0 .../{fieldComponents => field}/TextBox.js | 0 .../{groupComponents => group}/Group.js | 4 ++-- .../Normal.js => group/NormalForm.js} | 0 .../Tabs.js => group/TabsForm.js} | 2 +- src/factory/BootstrapFactory.js | 22 +++++++++---------- 14 files changed, 14 insertions(+), 14 deletions(-) rename src/components/{fieldComponents => field}/ArrayContainer.js (100%) rename src/components/{fieldComponents => field}/CheckBox.js (100%) rename src/components/{fieldComponents => field}/DateTimePicker.js (100%) rename src/components/{fieldComponents => field}/FieldGroup.js (100%) rename src/components/{fieldComponents => field}/Lookup.js (100%) rename src/components/{fieldComponents => field}/Radio.js (100%) rename src/components/{fieldComponents => field}/Select.js (100%) rename src/components/{fieldComponents => field}/Static.js (100%) rename src/components/{fieldComponents => field}/TextArea.js (100%) rename src/components/{fieldComponents => field}/TextBox.js (100%) rename src/components/{groupComponents => group}/Group.js (97%) rename src/components/{groupComponents/Normal.js => group/NormalForm.js} (100%) rename src/components/{groupComponents/Tabs.js => group/TabsForm.js} (94%) diff --git a/src/components/fieldComponents/ArrayContainer.js b/src/components/field/ArrayContainer.js similarity index 100% rename from src/components/fieldComponents/ArrayContainer.js rename to src/components/field/ArrayContainer.js diff --git a/src/components/fieldComponents/CheckBox.js b/src/components/field/CheckBox.js similarity index 100% rename from src/components/fieldComponents/CheckBox.js rename to src/components/field/CheckBox.js diff --git a/src/components/fieldComponents/DateTimePicker.js b/src/components/field/DateTimePicker.js similarity index 100% rename from src/components/fieldComponents/DateTimePicker.js rename to src/components/field/DateTimePicker.js diff --git a/src/components/fieldComponents/FieldGroup.js b/src/components/field/FieldGroup.js similarity index 100% rename from src/components/fieldComponents/FieldGroup.js rename to src/components/field/FieldGroup.js diff --git a/src/components/fieldComponents/Lookup.js b/src/components/field/Lookup.js similarity index 100% rename from src/components/fieldComponents/Lookup.js rename to src/components/field/Lookup.js diff --git a/src/components/fieldComponents/Radio.js b/src/components/field/Radio.js similarity index 100% rename from src/components/fieldComponents/Radio.js rename to src/components/field/Radio.js diff --git a/src/components/fieldComponents/Select.js b/src/components/field/Select.js similarity index 100% rename from src/components/fieldComponents/Select.js rename to src/components/field/Select.js diff --git a/src/components/fieldComponents/Static.js b/src/components/field/Static.js similarity index 100% rename from src/components/fieldComponents/Static.js rename to src/components/field/Static.js diff --git a/src/components/fieldComponents/TextArea.js b/src/components/field/TextArea.js similarity index 100% rename from src/components/fieldComponents/TextArea.js rename to src/components/field/TextArea.js diff --git a/src/components/fieldComponents/TextBox.js b/src/components/field/TextBox.js similarity index 100% rename from src/components/fieldComponents/TextBox.js rename to src/components/field/TextBox.js diff --git a/src/components/groupComponents/Group.js b/src/components/group/Group.js similarity index 97% rename from src/components/groupComponents/Group.js rename to src/components/group/Group.js index 58461f2..1fbe1ca 100644 --- a/src/components/groupComponents/Group.js +++ b/src/components/group/Group.js @@ -1,7 +1,7 @@ import React, { Component, PropTypes } from 'react'; import AlertMessage from '../AlertMessage'; -import NormalForm from './Normal'; -import TabsForm from './Tabs'; +import NormalForm from './NormalForm'; +import TabsForm from './TabsForm'; class Group extends Component { static propTypes = { diff --git a/src/components/groupComponents/Normal.js b/src/components/group/NormalForm.js similarity index 100% rename from src/components/groupComponents/Normal.js rename to src/components/group/NormalForm.js diff --git a/src/components/groupComponents/Tabs.js b/src/components/group/TabsForm.js similarity index 94% rename from src/components/groupComponents/Tabs.js rename to src/components/group/TabsForm.js index 906ce01..bf8d6f1 100644 --- a/src/components/groupComponents/Tabs.js +++ b/src/components/group/TabsForm.js @@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react'; import { Nav, NavItem } from 'react-bootstrap'; import Header from '../Header'; -export default class Tabs extends Component { +export default class TabsForm extends Component { static propTypes = { content: PropTypes.array, layout: PropTypes.object diff --git a/src/factory/BootstrapFactory.js b/src/factory/BootstrapFactory.js index 9224e36..2d9c39f 100644 --- a/src/factory/BootstrapFactory.js +++ b/src/factory/BootstrapFactory.js @@ -1,15 +1,15 @@ import ComponentFactory from 'redux-autoform-utils/lib/factory/ComponentFactory'; -import TextBox from '../components/fieldComponents/TextBox'; -import Select from '../components/fieldComponents/Select'; -import TextArea from '../components/fieldComponents/TextArea'; -import Group from '../components/groupComponents/Group'; -import ArrayContainer from '../components/fieldComponents/ArrayContainer'; -import DateTimePicker from '../components/fieldComponents/DateTimePicker'; -import Lookup from '../components/fieldComponents/Lookup'; -import Static from '../components/fieldComponents/Static'; -import FieldGroup from '../components/fieldComponents/FieldGroup'; -import Checkbox from '../components/fieldComponents/CheckBox'; -import Radio from '../components/fieldComponents/Radio'; +import TextBox from '../components/field/TextBox'; +import Select from '../components/field/Select'; +import TextArea from '../components/field/TextArea'; +import Group from '../components/group/Group'; +import ArrayContainer from '../components/field/ArrayContainer'; +import DateTimePicker from '../components/field/DateTimePicker'; +import Lookup from '../components/field/Lookup'; +import Static from '../components/field/Static'; +import FieldGroup from '../components/field/FieldGroup'; +import Checkbox from '../components/field/CheckBox'; +import Radio from '../components/field/Radio'; class BootstrapFactory extends ComponentFactory { constructor(config) { From f8df81068d26ab5e9bbf3e9a31271a11ffd3eec4 Mon Sep 17 00:00:00 2001 From: jonisaa Date: Mon, 8 Aug 2016 14:42:54 -0300 Subject: [PATCH 07/15] Added presets for Tabs in demo --- demo/presets.js | 8 ++++ demo/presets/layoutsTabs.txt | 77 ++++++++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 demo/presets/layoutsTabs.txt diff --git a/demo/presets.js b/demo/presets.js index de27347..1111318 100644 --- a/demo/presets.js +++ b/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') } ] \ No newline at end of file diff --git a/demo/presets/layoutsTabs.txt b/demo/presets/layoutsTabs.txt new file mode 100644 index 0000000..1041a10 --- /dev/null +++ b/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 + } + ] + } + ] + } + ] + } + ] +} \ No newline at end of file From d194d0821791ff2f0bed343286fbdbb3eb2dc95e Mon Sep 17 00:00:00 2001 From: jonisaa Date: Mon, 8 Aug 2016 14:50:49 -0300 Subject: [PATCH 08/15] Delete header from TabsForm since it makes no sense if title it's displayed on the tab --- src/components/group/TabsForm.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/group/TabsForm.js b/src/components/group/TabsForm.js index bf8d6f1..38953c6 100644 --- a/src/components/group/TabsForm.js +++ b/src/components/group/TabsForm.js @@ -1,6 +1,5 @@ import React, { Component, PropTypes } from 'react'; import { Nav, NavItem } from 'react-bootstrap'; -import Header from '../Header'; export default class TabsForm extends Component { static propTypes = { @@ -25,7 +24,6 @@ export default class TabsForm extends Component {
-