openecomp-ui/src/nfvo-components/input/SelectInput.jsx

   1 /**
   2  * The HTML structure here is aligned with bootstrap HTML structure for form elements.
   3  * In this way we have proper styling and it is aligned with other form elements on screen.
   4  *
   5  * Select and MultiSelect options:
   6  *
   7  * label - the label to be shown which paired with the input
   8  *
   9  * all other "react-select" props - as documented on
  10  * http://jedwatson.github.io/react-select/
  11  * or
  12  * https://github.com/JedWatson/react-select
  13  */
  14 import React, {Component} from 'react';
  15 import Select from 'react-select';
  16
  17 class SelectInput extends Component {
  18
  19         inputValue = [];
  20
  21         render() {
  22                 let {label, value, ...other} = this.props;
  23                 return (
  24                         <div className='validation-input-wrapper dropdown-multi-select'>
  25                                 <div className='form-group'>
  26                                         {label && <label className='control-label'>{label}</label>}
  27                                         <Select ref='_myInput' onChange={value => this.onSelectChanged(value)} {...other} value={value} />
  28                                 </div>
  29                         </div>
  30                 );
  31         }
  32
  33         getValue() {
  34                 return this.inputValue && this.inputValue.length ? this.inputValue : '';
  35         }
  36
  37         onSelectChanged(value) {
  38                 this.props.onMultiSelectChanged(value);
  39         }
  40
  41         componentDidMount() {
  42                 let {value} = this.props;
  43                 this.inputValue = value ? value : [];
  44         }
  45         componentDidUpdate() {
  46                 if (this.inputValue !== this.props.value) {
  47                         this.inputValue = this.props.value;
  48                 }
  49         }
  50 }
  51
  52 export default SelectInput;