Mailspring/app/internal_packages/thread-search/lib/thread-search-bar.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Menu, SearchBar, ListensToFluxStore } from 'mailspring-component-kit';
import { FocusedPerspectiveStore } from 'mailspring-exports';
import SearchStore from './search-store';
import SearchActions from './search-actions';

class ThreadSearchBar extends Component {
  static displayName = 'ThreadSearchBar';

  static propTypes = {
    query: PropTypes.string,
    isSearching: PropTypes.bool,
    suggestions: PropTypes.array,
    perspective: PropTypes.object,
  };

  _onSelectSuggestion = suggestion => {
    if (suggestion.thread) {
      SearchActions.querySubmitted(`"${suggestion.thread.subject}"`);
    } else {
      SearchActions.querySubmitted(suggestion.value);
    }
  };

  _onSearchQueryChanged = query => {
    SearchActions.queryChanged(query);
    if (query === '') {
      this._onClearSearchQuery();
    }
  };

  _onSubmitSearchQuery = query => {
    SearchActions.querySubmitted(query);
  };

  _onClearSearchQuery = () => {
    SearchActions.querySubmitted('');
  };

  _onClearSearchSuggestions = () => {
    SearchActions.searchBlurred();
  };

  _renderSuggestion = suggestion => {
    if (suggestion.contact) {
      return <Menu.NameEmailItem name={suggestion.contact.name} email={suggestion.contact.email} />;
    }
    if (suggestion.thread) {
      return suggestion.thread.subject;
    }
    if (suggestion.customElement) {
      return suggestion.customElement;
    }
    return suggestion.label;
  };

  _placeholder = () => {
    if (this.props.perspective.isInbox()) {
      return 'Search all email';
    }
    return `Search ${this.props.perspective.name || ''}`;
  };

  render() {
    const { query, isSearching, suggestions } = this.props;

    return (
      <SearchBar
        className="thread-search-bar"
        placeholder={this._placeholder()}
        query={query}
        suggestions={suggestions}
        isSearching={isSearching}
        suggestionKey={suggestion =>
          suggestion.label || (suggestion.contact || {}).id || (suggestion.thread || {}).id}
        suggestionRenderer={this._renderSuggestion}
        onSelectSuggestion={this._onSelectSuggestion}
        onSubmitSearchQuery={this._onSubmitSearchQuery}
        onSearchQueryChanged={this._onSearchQueryChanged}
        onClearSearchQuery={this._onClearSearchQuery}
        onClearSearchSuggestions={this._onClearSearchSuggestions}
      />
    );
  }
}

export default ListensToFluxStore(ThreadSearchBar, {
  stores: [SearchStore, FocusedPerspectiveStore],
  getStateFromStores() {
    return {
      query: SearchStore.query(),
      suggestions: SearchStore.suggestions(),
      isSearching: SearchStore.isSearching(),
      perspective: FocusedPerspectiveStore.current(),
    };
  },
});