UNPKG

cluedin-widget

Version:

This is the project for creating and managing widgets in CluedIn.

103 lines (86 loc) 3.46 kB
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> ); } };