mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-06 08:08:10 +08:00
136 lines
4.1 KiB
CoffeeScript
136 lines
4.1 KiB
CoffeeScript
_ = require 'underscore-plus'
|
|
React = require 'react'
|
|
|
|
{ComponentRegistry} = require 'inbox-exports'
|
|
|
|
ThreadListMixin = require './thread-list-mixin.cjsx'
|
|
ThreadListColumn = require("./thread-list-column")
|
|
ThreadListTabularItem = require './thread-list-tabular-item.cjsx'
|
|
|
|
module.exports =
|
|
ThreadListTabular = React.createClass
|
|
mixins: [ComponentRegistry.Mixin, ThreadListMixin]
|
|
displayName: 'ThreadListTabular'
|
|
components: ["Participants"]
|
|
|
|
getInitialState: ->
|
|
columns: @_defaultColumns()
|
|
threadLabelComponents: ComponentRegistry.findAllByRole("thread label")
|
|
|
|
componentWillUpdate: ->
|
|
@_colFlex = null
|
|
|
|
componentWillMount: ->
|
|
@unlisteners = []
|
|
@unlisteners.push ComponentRegistry.listen (event) =>
|
|
@setState
|
|
threadLabelComponents: ComponentRegistry.findAllByRole("thread label")
|
|
|
|
componentWillUnmount: ->
|
|
unlisten() for unlisten in @unlisteners
|
|
|
|
render: ->
|
|
<div class="thread-list" id="thread-list">
|
|
<div tabIndex=1
|
|
className="thread-list-container thread-list-tabular">
|
|
|
|
<div className="thread-rows">
|
|
{@_threadRows()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
_defaultColumns: ->
|
|
c0 = new ThreadListColumn
|
|
name: "★"
|
|
flex: 0.2
|
|
resolver: (thread, parentComponent) ->
|
|
<span className="btn-icon star-button"
|
|
onClick={ -> thread.toggleStar.apply(thread)}>
|
|
<i className={"fa " + (thread.isStarred() and 'fa-star' or 'fa-star-o')}/>
|
|
</span>
|
|
|
|
c1 = new ThreadListColumn
|
|
name: "Name"
|
|
flex: 2
|
|
resolver: (thread, parentComponent) =>
|
|
Participants = @state.Participants
|
|
<div className="participants">
|
|
<Participants participants={thread.participants}
|
|
context={'list'} clickable={false} />
|
|
</div>
|
|
|
|
subject = (thread) ->
|
|
if (thread.subject ? "").trim().length is 0
|
|
return <span className="no-subject">(No Subject)</span>
|
|
else return thread.subject
|
|
|
|
labelComponents = (thread) =>
|
|
for label in @state.threadLabelComponents
|
|
LabelComponent = label.view
|
|
<LabelComponent thread={thread} />
|
|
|
|
numUnread = (thread) ->
|
|
numMsg = thread.numUnread()
|
|
if numMsg < 2
|
|
<span></span>
|
|
else
|
|
<span className="message-count item-count-box">{numMsg}</span>
|
|
|
|
c2 = new ThreadListColumn
|
|
name: "Subject"
|
|
flex: 3
|
|
resolver: (thread) ->
|
|
<span>
|
|
<span className="subject">{subject(thread)}</span>
|
|
{numUnread(thread)}
|
|
</span>
|
|
|
|
c3 = new ThreadListColumn
|
|
name: "Snippet"
|
|
flex: 4
|
|
resolver: (thread) ->
|
|
<span className="snippet">{thread.snippet}</span>
|
|
|
|
c4 = new ThreadListColumn
|
|
name: "Date"
|
|
flex: 1
|
|
resolver: (thread, parentComponent) ->
|
|
<span className="timestamp">
|
|
{parentComponent.threadTime()}
|
|
</span>
|
|
|
|
return [c1, c2, c3, c4]
|
|
|
|
_threadHeaders: ->
|
|
return <div></div>
|
|
# TODO: There's currently no styling for headers
|
|
# for col in @state.columns
|
|
# <div className="thread-list-header thread-list-column"
|
|
# key={"header-#{col.name}"}
|
|
# style={flex: "#{@_columnFlex()[col.name]}"}>
|
|
# {col.name}
|
|
# </div>
|
|
|
|
# The `numTags` attribute is only used to trigger a re-render of the
|
|
# ThreadListTabularItem when a tag gets added or removed (like a star).
|
|
# React's diffing engine does not detect the change the array nested
|
|
# deep inside of the thread and does not call render on the associated
|
|
# ThreadListTabularItem. Add the attribute fixes this.
|
|
_threadRows: ->
|
|
@state.threads.map (thread) =>
|
|
<ThreadListTabularItem key={thread.id}
|
|
thread={thread}
|
|
numTags={thread.tags.length}
|
|
columns={@state.columns}
|
|
unread={thread.isUnread()}
|
|
columnFlex={@_columnFlex()}
|
|
selected={thread?.id == @state.selected}/>
|
|
|
|
_columnFlex: ->
|
|
if @_colFlex? then return @_colFlex
|
|
@_colFlex = {}
|
|
for col in (@state.columns ? [])
|
|
@_colFlex[col.name] = col.flex
|
|
return @_colFlex
|
|
|