2015-08-01 04:12:47 +08:00
|
|
|
_ = require 'underscore'
|
|
|
|
path = require 'path'
|
|
|
|
React = require 'react'
|
|
|
|
classNames = require 'classnames'
|
|
|
|
{RetinaImg, TimeoutTransitionGroup} = require 'nylas-component-kit'
|
|
|
|
{Actions,
|
|
|
|
Utils,
|
|
|
|
ComponentRegistry,
|
|
|
|
UndoRedoStore,
|
|
|
|
NamespaceStore} = require 'nylas-exports'
|
|
|
|
|
|
|
|
class UndoRedoComponent extends React.Component
|
|
|
|
@displayName: 'UndoRedoComponent'
|
|
|
|
|
|
|
|
constructor: (@props) ->
|
|
|
|
@state = @_getStateFromStores()
|
|
|
|
@_timeout = null
|
|
|
|
|
|
|
|
_onChange: =>
|
|
|
|
@setState(@_getStateFromStores(), =>
|
|
|
|
@_setNewTimeout())
|
|
|
|
|
|
|
|
_clearTimeout: =>
|
|
|
|
clearTimeout(@_timeout)
|
|
|
|
|
|
|
|
_setNewTimeout: =>
|
2015-08-04 01:21:04 +08:00
|
|
|
@_clearTimeout()
|
2015-08-01 04:12:47 +08:00
|
|
|
@_timeout = setTimeout (=>
|
|
|
|
@_hide()
|
|
|
|
return
|
|
|
|
), 3000
|
|
|
|
|
|
|
|
_getStateFromStores: ->
|
2015-08-04 05:46:19 +08:00
|
|
|
task = UndoRedoStore.getMostRecentTask()
|
|
|
|
show = false
|
|
|
|
if task
|
|
|
|
show = true
|
2015-08-01 04:12:47 +08:00
|
|
|
|
2015-08-04 05:46:19 +08:00
|
|
|
return {show, task}
|
2015-08-01 04:12:47 +08:00
|
|
|
|
|
|
|
componentWillMount: ->
|
2015-08-04 01:21:04 +08:00
|
|
|
@_unsubscribe = UndoRedoStore.listen(@_onChange)
|
2015-08-01 04:12:47 +08:00
|
|
|
|
|
|
|
componentWillUnmount: ->
|
2015-08-04 01:21:04 +08:00
|
|
|
@_clearTimeout()
|
|
|
|
@_unsubscribe()
|
2015-08-01 04:12:47 +08:00
|
|
|
|
|
|
|
render: =>
|
|
|
|
items = [].concat(@_renderUndoRedoManager())
|
|
|
|
|
|
|
|
names = classNames
|
|
|
|
"undo-redo-manager": true
|
|
|
|
|
|
|
|
<TimeoutTransitionGroup
|
|
|
|
className={names}
|
|
|
|
leaveTimeout={450}
|
|
|
|
enterTimeout={250}
|
|
|
|
transitionName="undo-redo-item">
|
|
|
|
{items}
|
|
|
|
</TimeoutTransitionGroup>
|
|
|
|
|
|
|
|
_renderUndoRedoManager: =>
|
|
|
|
if @state.show
|
|
|
|
<div className="undo-redo" onMouseEnter={@_clearTimeout} onMouseLeave={@_setNewTimeout}>
|
|
|
|
<div className="undo-redo-message-wrapper">
|
2015-08-04 05:46:19 +08:00
|
|
|
{@state.task.description()}
|
2015-08-01 04:12:47 +08:00
|
|
|
</div>
|
|
|
|
<div className="undo-redo-action-wrapper" onClick={@_undoTask}>
|
|
|
|
<RetinaImg name="undo-icon@2x.png"
|
|
|
|
mode={RetinaImg.Mode.ContentPreserve}/>
|
2015-08-04 05:46:19 +08:00
|
|
|
<span className="undo-redo-action-text">Undo</span>
|
2015-08-01 04:12:47 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
else
|
|
|
|
[]
|
|
|
|
|
|
|
|
_undoTask: =>
|
|
|
|
atom.commands.dispatch(document.querySelector('body'), 'core:undo')
|
|
|
|
@_hide()
|
|
|
|
|
|
|
|
_hide: =>
|
|
|
|
@setState({show: false, task: null})
|
|
|
|
|
|
|
|
module.exports = UndoRedoComponent
|