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=========================================================
22 * The HTML structure here is aligned with bootstrap HTML structure for form
23 * elements. In this way we have proper styling and it is aligned with other
24 * form elements on screen.
26 * Select and MultiSelect options:
28 * label - the label to be shown which paired with the input
30 * all other "react-select" props - as documented on
31 * http://jedwatson.github.io/react-select/
33 * https://github.com/JedWatson/react-select
35 import React, {Component} from 'react';
36 import Select from 'react-select';
37 import 'react-select/dist/react-select.css';
39 class SelectInput extends Component {
44 let {label, value, ...other} = this.props;
46 <div className='validation-input-wrapper dropdown-multi-select'>
47 <div className='form-group'>
48 {label && <label className='control-label'>{label}</label>}
49 <Select ref='_myInput'
50 onChange={value => this.onSelectChanged(value)} {...other}
58 return this.inputValue && this.inputValue.length ? this.inputValue : '';
61 onSelectChanged(value) {
62 this.props.onMultiSelectChanged(value);
66 let {value} = this.props;
67 this.inputValue = value ? value : [];
70 componentDidUpdate() {
71 if (this.inputValue !== this.props.value) {
72 this.inputValue = this.props.value;
77 export default SelectInput;