2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017-2018 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 import React from 'react';
22 import i18n from 'utils/i18n/i18n.js';
23 import classNames from 'classnames';
24 import Select from 'generic-components/input/SelectInput.jsx';
26 export const other = {OTHER: 'Other'};
28 class InputOptions extends React.Component {
31 values: React.PropTypes.arrayOf(React.PropTypes.shape({
32 enum: React.PropTypes.string,
33 title: React.PropTypes.string
35 isEnabledOther: React.PropTypes.bool,
36 title: React.PropTypes.string,
37 selectedValue: React.PropTypes.string,
38 multiSelectedEnum: React.PropTypes.array,
39 selectedEnum: React.PropTypes.string,
40 otherValue: React.PropTypes.string,
41 onEnumChange: React.PropTypes.func,
42 onOtherChange: React.PropTypes.func,
43 isRequired: React.PropTypes.bool,
44 isMultiSelect: React.PropTypes.bool
48 static contextTypes = {
49 isReadOnlyMode: React.PropTypes.bool
53 otherInputDisabled: !this.props.otherValue
63 let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props;
65 let currentMultiSelectedEnum = [];
66 let currentSelectedEnum = '';
67 let {otherInputDisabled} = this.state;
69 currentMultiSelectedEnum = multiSelectedEnum;
70 if (!otherInputDisabled) {
72 multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
76 currentSelectedEnum = selectedEnum;
79 let isReadOnlyMode = this.context.isReadOnlyMode;
83 className={classNames('form-group', {'required' : validations.required , 'has-error' : hasError})}>
84 <label className='control-label'>{label}</label>
85 {isMultiSelect && otherInputDisabled ?
88 value={currentMultiSelectedEnum}
89 className='options-input'
92 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
93 onBlur={() => onBlur()}
94 onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
95 options={this.renderMultiSelectOptions(values)}
97 <div className={classNames('input-options',{'has-error' : hasError})}>
101 className='form-control input-options-select'
102 value={currentSelectedEnum}
103 style={{'width' : otherInputDisabled ? '100%' : '95px'}}
104 onBlur={() => onBlur()}
105 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
106 onChange={ value => this.enumChanged(value)}
110 values.map(val => this.renderOptions(val))}
111 {onOtherChange && <option key='other'
112 value={other.OTHER}>{i18n(
113 other.OTHER)}</option>}
117 {!otherInputDisabled && <div className='input-options-separator'/>}
119 className='form-control input-options-other'
120 placeholder={i18n('other')}
122 style={{'display' : otherInputDisabled ? 'none' : 'block'}}
123 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
124 value={otherValue || ''}
125 onBlur={() => onBlur()}
126 onChange={() => this.changedOtherInput()}/>
135 <option key={val.enum} value={val.enum}>{val.title}</option>
140 renderMultiSelectOptions(values) {
141 let {onOtherChange} = this.props;
142 let optionsList = [];
144 optionsList = values.map(option => {
150 label: i18n(other.OTHER),
151 value: i18n(other.OTHER),
155 optionsList = values.map(option => {
162 if (optionsList.length > 0 && optionsList[0].value === '') {
170 let {isMultiSelect} = this.props;
171 let {otherInputDisabled} = this.state;
173 if (otherInputDisabled) {
176 ? this.refs._myInput.getValue()
177 : this.refs._myInput.value;
179 res = this.refs._otherValue.value;
185 let enumValue = this.refs._myInput.value;
186 let {onEnumChange, isMultiSelect, onChange} = this.props;
188 otherInputDisabled: enumValue !== other.OTHER
191 onEnumChange(isMultiSelect ? [enumValue] : enumValue);
200 multiSelectEnumChanged(enumValue) {
201 let {onEnumChange} = this.props;
202 let selectedValues = enumValue.map(enumVal => {
203 return enumVal.value;
206 if (this.state.otherInputDisabled === false) {
207 selectedValues.shift();
209 else if (selectedValues.includes(i18n(other.OTHER))) {
210 selectedValues = [i18n(other.OTHER)];
214 otherInputDisabled: !selectedValues.includes(i18n(other.OTHER))
216 onEnumChange(selectedValues);
219 changedOtherInput() {
220 let {onOtherChange} = this.props;
221 onOtherChange(this.refs._otherValue.value);
224 componentDidUpdate() {
225 let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
226 if (this.oldProps.otherValue !== otherValue
227 || this.oldProps.selectedEnum !== selectedEnum
228 || this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
240 export default InputOptions;