mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +08:00
b4434f6617
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
118 lines
2.9 KiB
JavaScript
118 lines
2.9 KiB
JavaScript
/** @babel */
|
|
import React, {Component, PropTypes} from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import {Actions, FocusedPerspectiveStore} from 'nylas-exports';
|
|
import {RetinaImg} from 'nylas-component-kit';
|
|
import SnoozePopover from './snooze-popover';
|
|
|
|
|
|
class SnoozeButton extends Component {
|
|
|
|
static propTypes = {
|
|
className: PropTypes.string,
|
|
threads: PropTypes.array,
|
|
direction: PropTypes.string,
|
|
renderImage: PropTypes.bool,
|
|
getBoundingClientRect: PropTypes.func,
|
|
};
|
|
|
|
static defaultProps = {
|
|
className: 'btn btn-toolbar',
|
|
direction: 'down',
|
|
renderImage: true,
|
|
};
|
|
|
|
onClick = (event)=> {
|
|
event.stopPropagation()
|
|
const buttonRect = this.getBoundingClientRect()
|
|
Actions.openPopover(
|
|
<SnoozePopover
|
|
threads={this.props.threads}
|
|
closePopover={Actions.closePopover} />,
|
|
{originRect: buttonRect, direction: this.props.direction}
|
|
)
|
|
};
|
|
|
|
getBoundingClientRect = ()=> {
|
|
if (this.props.getBoundingClientRect) {
|
|
return this.props.getBoundingClientRect()
|
|
}
|
|
return ReactDOM.findDOMNode(this).getBoundingClientRect()
|
|
};
|
|
|
|
render() {
|
|
if (!FocusedPerspectiveStore.current().isInbox()) {
|
|
return <span />;
|
|
}
|
|
return (
|
|
<button
|
|
title="Snooze"
|
|
tabIndex={-1}
|
|
className={"snooze-button " + this.props.className}
|
|
onClick={this.onClick}>
|
|
{this.props.renderImage ?
|
|
<RetinaImg
|
|
name="toolbar-snooze.png"
|
|
mode={RetinaImg.Mode.ContentIsMask} /> :
|
|
void 0
|
|
}
|
|
</button>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
export class QuickActionSnooze extends Component {
|
|
static displayName = 'QuickActionSnooze';
|
|
|
|
static propTypes = {
|
|
thread: PropTypes.object,
|
|
};
|
|
|
|
getBoundingClientRect = ()=> {
|
|
// Grab the parent node because of the zoom applied to this button. If we
|
|
// took this element directly, we'd have to divide everything by 2
|
|
const element = ReactDOM.findDOMNode(this).parentNode;
|
|
const {height, width, top, bottom, left, right} = element.getBoundingClientRect()
|
|
|
|
// The parent node is a bit too much to the left, lets adjust this.
|
|
return {height, width, top, bottom, right, left: left + 5}
|
|
};
|
|
|
|
static containerRequired = false;
|
|
|
|
render() {
|
|
if (!FocusedPerspectiveStore.current().isInbox()) {
|
|
return <span />;
|
|
}
|
|
return (
|
|
<SnoozeButton
|
|
direction="left"
|
|
renderImage={false}
|
|
threads={[this.props.thread]}
|
|
className="btn action action-snooze"
|
|
getBoundingClientRect={this.getBoundingClientRect} />
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
export class ToolbarSnooze extends Component {
|
|
static displayName = 'ToolbarSnooze';
|
|
|
|
static propTypes = {
|
|
items: PropTypes.array,
|
|
};
|
|
|
|
static containerRequired = false;
|
|
|
|
render() {
|
|
if (!FocusedPerspectiveStore.current().isInbox()) {
|
|
return <span />;
|
|
}
|
|
return (
|
|
<SnoozeButton threads={this.props.items}/>
|
|
);
|
|
}
|
|
}
|