Mailspring/static/package-template/lib/my-composer-button.jsx
Ben Gotow 7452705c31 refactor(composer): Make session, draft available everywhere
Summary:
Up until now, we've been requiring that every plugin control in the composer take the draftClientId, retreive the session, listen to it, build state from the draft, etc. This is a huge pain and is hard to explain to newcomers becaus it frankly makes no sense.

In 0.3.45 we made it so that the ComposerView always has a non-null draft and session. (It isn't rendered until they're available). In this diff, I just pass those through to all the plugins and remove all the session retrieval cruft.

Almost none of the buttons have state of their own, which I think is appropriate.

They do render on every keystroke, but they were already running code (to recompute their state) on each keystroke and profiling suggests this has no impact.

Prepare for immutable

In preparation for Immutable models, make the draft store proxy returns a !== draft if any changes have been made. This means you can safely know that a draft has changed if `props.draft !== nextProps.draft`

Test Plan: Run tests

Reviewers: juan, evan

Reviewed By: juan, evan

Differential Revision: https://phab.nylas.com/D2902
2016-04-19 16:05:15 -07:00

56 lines
1.6 KiB
JavaScript

import {React} from 'nylas-exports';
export default class MyComposerButton extends React.Component {
// Note: You should assign a new displayName to avoid naming
// conflicts when injecting your item
static displayName = 'MyComposerButton';
// When you register as a composer button, you receive a
// reference to the draft, and you can look it up to perform
// actions and retrieve data.
static propTypes = {
draft: React.PropTypes.object.isRequired,
session: React.PropTypes.object.isRequired,
};
shouldComponentUpdate(nextProps) {
// Our render method doesn't use the provided `draft`, and the draft changes
// constantly (on every keystroke!) `shouldComponentUpdate` helps keep N1 fast.
return nextProps.session !== this.props.session;
}
_onClick = () => {
const {session, draft} = this.props;
// To retrieve information about the draft, we fetch the current editing
// session from the draft store. We can access attributes of the draft
// and add changes to the session which will be appear immediately.
const newSubject = `${draft.subject} - It Worked!`;
const dialog = this._getDialog();
dialog.showMessageBox({
title: 'Here we go...',
detail: `Adjusting the subject line To "${newSubject}"`,
buttons: ['OK'],
type: 'info',
});
session.changes.add({subject: newSubject});
}
_getDialog() {
return require('electron').remote.dialog;
}
render() {
return (
<div className="my-package">
<button className="btn btn-toolbar" onClick={() => this._onClick()} ref="button">
Hello World
</button>
</div>
);
}
}