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 'sdc-ui/lib/react/SVGIcon.js';
  19 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
  20
  21 const ExpandableInputClosed = ({iconType, onClick}) => (
  22         <SVGIcon className='expandable-input-wrapper closed'  data-test-id='expandable-input-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                                                 data-test-id='expandable-input-opened'
  62                                                 value={value}
  63                                                 ref={(input) => this.searchInputNode = input}
  64                                                 className='expandable-active'
  65                                                 groupClassName='expandable-input-control'
  66                                                 onChange={e => onChange(e)}
  67                                                 onKeyDown={e => this.handleKeyDown(e)}
  68                                                 onBlur={handleBlur}/>
  69                                         {value && <SVGIcon data-test-id='expandable-input-close-btn' onClick={() => this.handleClose()} name='close' />}
  70                                         {!value && <SVGIcon name={iconType} onClick={handleBlur}/>}
  71                                 </div>
  72                 );
  73         }
  74 }
  75
  76 class ExpandableInput extends React.Component {
  77
  78         static propTypes = {
  79                 iconType: React.PropTypes.string,
  80                 onChange: React.PropTypes.func,
  81                 value: React.PropTypes.string
  82         };
  83
  84         state = {showInput: false};
  85
  86         closeInput(){
  87                 if (!this.props.value) {
  88                         this.setState({showInput: false});
  89                 }
  90         }
  91
  92         getValue(){
  93                 return this.props.value;
  94         }
  95
  96         render(){
  97                 let {iconType, value, onChange = false} = this.props;
  98                 return (
  99                         <div className='expandable-input-top'>
 100                                 {this.state.showInput &&
 101                                         <ExpandableInputOpened
 102                                                 key='open'
 103                                                 iconType={iconType}
 104                                                 onChange={onChange}
 105                                                 value={value}
 106                                                 handleKeyDown={(e) => this.handleKeyDown(e)}
 107                                                 handleBlur={() => this.closeInput()}/>
 108                                 }
 109                                 {!this.state.showInput && <ExpandableInputClosed key='closed' iconType={iconType} onClick={() => this.setState({showInput: true})} />}
 110                         </div>
 111                                 );
 112         }
 113 }
 114
 115
 116 export default ExpandableInput;