Mailspring/internal_packages/account-sidebar/lib/account-sidebar-section.cjsx
Ben Gotow 606909e256 feat(mail-rules): Per-account mail rules filter incoming, existing mail
Summary:
Originally, this was going to be a totally independent package, but
I wasn't able to isolate the functionality and get it tied in to
the delta-stream consumption. Here's how it currently works:

- The preferences package has a new tab which allows you to edit
  mail filters. Filters are saved in a new core store, and a new
  stock component (ScenarioEditor) renders the editor. The editor
  takes a set of templates that define a value space, and outputs
  a valid set of values.

- A new MailFilterProcessor takes messages and creates tasks to
  apply the actions from the MailFiltersStore.

- The worker-sync package now uses the MailFilterProcessor to
  apply filters /before/ it calls didPassivelyReceiveNewModels,
  so filtrs are applied before any notifications are created.

- A new task, ReprocessMailFiltersTask allows you to run filters
  on all of your existing mail. It leverages the existing TaskQueue
  architecture to: a) resume where it left off if you quit midway,
  b) be queryable (for status) from all windows and c) cancelable.
  The TaskQueue is a bit strange because it runs performLocal and
  performRemote very differently, and I had to use `performRemote`.
  (todo refactor soon.)

This diff also changes the EditableList a bit to behave like a
controlled component and render focused / unfocused states.

Test Plan: Run tests, only for actual filter processing atm.

Reviewers: juan, evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D2379
2015-12-23 02:19:32 -05:00

109 lines
3.2 KiB
CoffeeScript

React = require 'react'
_ = require 'underscore'
_str = require 'underscore.string'
AccountSidebarItem = require './account-sidebar-item'
{RetinaImg,
DisclosureTriangle} = require 'nylas-component-kit'
class AccountSidebarSection extends React.Component
@displayName: "AccountSidebarSection"
@propTypes: {
section: React.PropTypes.object.isRequired
collapsed: React.PropTypes.object.isRequired
onToggleCollapsed: React.PropTypes.func.isRequired
selected: React.PropTypes.object
}
constructor: (@props) ->
@state = {showCreateInput: false}
render: ->
section = @props.section
showInput = @state.showCreateInput
allowCreate = section.createItem?
<section>
<div className="heading">{section.label}</div>
{@_createItemButton(section) if allowCreate}
{@_createItemInput(section) if allowCreate and showInput}
{@_itemComponents(section.items)}
</section>
_createItemButton: ({label}) ->
<div
className="add-item-button"
onMouseDown={@_onCreateButtonMouseDown}
onMouseUp={@_onCreateButtonClicked.bind(@, label)}>
<RetinaImg
url="nylas://account-sidebar/assets/icon-sidebar-addcategory@2x.png"
style={height: 14, width: 14}
mode={RetinaImg.Mode.ContentIsMask} />
</div>
_createItemInput: (section) ->
label = _str.decapitalize section.label[...-1]
placeholder = "Create new #{label}"
<span className="item-container">
<div className="item add-item-container">
<DisclosureTriangle collapsed={false} visible={false} />
<div className="icon">
<RetinaImg
name="#{section.iconName}"
fallback="folder.png"
mode={RetinaImg.Mode.ContentIsMask} />
</div>
<input
type="text"
tabIndex="1"
className="add-item-input"
autoFocus={true}
onKeyDown={_.partial @_onInputKeyDown, _, section}
onBlur={@_onInputBlur}
placeholder={placeholder}/>
</div>
</span>
_itemComponents: (items) =>
components = []
items.forEach (item) =>
components.push(
<AccountSidebarItem
key={item.id}
item={item}
collapsed={@props.collapsed[item.id]}
selected={@props.selected}
onDestroyItem={@props.section.destroyItem}
onToggleCollapsed={@props.onToggleCollapsed} />
)
if item.children.length and not @props.collapsed[item.id]
components.push(
<section key={"#{item.id}-children"}>
{@_itemComponents(item.children)}
</section>
)
components
_onCreateButtonMouseDown: =>
@_clickingCreateButton = true
return
_onCreateButtonClicked: (sectionLabel) =>
@_clickingCreateButton = false
@setState(showCreateInput: not @state.showCreateInput)
_onInputBlur: =>
@setState(showCreateInput: false) if not @_clickingCreateButton
_onInputKeyDown: (event, section) =>
if event.key is 'Escape'
@setState(showCreateInput: false)
if event.key in ['Enter', 'Return']
@props.section.createItem?(event.target.value)
@setState(showCreateInput: false)
module.exports = AccountSidebarSection