mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +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()
|
@_getStateFromStores()
|
||||||
|
|
||||||
componentDidMount: ->
|
componentDidMount: ->
|
||||||
|
@__onResize = _.bind @_onResize, @
|
||||||
|
window.addEventListener("resize", @__onResize)
|
||||||
@_unsubscribers = []
|
@_unsubscribers = []
|
||||||
@_unsubscribers.push MessageStore.listen @_onChange
|
@_unsubscribers.push MessageStore.listen @_onChange
|
||||||
@_unsubscribers.push ThreadStore.listen @_onChange
|
@_unsubscribers.push ThreadStore.listen @_onChange
|
||||||
|
@ -22,24 +24,34 @@ MessageList = React.createClass
|
||||||
|
|
||||||
componentWillUnmount: ->
|
componentWillUnmount: ->
|
||||||
unsubscribe() for unsubscribe in @_unsubscribers
|
unsubscribe() for unsubscribe in @_unsubscribers
|
||||||
|
window.removeEventListener("resize", @__onResize)
|
||||||
|
|
||||||
shouldComponentUpdate: (nextProps, nextState) ->
|
shouldComponentUpdate: (nextProps, nextState) ->
|
||||||
not _.isEqual(nextProps, @props) or not _.isEqual(nextState, @state)
|
not _.isEqual(nextProps, @props) or not _.isEqual(nextState, @state)
|
||||||
|
|
||||||
componentDidUpdate: (prevProps, prevState) ->
|
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)
|
oldDraftIds = _.map(_.filter((prevState.messages ? []), (m) -> m.draft), (m) -> m.id)
|
||||||
newDraftIds = _.map(_.filter((@state.messages ? []), (m) -> m.draft), (m) -> m.id)
|
newDraftIds = _.map(_.filter((@state.messages ? []), (m) -> m.draft), (m) -> m.id)
|
||||||
addedDraftIds = _.difference(newDraftIds, oldDraftIds)
|
return _.difference(newDraftIds, oldDraftIds) ? []
|
||||||
didAddDraft = addedDraftIds.length > 0
|
|
||||||
|
|
||||||
if didLoad
|
_newMessageIds: (prevState) ->
|
||||||
@_prepareContentForDisplay()
|
oldMessageIds = _.map(_.reject((prevState.messages ? []), (m) -> m.draft), (m) -> m.id)
|
||||||
|
newMessageIds = _.map(_.reject((@state.messages ? []), (m) -> m.draft), (m) -> m.id)
|
||||||
else if didAddDraft
|
return _.difference(newMessageIds, oldMessageIds) ? []
|
||||||
@_focusDraft(@refs["composerItem-#{addedDraftIds[0]}"])
|
|
||||||
@_prepareContentForDisplay()
|
|
||||||
|
|
||||||
_focusDraft: (draftDOMNode) ->
|
_focusDraft: (draftDOMNode) ->
|
||||||
# We need a 100ms delay so the DOM can finish painting the elements on
|
# We need a 100ms delay so the DOM can finish painting the elements on
|
||||||
|
@ -58,7 +70,10 @@ MessageList = React.createClass
|
||||||
"ready": @state.ready
|
"ready": @state.ready
|
||||||
|
|
||||||
<div className="message-list" id="message-list">
|
<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">
|
<div className="message-list-notification-bars">
|
||||||
{@_messageListNotificationBars()}
|
{@_messageListNotificationBars()}
|
||||||
</div>
|
</div>
|
||||||
|
@ -230,5 +245,23 @@ MessageList = React.createClass
|
||||||
participants[contact.email] = contact
|
participants[contact.email] = contact
|
||||||
return _.values(participants)
|
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.minWidth = 500
|
||||||
MessageList.maxWidth = 900
|
MessageList.maxWidth = 900
|
||||||
|
|
Loading…
Reference in a new issue