Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-12-27 19:07:15 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(undo): Ensure undo bar dismisses after re-appearing

Browse source
This commit is contained in:
Ben Gotow 2016-02-05 19:11:27 -08:00
parent 1b3c4cf594
commit 1bd41a84e9
1 changed files with 33 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
internal_packages/undo-redo/lib/undo-redo-component.cjsx
View file

@ -15,66 +15,66 @@ class UndoRedoComponent extends React.Component
@containerRequired: false
constructor: (@props) ->
@state = @_getStateFromStores()
@_timeout = null
_onChange: =>
@setState(@_getStateFromStores(), =>
@_setNewTimeout())
@state = @_getStateFromStores()
@_ensureTimeout(@state)
_clearTimeout: =>
clearTimeout(@_timeout)
@_timeout = null
_setNewTimeout: =>
@_clearTimeout()
@_timeout = setTimeout (=>
@_hide()
return
), 3000
_ensureTimeout: (state = @state) =>
if @_timeout
@_clearTimeout()
if state.show
@_timeout = setTimeout(@_hide, 3000)
_getStateFromStores: ->
tasks = UndoRedoStore.getMostRecent()
show = false
if tasks
show = true
show = tasks?
return {show, tasks}
componentWillMount: ->
@_unsubscribe = UndoRedoStore.listen(@_onChange)
@_unsubscribe = UndoRedoStore.listen =>
nextState = @_getStateFromStores()
@setState(nextState)
@_ensureTimeout(nextState)
componentWillUnmount: ->
@_clearTimeout()
@_unsubscribe()
render: =>
inner = @_renderUndoRedoManager()
names = classNames
classes = classNames
"undo-redo-manager": true
<TimeoutTransitionGroup
className={names}
className={classes}
leaveTimeout={150}
enterTimeout={150}
transitionName="undo-redo-item">
{inner}
{@_renderUndoRedoManager()}
</TimeoutTransitionGroup>
_renderUndoRedoManager: =>
if @state.show
<div className="undo-redo" onMouseEnter={@_clearTimeout} onMouseLeave={@_setNewTimeout}>
<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>
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>
else
[]
<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(document.querySelector('body'), 'core:undo')