mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-12 20:44:30 +08:00
f1c0a1615d
Summary: - Removes controlled focus in the composer! - No React components ever perfom focus in lifecycle methods. Never again. - A new `Utils.schedule({action, after, timeout})` helper makes it easy to say "setState or load draft, etc. and then focus" - The DraftStore issues a focusDraft action after creating a draft, which causes the MessageList to focus and scroll to the desired composer, which itself decides which field to focus. - The MessageList never focuses anything automatically. - Refactors ComposerView apart — ComposerHeader handles all top fields, DraftSessionContainer handles draft session initialization and exposes props to ComposerView - ComposerHeader now uses a KeyCommandRegion (with focusIn and focusOut) to do the expanding and collapsing of the participants fields. May rename that container very soon. - Removes all CommandRegistry handling of tab and shift-tab. Unless you preventDefault, the browser does it's thing. - Removes all tabIndexes greater than 1. This is an anti-pattern—assigning everything a tabIndex of 0 tells the browser to move between them based on their order in the DOM, and is almost always what you want. - Adds "TabGroupRegion" which allows you to create a tab/shift-tabbing group, (so tabbing does not leave the active composer). Can't believe this isn't a browser feature. Todos: - Occasionally, clicking out of the composer contenteditable requires two clicks. This is because atomicEdit is restoring selection within the contenteditable and breaking blur. - Because the ComposerView does not render until it has a draft, we're back to it being white in popout composers for a brief moment. We will fix this another way - all the "return unless draft" statements were untenable. - Clicking a row in the thread list no longer shifts focus to the message list and focuses the last draft. This will be restored soon. Test Plan: Broken Reviewers: juan, evan Reviewed By: juan, evan Differential Revision: https://phab.nylas.com/D2814
211 lines
5.4 KiB
CoffeeScript
211 lines
5.4 KiB
CoffeeScript
_ = require 'underscore'
|
|
React = require "react"
|
|
classNames = require 'classnames'
|
|
ThreadListStore = require './thread-list-store'
|
|
{RetinaImg} = require 'nylas-component-kit'
|
|
{Actions,
|
|
TaskFactory,
|
|
AccountStore,
|
|
CategoryStore,
|
|
FocusedContentStore,
|
|
FocusedPerspectiveStore} = require "nylas-exports"
|
|
|
|
class ArchiveButton extends React.Component
|
|
@displayName: 'ArchiveButton'
|
|
@containerRequired: false
|
|
|
|
@propTypes:
|
|
items: React.PropTypes.array.isRequired
|
|
|
|
render: ->
|
|
canArchiveThreads = FocusedPerspectiveStore.current().canArchiveThreads(@props.items)
|
|
return <span /> unless canArchiveThreads
|
|
|
|
<button
|
|
tabIndex={-1}
|
|
style={order:-107}
|
|
className="btn btn-toolbar"
|
|
title="Archive"
|
|
onClick={@_onArchive}>
|
|
<RetinaImg name="toolbar-archive.png" mode={RetinaImg.Mode.ContentIsMask} />
|
|
</button>
|
|
|
|
_onArchive: (event) =>
|
|
tasks = TaskFactory.tasksForArchiving
|
|
threads: @props.items
|
|
Actions.queueTasks(tasks)
|
|
Actions.popSheet()
|
|
event.stopPropagation()
|
|
return
|
|
|
|
class TrashButton extends React.Component
|
|
@displayName: 'TrashButton'
|
|
@containerRequired: false
|
|
|
|
@propTypes:
|
|
items: React.PropTypes.array.isRequired
|
|
|
|
render: ->
|
|
canTrashThreads = FocusedPerspectiveStore.current().canTrashThreads(@props.items)
|
|
return <span /> unless canTrashThreads
|
|
|
|
<button tabIndex={-1}
|
|
style={order:-106}
|
|
className="btn btn-toolbar"
|
|
title="Move to Trash"
|
|
onClick={@_onRemove}>
|
|
<RetinaImg name="toolbar-trash.png" mode={RetinaImg.Mode.ContentIsMask} />
|
|
</button>
|
|
|
|
_onRemove: (event) =>
|
|
tasks = TaskFactory.tasksForMovingToTrash
|
|
threads: @props.items
|
|
Actions.queueTasks(tasks)
|
|
Actions.popSheet()
|
|
event.stopPropagation()
|
|
return
|
|
|
|
|
|
class ToggleStarredButton extends React.Component
|
|
@displayName: 'ToggleStarredButton'
|
|
@containerRequired: false
|
|
|
|
@propTypes:
|
|
items: React.PropTypes.array.isRequired
|
|
|
|
render: ->
|
|
postClickStarredState = _.every @props.items, (t) -> t.starred is false
|
|
title = "Remove stars from all"
|
|
imageName = "toolbar-star-selected.png"
|
|
|
|
if postClickStarredState
|
|
title = "Star all"
|
|
imageName = "toolbar-star.png"
|
|
|
|
<button tabIndex={-1}
|
|
style={order:-104}
|
|
className="btn btn-toolbar"
|
|
title={title}
|
|
onClick={@_onStar}>
|
|
<RetinaImg name={imageName} mode={RetinaImg.Mode.ContentIsMask} />
|
|
</button>
|
|
|
|
_onStar: (event) =>
|
|
task = TaskFactory.taskForInvertingStarred(threads: @props.items)
|
|
Actions.queueTask(task)
|
|
event.stopPropagation()
|
|
return
|
|
|
|
|
|
class ToggleUnreadButton extends React.Component
|
|
@displayName: 'ToggleUnreadButton'
|
|
@containerRequired: false
|
|
|
|
@propTypes:
|
|
items: React.PropTypes.array.isRequired
|
|
|
|
render: =>
|
|
postClickUnreadState = _.every @props.items, (t) -> _.isMatch(t, {unread: false})
|
|
fragment = if postClickUnreadState then "unread" else "read"
|
|
|
|
<button tabIndex={-1}
|
|
style={order:-105}
|
|
className="btn btn-toolbar"
|
|
title="Mark as #{fragment}"
|
|
onClick={@_onClick}>
|
|
<RetinaImg name="toolbar-markas#{fragment}.png"
|
|
mode={RetinaImg.Mode.ContentIsMask} />
|
|
</button>
|
|
|
|
_onClick: (event) =>
|
|
task = TaskFactory.taskForInvertingUnread(threads: @props.items)
|
|
Actions.queueTask(task)
|
|
Actions.popSheet()
|
|
event.stopPropagation()
|
|
return
|
|
|
|
ThreadNavButtonMixin =
|
|
getInitialState: ->
|
|
@_getStateFromStores()
|
|
|
|
componentDidMount: ->
|
|
@_unsubscribe = ThreadListStore.listen @_onStoreChange
|
|
@_unsubscribe_focus = FocusedContentStore.listen @_onStoreChange
|
|
|
|
isFirstThread: ->
|
|
selectedId = FocusedContentStore.focusedId('thread')
|
|
ThreadListStore.dataSource().get(0)?.id is selectedId
|
|
|
|
isLastThread: ->
|
|
selectedId = FocusedContentStore.focusedId('thread')
|
|
|
|
lastIndex = ThreadListStore.dataSource().count() - 1
|
|
ThreadListStore.dataSource().get(lastIndex)?.id is selectedId
|
|
|
|
componentWillUnmount: ->
|
|
@_unsubscribe()
|
|
@_unsubscribe_focus()
|
|
|
|
_onStoreChange: ->
|
|
@setState @_getStateFromStores()
|
|
|
|
|
|
DownButton = React.createClass
|
|
displayName: 'DownButton'
|
|
mixins: [ThreadNavButtonMixin]
|
|
|
|
render: ->
|
|
<div className={@_classSet()} onClick={@_onClick} title="Next thread">
|
|
<RetinaImg name="toolbar-down-arrow.png" mode={RetinaImg.Mode.ContentIsMask} />
|
|
</div>
|
|
|
|
_classSet: ->
|
|
classNames
|
|
"btn-icon": true
|
|
"message-toolbar-arrow": true
|
|
"down": true
|
|
"disabled": @state.disabled
|
|
|
|
_onClick: ->
|
|
return if @state.disabled
|
|
NylasEnv.commands.dispatch(document.body, 'core:next-item')
|
|
return
|
|
|
|
_getStateFromStores: ->
|
|
disabled: @isLastThread()
|
|
|
|
UpButton = React.createClass
|
|
displayName: 'UpButton'
|
|
mixins: [ThreadNavButtonMixin]
|
|
|
|
render: ->
|
|
<div className={@_classSet()} onClick={@_onClick} title="Previous thread">
|
|
<RetinaImg name="toolbar-up-arrow.png" mode={RetinaImg.Mode.ContentIsMask} />
|
|
</div>
|
|
|
|
_classSet: ->
|
|
classNames
|
|
"btn-icon": true
|
|
"message-toolbar-arrow": true
|
|
"up": true
|
|
"disabled": @state.disabled
|
|
|
|
_onClick: ->
|
|
return if @state.disabled
|
|
NylasEnv.commands.dispatch(document.body, 'core:previous-item')
|
|
return
|
|
|
|
_getStateFromStores: ->
|
|
disabled: @isFirstThread()
|
|
|
|
UpButton.containerRequired = false
|
|
DownButton.containerRequired = false
|
|
|
|
module.exports = {
|
|
UpButton,
|
|
DownButton,
|
|
TrashButton,
|
|
ArchiveButton,
|
|
ToggleStarredButton,
|
|
ToggleUnreadButton
|
|
}
|