Mailspring/internal_packages/composer-signature/lib/signature-composer-dropdown.jsx

146 lines
3.6 KiB
React
Raw Normal View History

refactor(signatures): Removed old signature imgs and made static empty signatures page Summary: Refactored signature preferences page to allow more signatures than the previous 1-1 mapping for signatures and accounts. Created a multi select dropdown of the accounts for which a certain signature is set as default for. Added a button into the draft header From field to toggle between saved signatures. refactor(signatures): Add basic add/remove capabilities to static refactor(signatures): Hooked up signature actions and signature store for basic functionality fix(signatures): Cleaned up signature store and started on multiselectdropdown fix(signatures): Add multi signature toggle select to multiselect dropdown build(signatures): Built framework for multiselect dropdown build(signatures): Toggle button functionality for dropdown build(signatures): Build multi select from components and add debounce refactor(signatures): Move signature actions and signature store into flux fix(signatures): Styled composer signatures button/dropdown and fixed preferences checkmarks build(signatures): Finish main functionality, about to refactor composer signature button into injected component fix(signatures): Changed position styles fix(signatures): Fixed background color for dropdown button when blurred build(signatures): Began to write tests for signatures store, preferences and dropdown Test Plan: Wrote tests for preferences signatures, signature store, signature composer dropdown and refactored tests for signature composer extension. For signature composer extension I removed applyTransformsToDraft and unapplyTransformsToDraft and tested by sending emails with signatures to different providers to make sure the <signature> tag caused problems. Reviewers: bengotow, juan Reviewed By: juan Differential Revision: https://phab.nylas.com/D3073
2016-07-12 03:28:37 +08:00
import {
React,
Actions,
SignatureStore,
} from 'nylas-exports'
import {
Menu,
RetinaImg,
ButtonDropdown,
} from 'nylas-component-kit'
import _ from 'underscore'
2016-10-18 08:59:33 +08:00
import SignatureUtils from './signature-utils'
refactor(signatures): Removed old signature imgs and made static empty signatures page Summary: Refactored signature preferences page to allow more signatures than the previous 1-1 mapping for signatures and accounts. Created a multi select dropdown of the accounts for which a certain signature is set as default for. Added a button into the draft header From field to toggle between saved signatures. refactor(signatures): Add basic add/remove capabilities to static refactor(signatures): Hooked up signature actions and signature store for basic functionality fix(signatures): Cleaned up signature store and started on multiselectdropdown fix(signatures): Add multi signature toggle select to multiselect dropdown build(signatures): Built framework for multiselect dropdown build(signatures): Toggle button functionality for dropdown build(signatures): Build multi select from components and add debounce refactor(signatures): Move signature actions and signature store into flux fix(signatures): Styled composer signatures button/dropdown and fixed preferences checkmarks build(signatures): Finish main functionality, about to refactor composer signature button into injected component fix(signatures): Changed position styles fix(signatures): Fixed background color for dropdown button when blurred build(signatures): Began to write tests for signatures store, preferences and dropdown Test Plan: Wrote tests for preferences signatures, signature store, signature composer dropdown and refactored tests for signature composer extension. For signature composer extension I removed applyTransformsToDraft and unapplyTransformsToDraft and tested by sending emails with signatures to different providers to make sure the <signature> tag caused problems. Reviewers: bengotow, juan Reviewed By: juan Differential Revision: https://phab.nylas.com/D3073
2016-07-12 03:28:37 +08:00
export default class SignatureComposerDropdown extends React.Component {
static displayName = 'SignatureComposerDropdown'
static containerRequired = false
static propTypes = {
draft: React.PropTypes.object.isRequired,
session: React.PropTypes.object.isRequired,
currentAccount: React.PropTypes.object,
accounts: React.PropTypes.array,
}
constructor() {
super()
this.state = this._getStateFromStores()
}
componentDidMount = () => {
this.unsubscribers = [
SignatureStore.listen(this._onChange),
]
}
componentDidUpdate(previousProps) {
if (previousProps.currentAccount.clientId !== this.props.currentAccount.clientId) {
const nextDefaultSignature = SignatureStore.signatureForEmail(this.props.currentAccount.email)
this._changeSignature(nextDefaultSignature)
refactor(signatures): Removed old signature imgs and made static empty signatures page Summary: Refactored signature preferences page to allow more signatures than the previous 1-1 mapping for signatures and accounts. Created a multi select dropdown of the accounts for which a certain signature is set as default for. Added a button into the draft header From field to toggle between saved signatures. refactor(signatures): Add basic add/remove capabilities to static refactor(signatures): Hooked up signature actions and signature store for basic functionality fix(signatures): Cleaned up signature store and started on multiselectdropdown fix(signatures): Add multi signature toggle select to multiselect dropdown build(signatures): Built framework for multiselect dropdown build(signatures): Toggle button functionality for dropdown build(signatures): Build multi select from components and add debounce refactor(signatures): Move signature actions and signature store into flux fix(signatures): Styled composer signatures button/dropdown and fixed preferences checkmarks build(signatures): Finish main functionality, about to refactor composer signature button into injected component fix(signatures): Changed position styles fix(signatures): Fixed background color for dropdown button when blurred build(signatures): Began to write tests for signatures store, preferences and dropdown Test Plan: Wrote tests for preferences signatures, signature store, signature composer dropdown and refactored tests for signature composer extension. For signature composer extension I removed applyTransformsToDraft and unapplyTransformsToDraft and tested by sending emails with signatures to different providers to make sure the <signature> tag caused problems. Reviewers: bengotow, juan Reviewed By: juan Differential Revision: https://phab.nylas.com/D3073
2016-07-12 03:28:37 +08:00
}
}
componentWillUnmount() {
this.unsubscribers.forEach(unsubscribe => unsubscribe())
}
_onChange = () => {
this.setState(this._getStateFromStores())
}
_getStateFromStores() {
const signatures = SignatureStore.getSignatures()
return {
signatures: signatures,
}
}
_renderSigItem = (sigItem) => {
return (
<span className={`signature-title-${sigItem.title}`}>{sigItem.title}</span>
)
}
_changeSignature = (sig) => {
let body;
if (sig) {
body = SignatureUtils.applySignature(this.props.draft.body, sig.body)
} else {
body = SignatureUtils.applySignature(this.props.draft.body, '')
}
this.props.session.changes.add({body})
}
_isSelected = (sigObj) => {
// http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
const escapeRegExp = (str) => {
return str.replace(/[-[\]/}{)(*+?.\\^$|]/g, "\\$&");
refactor(signatures): Removed old signature imgs and made static empty signatures page Summary: Refactored signature preferences page to allow more signatures than the previous 1-1 mapping for signatures and accounts. Created a multi select dropdown of the accounts for which a certain signature is set as default for. Added a button into the draft header From field to toggle between saved signatures. refactor(signatures): Add basic add/remove capabilities to static refactor(signatures): Hooked up signature actions and signature store for basic functionality fix(signatures): Cleaned up signature store and started on multiselectdropdown fix(signatures): Add multi signature toggle select to multiselect dropdown build(signatures): Built framework for multiselect dropdown build(signatures): Toggle button functionality for dropdown build(signatures): Build multi select from components and add debounce refactor(signatures): Move signature actions and signature store into flux fix(signatures): Styled composer signatures button/dropdown and fixed preferences checkmarks build(signatures): Finish main functionality, about to refactor composer signature button into injected component fix(signatures): Changed position styles fix(signatures): Fixed background color for dropdown button when blurred build(signatures): Began to write tests for signatures store, preferences and dropdown Test Plan: Wrote tests for preferences signatures, signature store, signature composer dropdown and refactored tests for signature composer extension. For signature composer extension I removed applyTransformsToDraft and unapplyTransformsToDraft and tested by sending emails with signatures to different providers to make sure the <signature> tag caused problems. Reviewers: bengotow, juan Reviewed By: juan Differential Revision: https://phab.nylas.com/D3073
2016-07-12 03:28:37 +08:00
}
const signatureRegex = new RegExp(escapeRegExp(`<signature>${sigObj.body}</signature>`))
const signatureLocation = signatureRegex.exec(this.props.draft.body)
if (signatureLocation) return true
return false
}
_onClickNoSignature = () => {
this._changeSignature({body: ''})
}
_onClickEditSignatures() {
Actions.switchPreferencesTab('Signatures')
Actions.openPreferences()
}
_renderSignatures() {
const header = [<div className="item item-none" key="none" onMouseDown={this._onClickNoSignature}><span>No signature</span></div>]
const footer = [<div className="item item-edit" key="edit" onMouseDown={this._onClickEditSignatures}><span>Edit Signatures...</span></div>]
const sigItems = _.values(this.state.signatures)
return (
<Menu
headerComponents={header}
footerComponents={footer}
items={sigItems}
itemKey={sigItem => sigItem.id}
itemContent={this._renderSigItem}
onSelect={this._changeSignature}
itemChecked={this._isSelected}
/>
)
}
_renderSignatureIcon() {
return (
<RetinaImg
className="signature-button"
name="top-signature-dropdown.png"
mode={RetinaImg.Mode.ContentIsMask}
/>
)
}
render() {
const sigs = this.state.signatures;
const icon = this._renderSignatureIcon()
if (!_.isEmpty(sigs)) {
return (
<div className="signature-button-dropdown">
<ButtonDropdown
primaryItem={icon}
menu={this._renderSignatures()}
bordered={false}
/>
</div>
)
}
return null
}
}