Mailspring/internal_packages/composer-signature/lib/preferences-signatures.jsx

122 lines
3 KiB
React
Raw Normal View History

import React from 'react';
import {Contenteditable} from 'nylas-component-kit';
import {AccountStore} from 'nylas-exports';
import SignatureStore from './signature-store';
import SignatureActions from './signature-actions';
export default class PreferencesSignatures extends React.Component {
static displayName = 'PreferencesSignatures';
constructor(props) {
super(props);
this.state = this._getStateFromStores();
}
componentDidMount() {
this.usub = AccountStore.listen(this._onChange);
}
componentWillUnmount() {
this.usub();
}
_onChange = () => {
this.setState(this._getStateFromStores());
}
_getStateFromStores() {
const accounts = AccountStore.accounts();
const state = this.state || {};
let {currentAccountId} = state;
if (!accounts.find(acct => acct.id === currentAccountId)) {
currentAccountId = accounts[0].id;
}
return {
accounts,
currentAccountId,
currentSignature: SignatureStore.signatureForAccountId(currentAccountId),
editAsHTML: state.editAsHTML,
};
}
_renderAccountPicker() {
const options = this.state.accounts.map(account =>
<option value={account.id} key={account.id}>{account.emailAddress}</option>
);
return (
<select value={this.state.currentAccountId} onChange={this._onSelectAccount}>
{options}
</select>
);
}
_renderEditableSignature() {
return (
<Contenteditable
tabIndex={-1}
ref="signatureInput"
value={this.state.currentSignature}
onChange={this._onEditSignature}
spellcheck={false}
/>
);
}
_renderHTMLSignature() {
return (
<textarea
ref="signatureHTMLInput"
value={this.state.currentSignature}
onChange={this._onEditSignature}
/>
);
}
_onEditSignature = (event) => {
const html = event.target.value;
this.setState({currentSignature: html});
SignatureActions.setSignatureForAccountId({
accountId: this.state.currentAccountId,
signature: html,
});
}
_onSelectAccount = (event) => {
const accountId = event.target.value;
this.setState({
currentSignature: SignatureStore.signatureForAccountId(accountId),
currentAccountId: accountId,
});
}
_renderModeToggle() {
const label = this.state.editAsHTML ? "Edit live preview" : "Edit raw HTML";
const action = () => {
this.setState({editAsHTML: !this.state.editAsHTML});
return;
};
return (
<a onClick={action}>{label}</a>
);
}
render() {
const rawText = this.state.editAsHTML ? "Raw HTML " : "";
return (
<section className="container-signatures">
<div className="section-title">
{rawText}Signature for: {this._renderAccountPicker()}
</div>
<div className="signature-wrap">
{this.state.editAsHTML ? this._renderHTMLSignature() : this._renderEditableSignature()}
</div>
<div className="toggle-mode" style={{marginTop: "1em"}}>{this._renderModeToggle()}</div>
</section>
)
}
}