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 ReactDom from 'react-dom';
import iso from '../../../iso';

export default class CluedInSearchBox extends Component {

  constructor(props) {
    super(props);
    this.state = { index: -1, valueForInput: props.defaultValue };
    this.searchDebounce = iso.func.debounce(this.search, 300);
  }

  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(value) {
    const { onSearchQueryChanged } = this.props;

    onSearchQueryChanged(value);
  }

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

    this.searchDebounce(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.searchWrap.bind(this)}
               value={this.state.valueForInput || ""}
               type="text"/>
        <i onClick={this.onSearchButtonClick.bind(this)} className="cluedIn_searchBox_button fa fa-search"></i>
        {autoComplete}
      </div>
    );
  }
};