cluedin-widget/core/components/search/searchBox.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

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, valueForInput: props.defaultValue };        
    }    

    componentWillReceiveProps( nextProp ) {
        if( this.props.defaultValue !== nextProp.defaultValue ) {
            this.setState( {
                valueForInput: nextProp.defaultValue
            } );
        }
    }

    updateSearchValue( e ) {
        const { onEnter, suggestedSearches } = this.props;
        const { index, valueForInput } = this.state;

        if( e.key === 'Enter' ) {
            if( index < 0 ) {
                onEnter( valueForInput  || '*');
            } else {
                onEnter( suggestedSearches[ index ].Name );
            }
            this.setState( { index: -1, escape: true } );
        } 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 );
    }

    search( e ) {
        const { onSearchQueryChanged } = this.props;

        this.setState( { valueForInput: e.target.value } );

        onSearchQueryChanged( e.target.value );
    }

    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" onKeyUp={this.updateSearchValue.bind(this)}>
                <input placeholder="Search..." ref="searchBoxInput" onChange={this.search.bind(this)} value={this.state.valueForInput || ""}
                       type="text"/>
                <i onClick={this.onSearchButtonClick.bind(this)} className="cluedIn_searchBox_button fa fa-search"></i>
                {autoComplete}
            </div>
        );
    }
};