From 5b09d745f1f152199f0c3978e6431450d9c6eebe Mon Sep 17 00:00:00 2001 From: jonisaa Date: Tue, 2 Aug 2016 16:05:25 -0300 Subject: [PATCH 001/171] Bump to version 1.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 07047dc..8f9ac82 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "redux-autoform-bootstrap-ui", - "version": "1.0.2", + "version": "1.1.0", "description": "Bootstrap UI implementation for redux-autoform", "main": "./lib/index.js", "scripts": { From 2953cf2d96e0861721392c729b51f5dc94750730 Mon Sep 17 00:00:00 2001 From: jonisaa Date: Tue, 2 Aug 2016 16:39:12 -0300 Subject: [PATCH 002/171] Folder refactor --- .../ArrayContainer.js | 0 .../{fieldComponents => fields}/CheckBox.js | 0 .../DateTimePicker.js | 0 .../{fieldComponents => fields}/FieldGroup.js | 0 .../{fieldComponents => fields}/Lookup.js | 0 .../{fieldComponents => fields}/Radio.js | 0 .../{fieldComponents => fields}/Select.js | 0 .../{fieldComponents => fields}/Static.js | 0 .../{fieldComponents => fields}/TextArea.js | 0 .../{fieldComponents => fields}/TextBox.js | 0 .../{groupComponents => group}/Group.js | 0 src/factory/BootstrapFactory.js | 22 +++++++++---------- 12 files changed, 11 insertions(+), 11 deletions(-) rename src/components/{fieldComponents => fields}/ArrayContainer.js (100%) rename src/components/{fieldComponents => fields}/CheckBox.js (100%) rename src/components/{fieldComponents => fields}/DateTimePicker.js (100%) rename src/components/{fieldComponents => fields}/FieldGroup.js (100%) rename src/components/{fieldComponents => fields}/Lookup.js (100%) rename src/components/{fieldComponents => fields}/Radio.js (100%) rename src/components/{fieldComponents => fields}/Select.js (100%) rename src/components/{fieldComponents => fields}/Static.js (100%) rename src/components/{fieldComponents => fields}/TextArea.js (100%) rename src/components/{fieldComponents => fields}/TextBox.js (100%) rename src/components/{groupComponents => group}/Group.js (100%) diff --git a/src/components/fieldComponents/ArrayContainer.js b/src/components/fields/ArrayContainer.js similarity index 100% rename from src/components/fieldComponents/ArrayContainer.js rename to src/components/fields/ArrayContainer.js diff --git a/src/components/fieldComponents/CheckBox.js b/src/components/fields/CheckBox.js similarity index 100% rename from src/components/fieldComponents/CheckBox.js rename to src/components/fields/CheckBox.js diff --git a/src/components/fieldComponents/DateTimePicker.js b/src/components/fields/DateTimePicker.js similarity index 100% rename from src/components/fieldComponents/DateTimePicker.js rename to src/components/fields/DateTimePicker.js diff --git a/src/components/fieldComponents/FieldGroup.js b/src/components/fields/FieldGroup.js similarity index 100% rename from src/components/fieldComponents/FieldGroup.js rename to src/components/fields/FieldGroup.js diff --git a/src/components/fieldComponents/Lookup.js b/src/components/fields/Lookup.js similarity index 100% rename from src/components/fieldComponents/Lookup.js rename to src/components/fields/Lookup.js diff --git a/src/components/fieldComponents/Radio.js b/src/components/fields/Radio.js similarity index 100% rename from src/components/fieldComponents/Radio.js rename to src/components/fields/Radio.js diff --git a/src/components/fieldComponents/Select.js b/src/components/fields/Select.js similarity index 100% rename from src/components/fieldComponents/Select.js rename to src/components/fields/Select.js diff --git a/src/components/fieldComponents/Static.js b/src/components/fields/Static.js similarity index 100% rename from src/components/fieldComponents/Static.js rename to src/components/fields/Static.js diff --git a/src/components/fieldComponents/TextArea.js b/src/components/fields/TextArea.js similarity index 100% rename from src/components/fieldComponents/TextArea.js rename to src/components/fields/TextArea.js diff --git a/src/components/fieldComponents/TextBox.js b/src/components/fields/TextBox.js similarity index 100% rename from src/components/fieldComponents/TextBox.js rename to src/components/fields/TextBox.js diff --git a/src/components/groupComponents/Group.js b/src/components/group/Group.js similarity index 100% rename from src/components/groupComponents/Group.js rename to src/components/group/Group.js diff --git a/src/factory/BootstrapFactory.js b/src/factory/BootstrapFactory.js index 9224e36..a51d110 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/fields/TextBox'; +import Select from '../components/fields/Select'; +import TextArea from '../components/fields/TextArea'; +import Group from '../components/group/Group'; +import ArrayContainer from '../components/fields/ArrayContainer'; +import DateTimePicker from '../components/fields/DateTimePicker'; +import Lookup from '../components/fields/Lookup'; +import Static from '../components/fields/Static'; +import FieldGroup from '../components/fields/FieldGroup'; +import Checkbox from '../components/fields/CheckBox'; +import Radio from '../components/fields/Radio'; class BootstrapFactory extends ComponentFactory { constructor(config) { From 2f24509452db19ba5add7154ec6baae94699b50a Mon Sep 17 00:00:00 2001 From: Jonatan Salas Date: Wed, 3 Aug 2016 10:27:42 -0300 Subject: [PATCH 003/171] Revert "Folder refactor" This reverts commit 2953cf2d96e0861721392c729b51f5dc94750730. --- .../ArrayContainer.js | 0 .../{fields => fieldComponents}/CheckBox.js | 0 .../DateTimePicker.js | 0 .../{fields => fieldComponents}/FieldGroup.js | 0 .../{fields => fieldComponents}/Lookup.js | 0 .../{fields => fieldComponents}/Radio.js | 0 .../{fields => fieldComponents}/Select.js | 0 .../{fields => fieldComponents}/Static.js | 0 .../{fields => fieldComponents}/TextArea.js | 0 .../{fields => fieldComponents}/TextBox.js | 0 .../{group => groupComponents}/Group.js | 0 src/factory/BootstrapFactory.js | 22 +++++++++---------- 12 files changed, 11 insertions(+), 11 deletions(-) rename src/components/{fields => fieldComponents}/ArrayContainer.js (100%) rename src/components/{fields => fieldComponents}/CheckBox.js (100%) rename src/components/{fields => fieldComponents}/DateTimePicker.js (100%) rename src/components/{fields => fieldComponents}/FieldGroup.js (100%) rename src/components/{fields => fieldComponents}/Lookup.js (100%) rename src/components/{fields => fieldComponents}/Radio.js (100%) rename src/components/{fields => fieldComponents}/Select.js (100%) rename src/components/{fields => fieldComponents}/Static.js (100%) rename src/components/{fields => fieldComponents}/TextArea.js (100%) rename src/components/{fields => fieldComponents}/TextBox.js (100%) rename src/components/{group => groupComponents}/Group.js (100%) diff --git a/src/components/fields/ArrayContainer.js b/src/components/fieldComponents/ArrayContainer.js similarity index 100% rename from src/components/fields/ArrayContainer.js rename to src/components/fieldComponents/ArrayContainer.js diff --git a/src/components/fields/CheckBox.js b/src/components/fieldComponents/CheckBox.js similarity index 100% rename from src/components/fields/CheckBox.js rename to src/components/fieldComponents/CheckBox.js diff --git a/src/components/fields/DateTimePicker.js b/src/components/fieldComponents/DateTimePicker.js similarity index 100% rename from src/components/fields/DateTimePicker.js rename to src/components/fieldComponents/DateTimePicker.js diff --git a/src/components/fields/FieldGroup.js b/src/components/fieldComponents/FieldGroup.js similarity index 100% rename from src/components/fields/FieldGroup.js rename to src/components/fieldComponents/FieldGroup.js diff --git a/src/components/fields/Lookup.js b/src/components/fieldComponents/Lookup.js similarity index 100% rename from src/components/fields/Lookup.js rename to src/components/fieldComponents/Lookup.js diff --git a/src/components/fields/Radio.js b/src/components/fieldComponents/Radio.js similarity index 100% rename from src/components/fields/Radio.js rename to src/components/fieldComponents/Radio.js diff --git a/src/components/fields/Select.js b/src/components/fieldComponents/Select.js similarity index 100% rename from src/components/fields/Select.js rename to src/components/fieldComponents/Select.js diff --git a/src/components/fields/Static.js b/src/components/fieldComponents/Static.js similarity index 100% rename from src/components/fields/Static.js rename to src/components/fieldComponents/Static.js diff --git a/src/components/fields/TextArea.js b/src/components/fieldComponents/TextArea.js similarity index 100% rename from src/components/fields/TextArea.js rename to src/components/fieldComponents/TextArea.js diff --git a/src/components/fields/TextBox.js b/src/components/fieldComponents/TextBox.js similarity index 100% rename from src/components/fields/TextBox.js rename to src/components/fieldComponents/TextBox.js diff --git a/src/components/group/Group.js b/src/components/groupComponents/Group.js similarity index 100% rename from src/components/group/Group.js rename to src/components/groupComponents/Group.js diff --git a/src/factory/BootstrapFactory.js b/src/factory/BootstrapFactory.js index a51d110..9224e36 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/fields/TextBox'; -import Select from '../components/fields/Select'; -import TextArea from '../components/fields/TextArea'; -import Group from '../components/group/Group'; -import ArrayContainer from '../components/fields/ArrayContainer'; -import DateTimePicker from '../components/fields/DateTimePicker'; -import Lookup from '../components/fields/Lookup'; -import Static from '../components/fields/Static'; -import FieldGroup from '../components/fields/FieldGroup'; -import Checkbox from '../components/fields/CheckBox'; -import Radio from '../components/fields/Radio'; +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'; class BootstrapFactory extends ComponentFactory { constructor(config) { From c65413f560cb8bac23d22b9fe7b9c8bfe2a2471d Mon Sep 17 00:00:00 2001 From: Jonatan Salas Date: Wed, 3 Aug 2016 10:40:08 -0300 Subject: [PATCH 004/171] Bump to 1.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8f9ac82..632f850 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "redux-autoform-bootstrap-ui", - "version": "1.1.0", + "version": "1.1.1", "description": "Bootstrap UI implementation for redux-autoform", "main": "./lib/index.js", "scripts": { From cf447b7ce6d21de3b8bf1869965a34543e783c4d Mon Sep 17 00:00:00 2001 From: Jonatan Salas Date: Wed, 3 Aug 2016 10:48:20 -0300 Subject: [PATCH 005/171] Added publish command to prevent a wrong publish --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 632f850..e2da498 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "build-demo": "cross-env NODE_ENV=production babel-node ./tools/build-demo.js", "build-lib": "cross-env NODE_ENV=production babel-node ./tools/build-lib.js", + "publish": "npm run build-lib && npm publish", "start": "cross-env NODE_ENV=development babel-node ./demo/Server.js", "test": "mocha ./test --compilers js:babel-register", "coverage": "babel-node ./node_modules/.bin/isparta cover _mocha" From 8fd6fa1ffda1e94b1ccb194a18a6ee4ccf5d3a09 Mon Sep 17 00:00:00 2001 From: jonisaa Date: Thu, 4 Aug 2016 10:44:04 -0300 Subject: [PATCH 006/171] Update npm ignore --- .npmignore | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/.npmignore b/.npmignore index 99625fe..3bdc96d 100644 --- a/.npmignore +++ b/.npmignore @@ -1,2 +1,13 @@ -/src -# Created by .ignore support plugin (hsz.mobi) +src +docs +docs-md +test +tools +webpack +karma.conf.js +webpack.*.js +register-babel.js +.npmignore +.idea +demo +.travis.yml \ No newline at end of file From a860eb2b49552a2d076efc28e5b59d0a3dd85acb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Pena?= Date: Fri, 5 Aug 2016 09:59:03 -0300 Subject: [PATCH 007/171] Better documentation --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index c85622e..3755225 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,14 @@ Components that are need to be installed manually: Alternatively, if you're using webpack with `css-loader` and `less-loader`, which you probably are, you can just import these less files directly in your JavaScript. +### Running the demo locally + +In order to understand how Redux-Autoform and Redux-Autoform-Bootstrap-UI works, a good path is to run the demo locally and see how it works: + + npm run start + +Now the demo should be available here: [http://localhost:4000/](http://localhost:4000/). + ## Components ### TextBox From fdf297b5ec4437e506d30d4d89f1fbc3f8b7616f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Pena?= Date: Fri, 5 Aug 2016 10:00:38 -0300 Subject: [PATCH 008/171] Better documentation --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3755225..5b305d3 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ Bootstrap UI for [redux-autoform](https://github.com/redux-autoform/redux-autofo - [Using](#using) - [Add the required third-party components](#add-the-required-third-party-components) - [Styling](#styling) + - [Running the demo locally](#running-the-demo-locally) - [Components](#components) - [TextBox](#textbox) - [TextArea](#textarea) @@ -25,7 +26,6 @@ Bootstrap UI for [redux-autoform](https://github.com/redux-autoform/redux-autofo - [Select](#select) - [Lookup](#lookup) - [DateTimePicker](#datetimepicker) - - [Specific metadata for the `DateTimePicker` component. Common metadata is not listed.](#specific-metadata-for-the-datetimepicker-component-common-metadata-is-not-listed) - [Contributing](#contributing) - [Third party](#third-party) - [License](#license) @@ -143,9 +143,8 @@ options | The options to display. Options are an array of objects with two prope [Lookup demo](https://redux-autoform.github.io/redux-autoform-bootstrap-ui/demo.html?preset=componentsLookup). ### DateTimePicker ---- -### Specific metadata for the `DateTimePicker` component. Common metadata is not listed. +Specific metadata for the `DateTimePicker` component. Common metadata is not listed. Metadata | Description --- | --- From 84b70b0bb10e32903f7b73af0a5270d41277d18c Mon Sep 17 00:00:00 2001 From: jonisaa Date: Fri, 5 Aug 2016 11:12:10 -0300 Subject: [PATCH 009/171] Extract '#' from href and bump to v1.1.2 --- package.json | 2 +- src/components/fieldComponents/ArrayContainer.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e2da498..6c25c42 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "redux-autoform-bootstrap-ui", - "version": "1.1.1", + "version": "1.1.2", "description": "Bootstrap UI implementation for redux-autoform", "main": "./lib/index.js", "scripts": { diff --git a/src/components/fieldComponents/ArrayContainer.js b/src/components/fieldComponents/ArrayContainer.js index b541172..a694534 100644 --- a/src/components/fieldComponents/ArrayContainer.js +++ b/src/components/fieldComponents/ArrayContainer.js @@ -92,6 +92,7 @@ class ArrayContainer extends Component { }; getAllComponents = () => { + //TODO: We should replace href calls with Link from react-router let components = this.getComponents(); if (components.length) { @@ -99,7 +100,7 @@ class ArrayContainer extends Component { } else { return ( - This array is empty. Consider adding a new item. + This array is empty. Consider adding a new item. ); } From d44573eb7347dd12ec8bc7bf83de19bc64768780 Mon Sep 17 00:00:00 2001 From: jonisaa Date: Fri, 5 Aug 2016 11:17:00 -0300 Subject: [PATCH 010/171] bump to 1.1.3 --- package.json | 2 +- src/components/fieldComponents/ArrayContainer.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 6c25c42..0b6e904 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "redux-autoform-bootstrap-ui", - "version": "1.1.2", + "version": "1.1.3", "description": "Bootstrap UI implementation for redux-autoform", "main": "./lib/index.js", "scripts": { diff --git a/src/components/fieldComponents/ArrayContainer.js b/src/components/fieldComponents/ArrayContainer.js index a694534..4b94ddb 100644 --- a/src/components/fieldComponents/ArrayContainer.js +++ b/src/components/fieldComponents/ArrayContainer.js @@ -92,7 +92,7 @@ class ArrayContainer extends Component { }; getAllComponents = () => { - //TODO: We should replace href calls with Link from react-router + //TODO: We should replace a for button! let components = this.getComponents(); if (components.length) { @@ -100,7 +100,7 @@ class ArrayContainer extends Component { } else { return ( - This array is empty. Consider adding a new item. + This array is empty. Consider adding a new item. ); } From 9fbba0e3a3ea64b78c4acb6c88e5ed3f71fa5b57 Mon Sep 17 00:00:00 2001 From: jonisaa Date: Mon, 8 Aug 2016 11:39:56 -0300 Subject: [PATCH 011/171] 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 012/171] 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 013/171] 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 015/171] 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 016/171] 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 017/171] 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 018/171] 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 {
-