summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 12:57:33 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 13:47:13 +0200
commitefa037d34be7b1570efdc767c79fad8d4005f10e (patch)
treecf1036ba2728dea8a61492b678fa91954e629403 /openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
parentf5f13c4f6b6fe3b4d98e349dfd7db59339803436 (diff)
Add new code new version
Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx')
-rw-r--r--openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx77
1 files changed, 77 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
new file mode 100644
index 0000000000..3ac3fcad28
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import FontAwesome from 'react-fontawesome';
+import classnames from 'classnames';
+import Input from 'react-bootstrap/lib/Input';
+
+
+class ExpandableInput extends React.Component {
+ constructor(props){
+ super(props);
+ this.state = {showInput: false, value: ''};
+ this.toggleInput = this.toggleInput.bind(this);
+ this.handleFocus = this.handleFocus.bind(this);
+ this.handleInput = this.handleInput.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ }
+
+ toggleInput(){
+ if (!this.state.showInput){
+ this.searchInputNode.refs.input.focus();
+ } else {
+ this.setState({showInput: false});
+ }
+ }
+
+ handleInput(e){
+ let {onChange} = this.props;
+
+ this.setState({value: e.target.value});
+ onChange(e);
+ }
+
+ handleClose(){
+ this.handleInput({target: {value: ''}});
+ this.searchInputNode.refs.input.focus();
+ }
+
+ handleFocus(){
+ if (!this.state.showInput){
+ this.setState({showInput: true});
+ }
+ }
+
+ getValue(){
+ return this.state.value;
+ }
+
+ render(){
+ let {iconType} = this.props;
+
+ let inputClasses = classnames({
+ 'expandable-active': this.state.showInput,
+ 'expandable-not-active': !this.state.showInput
+ });
+
+ let iconClasses = classnames(
+ 'expandable-icon',
+ {'expandable-icon-active': this.state.showInput}
+ );
+
+ return (
+ <div className='expandable-input-wrapper'>
+ <Input
+ type='text'
+ value={this.state.value}
+ ref={(input) => this.searchInputNode = input}
+ className={inputClasses}
+ groupClassName='expandable-input-control'
+ onChange={e => this.handleInput(e)}
+ onFocus={this.handleFocus}/>
+ {this.state.showInput && this.state.value && <FontAwesome onClick={this.handleClose} name='close' className='expandable-close-button'/>}
+ {!this.state.value && <FontAwesome onClick={this.toggleInput} name={iconType} className={iconClasses}/>}
+ </div>
+ );
+ }
+}
+
+export default ExpandableInput;