Mailspring/internal_packages/composer/lib/main.es6
Evan Morikawa c9ea5b6483 feat(scheduler): Add Overlaid Components
Summary:
SEE ASSOCIATED SUBMODULE DIFF

This enables rich React components (like the Scheduler's `NewEventCard`)
to be used in contenteditables.

We introduce the concept of an "Overlaid Component". These are rendered
React components that are absolutely positioned on top of an equivalent
"Anchor" in a contenteditable.

Inside the contenteditable are special `<img />` tags that have an
id corresponding to a particular rich overlaid component. This way, even
if those img tags are cut and pasted or moved, they'll have a mapping to a
  particular component stored in the `OverlaidComponentStore`. Img tags
  are fairly well handled natively by contenteditable and allow you to
  maniuplate these overlaid components as normal text elements.

The `OverlaidComponentStore` is responsible for listening to and managing
the state of the Anchors and their equivalent OverlaidComponents.

We use a decorator called `ListenToChanges` that allows us to wrap
components to update their corresponding anchor. Since we need to know
about ALL changes that could affect rendered height and width, we need to
use a `MuatationListener` instead of the React render cycle.

This is only the initial diff. There are several TODOs here:
https://paper.dropbox.com/doc/Composer-Overlaid-Components-FoZrF0cFggzSUZirZ9MNo

Test Plan: TODO. Manual

Reviewers: juan, bengotow

Reviewed By: juan

Differential Revision: https://phab.nylas.com/D2946
2016-05-24 15:47:49 -07:00

130 lines
3.7 KiB
JavaScript

/* eslint react/sort-comp: 0 */
import _ from 'underscore';
import React from 'react';
import {remote} from 'electron';
import {
Message,
Actions,
DraftStore,
WorkspaceStore,
ComponentRegistry,
ExtensionRegistry,
InflatesDraftClientId,
} from 'nylas-exports';
import {OverlaidComposerExtension} from 'nylas-component-kit'
import ComposeButton from './compose-button';
import ComposerView from './composer-view';
const ComposerViewForDraftClientId = InflatesDraftClientId(ComposerView);
class ComposerWithWindowProps extends React.Component {
static displayName = 'ComposerWithWindowProps';
static containerRequired = false;
constructor(props) {
super(props);
// We'll now always have windowProps by the time we construct this.
const windowProps = NylasEnv.getWindowProps();
const {draftJSON, draftClientId} = windowProps;
if (!draftJSON) {
throw new Error("Initialize popout composer windows with valid draftJSON")
}
const draft = new Message().fromJSON(draftJSON);
DraftStore._createSession(draftClientId, draft);
this.state = windowProps
}
componentWillUnmount() {
if (this._usub) { this._usub() }
}
componentDidUpdate() {
this.refs.composer.focus()
}
_onDraftReady = () => {
this.refs.composer.focus().then(() => {
const totalTime = NylasEnv.perf.stop("Popout Draft");
if (!NylasEnv.inDevMode() && !NylasEnv.inSpecMode()) {
Actions.recordUserEvent("Popout Composer Time", {totalTime})
}
NylasEnv.displayWindow();
if (this.state.errorMessage) {
this._showInitialErrorDialog(this.state.errorMessage);
}
// This will start loading the rest of the composer's plugins. This
// may take a while (hundreds of ms) depending on how many plugins
// you have installed. For some reason it takes two frames to
// reliably get the basic composer (Send button, etc) painted
// properly.
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
NylasEnv.getCurrentWindow().updateLoadSettings({
windowType: "composer",
})
})
})
});
}
render() {
return (
<ComposerViewForDraftClientId
ref="composer"
onDraftReady={this._onDraftReady}
draftClientId={this.state.draftClientId}
className="composer-full-window"
/>
);
}
_showInitialErrorDialog(msg) {
const dialog = remote.dialog;
// We delay so the view has time to update the restored draft. If we
// don't delay the modal may come up in a state where the draft looks
// like it hasn't been restored or has been lost.
_.delay(() => {
dialog.showMessageBox(remote.getCurrentWindow(), {
type: 'warning',
buttons: ['Okay'],
message: "Error",
detail: msg,
});
}, 100);
}
}
export function activate() {
ExtensionRegistry.Composer.register(OverlaidComposerExtension, {priority: 1})
if (NylasEnv.isMainWindow()) {
ComponentRegistry.register(ComposerViewForDraftClientId, {
role: 'Composer',
});
ComponentRegistry.register(ComposeButton, {
location: WorkspaceStore.Location.RootSidebar.Toolbar,
});
} else {
NylasEnv.getCurrentWindow().setMinimumSize(480, 250);
ComponentRegistry.register(ComposerWithWindowProps, {
location: WorkspaceStore.Location.Center,
});
}
}
export function deactivate() {
if (NylasEnv.isMainWindow()) {
ComponentRegistry.unregister(ComposerViewForDraftClientId);
ComponentRegistry.unregister(ComposeButton);
} else {
ComponentRegistry.unregister(ComposerWithWindowProps);
}
ExtensionRegistry.Composer.unregister(OverlaidComposerExtension)
}
export function serialize() {
return this.state;
}