2016-03-15 08:04:40 +08:00
|
|
|
import React from 'react';
|
2016-07-12 03:28:37 +08:00
|
|
|
import {
|
2017-09-27 02:33:08 +08:00
|
|
|
Flexbox,
|
|
|
|
RetinaImg,
|
|
|
|
EditableList,
|
|
|
|
Contenteditable,
|
|
|
|
ScrollRegion,
|
|
|
|
MultiselectDropdown,
|
2017-09-27 02:46:00 +08:00
|
|
|
} from 'mailspring-component-kit';
|
2017-09-27 02:42:18 +08:00
|
|
|
import { AccountStore, SignatureStore, Actions } from 'mailspring-exports';
|
2016-03-15 08:04:40 +08:00
|
|
|
|
|
|
|
export default class PreferencesSignatures extends React.Component {
|
|
|
|
static displayName = 'PreferencesSignatures';
|
|
|
|
|
2016-07-12 03:28:37 +08:00
|
|
|
constructor() {
|
2017-09-27 02:33:08 +08:00
|
|
|
super();
|
|
|
|
this.state = this._getStateFromStores();
|
2016-03-15 08:04:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2017-09-27 02:33:08 +08:00
|
|
|
this.unsubscribers = [SignatureStore.listen(this._onChange)];
|
2016-03-15 08:04:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2016-07-12 03:28:37 +08:00
|
|
|
this.unsubscribers.forEach(unsubscribe => unsubscribe());
|
2016-03-15 08:04:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
_onChange = () => {
|
2017-09-27 02:33:08 +08:00
|
|
|
this.setState(this._getStateFromStores());
|
|
|
|
};
|
2016-03-15 08:04:40 +08:00
|
|
|
|
|
|
|
_getStateFromStores() {
|
2017-09-27 02:33:08 +08:00
|
|
|
const signatures = SignatureStore.getSignatures();
|
|
|
|
const accountsAndAliases = AccountStore.aliases();
|
|
|
|
const selected = SignatureStore.selectedSignature();
|
|
|
|
const defaults = SignatureStore.getDefaults();
|
2016-07-12 03:28:37 +08:00
|
|
|
return {
|
|
|
|
signatures: signatures,
|
|
|
|
selectedSignature: selected,
|
|
|
|
defaults: defaults,
|
2016-07-22 02:18:21 +08:00
|
|
|
accountsAndAliases: accountsAndAliases,
|
2016-07-12 03:28:37 +08:00
|
|
|
editAsHTML: this.state ? this.state.editAsHTML : false,
|
2017-09-27 02:33:08 +08:00
|
|
|
};
|
2016-07-12 03:28:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
_onCreateButtonClick = () => {
|
2017-09-27 02:33:08 +08:00
|
|
|
this._onAddSignature();
|
|
|
|
};
|
2016-07-12 03:28:37 +08:00
|
|
|
|
|
|
|
_onAddSignature = () => {
|
2017-09-27 02:33:08 +08:00
|
|
|
Actions.addSignature();
|
|
|
|
};
|
2016-03-15 08:04:40 +08:00
|
|
|
|
2017-09-27 02:33:08 +08:00
|
|
|
_onDeleteSignature = signature => {
|
|
|
|
Actions.removeSignature(signature);
|
|
|
|
};
|
2016-07-12 03:28:37 +08:00
|
|
|
|
2017-09-27 02:33:08 +08:00
|
|
|
_onEditSignature = edit => {
|
2016-07-12 03:28:37 +08:00
|
|
|
let editedSig;
|
2017-09-27 02:33:08 +08:00
|
|
|
if (typeof edit === 'object') {
|
2016-07-12 03:28:37 +08:00
|
|
|
editedSig = {
|
|
|
|
title: this.state.selectedSignature.title,
|
|
|
|
body: edit.target.value,
|
2017-09-27 02:33:08 +08:00
|
|
|
};
|
2016-07-12 03:28:37 +08:00
|
|
|
} else {
|
|
|
|
editedSig = {
|
|
|
|
title: edit,
|
|
|
|
body: this.state.selectedSignature.body,
|
2017-09-27 02:33:08 +08:00
|
|
|
};
|
2016-03-15 08:04:40 +08:00
|
|
|
}
|
2017-09-27 02:33:08 +08:00
|
|
|
Actions.updateSignature(editedSig, this.state.selectedSignature.id);
|
|
|
|
};
|
2016-03-15 08:04:40 +08:00
|
|
|
|
2017-09-27 02:33:08 +08:00
|
|
|
_onSelectSignature = sig => {
|
|
|
|
Actions.selectSignature(sig.id);
|
|
|
|
};
|
2016-07-12 03:28:37 +08:00
|
|
|
|
2017-09-27 02:33:08 +08:00
|
|
|
_onToggleAccount = account => {
|
|
|
|
Actions.toggleAccount(account.email);
|
|
|
|
};
|
2016-07-12 03:28:37 +08:00
|
|
|
|
|
|
|
_onToggleEditAsHTML = () => {
|
2017-09-27 02:33:08 +08:00
|
|
|
const toggled = !this.state.editAsHTML;
|
|
|
|
this.setState({ editAsHTML: toggled });
|
|
|
|
};
|
2016-07-12 03:28:37 +08:00
|
|
|
|
2017-09-27 02:33:08 +08:00
|
|
|
_renderListItemContent = sig => {
|
|
|
|
return sig.title;
|
|
|
|
};
|
2016-03-15 08:04:40 +08:00
|
|
|
|
2016-07-12 03:28:37 +08:00
|
|
|
_renderSignatureToolbar() {
|
2016-03-15 08:04:40 +08:00
|
|
|
return (
|
2016-07-12 03:28:37 +08:00
|
|
|
<div className="editable-toolbar">
|
2017-09-27 02:33:08 +08:00
|
|
|
<div className="account-picker">Default for: {this._renderAccountPicker()}</div>
|
2016-07-12 03:28:37 +08:00
|
|
|
<div className="render-mode">
|
2017-03-01 01:13:37 +08:00
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
id="render-mode"
|
|
|
|
checked={this.state.editAsHTML}
|
|
|
|
onClick={this._onToggleEditAsHTML}
|
|
|
|
/>
|
2016-09-22 01:45:04 +08:00
|
|
|
<label htmlFor="render-mode">Edit raw HTML</label>
|
2016-07-12 03:28:37 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
2017-09-27 02:33:08 +08:00
|
|
|
);
|
2016-07-12 03:28:37 +08:00
|
|
|
}
|
|
|
|
|
2017-09-27 02:33:08 +08:00
|
|
|
_selectItemKey = accountOrAlias => {
|
|
|
|
return accountOrAlias.id;
|
|
|
|
};
|
2016-07-12 03:28:37 +08:00
|
|
|
|
2017-09-27 02:33:08 +08:00
|
|
|
_isChecked = accountOrAlias => {
|
2016-07-29 05:46:01 +08:00
|
|
|
if (!this.state.selectedSignature) {
|
|
|
|
return false;
|
|
|
|
}
|
2017-09-27 02:33:08 +08:00
|
|
|
return this.state.defaults[accountOrAlias.email] === this.state.selectedSignature.id;
|
|
|
|
};
|
2016-07-12 03:28:37 +08:00
|
|
|
|
2016-07-29 05:46:01 +08:00
|
|
|
_labelForAccountPicker() {
|
2017-09-27 02:33:08 +08:00
|
|
|
const sel = this.state.accountsAndAliases.filter(accountOrAlias => {
|
|
|
|
return this._isChecked(accountOrAlias);
|
|
|
|
});
|
2016-07-29 05:46:01 +08:00
|
|
|
const numSelected = sel.length;
|
2017-09-27 02:33:08 +08:00
|
|
|
return numSelected.toString() + (numSelected === 1 ? ' Account' : ' Accounts');
|
2016-07-12 03:28:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
_renderAccountPicker() {
|
2017-09-27 02:33:08 +08:00
|
|
|
const buttonText = this._labelForAccountPicker();
|
2016-07-22 02:18:21 +08:00
|
|
|
|
2016-07-12 03:28:37 +08:00
|
|
|
return (
|
|
|
|
<MultiselectDropdown
|
|
|
|
className="account-dropdown"
|
2016-07-22 02:18:21 +08:00
|
|
|
items={this.state.accountsAndAliases}
|
2016-07-12 03:28:37 +08:00
|
|
|
itemChecked={this._isChecked}
|
|
|
|
onToggleItem={this._onToggleAccount}
|
|
|
|
itemKey={this._selectItemKey}
|
|
|
|
current={this.selectedSignature}
|
|
|
|
buttonText={buttonText}
|
2017-09-27 02:33:08 +08:00
|
|
|
itemContent={accountOrAlias => accountOrAlias.email}
|
2016-07-12 03:28:37 +08:00
|
|
|
/>
|
2017-09-27 02:33:08 +08:00
|
|
|
);
|
2016-03-15 08:04:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
_renderEditableSignature() {
|
2017-09-27 02:33:08 +08:00
|
|
|
const selectedBody = this.state.selectedSignature ? this.state.selectedSignature.body : '';
|
2016-03-15 08:04:40 +08:00
|
|
|
return (
|
2017-09-27 02:33:08 +08:00
|
|
|
<Contenteditable value={selectedBody} spellcheck={false} onChange={this._onEditSignature} />
|
|
|
|
);
|
2016-03-15 08:04:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
_renderHTMLSignature() {
|
2017-09-27 02:33:08 +08:00
|
|
|
return <textarea value={this.state.selectedSignature.body} onChange={this._onEditSignature} />;
|
2016-03-15 08:04:40 +08:00
|
|
|
}
|
|
|
|
|
2016-07-12 03:28:37 +08:00
|
|
|
_renderSignatures() {
|
2017-09-27 02:33:08 +08:00
|
|
|
const sigArr = Object.values(this.state.signatures);
|
2016-07-12 03:28:37 +08:00
|
|
|
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>
|
2017-03-01 01:13:37 +08:00
|
|
|
<button
|
|
|
|
className="btn btn-small btn-create-signature"
|
|
|
|
onClick={this._onCreateButtonClick}
|
|
|
|
>
|
|
|
|
Create a new signature
|
2016-07-12 03:28:37 +08:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-03-15 08:04:40 +08:00
|
|
|
return (
|
2016-07-12 03:28:37 +08:00
|
|
|
<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">
|
2016-08-02 02:54:00 +08:00
|
|
|
<ScrollRegion className="signature-scroll-region">
|
2016-07-12 03:28:37 +08:00
|
|
|
{this.state.editAsHTML ? this._renderHTMLSignature() : this._renderEditableSignature()}
|
2016-08-02 02:54:00 +08:00
|
|
|
</ScrollRegion>
|
|
|
|
{this._renderSignatureToolbar()}
|
2016-07-12 03:28:37 +08:00
|
|
|
</div>
|
|
|
|
</Flexbox>
|
2017-09-27 02:33:08 +08:00
|
|
|
);
|
2016-03-15 08:04:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
2016-07-12 03:28:37 +08:00
|
|
|
<div className="preferences-signatures-container">
|
2017-09-27 02:33:08 +08:00
|
|
|
<section>{this._renderSignatures()}</section>
|
2016-07-12 03:28:37 +08:00
|
|
|
</div>
|
2017-09-27 02:33:08 +08:00
|
|
|
);
|
2016-03-15 08:04:40 +08:00
|
|
|
}
|
|
|
|
}
|