mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 08:16:09 +08:00
387 lines
12 KiB
CoffeeScript
387 lines
12 KiB
CoffeeScript
_ = require 'underscore'
|
|
React = require 'react'
|
|
classNames = require 'classnames'
|
|
{ListTabular,
|
|
MultiselectList,
|
|
RetinaImg,
|
|
MailLabel,
|
|
KeyCommandsRegion,
|
|
InjectedComponentSet} = require 'nylas-component-kit'
|
|
{timestamp, subject} = require './formatting-utils'
|
|
{Actions,
|
|
Utils,
|
|
Thread,
|
|
CanvasUtils,
|
|
TaskFactory,
|
|
ChangeUnreadTask,
|
|
WorkspaceStore,
|
|
AccountStore,
|
|
CategoryStore,
|
|
FocusedContentStore,
|
|
FocusedPerspectiveStore} = require 'nylas-exports'
|
|
ThreadListParticipants = require './thread-list-participants'
|
|
{ThreadArchiveQuickAction,
|
|
ThreadTrashQuickAction} = require './thread-list-quick-actions'
|
|
ThreadListStore = require './thread-list-store'
|
|
ThreadListIcon = require './thread-list-icon'
|
|
|
|
EmptyState = require './empty-state'
|
|
{MailImportantIcon} = require 'nylas-component-kit'
|
|
|
|
class ThreadListScrollTooltip extends React.Component
|
|
@displayName: 'ThreadListScrollTooltip'
|
|
@propTypes:
|
|
viewportCenter: React.PropTypes.number.isRequired
|
|
totalHeight: React.PropTypes.number.isRequired
|
|
|
|
componentWillMount: =>
|
|
@setupForProps(@props)
|
|
|
|
componentWillReceiveProps: (newProps) =>
|
|
@setupForProps(newProps)
|
|
|
|
shouldComponentUpdate: (newProps, newState) =>
|
|
@state?.idx isnt newState.idx
|
|
|
|
setupForProps: (props) ->
|
|
idx = Math.floor(ThreadListStore.view().count() / @props.totalHeight * @props.viewportCenter)
|
|
@setState
|
|
idx: idx
|
|
item: ThreadListStore.view().get(idx)
|
|
|
|
render: ->
|
|
if @state.item
|
|
content = timestamp(@state.item.lastMessageReceivedTimestamp)
|
|
else
|
|
content = "Loading..."
|
|
<div className="scroll-tooltip">
|
|
{content}
|
|
</div>
|
|
|
|
class ThreadList extends React.Component
|
|
@displayName: 'ThreadList'
|
|
|
|
@containerRequired: false
|
|
@containerStyles:
|
|
minWidth: 300
|
|
maxWidth: 3000
|
|
|
|
constructor: (@props) ->
|
|
@state =
|
|
style: 'unknown'
|
|
|
|
componentWillMount: =>
|
|
c1 = new ListTabular.Column
|
|
name: "★"
|
|
resolver: (thread) =>
|
|
[
|
|
<ThreadListIcon key="thread-list-icon" thread={thread} />
|
|
<MailImportantIcon key="mail-important-icon" thread={thread} />
|
|
<InjectedComponentSet
|
|
key="injected-component-set"
|
|
inline={true}
|
|
containersRequired={false}
|
|
matching={role: "ThreadListIcon"}
|
|
className="thread-injected-icons"
|
|
exposedProps={thread: thread}/>
|
|
]
|
|
|
|
c2 = new ListTabular.Column
|
|
name: "Participants"
|
|
width: 200
|
|
resolver: (thread) =>
|
|
hasDraft = _.find (thread.metadata ? []), (m) -> m.draft
|
|
if hasDraft
|
|
<div style={display: 'flex'}>
|
|
<ThreadListParticipants thread={thread} />
|
|
<RetinaImg name="icon-draft-pencil.png"
|
|
className="draft-icon"
|
|
mode={RetinaImg.Mode.ContentPreserve} />
|
|
</div>
|
|
else
|
|
<ThreadListParticipants thread={thread} />
|
|
|
|
c3LabelComponentCache = {}
|
|
|
|
c3 = new ListTabular.Column
|
|
name: "Message"
|
|
flex: 4
|
|
resolver: (thread) =>
|
|
attachment = []
|
|
labels = []
|
|
if thread.hasAttachments
|
|
attachment = <div className="thread-icon thread-icon-attachment"></div>
|
|
|
|
currentCategoryId = FocusedPerspectiveStore.current()?.categoryId()
|
|
account = FocusedPerspectiveStore.current()?.account
|
|
|
|
ignoredIds = [currentCategoryId]
|
|
ignoredIds.push(cat.id) for cat in CategoryStore.hiddenCategories(account)
|
|
|
|
for label in (thread.sortedLabels())
|
|
continue if label.id in ignoredIds
|
|
c3LabelComponentCache[label.id] ?= <MailLabel label={label} key={label.id} />
|
|
labels.push c3LabelComponentCache[label.id]
|
|
|
|
<span className="details">
|
|
{labels}
|
|
<span className="subject">{subject(thread.subject)}</span>
|
|
<span className="snippet">{thread.snippet}</span>
|
|
{attachment}
|
|
</span>
|
|
|
|
c4 = new ListTabular.Column
|
|
name: "Date"
|
|
resolver: (thread) =>
|
|
<span className="timestamp">{timestamp(thread.lastMessageReceivedTimestamp)}</span>
|
|
|
|
c5 = new ListTabular.Column
|
|
name: "HoverActions"
|
|
resolver: (thread) =>
|
|
<div className="inner">
|
|
<InjectedComponentSet
|
|
key="injected-component-set"
|
|
inline={true}
|
|
containersRequired={false}
|
|
children=
|
|
{[
|
|
<ThreadTrashQuickAction key="thread-trash-quick-action" thread={thread} />
|
|
<ThreadArchiveQuickAction key="thread-arhive-quick-action" thread={thread} />
|
|
]}
|
|
matching={role: "ThreadListQuickAction"}
|
|
className="thread-injected-quick-actions"
|
|
exposedProps={thread: thread}/>
|
|
</div>
|
|
|
|
@wideColumns = [c1, c2, c3, c4, c5]
|
|
|
|
cNarrow = new ListTabular.Column
|
|
name: "Item"
|
|
flex: 1
|
|
resolver: (thread) =>
|
|
pencil = []
|
|
attachment = []
|
|
hasDraft = _.find (thread.metadata ? []), (m) -> m.draft
|
|
if thread.hasAttachments
|
|
attachment = <div className="thread-icon thread-icon-attachment"></div>
|
|
if hasDraft
|
|
pencil = <RetinaImg name="icon-draft-pencil.png" className="draft-icon" mode={RetinaImg.Mode.ContentPreserve} />
|
|
|
|
<div>
|
|
<div style={display: 'flex'}>
|
|
<ThreadListIcon thread={thread} />
|
|
<ThreadListParticipants thread={thread} />
|
|
{pencil}
|
|
<span style={flex:1}></span>
|
|
{attachment}
|
|
<span className="timestamp">{timestamp(thread.lastMessageReceivedTimestamp)}</span>
|
|
</div>
|
|
<MailImportantIcon thread={thread} />
|
|
<div className="subject">{subject(thread.subject)}</div>
|
|
<div className="snippet">{thread.snippet}</div>
|
|
</div>
|
|
|
|
@narrowColumns = [cNarrow]
|
|
|
|
@itemPropsProvider = (item) ->
|
|
className: classNames
|
|
'unread': item.unread
|
|
'data-thread-id': item.id
|
|
|
|
componentDidMount: =>
|
|
window.addEventListener('resize', @_onResize, true)
|
|
@_onResize()
|
|
|
|
componentWillUnmount: =>
|
|
window.removeEventListener('resize', @_onResize, true)
|
|
|
|
_shift: ({offset, afterRunning}) =>
|
|
view = ThreadListStore.view()
|
|
focusedId = FocusedContentStore.focusedId('thread')
|
|
focusedIdx = Math.min(view.count() - 1, Math.max(0, view.indexOfId(focusedId) + offset))
|
|
item = view.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': @_onMarkImportantItem
|
|
'application:mark-unimportant': @_onMarkUnimportantItem
|
|
'application:mark-as-unread': @_onMarkUnreadItem
|
|
'application:mark-as-read': @_onMarkReadItem
|
|
'application:remove-and-previous': =>
|
|
@_shift(offset: 1, afterRunning: @_onRemoveFromView)
|
|
'application:remove-and-next': =>
|
|
@_shift(offset: -1, afterRunning: @_onRemoveFromView)
|
|
|
|
render: ->
|
|
<KeyCommandsRegion globalHandlers={@_keymapHandlers()}
|
|
className="thread-list-wrap">
|
|
{@_renderList()}
|
|
</KeyCommandsRegion>
|
|
|
|
_renderList: =>
|
|
if @state.style is 'wide'
|
|
<MultiselectList
|
|
dataStore={ThreadListStore}
|
|
columns={@wideColumns}
|
|
itemPropsProvider={@itemPropsProvider}
|
|
itemHeight={39}
|
|
className="thread-list"
|
|
scrollTooltipComponent={ThreadListScrollTooltip}
|
|
emptyComponent={EmptyState}
|
|
onDragStart={@_onDragStart}
|
|
onDragEnd={@_onDragEnd}
|
|
draggable="true"
|
|
collection="thread" />
|
|
else if @state.style is 'narrow'
|
|
<MultiselectList
|
|
dataStore={ThreadListStore}
|
|
columns={@narrowColumns}
|
|
itemPropsProvider={@itemPropsProvider}
|
|
itemHeight={90}
|
|
className="thread-list thread-list-narrow"
|
|
scrollTooltipComponent={ThreadListScrollTooltip}
|
|
emptyComponent={EmptyState}
|
|
onDragStart={@_onDragStart}
|
|
onDragEnd={@_onDragEnd}
|
|
draggable="true"
|
|
collection="thread" />
|
|
else
|
|
<div></div>
|
|
|
|
_threadIdAtPoint: (x, y) ->
|
|
item = document.elementFromPoint(event.clientX, event.clientY).closest('.list-item')
|
|
return null unless item
|
|
return item.dataset.threadId
|
|
|
|
_onDragStart: (event) =>
|
|
itemThreadId = @_threadIdAtPoint(event.clientX, event.clientY)
|
|
unless itemThreadId
|
|
event.preventDefault()
|
|
return
|
|
|
|
if itemThreadId in ThreadListStore.view().selection.ids()
|
|
dragThreadIds = ThreadListStore.view().selection.ids()
|
|
else
|
|
dragThreadIds = [itemThreadId]
|
|
|
|
event.dataTransfer.effectAllowed = "move"
|
|
event.dataTransfer.dragEffect = "move"
|
|
|
|
canvas = CanvasUtils.canvasWithThreadDragImage(dragThreadIds.length)
|
|
event.dataTransfer.setDragImage(canvas, 10, 10)
|
|
event.dataTransfer.setData('nylas-thread-ids', JSON.stringify(dragThreadIds))
|
|
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: ->
|
|
return null unless ThreadListStore.view()
|
|
focused = FocusedContentStore.focused('thread')
|
|
if focused
|
|
return [focused]
|
|
else if ThreadListStore.view().selection.count() > 0
|
|
return ThreadListStore.view().selection.items()
|
|
else
|
|
return null
|
|
|
|
_onStarItem: =>
|
|
threads = @_threadsForKeyboardAction()
|
|
return unless threads
|
|
task = TaskFactory.taskForInvertingStarred({threads})
|
|
Actions.queueTask(task)
|
|
|
|
_onMarkImportantItem: =>
|
|
@_setImportant(true)
|
|
|
|
_onMarkUnimportantItem: =>
|
|
@_setImportant(false)
|
|
|
|
_setImportant: (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)
|
|
|
|
_onMarkReadItem: =>
|
|
@_setUnread(false)
|
|
|
|
_onMarkUnreadItem: =>
|
|
@_setUnread(true)
|
|
|
|
_setUnread: (unread) =>
|
|
threads = @_threadsForKeyboardAction()
|
|
return unless threads
|
|
task = new ChangeUnreadTask
|
|
threads: threads
|
|
unread: unread
|
|
Actions.queueTask(task)
|
|
Actions.popSheet()
|
|
|
|
_onRemoveFromView: =>
|
|
threads = @_threadsForKeyboardAction()
|
|
backspaceDelete = NylasEnv.config.get('core.reading.backspaceDelete')
|
|
if threads
|
|
if backspaceDelete
|
|
if FocusedPerspectiveStore.current().canTrashThreads()
|
|
removeMethod = TaskFactory.taskForMovingToTrash
|
|
else
|
|
return
|
|
else
|
|
if FocusedPerspectiveStore.current().canArchiveThreads()
|
|
removeMethod = TaskFactory.taskForArchiving
|
|
else
|
|
removeMethod = TaskFactory.taskForMovingToTrash
|
|
|
|
task = removeMethod
|
|
threads: threads
|
|
fromView: FocusedPerspectiveStore.current()
|
|
Actions.queueTask(task)
|
|
|
|
Actions.popSheet()
|
|
|
|
_onArchiveItem: =>
|
|
return unless FocusedPerspectiveStore.current().canArchiveThreads()
|
|
threads = @_threadsForKeyboardAction()
|
|
if threads
|
|
task = TaskFactory.taskForArchiving
|
|
threads: threads
|
|
fromView: FocusedPerspectiveStore.current()
|
|
Actions.queueTask(task)
|
|
Actions.popSheet()
|
|
|
|
_onDeleteItem: =>
|
|
return unless FocusedPerspectiveStore.current().canTrashThreads()
|
|
threads = @_threadsForKeyboardAction()
|
|
if threads
|
|
task = TaskFactory.taskForMovingToTrash
|
|
threads: threads
|
|
fromView: FocusedPerspectiveStore.current()
|
|
Actions.queueTask(task)
|
|
Actions.popSheet()
|
|
|
|
|
|
module.exports = ThreadList
|