Mailspring/internal_packages/thread-list/lib/thread-list.cjsx

236 lines
7.3 KiB
Plaintext
Raw Normal View History

_ = require 'underscore'
React = require 'react'
classNames = require 'classnames'
2016-01-15 06:04:51 +08:00
{MultiselectList, FluxContainer} = require 'nylas-component-kit'
2016-01-15 06:04:51 +08:00
{Actions,
Thread,
CanvasUtils,
TaskFactory,
ChangeUnreadTask,
WorkspaceStore,
AccountStore,
CategoryStore,
FocusedContentStore,
FocusedPerspectiveStore} = require 'nylas-exports'
2016-01-15 06:04:51 +08:00
ThreadListColumns = require './thread-list-columns'
ThreadListScrollTooltip = require './thread-list-scroll-tooltip'
ThreadListStore = require './thread-list-store'
FocusContainer = require './focus-container'
EmptyState = require './empty-state'
class ThreadList extends React.Component
@displayName: 'ThreadList'
feat(unsafe-components): Wrap injected components, catch exceptions, clean up ComponentRegistry Summary: This diff gives the ComponentRegistry a cleaner, smaller API. Instead of querying by name, location or role, it's now just location and role, and you can register components for one or more location and one or more roles without assigning the entries in the registry separate names. When you register with the ComponentRegistry, the syntax is also cleaner and uses the component's displayName instead of requiring you to provide a name. You also provide the actual component when unregistering, ensuring that you can't unregister someone else's component. InjectedComponent and InjectedComponentSet now wrap their children in UnsafeComponent, which prevents render/component lifecycle problems from propogating. Existing components have been updated: 1. maxWidth / minWidth are now containerStyles.maxWidth/minWidth 2. displayName is now required to use the CR. 3. containerRequired = false can be provided to exempt a component from being wrapped in an UnsafeComponent. This is useful because it's slightly faster and keeps DOM flat. This diff also makes the "Show Component Regions" more awesome. It displays column regions, since they now use the InjectedComponentSet, and also shows for InjectedComponent as well as InjectedComponentSet. Change ComponentRegistry syntax, lots more work on safely wrapping items. See description. Fix for inline flexbox scenarios (message actions) Allow ~/.inbox/packages to be symlinked to a github repo Test Plan: Run tests! Reviewers: evan Reviewed By: evan Differential Revision: https://review.inboxapp.com/D1457
2015-05-01 07:10:15 +08:00
@containerRequired: false
@containerStyles:
minWidth: 300
maxWidth: 3000
constructor: (@props) ->
@state =
style: 'unknown'
componentDidMount: =>
window.addEventListener('resize', @_onResize, true)
@_onResize()
componentWillUnmount: =>
window.removeEventListener('resize', @_onResize, true)
_shift: ({offset, afterRunning}) =>
2016-01-15 07:04:17 +08:00
dataSource = ThreadListStore.dataSource()
focusedId = FocusedContentStore.focusedId('thread')
2016-01-15 07:04:17 +08:00
focusedIdx = Math.min(dataSource.count() - 1, Math.max(0, dataSource.indexOfId(focusedId) + offset))
item = dataSource.get(focusedIdx)
afterRunning()
Actions.setFocus(collection: 'thread', item: item)
_keymapHandlers: ->
'core:remove-from-view': @_onRemoveFromView
'application:archive-item': @_onArchiveItem
'application:delete-item': @_onDeleteItem
'application:star-item': @_onStarItem
'application:mark-important': => @_onSetImportant(true)
'application:mark-unimportant': => @_onSetImportant(false)
'application:mark-as-unread': => @_onSetUnread(true)
'application:mark-as-read': => @_onSetUnread(false)
'application:report-as-spam': => @_onMarkAsSpam(false)
'application:remove-and-previous': =>
@_shift(offset: -1, afterRunning: @_onRemoveFromView)
'application:remove-and-next': =>
@_shift(offset: 1, afterRunning: @_onRemoveFromView)
2016-01-15 06:04:51 +08:00
'thread-list:select-read': @_onSelectRead
'thread-list:select-unread': @_onSelectUnread
'thread-list:select-starred': @_onSelectStarred
'thread-list:select-unstarred': @_onSelectUnstarred
render: ->
if @state.style is 'wide'
columns = ThreadListColumns.Wide
itemHeight = 39
else
columns = ThreadListColumns.Narrow
itemHeight = 90
<FluxContainer
stores=[ThreadListStore]
getStateFromStores={ -> dataSource: ThreadListStore.dataSource() }>
<FocusContainer collection="thread">
<MultiselectList
ref="list"
columns={columns}
itemPropsProvider={@_threadPropsProvider}
itemHeight={itemHeight}
className="thread-list thread-list-#{@state.style}"
scrollTooltipComponent={ThreadListScrollTooltip}
emptyComponent={EmptyState}
keymapHandlers={@_keymapHandlers()}
onDragStart={@_onDragStart}
onDragEnd={@_onDragEnd}
draggable="true" />
</FocusContainer>
</FluxContainer>
2016-01-15 06:04:51 +08:00
_threadPropsProvider: (item) ->
className: classNames
'unread': item.unread
_onDragStart: (event) =>
itemThreadId = @refs.list.itemIdAtPoint(event.clientX, event.clientY)
unless itemThreadId
event.preventDefault()
return
dataSource = ThreadListStore.dataSource()
if itemThreadId in dataSource.selection.ids()
dragThreadIds = dataSource.selection.ids()
dragAccountIds = _.uniq(_.pluck(dataSource.selection.items(), 'accountId'))
else
dragThreadIds = [itemThreadId]
dragAccountIds = [dataSource.getById(itemThreadId).accountId]
dragData = {
accountIds: dragAccountIds,
threadIds: dragThreadIds
}
event.dataTransfer.effectAllowed = "move"
event.dataTransfer.dragEffect = "move"
canvas = CanvasUtils.canvasWithThreadDragImage(dragThreadIds.length)
event.dataTransfer.setDragImage(canvas, 10, 10)
event.dataTransfer.setData('nylas-threads-data', JSON.stringify(dragData))
return
_onDragEnd: (event) =>
_onResize: (event) =>
current = @state.style
desired = if React.findDOMNode(@).offsetWidth < 540 then 'narrow' else 'wide'
if current isnt desired
@setState(style: desired)
_threadsForKeyboardAction: ->
2016-01-15 07:04:17 +08:00
return null unless ThreadListStore.dataSource()
focused = FocusedContentStore.focused('thread')
if focused
return [focused]
2016-01-15 07:04:17 +08:00
else if ThreadListStore.dataSource().selection.count() > 0
return ThreadListStore.dataSource().selection.items()
else
return null
_onStarItem: =>
threads = @_threadsForKeyboardAction()
return unless threads
task = TaskFactory.taskForInvertingStarred({threads})
Actions.queueTask(task)
_onSetImportant: (important) =>
threads = @_threadsForKeyboardAction()
return unless threads
# TODO Can not apply to threads across more than one account for now
account = AccountStore.accountForItems(threads)
return unless account?
return unless account.usesImportantFlag()
return unless NylasEnv.config.get('core.workspace.showImportant')
category = CategoryStore.getStandardCategory(account, 'important')
if important
task = TaskFactory.taskForApplyingCategory({threads, category})
else
task = TaskFactory.taskForRemovingCategory({threads, category})
Actions.queueTask(task)
_onSetUnread: (unread) =>
threads = @_threadsForKeyboardAction()
return unless threads
task = new ChangeUnreadTask
threads: threads
unread: unread
Actions.queueTask(task)
Actions.popSheet()
_onMarkAsSpam: =>
threads = @_threadsForKeyboardAction()
return unless threads
tasks = TaskFactory.tasksForMarkingAsSpam(
threads: threads
)
Actions.queueTasks(tasks)
_onRemoveFromView: =>
threads = @_threadsForKeyboardAction()
if threads
current = FocusedPerspectiveStore.current()
current.removeThreads(threads)
Actions.popSheet()
_onArchiveItem: =>
return unless FocusedPerspectiveStore.current().canArchiveThreads()
threads = @_threadsForKeyboardAction()
if threads
tasks = TaskFactory.tasksForArchiving
threads: threads
2016-01-15 07:04:17 +08:00
fromPerspective: FocusedPerspectiveStore.current()
Actions.queueTasks(tasks)
Actions.popSheet()
_onDeleteItem: =>
return unless FocusedPerspectiveStore.current().canTrashThreads()
threads = @_threadsForKeyboardAction()
if threads
tasks = TaskFactory.tasksForMovingToTrash
threads: threads
2016-01-15 07:04:17 +08:00
fromPerspective: FocusedPerspectiveStore.current()
Actions.queueTasks(tasks)
Actions.popSheet()
2016-01-15 06:04:51 +08:00
_onSelectRead: =>
2016-01-15 07:04:17 +08:00
dataSource = ThreadListStore.dataSource()
items = dataSource.itemsCurrentlyInViewMatching (item) -> not item.unread
dataSource.selection.set(items)
2016-01-15 06:04:51 +08:00
_onSelectUnread: =>
2016-01-15 07:04:17 +08:00
dataSource = ThreadListStore.dataSource()
items = dataSource.itemsCurrentlyInViewMatching (item) -> item.unread
dataSource.selection.set(items)
2016-01-15 06:04:51 +08:00
_onSelectStarred: =>
2016-01-15 07:04:17 +08:00
dataSource = ThreadListStore.dataSource()
items = dataSource.itemsCurrentlyInViewMatching (item) -> item.starred
dataSource.selection.set(items)
2016-01-15 06:04:51 +08:00
_onSelectUnstarred: =>
2016-01-15 07:04:17 +08:00
dataSource = ThreadListStore.dataSource()
items = dataSource.itemsCurrentlyInViewMatching (item) -> not item.starred
dataSource.selection.set(items)
module.exports = ThreadList