mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 15:56:10 +08:00
feat(message-list): tracks when at the bottom and pane resizes
Test Plan: edgehill --test Reviewers: bengotow Reviewed By: bengotow Differential Revision: https://review.inboxapp.com/D1377
This commit is contained in:
parent
c09d6dba77
commit
5796e2665c
|
@ -14,6 +14,8 @@ MessageList = React.createClass
|
|||
@_getStateFromStores()
|
||||
|
||||
componentDidMount: ->
|
||||
@__onResize = _.bind @_onResize, @
|
||||
window.addEventListener("resize", @__onResize)
|
||||
@_unsubscribers = []
|
||||
@_unsubscribers.push MessageStore.listen @_onChange
|
||||
@_unsubscribers.push ThreadStore.listen @_onChange
|
||||
|
@ -22,24 +24,34 @@ MessageList = React.createClass
|
|||
|
||||
componentWillUnmount: ->
|
||||
unsubscribe() for unsubscribe in @_unsubscribers
|
||||
window.removeEventListener("resize", @__onResize)
|
||||
|
||||
shouldComponentUpdate: (nextProps, nextState) ->
|
||||
not _.isEqual(nextProps, @props) or not _.isEqual(nextState, @state)
|
||||
|
||||
componentDidUpdate: (prevProps, prevState) ->
|
||||
didLoad = prevState.loading and not @state.loading
|
||||
newDraftIds = @_newDraftIds(prevState)
|
||||
newMessageIds = @_newMessageIds(prevState)
|
||||
|
||||
if prevState.loading and not @state.loading
|
||||
@_prepareContentForDisplay()
|
||||
else if newDraftIds.length > 0
|
||||
@_focusDraft(@refs["composerItem-#{newDraftIds[0]}"])
|
||||
@_prepareContentForDisplay()
|
||||
else if newMessageIds.length > 0
|
||||
@_prepareContentForDisplay()
|
||||
|
||||
@_cacheScrollPos()
|
||||
|
||||
_newDraftIds: (prevState) ->
|
||||
oldDraftIds = _.map(_.filter((prevState.messages ? []), (m) -> m.draft), (m) -> m.id)
|
||||
newDraftIds = _.map(_.filter((@state.messages ? []), (m) -> m.draft), (m) -> m.id)
|
||||
addedDraftIds = _.difference(newDraftIds, oldDraftIds)
|
||||
didAddDraft = addedDraftIds.length > 0
|
||||
return _.difference(newDraftIds, oldDraftIds) ? []
|
||||
|
||||
if didLoad
|
||||
@_prepareContentForDisplay()
|
||||
|
||||
else if didAddDraft
|
||||
@_focusDraft(@refs["composerItem-#{addedDraftIds[0]}"])
|
||||
@_prepareContentForDisplay()
|
||||
_newMessageIds: (prevState) ->
|
||||
oldMessageIds = _.map(_.reject((prevState.messages ? []), (m) -> m.draft), (m) -> m.id)
|
||||
newMessageIds = _.map(_.reject((@state.messages ? []), (m) -> m.draft), (m) -> m.id)
|
||||
return _.difference(newMessageIds, oldMessageIds) ? []
|
||||
|
||||
_focusDraft: (draftDOMNode) ->
|
||||
# We need a 100ms delay so the DOM can finish painting the elements on
|
||||
|
@ -58,7 +70,10 @@ MessageList = React.createClass
|
|||
"ready": @state.ready
|
||||
|
||||
<div className="message-list" id="message-list">
|
||||
<div tabIndex="-1" className={wrapClass} ref="messageWrap">
|
||||
<div tabIndex="-1"
|
||||
className={wrapClass}
|
||||
onScroll={_.debounce(@_cacheScrollPos, 100)}
|
||||
ref="messageWrap">
|
||||
<div className="message-list-notification-bars">
|
||||
{@_messageListNotificationBars()}
|
||||
</div>
|
||||
|
@ -230,5 +245,23 @@ MessageList = React.createClass
|
|||
participants[contact.email] = contact
|
||||
return _.values(participants)
|
||||
|
||||
_onResize: (event) ->
|
||||
return unless @isMounted()
|
||||
@_scrollToBottom() if @_wasAtBottom()
|
||||
@_cacheScrollPos()
|
||||
|
||||
_scrollToBottom: ->
|
||||
messageWrap = @refs.messageWrap?.getDOMNode()
|
||||
messageWrap.scrollTop = messageWrap.scrollHeight
|
||||
|
||||
_cacheScrollPos: ->
|
||||
messageWrap = @refs.messageWrap?.getDOMNode()
|
||||
@_lastScrollTop = messageWrap.scrollTop
|
||||
@_lastHeight = messageWrap.getBoundingClientRect().height
|
||||
@_lastScrollHeight = messageWrap.scrollHeight
|
||||
|
||||
_wasAtBottom: ->
|
||||
(@_lastScrollTop + @_lastHeight) >= @_lastScrollHeight
|
||||
|
||||
MessageList.minWidth = 500
|
||||
MessageList.maxWidth = 900
|
||||
|
|
Loading…
Reference in a new issue