mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 16:56:08 +08:00
a48ddd51f8
Summary: Keymaps & menus CSON => JSON, remove AtomKeymaps, CommandRegistry use of CSS selectors, use Mousetrap instead Important Notes: - The `application:` prefix is reserved for commands which are handled in the application process. Don't use it for other things. You will not receive the events in the window. - Maintaining dynamic menus seems to come with quite an overhead, because Electron updates the entire menu every time. In the future, we'll need https://github.com/electron/electron/issues/528 to really make things nice. I will be tracking this upstream. - The format for keyboard shortcuts has changed. `cmd-X` is now `command+shift+x` Test Plan: Run tests Reviewers: juan, evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D2917
151 lines
4.2 KiB
CoffeeScript
151 lines
4.2 KiB
CoffeeScript
_ = require 'underscore'
|
|
React = require 'react'
|
|
ReactDOM = require 'react-dom'
|
|
classNames = require 'classnames'
|
|
|
|
{Actions,
|
|
WorkspaceStore,
|
|
FocusedPerspectiveStore} = require 'nylas-exports'
|
|
{Menu, RetinaImg, KeyCommandsRegion} = require 'nylas-component-kit'
|
|
|
|
SearchStore = require './search-store'
|
|
SearchActions = require './search-actions'
|
|
|
|
class SearchBar extends React.Component
|
|
@displayName = 'SearchBar'
|
|
|
|
constructor: (@props) ->
|
|
@state = _.extend({}, @_getStateFromStores(), {
|
|
focused: false
|
|
},)
|
|
|
|
componentDidMount: =>
|
|
@usub = []
|
|
@usub.push SearchStore.listen @_onChange
|
|
@usub.push WorkspaceStore.listen =>
|
|
@setState(focused: false) if @state.focused
|
|
|
|
# It's important that every React class explicitly stops listening to
|
|
# N1 events before it unmounts. Thank you event-kit
|
|
# This can be fixed via a Reflux mixin
|
|
componentWillUnmount: =>
|
|
usub() for usub in @usub
|
|
|
|
_keymapHandlers: ->
|
|
'core:focus-search': @_onFocusSearch
|
|
'search-bar:escape-search': @_clearAndBlur
|
|
|
|
render: =>
|
|
inputClass = classNames
|
|
'empty': @state.query.length is 0
|
|
|
|
loupeImg = if @state.isSearching
|
|
<RetinaImg
|
|
className="search-accessory search loading"
|
|
name="inline-loading-spinner.gif"
|
|
key="accessory"
|
|
mode={RetinaImg.Mode.ContentPreserve}
|
|
/>
|
|
else
|
|
<RetinaImg
|
|
className="search-accessory search"
|
|
name="searchloupe.png"
|
|
key="accessory"
|
|
mode={RetinaImg.Mode.ContentDark}
|
|
onClick={@_doSearch}
|
|
/>
|
|
|
|
headerComponents = [
|
|
<input type="text"
|
|
ref="searchInput"
|
|
key="input"
|
|
className={inputClass}
|
|
placeholder="Search all email"
|
|
value={@state.query}
|
|
onChange={@_onValueChange}
|
|
onFocus={@_onFocus}
|
|
onBlur={@_onBlur} />,
|
|
loupeImg,
|
|
<RetinaImg className="search-accessory clear"
|
|
name="searchclear.png"
|
|
key="clear"
|
|
mode={RetinaImg.Mode.ContentDark}
|
|
onClick={@_onClearSearch} />,
|
|
]
|
|
|
|
itemContentFunc = (item) =>
|
|
if item.divider
|
|
<Menu.Item divider={item.divider} />
|
|
else if item.contact
|
|
<Menu.NameEmailItem name={item.contact.name} email={item.contact.email} />
|
|
else if item.thread
|
|
item.thread.subject
|
|
else
|
|
item.label
|
|
|
|
<KeyCommandsRegion className="search-bar" globalHandlers={@_keymapHandlers()}>
|
|
<div>
|
|
<Menu ref="menu"
|
|
className={@_containerClasses()}
|
|
headerComponents={headerComponents}
|
|
items={@state.suggestions}
|
|
itemContent={itemContentFunc}
|
|
itemKey={ (item) -> item.label || item.contact?.id || item.thread?.id}
|
|
onSelect={@_onSelectSuggestion}
|
|
/>
|
|
</div>
|
|
</KeyCommandsRegion>
|
|
|
|
_onFocusSearch: =>
|
|
ReactDOM.findDOMNode(@refs.searchInput).focus()
|
|
|
|
_containerClasses: =>
|
|
classNames
|
|
'focused': @state.focused
|
|
'showing-query': @state.query?.length > 0
|
|
'search-container': true
|
|
'showing-suggestions': @state.suggestions?.length > 0
|
|
|
|
_onValueChange: (event) =>
|
|
SearchActions.queryChanged(event.target.value)
|
|
if (event.target.value is '')
|
|
@_onClearSearch()
|
|
|
|
_onSelectSuggestion: (item) =>
|
|
if item.thread?
|
|
SearchActions.querySubmitted("\"#{item.thread.subject}\"")
|
|
else
|
|
SearchActions.querySubmitted(item.value)
|
|
|
|
_onClearSearch: (event) =>
|
|
SearchActions.querySubmitted("")
|
|
|
|
_clearAndBlur: =>
|
|
@_onClearSearch()
|
|
ReactDOM.findDOMNode(@refs.searchInput)?.blur()
|
|
|
|
_onFocus: =>
|
|
@setState(focused: true)
|
|
|
|
_onBlur: =>
|
|
# Don't immediately hide the menu when the text input is blurred,
|
|
# because the user might have clicked an item in the menu. Wait to
|
|
# handle the touch event, then dismiss the menu.
|
|
setTimeout =>
|
|
SearchActions.searchBlurred()
|
|
@setState(focused: false)
|
|
, 150
|
|
|
|
_doSearch: =>
|
|
SearchActions.querySubmitted(@state.query)
|
|
|
|
_onChange: =>
|
|
@setState @_getStateFromStores()
|
|
|
|
_getStateFromStores: =>
|
|
query: SearchStore.query()
|
|
suggestions: SearchStore.suggestions()
|
|
isSearching: SearchStore.isSearching()
|
|
|
|
module.exports = SearchBar
|