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

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

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>
        );
    }
};