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

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import ReactDOM from 'react-dom';
  18 import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
  19 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
  20
  21 const ExpandableInputClosed = ({iconType, onClick}) => (
  22         <SVGIcon className='expandable-input-wrapper closed' name={iconType} onClick={onClick} />
  23 );
  24
  25 class ExpandableInputOpened extends React.Component {
  26         componentDidMount(){
  27                 this.rawDomNode = ReactDOM.findDOMNode(this.searchInputNode.inputWrapper);
  28                 this.rawDomNode.focus();
  29         }
  30
  31         componentWillReceiveProps(newProps){
  32                 if (!newProps.value){
  33                         if (!(document.activeElement === this.rawDomNode)){
  34                                 this.props.handleBlur();
  35                         }
  36                 }
  37         }
  38
  39         handleClose(){
  40                 this.props.onChange('');
  41                 this.rawDomNode.focus();
  42         }
  43
  44         handleKeyDown(e){
  45                 if (e.key === 'Escape'){
  46                         e.preventDefault();
  47                         if (this.props.value) {
  48                                 this.handleClose();
  49                         } else {
  50                                 this.rawDomNode.blur();
  51                         }
  52                 };
  53         }
  54
  55         render() {
  56                 let {iconType, value, onChange, handleBlur} = this.props;
  57                 return (
  58                                 <div className='expandable-input-wrapper opened' key='expandable'>
  59                                         <Input
  60                                                 type='text'
  61                                                 value={value}
  62                                                 ref={(input) => this.searchInputNode = input}
  63                                                 className='expandable-active'
  64                                                 groupClassName='expandable-input-control'
  65                                                 onChange={e => onChange(e)}
  66                                                 onKeyDown={e => this.handleKeyDown(e)}
  67                                                 onBlur={handleBlur}/>
  68                                         {value && <SVGIcon onClick={() => this.handleClose()} name='close' />}
  69                                         {!value && <SVGIcon name={iconType} onClick={handleBlur}/>}
  70                                 </div>
  71                 );
  72         }
  73 }
  74
  75 class ExpandableInput extends React.Component {
  76
  77         static propTypes = {
  78                 iconType: React.PropTypes.string,
  79                 onChange: React.PropTypes.func,
  80                 value: React.PropTypes.string
  81         };
  82
  83         state = {showInput: false};
  84
  85         closeInput(){
  86                 if (!this.props.value) {
  87                         this.setState({showInput: false});
  88                 }
  89         }
  90
  91         getValue(){
  92                 return this.props.value;
  93         }
  94
  95         render(){
  96                 let {iconType, value, onChange = false} = this.props;
  97                 return (
  98                         <div className='expandable-input-top'>
  99                                 {this.state.showInput &&
 100                                         <ExpandableInputOpened
 101                                                 key='open'
 102                                                 iconType={iconType}
 103                                                 onChange={onChange}
 104                                                 value={value}
 105                                                 handleKeyDown={(e) => this.handleKeyDown(e)}
 106                                                 handleBlur={() => this.closeInput()}/>
 107                                 }
 108                                 {!this.state.showInput && <ExpandableInputClosed key='closed' iconType={iconType} onClick={() => this.setState({showInput: true})} />}
 109                         </div>
 110                                 );
 111         }
 112 }
 113
 114
 115 export default ExpandableInput;