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