mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 08:46:07 +08:00
72613baf5d
Summary:
This commit fixes 2 issues with signatures in the preferences:
- Creating a signature (via any of the create buttons) would create 2 signatures
- Trying to select accounts to associate with a signature in the preferences would not work (the account would not be selected)
This was a regression introduced in e638e94084 (diff-4f38fd25aa24b48a309354be643165d3R26)
3111c16 made it so we attempt to `activate` any Stores that are registered with
the StoreRegistry. When adding stores to `nylas-exports`, they are
automatically registered in the StoreRegistry. Given that the
`SignatureStore` is in `nylas-exports`, and consequently is registered in
the StoreRegistry, it would be `activate`d upon window boot.
However, we were also manually activating it inside `internal_packages/composer-signatures/lib/main.es6`.
This caused it to register listeners for every action **twice**. For
this reason, 2 signatures would be created when trying to create 1, and
an account would be immediately unselected after being selected int he
signatures dropdown in preferences.
(Other changes in this are just stylistic)
Test Plan: manual
Reviewers: spang, evan
Reviewed By: evan
Differential Revision: https://phab.nylas.com/D4043
226 lines
5.6 KiB
JavaScript
226 lines
5.6 KiB
JavaScript
import React from 'react';
|
|
import _ from 'underscore';
|
|
import {
|
|
Flexbox,
|
|
RetinaImg,
|
|
EditableList,
|
|
Contenteditable,
|
|
ScrollRegion,
|
|
MultiselectDropdown,
|
|
} from 'nylas-component-kit';
|
|
import {AccountStore, SignatureStore, Actions} from 'nylas-exports';
|
|
|
|
|
|
export default class PreferencesSignatures extends React.Component {
|
|
static displayName = 'PreferencesSignatures';
|
|
|
|
constructor() {
|
|
super()
|
|
this.state = this._getStateFromStores()
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.unsubscribers = [
|
|
SignatureStore.listen(this._onChange),
|
|
]
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.unsubscribers.forEach(unsubscribe => unsubscribe());
|
|
}
|
|
|
|
|
|
_onChange = () => {
|
|
this.setState(this._getStateFromStores())
|
|
}
|
|
|
|
_getStateFromStores() {
|
|
const signatures = SignatureStore.getSignatures()
|
|
const accountsAndAliases = AccountStore.aliases()
|
|
const selected = SignatureStore.selectedSignature()
|
|
const defaults = SignatureStore.getDefaults()
|
|
return {
|
|
signatures: signatures,
|
|
selectedSignature: selected,
|
|
defaults: defaults,
|
|
accountsAndAliases: accountsAndAliases,
|
|
editAsHTML: this.state ? this.state.editAsHTML : false,
|
|
}
|
|
}
|
|
|
|
|
|
_onCreateButtonClick = () => {
|
|
this._onAddSignature()
|
|
}
|
|
|
|
_onAddSignature = () => {
|
|
Actions.addSignature()
|
|
}
|
|
|
|
_onDeleteSignature = (signature) => {
|
|
Actions.removeSignature(signature)
|
|
}
|
|
|
|
_onEditSignature = (edit) => {
|
|
let editedSig;
|
|
if (typeof edit === "object") {
|
|
editedSig = {
|
|
title: this.state.selectedSignature.title,
|
|
body: edit.target.value,
|
|
}
|
|
} else {
|
|
editedSig = {
|
|
title: edit,
|
|
body: this.state.selectedSignature.body,
|
|
}
|
|
}
|
|
Actions.updateSignature(editedSig, this.state.selectedSignature.id)
|
|
}
|
|
|
|
_onSelectSignature = (sig) => {
|
|
Actions.selectSignature(sig.id)
|
|
}
|
|
|
|
_onToggleAccount = (account) => {
|
|
Actions.toggleAccount(account.email)
|
|
}
|
|
|
|
_onToggleEditAsHTML = () => {
|
|
const toggled = !this.state.editAsHTML
|
|
this.setState({editAsHTML: toggled})
|
|
}
|
|
|
|
_renderListItemContent = (sig) => {
|
|
return sig.title
|
|
}
|
|
|
|
_renderSignatureToolbar() {
|
|
return (
|
|
<div className="editable-toolbar">
|
|
<div className="account-picker">
|
|
Default for: {this._renderAccountPicker()}
|
|
</div>
|
|
<div className="render-mode">
|
|
<input
|
|
type="checkbox"
|
|
id="render-mode"
|
|
checked={this.state.editAsHTML}
|
|
onClick={this._onToggleEditAsHTML}
|
|
/>
|
|
<label htmlFor="render-mode">Edit raw HTML</label>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
_selectItemKey = (accountOrAlias) => {
|
|
return accountOrAlias.clientId
|
|
}
|
|
|
|
_isChecked = (accountOrAlias) => {
|
|
if (!this.state.selectedSignature) {
|
|
return false;
|
|
}
|
|
return (this.state.defaults[accountOrAlias.email] === this.state.selectedSignature.id);
|
|
}
|
|
|
|
_labelForAccountPicker() {
|
|
const sel = _.filter(this.state.accountsAndAliases, (accountOrAlias) => {
|
|
return this._isChecked(accountOrAlias)
|
|
})
|
|
const numSelected = sel.length;
|
|
return numSelected.toString() + (numSelected === 1 ? " Account" : " Accounts")
|
|
}
|
|
|
|
_renderAccountPicker() {
|
|
const buttonText = this._labelForAccountPicker()
|
|
|
|
return (
|
|
<MultiselectDropdown
|
|
className="account-dropdown"
|
|
items={this.state.accountsAndAliases}
|
|
itemChecked={this._isChecked}
|
|
onToggleItem={this._onToggleAccount}
|
|
itemKey={this._selectItemKey}
|
|
current={this.selectedSignature}
|
|
buttonText={buttonText}
|
|
itemContent={(accountOrAlias) => accountOrAlias.email}
|
|
/>
|
|
)
|
|
}
|
|
|
|
_renderEditableSignature() {
|
|
const selectedBody = this.state.selectedSignature ? this.state.selectedSignature.body : ""
|
|
return (
|
|
<Contenteditable
|
|
ref="signatureInput"
|
|
value={selectedBody}
|
|
spellcheck={false}
|
|
onChange={this._onEditSignature}
|
|
/>
|
|
)
|
|
}
|
|
|
|
_renderHTMLSignature() {
|
|
return (
|
|
<textarea
|
|
value={this.state.selectedSignature.body}
|
|
onChange={this._onEditSignature}
|
|
/>
|
|
);
|
|
}
|
|
|
|
_renderSignatures() {
|
|
const sigArr = _.values(this.state.signatures)
|
|
if (sigArr.length === 0) {
|
|
return (
|
|
<div className="empty-list">
|
|
<RetinaImg
|
|
className="icon-signature"
|
|
name="signatures-big.png"
|
|
mode={RetinaImg.Mode.ContentDark}
|
|
/>
|
|
<h2>No signatures</h2>
|
|
<button
|
|
className="btn btn-small btn-create-signature"
|
|
onClick={this._onCreateButtonClick}
|
|
>
|
|
Create a new signature
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<Flexbox>
|
|
<EditableList
|
|
showEditIcon
|
|
className="signature-list"
|
|
items={sigArr}
|
|
itemContent={this._renderListItemContent}
|
|
onCreateItem={this._onAddSignature}
|
|
onDeleteItem={this._onDeleteSignature}
|
|
onItemEdited={this._onEditSignature}
|
|
onSelectItem={this._onSelectSignature}
|
|
selected={this.state.selectedSignature}
|
|
/>
|
|
<div className="signature-wrap">
|
|
<ScrollRegion className="signature-scroll-region">
|
|
{this.state.editAsHTML ? this._renderHTMLSignature() : this._renderEditableSignature()}
|
|
</ScrollRegion>
|
|
{this._renderSignatureToolbar()}
|
|
</div>
|
|
</Flexbox>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="preferences-signatures-container">
|
|
<section>
|
|
{this._renderSignatures()}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
}
|