Mailspring/internal_packages/composer-signature/lib/preferences-signatures.cjsx
Evan Morikawa 6d1dbe1dbf fix(composer): support Chinese & others - handle composition events
Summary:
ignores composition event commands until they're done. We then simply
update the new state after that happens.

Some additional refactoring:

- The <Contenteditable /> prop is 'value' instead of 'html' to make it
  look more like a standard React controlled input
- Removed `filters` prop and `footerElements` prop from Contenteditable.
  These could easily be moved into the composer (where they belong).
- Moved contenteditable and a few of its helper classes into their own
  folder.
- Moved `UndoManager` up out of the `flux` folder into `src`. Currently
  undo/redo is only in the composer when all contenteditables should have
  the basic funcionality. Will refactor this later.
- Fix tests

Test Plan: manual

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D2211
2015-10-30 20:03:33 -04:00

105 lines
3 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 =
accounts: AccountStore.items()
currentSignature: initialSig
selectedAccountId: selectedAccountId
componentDidMount: ->
@usub = AccountStore.listen @_onChange
shouldComponentUpdate: (nextProps, nextState) =>
nextState.selectedAccountId isnt @state.selectedAccountId
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>
_renderCurrentSignature: ->
<Contenteditable
ref="signatureInput"
value={@state.currentSignature}
onChange={@_onEditSignature}
spellcheck={false}
floatingToolbar={false} />
_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
render: =>
<div className="container-signatures">
<div className="section-title">
Signature for: {@_renderAccountPicker()}
</div>
<div>
{@_renderCurrentSignature()}
</div>
</div>
module.exports = PreferencesSignatures