Initial coomit for AAI-UI(sparky-fe)

Change-Id: I9f8482824a52bac431c100939899e760c0fa4fdb
Signed-off-by: ARULNA <arul.nambi@amdocs.com>

1 files changed, 245 insertions, 0 deletions

diff --git a/src/generic-components/input/inputOptions/InputOptions.jsx b/src/generic-components/input/inputOptions/InputOptions.jsx
new file mode 100644
index 0000000..334cceb
--- /dev/null
+++ b/src/generic-components/input/inputOptions/InputOptions.jsx
@@ -0,0 +1,245 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import React from 'react';
+import i18n from 'utils/i18n/i18n.js';
+import classNames from 'classnames';
+import Select from 'generic-components/input/SelectInput.jsx';
+
+export const other = {OTHER: 'Other'};
+
+class InputOptions extends React.Component {
+		
+		static propTypes = {
+				values: React.PropTypes.arrayOf(React.PropTypes.shape({
+						enum: React.PropTypes.string,
+						title: React.PropTypes.string
+				})),
+				isEnabledOther: React.PropTypes.bool,
+				title: React.PropTypes.string,
+				selectedValue: React.PropTypes.string,
+				multiSelectedEnum: React.PropTypes.array,
+				selectedEnum: React.PropTypes.string,
+				otherValue: React.PropTypes.string,
+				onEnumChange: React.PropTypes.func,
+				onOtherChange: React.PropTypes.func,
+				isRequired: React.PropTypes.bool,
+				isMultiSelect: React.PropTypes.bool
+		};
+		
+		
+		static contextTypes = {
+				isReadOnlyMode: React.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;