2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017 Amdocs
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
12 * http://www.apache.org/licenses/LICENSE-2.0
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============LICENSE_END=========================================================
21 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
23 import React from 'react';
24 import i18n from 'utils/i18n/i18n.js';
25 import classNames from 'classnames';
26 import Select from 'generic-components/input/SelectInput.jsx';
28 export const other = {OTHER: 'Other'};
30 class InputOptions extends React.Component {
33 values: React.PropTypes.arrayOf(React.PropTypes.shape({
34 enum: React.PropTypes.string,
35 title: React.PropTypes.string
37 isEnabledOther: React.PropTypes.bool,
38 title: React.PropTypes.string,
39 selectedValue: React.PropTypes.string,
40 multiSelectedEnum: React.PropTypes.array,
41 selectedEnum: React.PropTypes.string,
42 otherValue: React.PropTypes.string,
43 onEnumChange: React.PropTypes.func,
44 onOtherChange: React.PropTypes.func,
45 isRequired: React.PropTypes.bool,
46 isMultiSelect: React.PropTypes.bool
50 static contextTypes = {
51 isReadOnlyMode: React.PropTypes.bool
55 otherInputDisabled: !this.props.otherValue
65 let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props;
67 let currentMultiSelectedEnum = [];
68 let currentSelectedEnum = '';
69 let {otherInputDisabled} = this.state;
71 currentMultiSelectedEnum = multiSelectedEnum;
72 if (!otherInputDisabled) {
74 multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
78 currentSelectedEnum = selectedEnum;
81 let isReadOnlyMode = this.context.isReadOnlyMode;
85 className={classNames('form-group', {'required' : validations.required , 'has-error' : hasError})}>
86 <label className='control-label'>{label}</label>
87 {isMultiSelect && otherInputDisabled ?
90 value={currentMultiSelectedEnum}
91 className='options-input'
94 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
95 onBlur={() => onBlur()}
96 onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
97 options={this.renderMultiSelectOptions(values)}
99 <div className={classNames('input-options',{'has-error' : hasError})}>
103 className='form-control input-options-select'
104 value={currentSelectedEnum}
105 style={{'width' : otherInputDisabled ? '100%' : '95px'}}
106 onBlur={() => onBlur()}
107 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
108 onChange={ value => this.enumChanged(value)}
112 values.map(val => this.renderOptions(val))}
113 {onOtherChange && <option key='other'
114 value={other.OTHER}>{i18n(
115 other.OTHER)}</option>}
119 {!otherInputDisabled && <div className='input-options-separator'/>}
121 className='form-control input-options-other'
122 placeholder={i18n('other')}
124 style={{'display' : otherInputDisabled ? 'none' : 'block'}}
125 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
126 value={otherValue || ''}
127 onBlur={() => onBlur()}
128 onChange={() => this.changedOtherInput()}/>
137 <option key={val.enum} value={val.enum}>{val.title}</option>
142 renderMultiSelectOptions(values) {
143 let {onOtherChange} = this.props;
144 let optionsList = [];
146 optionsList = values.map(option => {
152 label: i18n(other.OTHER),
153 value: i18n(other.OTHER),
157 optionsList = values.map(option => {
164 if (optionsList.length > 0 && optionsList[0].value === '') {
172 let {isMultiSelect} = this.props;
173 let {otherInputDisabled} = this.state;
175 if (otherInputDisabled) {
178 ? this.refs._myInput.getValue()
179 : this.refs._myInput.value;
181 res = this.refs._otherValue.value;
187 let enumValue = this.refs._myInput.value;
188 let {onEnumChange, isMultiSelect, onChange} = this.props;
190 otherInputDisabled: enumValue !== other.OTHER
193 onEnumChange(isMultiSelect ? [enumValue] : enumValue);
202 multiSelectEnumChanged(enumValue) {
203 let {onEnumChange} = this.props;
204 let selectedValues = enumValue.map(enumVal => {
205 return enumVal.value;
208 if (this.state.otherInputDisabled === false) {
209 selectedValues.shift();
211 else if (selectedValues.includes(i18n(other.OTHER))) {
212 selectedValues = [i18n(other.OTHER)];
216 otherInputDisabled: !selectedValues.includes(i18n(other.OTHER))
218 onEnumChange(selectedValues);
221 changedOtherInput() {
222 let {onOtherChange} = this.props;
223 onOtherChange(this.refs._otherValue.value);
226 componentDidUpdate() {
227 let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
228 if (this.oldProps.otherValue !== otherValue
229 || this.oldProps.selectedEnum !== selectedEnum
230 || this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
242 export default InputOptions;