Mailspring/packages/client-app/internal_packages/thread-search/lib/thread-search-bar.jsx
Mark Hahnenberg e06f729275 [client-app] Limit search to focused perspective
Summary:
Previously we would always search all mail. Now, if the user has focused
a particular folder we will limit our search to that folder. The inbox
is an exception--it will always search all mail unless the user
explicitly uses an "in:" clause.

Test Plan: Run locally, verify that searching folders returns the correct results.

Reviewers: evan, spang, juan

Reviewed By: juan

Differential Revision: https://phab.nylas.com/D4328
2017-04-04 12:48:04 -07:00

98 lines
2.7 KiB
JavaScript

import React, {Component, PropTypes} from 'react'
import {Menu, SearchBar, ListensToFluxStore} from 'nylas-component-kit'
import {FocusedPerspectiveStore} from 'nylas-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(),
};
},
})