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

   1 import React from 'react';
   2 import FontAwesome from 'react-fontawesome';
   3 import classnames from 'classnames';
   4 import Input from 'react-bootstrap/lib/Input';
   5
   6
   7 class ExpandableInput extends React.Component {
   8         constructor(props){
   9                 super(props);
  10                 this.state = {showInput: false, value: ''};
  11                 this.toggleInput = this.toggleInput.bind(this);
  12                 this.handleFocus = this.handleFocus.bind(this);
  13                 this.handleInput = this.handleInput.bind(this);
  14                 this.handleClose = this.handleClose.bind(this);
  15         }
  16
  17         toggleInput(){
  18                 if (!this.state.showInput){
  19                         this.searchInputNode.refs.input.focus();
  20                 } else {
  21                         this.setState({showInput: false});
  22                 }
  23         }
  24
  25         handleInput(e){
  26                 let {onChange} = this.props;
  27
  28                 this.setState({value: e.target.value});
  29                 onChange(e);
  30         }
  31
  32         handleClose(){
  33                 this.handleInput({target: {value: ''}});
  34                 this.searchInputNode.refs.input.focus();
  35         }
  36
  37         handleFocus(){
  38                 if (!this.state.showInput){
  39                         this.setState({showInput: true});
  40                 }
  41         }
  42
  43         getValue(){
  44                 return this.state.value;
  45         }
  46
  47         render(){
  48                 let {iconType} = this.props;
  49
  50                 let inputClasses = classnames({
  51                         'expandable-active': this.state.showInput,
  52                         'expandable-not-active': !this.state.showInput
  53                 });
  54
  55                 let iconClasses = classnames(
  56                         'expandable-icon',
  57                         {'expandable-icon-active': this.state.showInput}
  58                 );
  59
  60                 return (
  61                         <div className='expandable-input-wrapper'>
  62                                 <Input
  63                                         type='text'
  64                                         value={this.state.value}
  65                                         ref={(input) => this.searchInputNode = input}
  66                                         className={inputClasses}
  67                                         groupClassName='expandable-input-control'
  68                                         onChange={e => this.handleInput(e)}
  69                                         onFocus={this.handleFocus}/>
  70                                 {this.state.showInput && this.state.value && <FontAwesome onClick={this.handleClose} name='close' className='expandable-close-button'/>}
  71                                 {!this.state.value && <FontAwesome onClick={this.toggleInput} name={iconType} className={iconClasses}/>}
  72                         </div>
  73                 );
  74         }
  75 }
  76
  77 export default ExpandableInput;