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 PropTypes from 'prop-types';
  18 import ReactDOM from 'react-dom';
  19 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  20 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
  21
  22 const ExpandableInputClosed = ({iconType, onClick}) => (
  23         <SVGIcon className='expandable-input-wrapper closed'  data-test-id='expandable-input-closed' name={iconType} onClick={onClick} />
  24 );
  25
  26 class ExpandableInputOpened extends React.Component {
  27         componentDidMount(){
  28                 this.rawDomNode = ReactDOM.findDOMNode(this.searchInputNode.inputWrapper);
  29                 this.rawDomNode.focus();
  30         }
  31
  32         componentWillReceiveProps(newProps){
  33                 if (!newProps.value){
  34                         if (!(document.activeElement === this.rawDomNode)){
  35                                 this.props.handleBlur();
  36                         }
  37                 }
  38         }
  39
  40         handleClose(){
  41                 this.props.onChange('');
  42                 this.rawDomNode.focus();
  43         }
  44
  45         handleKeyDown(e){
  46                 if (e.key === 'Escape'){
  47                         e.preventDefault();
  48                         if (this.props.value) {
  49                                 this.handleClose();
  50                         } else {
  51                                 this.rawDomNode.blur();
  52                         }
  53                 };
  54         }
  55
  56         render() {
  57                 let {iconType, value, onChange, handleBlur} = this.props;
  58                 return (
  59                                 <div className='expandable-input-wrapper opened' key='expandable'>
  60                                         <Input
  61                                                 type='text'
  62                                                 data-test-id='expandable-input-opened'
  63                                                 value={value}
  64                                                 ref={(input) => this.searchInputNode = input}
  65                                                 className='expandable-active'
  66                                                 groupClassName='expandable-input-control'
  67                                                 onChange={e => onChange(e)}
  68                                                 onKeyDown={e => this.handleKeyDown(e)}
  69                                                 onBlur={handleBlur}/>
  70                                         {value && <SVGIcon data-test-id='expandable-input-close-btn' onClick={() => this.handleClose()} name='close' />}
  71                                         {!value && <SVGIcon name={iconType} onClick={handleBlur}/>}
  72                                 </div>
  73                 );
  74         }
  75 }
  76
  77 class ExpandableInput extends React.Component {
  78
  79         static propTypes = {
  80                 iconType: PropTypes.string,
  81                 onChange: PropTypes.func,
  82                 value: PropTypes.string
  83         };
  84
  85         state = {showInput: false};
  86
  87         closeInput(){
  88                 if (!this.props.value) {
  89                         this.setState({showInput: false});
  90                 }
  91         }
  92
  93         getValue(){
  94                 return this.props.value;
  95         }
  96
  97         render(){
  98                 let {iconType, value, onChange = false} = this.props;
  99                 return (
 100                         <div className='expandable-input-top'>
 101                                 {this.state.showInput &&
 102                                         <ExpandableInputOpened
 103                                                 key='open'
 104                                                 iconType={iconType}
 105                                                 onChange={onChange}
 106                                                 value={value}
 107                                                 handleKeyDown={(e) => this.handleKeyDown(e)}
 108                                                 handleBlur={() => this.closeInput()}/>
 109                                 }
 110                                 {!this.state.showInput && <ExpandableInputClosed key='closed' iconType={iconType} onClick={() => this.setState({showInput: true})} />}
 111                         </div>
 112                                 );
 113         }
 114 }
 115
 116
 117 export default ExpandableInput;