X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=src%2Fgeneric-components%2Finput%2FinputOptions%2FInputOptions.jsx;fp=src%2Fgeneric-components%2Finput%2FinputOptions%2FInputOptions.jsx;h=bf17df13c61790d3c895ce775584d62aeff73096;hp=bb9d77760aa32aa81ab7b1871b4c07f7f73706b2;hb=96319fec0d2af2be5802a56d6b05a3ada939c8df;hpb=d1975c8134f0401b0ccebf3719eda129d53dac14

diff --git a/src/generic-components/input/inputOptions/InputOptions.jsx b/src/generic-components/input/inputOptions/InputOptions.jsx
index bb9d777..bf17df1 100644
--- a/src/generic-components/input/inputOptions/InputOptions.jsx
+++ b/src/generic-components/input/inputOptions/InputOptions.jsx
@@ -27,215 +27,215 @@ import Select from 'generic-components/input/SelectInput.jsx';
 export const other = {OTHER: 'Other'};
 
 class InputOptions extends React.Component {
-		
-		static propTypes = {
-				values: PropTypes.arrayOf(PropTypes.shape({
-						enum: PropTypes.string,
-						title: PropTypes.string
-				})),
-				isEnabledOther: PropTypes.bool,
-				title: PropTypes.string,
-				selectedValue: PropTypes.string,
-				multiSelectedEnum: PropTypes.array,
-				selectedEnum: PropTypes.string,
-				otherValue: PropTypes.string,
-				onEnumChange: PropTypes.func,
-				onOtherChange: PropTypes.func,
-				isRequired: PropTypes.bool,
-				isMultiSelect: PropTypes.bool
-		};
-		
-		
-		static contextTypes = {
-				isReadOnlyMode: PropTypes.bool
-		};
-		
-		state = {
-				otherInputDisabled: !this.props.otherValue
-		};
-		
-		oldProps = {
-				selectedEnum: '',
-				otherValue: '',
-				multiSelectedEnum: []
-		};
-		
-		render() {
-				let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props;
-				
-				let currentMultiSelectedEnum = [];
-				let currentSelectedEnum = '';
-				let {otherInputDisabled} = this.state;
-				if (isMultiSelect) {
-						currentMultiSelectedEnum = multiSelectedEnum;
-						if (!otherInputDisabled) {
-								currentSelectedEnum =
-										multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
-						}
-				}
-				else {
-						currentSelectedEnum = selectedEnum;
-				}
-				
-				let isReadOnlyMode = this.context.isReadOnlyMode;
-				
-				return (
-						<div
-								className={classNames('form-group', {'required' : validations.required , 'has-error' : hasError})}>
-								<label className='control-label'>{label}</label>
-								{isMultiSelect && otherInputDisabled ?
-								 <Select
-										 ref='_myInput'
-										 value={currentMultiSelectedEnum}
-										 className='options-input'
-										 clearable={false}
-										 required={isRequired}
-										 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
-										 onBlur={() => onBlur()}
-										 onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
-										 options={this.renderMultiSelectOptions(values)}
-										 multi/> :
-								 <div className={classNames('input-options',{'has-error' : hasError})}>
-										 <select
-												 ref={'_myInput'}
-												 label={label}
-												 className='form-control input-options-select'
-												 value={currentSelectedEnum}
-												 style={{'width' : otherInputDisabled ? '100%' : '95px'}}
-												 onBlur={() => onBlur()}
-												 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
-												 onChange={ value => this.enumChanged(value)}
-												 type='select'>
-												 {values &&
-												 values.length &&
-												 values.map(val => this.renderOptions(val))}
-												 {onOtherChange && <option key='other'
-												                           value={other.OTHER}>{i18n(
-														 other.OTHER)}</option>}
-												 {children}
-										 </select>
-										
-										 {!otherInputDisabled && <div className='input-options-separator'/>}
-										 <input
-												 className='form-control input-options-other'
-												 placeholder={i18n('other')}
-												 ref='_otherValue'
-												 style={{'display' : otherInputDisabled ? 'none' : 'block'}}
-												 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
-												 value={otherValue || ''}
-												 onBlur={() => onBlur()}
-												 onChange={() => this.changedOtherInput()}/>
-								 </div>
-								}
-						</div>
-				);
-		}
-		
-		renderOptions(val) {
-				return (
-						<option key={val.enum} value={val.enum}>{val.title}</option>
-				);
-		}
-		
-		
-		renderMultiSelectOptions(values) {
-				let {onOtherChange} = this.props;
-				let optionsList = [];
-				if (onOtherChange) {
-						optionsList = values.map(option => {
-								return {
-										label: option.title,
-										value: option.enum,
-								};
-						}).concat([{
-								label: i18n(other.OTHER),
-								value: i18n(other.OTHER),
-						}]);
-				}
-				else {
-						optionsList = values.map(option => {
-								return {
-										label: option.title,
-										value: option.enum,
-								};
-						});
-				}
-				if (optionsList.length > 0 && optionsList[0].value === '') {
-						optionsList.shift();
-				}
-				return optionsList;
-		}
-		
-		getValue() {
-				let res = '';
-				let {isMultiSelect} = this.props;
-				let {otherInputDisabled} = this.state;
-				
-				if (otherInputDisabled) {
-						res =
-								isMultiSelect
-										? this.refs._myInput.getValue()
-										: this.refs._myInput.value;
-				} else {
-						res = this.refs._otherValue.value;
-				}
-				return res;
-		}
-		
-		enumChanged() {
-				let enumValue = this.refs._myInput.value;
-				let {onEnumChange, isMultiSelect, onChange} = this.props;
-				this.setState({
-						otherInputDisabled: enumValue !== other.OTHER
-				});
-				if (onEnumChange) {
-						onEnumChange(isMultiSelect ? [enumValue] : enumValue);
-				}
-				
-				if (onChange) {
-						onChange(enumValue);
-				}
-				
-		}
-		
-		multiSelectEnumChanged(enumValue) {
-				let {onEnumChange} = this.props;
-				let selectedValues = enumValue.map(enumVal => {
-						return enumVal.value;
-				});
-				
-				if (this.state.otherInputDisabled === false) {
-						selectedValues.shift();
-				}
-				else if (selectedValues.includes(i18n(other.OTHER))) {
-						selectedValues = [i18n(other.OTHER)];
-				}
-				
-				this.setState({
-						otherInputDisabled: !selectedValues.includes(i18n(other.OTHER))
-				});
-				onEnumChange(selectedValues);
-		}
-		
-		changedOtherInput() {
-				let {onOtherChange} = this.props;
-				onOtherChange(this.refs._otherValue.value);
-		}
-		
-		componentDidUpdate() {
-				let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
-				if (this.oldProps.otherValue !== otherValue
-						|| this.oldProps.selectedEnum !== selectedEnum
-						|| this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
-						this.oldProps = {
-								otherValue,
-								selectedEnum,
-								multiSelectedEnum
-						};
-						onInputChange();
-				}
-		}
-		
+
+  static propTypes = {
+    values: PropTypes.arrayOf(PropTypes.shape({
+      enum: PropTypes.string,
+      title: PropTypes.string
+    })),
+    isEnabledOther: PropTypes.bool,
+    title: PropTypes.string,
+    selectedValue: PropTypes.string,
+    multiSelectedEnum: PropTypes.array,
+    selectedEnum: PropTypes.string,
+    otherValue: PropTypes.string,
+    onEnumChange: PropTypes.func,
+    onOtherChange: PropTypes.func,
+    isRequired: PropTypes.bool,
+    isMultiSelect: PropTypes.bool
+  };
+
+
+  static contextTypes = {
+    isReadOnlyMode: PropTypes.bool
+  };
+
+  state = {
+    otherInputDisabled: !this.props.otherValue
+  };
+
+  oldProps = {
+    selectedEnum: '',
+    otherValue: '',
+    multiSelectedEnum: []
+  };
+
+  render() {
+    let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props;
+
+    let currentMultiSelectedEnum = [];
+    let currentSelectedEnum = '';
+    let {otherInputDisabled} = this.state;
+    if (isMultiSelect) {
+      currentMultiSelectedEnum = multiSelectedEnum;
+      if (!otherInputDisabled) {
+        currentSelectedEnum =
+          multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
+      }
+    }
+    else {
+      currentSelectedEnum = selectedEnum;
+    }
+
+    let isReadOnlyMode = this.context.isReadOnlyMode;
+
+    return (
+      <div
+        className={classNames('form-group', {'required' : validations.required , 'has-error' : hasError})}>
+        <label className='control-label'>{label}</label>
+        {isMultiSelect && otherInputDisabled ?
+          <Select
+            ref='_myInput'
+            value={currentMultiSelectedEnum}
+            className='options-input'
+            clearable={false}
+            required={isRequired}
+            disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+            onBlur={() => onBlur()}
+            onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
+            options={this.renderMultiSelectOptions(values)}
+            multi/> :
+          <div className={classNames('input-options',{'has-error' : hasError})}>
+            <select
+              ref={'_myInput'}
+              label={label}
+              className='form-control input-options-select'
+              value={currentSelectedEnum}
+              style={{'width' : otherInputDisabled ? '100%' : '95px'}}
+              onBlur={() => onBlur()}
+              disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+              onChange={ value => this.enumChanged(value)}
+              type='select'>
+              {values &&
+              values.length &&
+              values.map(val => this.renderOptions(val))}
+              {onOtherChange && <option key='other'
+                                        value={other.OTHER}>{i18n(
+                other.OTHER)}</option>}
+              {children}
+            </select>
+
+            {!otherInputDisabled && <div className='input-options-separator'/>}
+            <input
+              className='form-control input-options-other'
+              placeholder={i18n('other')}
+              ref='_otherValue'
+              style={{'display' : otherInputDisabled ? 'none' : 'block'}}
+              disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+              value={otherValue || ''}
+              onBlur={() => onBlur()}
+              onChange={() => this.changedOtherInput()}/>
+          </div>
+        }
+      </div>
+    );
+  }
+
+  renderOptions(val) {
+    return (
+      <option key={val.enum} value={val.enum}>{val.title}</option>
+    );
+  }
+
+
+  renderMultiSelectOptions(values) {
+    let {onOtherChange} = this.props;
+    let optionsList = [];
+    if (onOtherChange) {
+      optionsList = values.map(option => {
+        return {
+          label: option.title,
+          value: option.enum,
+        };
+      }).concat([{
+        label: i18n(other.OTHER),
+        value: i18n(other.OTHER),
+      }]);
+    }
+    else {
+      optionsList = values.map(option => {
+        return {
+          label: option.title,
+          value: option.enum,
+        };
+      });
+    }
+    if (optionsList.length > 0 && optionsList[0].value === '') {
+      optionsList.shift();
+    }
+    return optionsList;
+  }
+
+  getValue() {
+    let res = '';
+    let {isMultiSelect} = this.props;
+    let {otherInputDisabled} = this.state;
+
+    if (otherInputDisabled) {
+      res =
+        isMultiSelect
+          ? this.refs._myInput.getValue()
+          : this.refs._myInput.value;
+    } else {
+      res = this.refs._otherValue.value;
+    }
+    return res;
+  }
+
+  enumChanged() {
+    let enumValue = this.refs._myInput.value;
+    let {onEnumChange, isMultiSelect, onChange} = this.props;
+    this.setState({
+      otherInputDisabled: enumValue !== other.OTHER
+    });
+    if (onEnumChange) {
+      onEnumChange(isMultiSelect ? [enumValue] : enumValue);
+    }
+
+    if (onChange) {
+      onChange(enumValue);
+    }
+
+  }
+
+  multiSelectEnumChanged(enumValue) {
+    let {onEnumChange} = this.props;
+    let selectedValues = enumValue.map(enumVal => {
+      return enumVal.value;
+    });
+
+    if (this.state.otherInputDisabled === false) {
+      selectedValues.shift();
+    }
+    else if (selectedValues.includes(i18n(other.OTHER))) {
+      selectedValues = [i18n(other.OTHER)];
+    }
+
+    this.setState({
+      otherInputDisabled: !selectedValues.includes(i18n(other.OTHER))
+    });
+    onEnumChange(selectedValues);
+  }
+
+  changedOtherInput() {
+    let {onOtherChange} = this.props;
+    onOtherChange(this.refs._otherValue.value);
+  }
+
+  componentDidUpdate() {
+    let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
+    if (this.oldProps.otherValue !== otherValue
+      || this.oldProps.selectedEnum !== selectedEnum
+      || this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
+      this.oldProps = {
+        otherValue,
+        selectedEnum,
+        multiSelectedEnum
+      };
+      onInputChange();
+    }
+  }
+
 }
 
 export default InputOptions;