cluedin-widget
Version:
This is the project for creating and managing widgets in CluedIn.
103 lines (86 loc) • 3.46 kB
JSX
import React, { Component } from 'react';
import SearchBox from '../search/searchBox.jsx';
import ReactDom from 'react-dom';
export default class CluedInSearchBox extends Component {
constructor( props ) {
super( props );
this.state = { index: -1 };
}
updateSearchValue( e ) {
const { onSearchQueryChanged, onEnter, suggestedSearches } = this.props;
const { index } = this.state;
let searchBoxInput = this.refs.searchBoxInput;
let value = searchBoxInput.value;
let autoComplete = this.refs.autoComplete;
if ( e.key === 'Enter' ) {
if ( index <= 0 ) {
onEnter( value );
} else {
onEnter( suggestedSearches[ index ].Name );
}
} else if ( e.key === 'Escape' ) {
this.setState( { index: -1, escape: true } );
} else if ( e.key === 'ArrowDown' ) {
if ( this.state.index === suggestedSearches.length ) {
this.setState( { index: 0, escape: false } );
} else {
this.setState( { index: (this.state.index + 1), escape: false } );
}
}
else if ( e.key === 'ArrowUp' ) {
if ( this.state.index >= 0 ) {
this.setState( { index: (this.state.index - 1), escape: false } );
}
} else {
this.setState( { index: -1, escape: false } );
onSearchQueryChanged( value );
}
}
onSearchButtonClick() {
let searchBoxInput = this.refs.searchBoxInput;
let value = searchBoxInput.value;
this.setState( { index: -1, escape: true } );
this.props.onEnter( value );
}
onSuggestedClick( index ) {
const { suggestedSearches } = this.props;
this.setState( { index: -1, escape: true } );
this.props.onEnter( suggestedSearches[ index ].Name );
}
componentDidMount() {
var self = this;
var domNode = ReactDom.findDOMNode( this );
document.addEventListener( 'click', function( e ) {
if ( (!domNode || !domNode.contains( e.target )) ) {
self.setState( { index: -1, escape: true } );
}
}, true );
}
render() {
const { suggestedSearches } = this.props;
const { index, escape } = this.state;
let autoComplete;
let self = this;
if ( !escape ) {
autoComplete = <ul ref="autoComplete" className="cluedIn_searchBox_autoComplete">
{ suggestedSearches.map( ( s, currentIndex ) => {
var nameToRender = s.Name;
let selectedClass = "";
if ( index === currentIndex ) {
selectedClass = "selected";
}
return (
<li key={currentIndex} onClick={self.onSuggestedClick.bind(self, currentIndex)}
className={selectedClass}>{nameToRender}</li>);
} )}
</ul>;
}
return (
<div className="cluedIn_searchBox">
<input ref="searchBoxInput" onKeyUp={this.updateSearchValue.bind(this)} type="text"/>
<i onClick={this.onSearchButtonClick.bind(this)} className="cluedIn_searchBox_button fa fa-search"></i>
{autoComplete}
</div>
);
}
};