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     constructor(props) {
  99         super(props);
 100         this.state = {
 101             showInput: !!props.value || false
 102         };
 103     }
 104
 105     showInputChange() {
 106         if (this.props.value) {
 107             this.setState({ showInput: true });
 108         }
 109     }
 110
 111     getValue() {
 112         return this.props.value;
 113     }
 114
 115     render() {
 116         let { iconType, value, onChange = false } = this.props;
 117         return (
 118             <div className="expandable-input-top">
 119                 {this.state.showInput && (
 120                     <ExpandableInputOpened
 121                         key="open"
 122                         iconType={iconType}
 123                         onChange={onChange}
 124                         value={value}
 125                         handleKeyDown={e => this.handleKeyDown(e)}
 126                         handleBlur={() => this.showInputChange()}
 127                     />
 128                 )}
 129                 {!this.state.showInput && (
 130                     <ExpandableInputClosed
 131                         key="closed"
 132                         iconType={iconType}
 133                         onClick={() => this.setState({ showInput: true })}
 134                     />
 135                 )}
 136             </div>
 137         );
 138     }
 139 }
 140
 141 export default ExpandableInput;