mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 08:16:09 +08:00
42ad243824
- The FocusedContactStore was triggering too often, and leaving it up to the FullcontactStore to fetch the full Contact model for the focused contact (pulled from thread.) The FocusedContactStore triggers more responsibly, and registering for the role "MessageListSidebar:ContactCard" now gives you the focused contact as a full database model. The whole ContactCard region also fades in and out.
67 lines
1.8 KiB
CoffeeScript
67 lines
1.8 KiB
CoffeeScript
{Utils,
|
|
React,
|
|
FocusedContactsStore} = require 'nylas-exports'
|
|
{RetinaImg} = require 'nylas-component-kit'
|
|
|
|
class MyMessageSidebar extends React.Component
|
|
@displayName: 'MyMessageSidebar'
|
|
|
|
# Providing container styles tells the app how to constrain
|
|
# the column your component is being rendered in. The min and
|
|
# max size of the column are chosen automatically based on
|
|
# these values.
|
|
@containerStyles:
|
|
order: 1
|
|
flexShrink: 0
|
|
|
|
# This sidebar component listens to the FocusedContactStore,
|
|
# which gives us access to the Contact object of the currently
|
|
# selected person in the conversation. If you wanted to take
|
|
# the contact and fetch your own data, you'd want to create
|
|
# your own store, so the flow of data would be:
|
|
#
|
|
# FocusedContactStore => Your Store => Your Component
|
|
#
|
|
constructor: (@props) ->
|
|
@state = @_getStateFromStores()
|
|
|
|
componentDidMount: =>
|
|
@unsubscribe = FocusedContactsStore.listen(@_onChange)
|
|
|
|
componentWillUnmount: =>
|
|
@unsubscribe()
|
|
|
|
render: =>
|
|
if @state.contact
|
|
content = @_renderContent()
|
|
else
|
|
content = @_renderPlaceholder()
|
|
|
|
<div className="my-message-sidebar">
|
|
{content}
|
|
</div>
|
|
|
|
_renderContent: =>
|
|
# Want to include images or other static assets in your components?
|
|
# Reference them using the nylas:// URL scheme:
|
|
#
|
|
# <RetinaImg
|
|
# url="nylas://<<package.name>>/assets/checkmark_template@2x.png"
|
|
# mode={RetinaImg.Mode.ContentIsMask}/>
|
|
#
|
|
<div className="header">
|
|
<h1>{@state.contact.displayName()} is the focused contact.</h1>
|
|
</div>
|
|
|
|
_renderPlaceholder: =>
|
|
<div> No Data Available </div>
|
|
|
|
_onChange: =>
|
|
@setState(@_getStateFromStores())
|
|
|
|
_getStateFromStores: =>
|
|
contact: FocusedContactsStore.focusedContact()
|
|
|
|
|
|
module.exports = MyMessageSidebar
|