Initial Commit,

Refactored Bootstrap factories to be created by an unique Factory, now you can request which type of Bootstrap factory you want to create , i.e. edit, details, etc
Added ComponentFactory as base class of each factory, this factory should be moved to a common repo to be included as dependency of each UI sub module to be created.

Author: daniel.gomez

.gitignore

@@ -0,0 +1 @@
+/.idea

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "redux-autoform-bootstrap-ui",
+  "version": "1.0.0",
+  "description": "Bootstrap UI implementation for redux-autoform",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/redux-autoform/redux-autoform-bootstrap-ui.git"
+  },
+  "keywords": [
+    "autoform",
+    "react",
+    "redux",
+    "bootstrap"
+  ],
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/redux-autoform/redux-autoform-bootstrap-ui/issues"
+  },
+  "homepage": "https://github.com/redux-autoform/redux-autoform-bootstrap-ui#readme"
+}

src/components/ArrayContainerItem.js

@@ -0,0 +1,76 @@
+import React, { Component, PropTypes } from 'react';
+import Glyphicon from 'react-bootstrap/lib/Glyphicon';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+import Dropdown from 'react-bootstrap/lib/Dropdown';
+
+class ArrayContainerItem extends Component {
+    static propTypes = {
+        index: PropTypes.number.isRequired,
+        onAction: PropTypes.func.isRequired
+    };
+
+    handleAction = (eventKey) => {
+        let { onAction, index } = this.props;
+
+        onAction(index, eventKey);
+    };
+
+    render() {
+        let { index, children } = this.props;
+
+        return <div className="array-container-item">
+            <div className="row">
+                <div className="col-xs-11">
+                    <div className="array-container-item-content">
+                        { children }
+                    </div>
+                </div>
+                <div className="col-xs-1">
+                    <div className="array-container-item-options">
+                        <Dropdown id={`${index}-dropdown`} onSelect={this.handleAction} pullRight>
+                            <Dropdown.Toggle noCaret bsStyle="link" bsSize="small">
+                                <Glyphicon glyph="menu-hamburger"/>
+                            </Dropdown.Toggle>
+                            <Dropdown.Menu >
+                                <MenuItem eventKey="remove">
+                                    <Glyphicon glyph="remove" className="text-danger"/>
+                                    <span className="glyphicon-text text-danger">
+                                        Remove
+                                    </span>
+                                </MenuItem>
+                                <MenuItem divider/>
+                                <MenuItem eventKey="moveUp">
+                                    <Glyphicon glyph="chevron-up"/>
+                                    <span className="glyphicon-text">
+                                        Move up
+                                    </span>
+                                </MenuItem>
+                                <MenuItem eventKey="moveDown">
+                                    <Glyphicon glyph="chevron-down"/>
+                                    <span className="glyphicon-text">
+                                        Move down
+                                    </span>
+                                </MenuItem>
+                                <MenuItem divider/>
+                                <MenuItem eventKey="moveFirst">
+                                    <Glyphicon glyph="chevron-up"/>
+                                    <span className="glyphicon-text">
+                                        Move first
+                                    </span>
+                                </MenuItem>
+                                <MenuItem eventKey="moveLast">
+                                    <Glyphicon glyph="chevron-down"/>
+                                    <span className="glyphicon-text">
+                                        Move last
+                                    </span>
+                                </MenuItem>
+                            </Dropdown.Menu>
+                        </Dropdown>
+                    </div>
+                </div>
+            </div>
+        </div>;
+    }
+}
+
+export default ArrayContainerItem;

src/components/FormControl.js

@@ -0,0 +1,88 @@
+import React, { Component, PropTypes } from 'react';
+import InputGroup from 'react-bootstrap/lib/InputGroup';
+import { FormControl as BootstrapFormControl } from 'react-bootstrap';
+
+class FormControl extends Component {
+    static propTypes = {
+        error: PropTypes.string,
+        touched: PropTypes.bool,
+        displayName: PropTypes.string,
+        name: PropTypes.string,
+        help: PropTypes.string
+    };
+    
+    handleChange = (event) => {
+        let { onChange } = this.props;
+        
+        onChange(event.target.value);
+    };
+    
+    handleBlur = (event) => {
+        let { onBlur } = this.props;
+        
+        onBlur();
+    };
+
+    getInput = () => {
+        let { value, name, placeholder, displayName, help, componentClass, children, rows } = this.props;
+        let label = displayName || name;
+        
+        let formControlProps = { label, value, placeholder, help, componentClass, rows };
+        
+        return (
+            <BootstrapFormControl type="text" ref="input" onChange={this.handleChange} onBlur={this.handleBlur} {...formControlProps} hasFeedback>
+                { children }
+            </BootstrapFormControl>
+        )
+    }; 
+    
+    getAddonBefore = () => {
+        let { addonBefore } = this.props;
+        
+        if (addonBefore) {
+            return (
+                <InputGroup.Addon>
+                    {addonBefore}
+                </InputGroup.Addon>
+            );
+        } else {
+            return null;
+        }
+    };
+    
+    getAddonAfter = () => {
+        let { addonAfter } = this.props;
+        
+        if (addonAfter) {
+            return (
+                <InputGroup.Addon>
+                    {addonAfter}
+                </InputGroup.Addon>
+            );
+        } else {
+            return null;
+        }
+    };
+
+    render() {
+        let { addonBefore, addonAfter } = this.props;
+        let before = this.getAddonBefore();
+        let input = this.getInput();
+        let after = this.getAddonAfter();
+
+        if (addonBefore || addonAfter) {
+            return (
+                <InputGroup>
+                    { before }
+                    { input }
+                    { after }
+                </InputGroup>
+            );
+            
+        } else {
+            return input;
+        }
+    }
+}
+
+export default FormControl;

