Mailspring/internal_packages/undo-redo/lib/undo-redo-component.cjsx
Ben Gotow a48ddd51f8 refactor(menus): Major prune of keymaps/commands, real conditional menus
Summary:
Keymaps & menus CSON => JSON, remove AtomKeymaps, CommandRegistry use of CSS selectors, use Mousetrap instead

Important Notes:

- The `application:` prefix is reserved for commands which are handled in the application process. Don't use it for other things. You will not receive the events in the window.

- Maintaining dynamic menus seems to come with quite an overhead, because Electron updates the entire menu every time. In the future, we'll need https://github.com/electron/electron/issues/528 to really make things nice. I will be tracking this upstream.

- The format for keyboard shortcuts has changed. `cmd-X` is now `command+shift+x`

Test Plan: Run tests

Reviewers: juan, evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D2917
2016-04-24 12:16:25 -05:00

90 lines
2.2 KiB
CoffeeScript

_ = require 'underscore'
path = require 'path'
React = require 'react'
ReactDOM = require 'react-dom'
ReactCSSTransitionGroup = require 'react-addons-css-transition-group'
classNames = require 'classnames'
{RetinaImg} = require 'nylas-component-kit'
{Actions,
Utils,
ComponentRegistry,
UndoRedoStore,
AccountStore} = require 'nylas-exports'
class UndoRedoComponent extends React.Component
@displayName: 'UndoRedoComponent'
@containerRequired: false
constructor: (@props) ->
@_timeout = null
# Note: we do not set from initial state, because we don't want
# the last item on the stack to appear, just the next one.
@state = {}
_clearTimeout: =>
clearTimeout(@_timeout)
@_timeout = null
_ensureTimeout: (state = @state) =>
if @_timeout
@_clearTimeout()
if state.show
@_timeout = setTimeout(@_hide, 3000)
_getStateFromStores: ->
tasks = UndoRedoStore.getMostRecent()
show = tasks?
return {show, tasks}
componentWillMount: ->
@_unsubscribe = UndoRedoStore.listen =>
nextState = @_getStateFromStores()
@setState(nextState)
@_ensureTimeout(nextState)
componentWillUnmount: ->
@_clearTimeout()
@_unsubscribe()
render: =>
classes = classNames
"undo-redo-manager": true
<ReactCSSTransitionGroup
className={classes}
transitionLeaveTimeout={150}
transitionEnterTimeout={150}
transitionName="undo-redo-item">
{@_renderUndoRedoManager()}
</ReactCSSTransitionGroup>
_renderUndoRedoManager: =>
return unless @state.show
<div className="undo-redo" onMouseEnter={@_onMouseEnter} onMouseLeave={@_onMouseLeave}>
<div className="undo-redo-message-wrapper">
{@state.tasks.map((t) -> t.description()).join(', ')}
</div>
<div className="undo-redo-action-wrapper" onClick={@_onClick}>
<RetinaImg name="undo-icon@2x.png"
mode={RetinaImg.Mode.ContentIsMask}/>
<span className="undo-redo-action-text">Undo</span>
</div>
</div>
_onMouseEnter: =>
@_clearTimeout()
_onMouseLeave: =>
@_ensureTimeout(@state)
_onClick: =>
NylasEnv.commands.dispatch('core:undo')
@_hide()
_hide: =>
@setState({show: false, tasks: null})
module.exports = UndoRedoComponent