Mailspring/internal_packages/message-templates/lib/template-picker.cjsx
Evan Morikawa 4f8366a772 refactor(keymaps): override-key-bindings instead of native-key-bindings
Summary: This diff essentially inverts the behavior of native-key-bindings. Instead of opting-in to native-key-bindings, they're applied UNLESS there's an override-key-bindings class. I think this may be a better solution for us since we don't often want to override behavior like Copy and Select All.

Test Plan: No new tests on this one...

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://review.inboxapp.com/D1124
2015-02-04 21:31:41 -05:00

75 lines
2.1 KiB
CoffeeScript

_ = require 'underscore-plus'
React = require 'react'
TemplateStore = require './template-store'
{Actions, Message, DatabaseStore} = require 'inbox-exports'
{Popover, Menu} = require 'ui-components'
module.exports =
TemplatePicker = React.createClass
getInitialState: ->
searchValue: ""
templates: TemplateStore.items()
componentDidMount: ->
@unsubscribe = TemplateStore.listen @_onStoreChange
componentWillUnmount: ->
@unsubscribe() if @unsubscribe
render: ->
button = <button className="btn btn-icon"><i className="fa fa-paste"></i></button>
headerComponents = [
<input type="text"
tabIndex="1"
className="search"
value={@state.searchValue}
onChange={@_onSearchValueChange}/>
]
footerComponents = [
<div className="item" key="new" onClick={@_onNewTemplate}>Save as Template...</div>
<div className="item" key="manage" onClick={@_onManageTemplates}>Open Templates Folder...</div>
]
<Popover ref="popover" className="template-picker" buttonComponent={button}>
<Menu ref="menu"
headerComponents={headerComponents}
footerComponents={footerComponents}
items={@state.templates}
itemKey={ (item) -> item.id }
itemContent={ (item) -> item.name }
onSelect={@_onChooseTemplate}
/>
</Popover>
_filteredTemplates: (search) ->
search ?= @state.searchValue
items = TemplateStore.items()
return items unless search.length
_.filter items, (t) ->
t.name.toLowerCase().indexOf(search.toLowerCase()) == 0
_onStoreChange: ->
@setState
templates: @_filteredTemplates()
_onSearchValueChange: ->
newSearch = event.target.value
@setState
searchValue: newSearch
templates: @_filteredTemplates(newSearch)
_onChooseTemplate: (template) ->
Actions.insertTemplateId({templateId:template.id, draftLocalId: @props.draftLocalId})
@refs.popover.close()
_onManageTemplates: ->
Actions.showTemplates()
_onNewTemplate: ->
Actions.createTemplate({draftLocalId: @props.draftLocalId})