src/components/FormGroup.js

@@ -0,0 +1,22 @@
+import React, { Component, PropTypes } from 'react';
+import FormGroupInline from './FormGroupInline';
+import FormGroupStacked from './FormGroupStacked';
+
+class FormGroup extends Component {
+    static propTypes = {
+        error: PropTypes.string,
+        touched: PropTypes.bool,
+        displayName: PropTypes.string,
+        name: PropTypes.string,
+        help: PropTypes.string
+    };
+
+    render() {
+        let { fieldLayout } = this.props;
+        let InnerFormGroup = fieldLayout == 'inline' ? FormGroupInline : FormGroupStacked;
+        
+        return <InnerFormGroup {...this.props}/>;
+    }
+}
+
+export default FormGroup;

src/components/FormGroupInline.js

@@ -0,0 +1,39 @@
+import React, { Component, PropTypes } from 'react';
+import { FormGroup as BootstrapFormGroup } from 'react-bootstrap';
+import FormGroupInlineControlLabel from './FormGroupInlineControlLabel';
+import FormGroupInlineContent from './FormGroupInlineContent'
+import { getDisplayName } from '../../helpers/metadataHelper';
+
+class FormGroupInline extends Component {
+    static propTypes = {
+        error: PropTypes.string,
+        touched: PropTypes.bool,
+        displayName: PropTypes.string,
+        name: PropTypes.string,
+        help: PropTypes.string
+    };
+
+    render() {
+        let { error, touched, displayName, name, children, help, className, innerSize } = this.props;
+        displayName = getDisplayName(displayName, name);
+
+        let controlLabelProps = { displayName };
+        let contentProps = { error, touched, children, help, hasControlLabel: displayName != null, innerSize };
+        let formGroupProps = { className };
+
+        if (error && touched) {
+            formGroupProps.validationState = 'error';
+        }
+
+        return (
+            <BootstrapFormGroup {...formGroupProps}>
+                <FormGroupInlineControlLabel {...controlLabelProps}/>
+                <FormGroupInlineContent {...contentProps}>
+                    { children }
+                </FormGroupInlineContent>
+            </BootstrapFormGroup>
+        )
+    }
+}
+
+export default FormGroupInline;

src/components/FormGroupInlineContent.js

@@ -0,0 +1,44 @@
+import React, { Component, PropTypes } from 'react';
+import HelpBlock from 'react-bootstrap/lib/HelpBlock';
+import Col from 'react-bootstrap/lib/Col';
+
+class FormGroupInlineContent extends Component {
+    static propTypes = {
+        error: PropTypes.string,
+        touched: PropTypes.bool,
+        displayName: PropTypes.string,
+        name: PropTypes.string,
+        help: PropTypes.string
+    };
+
+    getHelpBlock = () => {
+        let { error, touched, help } = this.props;
+        let helpText = (touched ? error : '') || help;
+
+        if (helpText) {
+            return (
+                <HelpBlock>
+                    { helpText }
+                </HelpBlock>
+            )
+        } else {
+            return null;
+        }
+
+    };
+
+    render() {
+        let { children, hasControlLabel, innerSize } = this.props;
+        let className = hasControlLabel ? "col-offset-140" : null;
+        let helpBlock = this.getHelpBlock();
+        
+        return <Col className={className} md={12}>
+            <Col className="no-padding-col" md={innerSize || 12}>
+                { children }
+                { helpBlock }
+            </Col>
+        </Col>;
+    }
+}
+
+export default FormGroupInlineContent;

src/components/FormGroupInlineControlLabel.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import { ControlLabel } from 'react-bootstrap';
+
+class FormGroupInlineControlLabel extends Component {
+    static propTypes = {
+        displayName: React.PropTypes.string
+    };
+
+    render() {
+        let { displayName } = this.props;
+
+        if (displayName == null) {
+            return null;
+        }
+
+        return (
+            <div className="col-fixed-140">
+                <ControlLabel>
+                    { displayName }
+                </ControlLabel>
+            </div>
+        )
+    }
+}
+
+export default FormGroupInlineControlLabel;