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 { PropTypes } from 'prop-types';
23 import i18n from 'utils/i18n/i18n.js';
24 import classNames from 'classnames';
25 import Select from 'generic-components/input/SelectInput.jsx';
27 export const other = {OTHER: 'Other'};
29 class InputOptions extends React.Component {
32 values: PropTypes.arrayOf(PropTypes.shape({
33 enum: PropTypes.string,
34 title: PropTypes.string
36 isEnabledOther: PropTypes.bool,
37 title: PropTypes.string,
38 selectedValue: PropTypes.string,
39 multiSelectedEnum: PropTypes.array,
40 selectedEnum: PropTypes.string,
41 otherValue: PropTypes.string,
42 onEnumChange: PropTypes.func,
43 onOtherChange: PropTypes.func,
44 isRequired: PropTypes.bool,
45 isMultiSelect: PropTypes.bool
49 static contextTypes = {
50 isReadOnlyMode: PropTypes.bool
54 otherInputDisabled: !this.props.otherValue
64 let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props;
66 let currentMultiSelectedEnum = [];
67 let currentSelectedEnum = '';
68 let {otherInputDisabled} = this.state;
70 currentMultiSelectedEnum = multiSelectedEnum;
71 if (!otherInputDisabled) {
73 multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
77 currentSelectedEnum = selectedEnum;
80 let isReadOnlyMode = this.context.isReadOnlyMode;
84 className={classNames('form-group', {'required' : validations.required , 'has-error' : hasError})}>
85 <label className='control-label'>{label}</label>
86 {isMultiSelect && otherInputDisabled ?
89 value={currentMultiSelectedEnum}
90 className='options-input'
93 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
94 onBlur={() => onBlur()}
95 onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
96 options={this.renderMultiSelectOptions(values)}
98 <div className={classNames('input-options',{'has-error' : hasError})}>
102 className='form-control input-options-select'
103 value={currentSelectedEnum}
104 style={{'width' : otherInputDisabled ? '100%' : '95px'}}
105 onBlur={() => onBlur()}
106 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
107 onChange={ value => this.enumChanged(value)}
111 values.map(val => this.renderOptions(val))}
112 {onOtherChange && <option key='other'
113 value={other.OTHER}>{i18n(
114 other.OTHER)}</option>}
118 {!otherInputDisabled && <div className='input-options-separator'/>}
120 className='form-control input-options-other'
121 placeholder={i18n('other')}
123 style={{'display' : otherInputDisabled ? 'none' : 'block'}}
124 disabled={isReadOnlyMode || Boolean(this.props.disabled)}
125 value={otherValue || ''}
126 onBlur={() => onBlur()}
127 onChange={() => this.changedOtherInput()}/>
136 <option key={val.enum} value={val.enum}>{val.title}</option>
141 renderMultiSelectOptions(values) {
142 let {onOtherChange} = this.props;
143 let optionsList = [];
145 optionsList = values.map(option => {
151 label: i18n(other.OTHER),
152 value: i18n(other.OTHER),
156 optionsList = values.map(option => {
163 if (optionsList.length > 0 && optionsList[0].value === '') {
171 let {isMultiSelect} = this.props;
172 let {otherInputDisabled} = this.state;
174 if (otherInputDisabled) {
177 ? this.refs._myInput.getValue()
178 : this.refs._myInput.value;
180 res = this.refs._otherValue.value;
186 let enumValue = this.refs._myInput.value;
187 let {onEnumChange, isMultiSelect, onChange} = this.props;
189 otherInputDisabled: enumValue !== other.OTHER
192 onEnumChange(isMultiSelect ? [enumValue] : enumValue);
201 multiSelectEnumChanged(enumValue) {
202 let {onEnumChange} = this.props;
203 let selectedValues = enumValue.map(enumVal => {
204 return enumVal.value;
207 if (this.state.otherInputDisabled === false) {
208 selectedValues.shift();
210 else if (selectedValues.includes(i18n(other.OTHER))) {
211 selectedValues = [i18n(other.OTHER)];
215 otherInputDisabled: !selectedValues.includes(i18n(other.OTHER))
217 onEnumChange(selectedValues);
220 changedOtherInput() {
221 let {onOtherChange} = this.props;
222 onOtherChange(this.refs._otherValue.value);
225 componentDidUpdate() {
226 let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
227 if (this.oldProps.otherValue !== otherValue
228 || this.oldProps.selectedEnum !== selectedEnum
229 || this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
241 export default InputOptions;