mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-24 01:06:07 +08:00
5d837ffd02
Summary: Add ability to undo send. We decided to make undo send completely client side for a couple of reasons. If we rely on send-later for undo-send, we would be giving /all/ send load to our send-later backend. If this increases the send-later load too much, it might cause delays in the regular send-later functionality and potentially other plugins like snooze that run under the same service. We would also need to rely on the network to be able to cancel a send, which would make it unusable offline or hard to debug if that specific request fails for any given reason. This commit also refactors the way `ComposerExtension.sendActionConfig` works. The method has been renamed and now must return an array of send actions. Also, all of the business logic to handle different send actions registered by extensions has been pieced apart from the SendActionButton and into a new SendActionStore. This also enables undo send to undo custom send actions registered by extensions. Along the way, this also fixes a pending TODO to show all registered custom send actions in the preferences for choosing the preferred send action for sending. Undo send works via a task, so in case N1 closes before send goes through, it will still be persisted to the task queue and restored when opened again. Undoing a send means dequeuing this task. Test Plan: Manual Reviewers: jackie, bengotow, halla, evan Reviewed By: bengotow, halla, evan Differential Revision: https://phab.nylas.com/D3361
110 lines
3.2 KiB
JavaScript
110 lines
3.2 KiB
JavaScript
/* eslint jsx-a11y/tabindex-no-positive: 0 */
|
|
import React, {PropTypes} from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import {
|
|
Flexbox,
|
|
ScrollRegion,
|
|
KeyCommandsRegion,
|
|
ListensToFluxStore,
|
|
ConfigPropContainer,
|
|
} from 'nylas-component-kit';
|
|
import {PreferencesUIStore} from 'nylas-exports';
|
|
import PreferencesTabsBar from './preferences-tabs-bar';
|
|
|
|
|
|
class PreferencesRoot extends React.Component {
|
|
static displayName = 'PreferencesRoot';
|
|
|
|
static containerRequired = false;
|
|
|
|
static propTypes = {
|
|
tab: PropTypes.object,
|
|
tabs: PropTypes.object,
|
|
selection: PropTypes.object,
|
|
}
|
|
|
|
componentDidMount() {
|
|
ReactDOM.findDOMNode(this).focus();
|
|
this._focusContent();
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
const scrollRegion = document.querySelector(".preferences-content .scroll-region-content");
|
|
scrollRegion.scrollTop = 0;
|
|
this._focusContent();
|
|
}
|
|
|
|
_localHandlers() {
|
|
const stopPropagation = (e) => {
|
|
e.stopPropagation();
|
|
}
|
|
// This prevents some basic commands from propagating to the threads list and
|
|
// producing unexpected results
|
|
|
|
// TODO This is a partial/temporary solution and should go away when we do the
|
|
// Keymap/Commands/Menu refactor
|
|
return {
|
|
'core:next-item': stopPropagation,
|
|
'core:previous-item': stopPropagation,
|
|
'core:select-up': stopPropagation,
|
|
'core:select-down': stopPropagation,
|
|
'core:select-item': stopPropagation,
|
|
'core:messages-page-up': stopPropagation,
|
|
'core:messages-page-down': stopPropagation,
|
|
'core:list-page-up': stopPropagation,
|
|
'core:list-page-down': stopPropagation,
|
|
'core:remove-from-view': stopPropagation,
|
|
'core:gmail-remove-from-view': stopPropagation,
|
|
'core:remove-and-previous': stopPropagation,
|
|
'core:remove-and-next': stopPropagation,
|
|
'core:archive-item': stopPropagation,
|
|
'core:delete-item': stopPropagation,
|
|
'core:print-thread': stopPropagation,
|
|
}
|
|
}
|
|
|
|
// Focus the first thing with a tabindex when we update.
|
|
// inside the content area. This makes it way easier to interact with prefs.
|
|
_focusContent() {
|
|
const node = ReactDOM.findDOMNode(this.refs.content).querySelector('[tabindex]')
|
|
if (node) {
|
|
node.focus();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {tab, selection, tabs} = this.props
|
|
|
|
return (
|
|
<KeyCommandsRegion className="preferences-wrap" tabIndex="1" localHandlers={this._localHandlers()}>
|
|
<Flexbox direction="column">
|
|
<PreferencesTabsBar
|
|
tabs={tabs}
|
|
selection={selection}
|
|
/>
|
|
<ScrollRegion className="preferences-content">
|
|
<ConfigPropContainer ref="content">
|
|
{tab ?
|
|
<tab.component accountId={selection.get('accountId')} /> :
|
|
false
|
|
}
|
|
</ConfigPropContainer>
|
|
</ScrollRegion>
|
|
</Flexbox>
|
|
</KeyCommandsRegion>
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
export default ListensToFluxStore(PreferencesRoot, {
|
|
stores: [PreferencesUIStore],
|
|
getStateFromStores() {
|
|
const tabs = PreferencesUIStore.tabs();
|
|
const selection = PreferencesUIStore.selection();
|
|
const tabId = selection.get('tabId');
|
|
const tab = tabs.find((s) => s.tabId === tabId);
|
|
return {tabs, selection, tab}
|
|
},
|
|
});
|