Merge pull request #80 from nikhilarunw/feature-disabled

Added disabled attribute in autoform field

Author: Jonatan E. Salas

src/components/common/FormControl.js

@@ -24,8 +24,8 @@ class FormControl extends Component {
     };
 
     getInput = () => {
-        let { value, placeholder, componentClass, children, rows, inputType, min, max } = this.props;
-        let formControlProps = { value, placeholder, componentClass, rows, min, max };
+        let { value, placeholder, componentClass, children, rows, inputType, min, max, disabled } = this.props;
+        let formControlProps = { value, placeholder, componentClass, rows, min, max, disabled };
 
         return (
             <BootstrapFormControl type={inputType} ref="input" onChange={this.handleChange} onBlur={this.handleBlur} {...formControlProps}>

src/components/common/Input.js

@@ -25,7 +25,7 @@ class Input extends Component {
         let {
             error, touched, displayName, name, help, fieldLayout, innerSize, children, inputType,
             value, placeholder, addonBefore, addonAfter, onChange, onBlur, componentClass, rows,
-            min, max
+            min, max, disabled
         } = this.props;
 
         let formGroupProps = {
@@ -52,7 +52,8 @@ class Input extends Component {
             componentClass,
             rows,
             min,
-            max
+            max,
+            disabled
         };
 
         return (

src/components/field/ArrayContainer.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import GlyphButton from '../common/GlyphButton.js';
 import Alert from 'react-bootstrap/lib/Alert';
+import Button from 'react-bootstrap/lib/Button'
 import FormGroup from '../common/FormGroup';
 import ArrayContainerItem from '../common/ArrayContainerItem';
 
@@ -51,8 +52,10 @@ class ArrayContainer extends Component {
     };
 
     buildGroupComponent = (field) => {
-        let { componentFactory, layout } = this.props;
-        
+        let { componentFactory, layout, disabled } = this.props;
+
+        field = field.map((field)=>( { ...field, disabled} ));
+
         return componentFactory.buildGroupComponent({
             component: layout.component,
             layout: layout,
@@ -63,7 +66,7 @@ class ArrayContainer extends Component {
 
     getComponents = () => {
         let { fields } = this.props;
-        
+
         return fields.map((field, index) => (
             <ArrayContainerItem key={index} index={index} onAction={this.handleItemAction}>
                 { this.buildGroupComponent(field) }
@@ -72,7 +75,7 @@ class ArrayContainer extends Component {
     };
 
     getAddBar = () => {
-        let { addText } = this.props;
+        let { addText, disabled } = this.props;
 
         let text = addText ? addText : "Add";
         let components = this.getComponents();
@@ -81,7 +84,7 @@ class ArrayContainer extends Component {
             return (
                 <div className="add-bar">
                     <span>
-                        <GlyphButton glyph="plus" text={text} bsSize="small" onClick={this.handleAdd}/>
+                        <GlyphButton glyph="plus" text={text} bsSize="small" onClick={this.handleAdd} disabled={disabled}/>
                     </span>
                 </div>
             ); 
@@ -93,14 +96,15 @@ class ArrayContainer extends Component {
 
     getAllComponents = () => {
         //TODO: We should replace a for button!
+        const { disabled } = this.props;
         let components = this.getComponents();
 
         if (components.length) {
             return components;
         } else {
             return (
                 <Alert bsStyle="warning">
-                    This array is empty. Consider <a onClick={ this.handleAdd }>adding a new item</a>.
+                    This array is empty. Consider <Button bsStyle="link" disabled={disabled} onClick={ this.handleAdd }>adding a new item</Button>.
                 </Alert>
             );
         }

src/components/field/CheckBox.js

@@ -5,9 +5,9 @@ import Col from 'react-bootstrap/lib/Col';
 
 class Checkbox extends Component {
     getContent = () => {
-        let { value, name, displayName, error, touched, onChange, onBlur } = this.props;
+        let { value, name, displayName, error, touched, onChange, onBlur, disabled } = this.props;
         let validationState = error && touched ? 'error' : null;
-        let checkboxProps = { checked: value, onChange, onBlur, validationState };
+        let checkboxProps = { checked: value, onChange, onBlur, validationState, disabled };
 
         return (
             <BootstrapCheckbox className="cb-fix" {...checkboxProps}>

src/components/field/DateTimePicker.js

@@ -79,7 +79,7 @@ class DateTimePicker extends Component {
     };
 
     render() {
-        let { value, name, displayName, help, error, touched, onBlur, format, type, fieldLayout } = this.props;
+        let { value, name, displayName, help, error, touched, onBlur, format, type, fieldLayout, disabled } = this.props;
         let localizer = getDateLocalizer();
 
         if (typeof value == 'string') {
@@ -91,7 +91,7 @@ class DateTimePicker extends Component {
             }
         }
 
-        let reactWidgetsProps = { value, displayName, onChange: this.onChange, onBlur, format };
+        let reactWidgetsProps = { value, displayName, onChange: this.onChange, onBlur, format, disabled };
         let formGroupProps = { error, touched, displayName, name, help, fieldLayout };
 
         this.setReactWidgetsProps(reactWidgetsProps, type);

src/components/field/EntityContainer.js

@@ -19,8 +19,8 @@ class EntityContainer extends Component {
     };
 
     _renderComponents = () => {
-        let { componentFactory, layout, fields } = this.props;
-
+        let { componentFactory, layout, fields, disabled } = this.props;
+        fields = fields.map((field)=>({ ...field, disabled}));
         return componentFactory.buildGroupComponent({
             component: layout.component,
             layout: layout,
@@ -60,6 +60,7 @@ EntityContainer.props = {
     visited: PropTypes.bool,
     autofilled: PropTypes.bool,
     required: PropTypes.bool,
+    disabled: PropTypes.bool,
 
     //String props
     group: PropTypes.string,

src/components/field/Lookup.js

@@ -14,7 +14,7 @@ class Lookup extends Component {
     };
 
     render() {
-        let {value, name, displayName, help, error, touched, onChange, onBlur, options, fieldLayout} = this.props;
+        let {value, name, displayName, help, error, touched, onChange, onBlur, options, fieldLayout, disabled} = this.props;
         let formGroupProps = {error, touched, displayName, name, help, fieldLayout};
         let selectProps;
 
@@ -23,6 +23,7 @@ class Lookup extends Component {
                 options,
                 value,
                 name,
+                disabled,
                 onChange,
                 onBlur: (event) => onBlur()
             };

src/components/field/Radio.js

@@ -9,10 +9,10 @@ class Radio extends Component {
     };
 
     getOptions = (value) => {
-        let { options, name, fieldLayout } = this.props;
+        let { options, name, fieldLayout, disabled } = this.props;
 
         // these props don't vary per item
-        let invariantRadioProps = { inline: fieldLayout == 'inline', name, onChange: this.handleChange };
+        let invariantRadioProps = { inline: fieldLayout == 'inline', name, onChange: this.handleChange, disabled };
 
         return options.map((item, index) => (
             <BootstrapRadio key={index} value={item.value}  checked={item.value == value} {...invariantRadioProps}>