mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-12 04:25:31 +08:00
116 lines
3.6 KiB
CoffeeScript
116 lines
3.6 KiB
CoffeeScript
React = require 'react'
|
|
_ = require 'underscore'
|
|
{Contenteditable, RetinaImg, Flexbox} = require 'nylas-component-kit'
|
|
{AccountStore, Utils} = require 'nylas-exports'
|
|
|
|
class PreferencesSignatures extends React.Component
|
|
@displayName: 'PreferencesSignatures'
|
|
|
|
constructor: (@props) ->
|
|
@_signatureSaveQueue = {}
|
|
|
|
selectedAccountId = AccountStore.current()?.id
|
|
if selectedAccountId
|
|
key = @_configKey(selectedAccountId)
|
|
initialSig = @props.config.get(key)
|
|
else
|
|
initialSig = ""
|
|
|
|
@state =
|
|
editAsHTML: false
|
|
accounts: AccountStore.items()
|
|
currentSignature: initialSig
|
|
selectedAccountId: selectedAccountId
|
|
|
|
componentDidMount: ->
|
|
@usub = AccountStore.listen @_onChange
|
|
|
|
componentWillUnmount: ->
|
|
@usub()
|
|
@_saveSignatureNow(@state.selectedAccountId, @state.currentSignature)
|
|
|
|
_saveSignatureNow: (accountId, value) =>
|
|
key = @_configKey(accountId)
|
|
@props.config.set(key, value)
|
|
|
|
_saveSignatureSoon: (accountId, value) =>
|
|
@_signatureSaveQueue[accountId] = value
|
|
@_saveSignaturesFromCache()
|
|
|
|
__saveSignaturesFromCache: =>
|
|
for accountId, value of @_signatureSaveQueue
|
|
@_saveSignatureNow(accountId, value)
|
|
|
|
@_signatureSaveQueue = {}
|
|
|
|
_saveSignaturesFromCache: _.debounce(PreferencesSignatures::__saveSignaturesFromCache, 500)
|
|
|
|
_onChange: =>
|
|
@setState @_getStateFromStores()
|
|
|
|
_getStateFromStores: ->
|
|
accounts = AccountStore.items()
|
|
selectedAccountId = @state.selectedAccountId
|
|
currentSignature = @state.currentSignature
|
|
if not @state.selectedAccountId in _.pluck(accounts, "id")
|
|
selectedAccountId = null
|
|
currentSignature = ""
|
|
return {accounts, selectedAccountId, currentSignature}
|
|
|
|
_renderAccountPicker: ->
|
|
options = @state.accounts.map (account) ->
|
|
<option value={account.id}>{account.emailAddress}</option>
|
|
|
|
<select value={@state.selectedAccountId} onChange={@_onSelectAccount}>
|
|
{options}
|
|
</select>
|
|
|
|
_renderEditableSignature: ->
|
|
<Contenteditable
|
|
ref="signatureInput"
|
|
value={@state.currentSignature}
|
|
onChange={@_onEditSignature}
|
|
spellcheck={false} />
|
|
|
|
_renderHTMLSignature: ->
|
|
<textarea ref="signatureHTMLInput"
|
|
value={@state.currentSignature}
|
|
onChange={@_onEditSignature}/>
|
|
|
|
_onEditSignature: (event) =>
|
|
html = event.target.value
|
|
@setState currentSignature: html
|
|
@_saveSignatureSoon(@state.selectedAccountId, html)
|
|
|
|
_configKey: (accountId) ->
|
|
"nylas.account-#{accountId}.signature"
|
|
|
|
_onSelectAccount: (event) =>
|
|
@_saveSignatureNow(@state.selectedAccountId, @state.currentSignature)
|
|
selectedAccountId = event.target.value
|
|
key = @_configKey(selectedAccountId)
|
|
initialSig = @props.config.get(key) ? ""
|
|
@setState
|
|
currentSignature: initialSig
|
|
selectedAccountId: selectedAccountId
|
|
|
|
_renderModeToggle: ->
|
|
if @state.editAsHTML
|
|
return <a onClick={=> @setState(editAsHTML: false); return}>Edit live preview</a>
|
|
else
|
|
return <a onClick={=> @setState(editAsHTML: true); return}>Edit raw HTML</a>
|
|
|
|
render: =>
|
|
rawText = if @state.editAsHTML then "Raw HTML " else ""
|
|
<section className="container-signatures">
|
|
<h2>Signatures</h2>
|
|
<div className="section-title">
|
|
{rawText}Signature for: {@_renderAccountPicker()}
|
|
</div>
|
|
<div className="signature-wrap">
|
|
{if @state.editAsHTML then @_renderHTMLSignature() else @_renderEditableSignature()}
|
|
</div>
|
|
<div className="toggle-mode" style={marginTop: "1em"}>{@_renderModeToggle()}</div>
|
|
</section>
|
|
|
|
module.exports = PreferencesSignatures
|