307 lines
12 KiB
JavaScript
307 lines
12 KiB
JavaScript
import React from 'react';
|
|
import DropDownButton from './DropDownButton.js';
|
|
import ListWithSelection from './ListWithSelection.js';
|
|
import Store from './Store.js';
|
|
import StoreListener from './StoreListener.js';
|
|
import Util from './Util.js';
|
|
|
|
class MessageInList extends React.PureComponent
|
|
{
|
|
msgClasses = { unread: 'unread', unseen: 'unseen', answered: 'replied', flagged: 'pinned', sent: 'sent' }
|
|
|
|
render()
|
|
{
|
|
var msg = this.props.msg;
|
|
return <div data-i={this.props.i} className={'message'+
|
|
(msg.body_text || msg.body_html ? '' : ' unloaded')+
|
|
(msg.flags.map(c => (this.msgClasses[c] ? ' '+this.msgClasses[c] : '')).join(''))+
|
|
(this.props.selected ? ' selected' : '')+
|
|
(msg.thread && this.props.threads ? ' thread0' : '')} onMouseDown={this.props.onClick}>
|
|
|
|
<div className="icon" style={{ width: (20+10*(msg.level||0)), backgroundPosition: (10*(msg.level||0))+'px 7px' }}></div>
|
|
<div className="subject" style={{ paddingLeft: (20+10*(msg.level||0)) }}>{msg.subject}</div>
|
|
{msg.thread && this.props.threads ? <div className={'expand'+(msg.collapsed ? '' : ' collapse')}></div> : null}
|
|
<div className="bullet"></div>
|
|
<div className="from" style={{ left: (21+10*(msg.level||0)) }}>
|
|
{(msg.props.sent ? 'To '+(msg.props.to[0][0]||msg.props.to[0][1]) : (msg.props.from ? msg.props.from[0]||msg.props.from[1] : ''))}
|
|
</div>
|
|
<div className="size">{Util.formatBytes(msg.size||0)}</div>
|
|
<div className="attach" style={msg.props.attachments && msg.props.attachments.length ? null : { display: 'none' }}></div>
|
|
<div className="time">{Util.formatDate(msg.time)}</div>
|
|
|
|
</div>
|
|
}
|
|
}
|
|
|
|
// TODO: expand/collapse days
|
|
class MessageList extends ListWithSelection
|
|
{
|
|
_preloadSize = 20
|
|
_pageSize = 50
|
|
state = {
|
|
...this.state,
|
|
firstDayTop: 0,
|
|
firstDay: this.props.groups && this.props.groups[0] && this.props.groups[0].name || null
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps)
|
|
{
|
|
this.setFirstDayFromProps(nextProps);
|
|
}
|
|
|
|
// Main virtual scroll detector method
|
|
setFirstDayFromProps(props)
|
|
{
|
|
var groups = props.groups;
|
|
var messages = props.messages;
|
|
if (!groups || !groups.length)
|
|
return;
|
|
var scrollTop = this.refs.scroll.scrollTop, scrollSize = this.refs.scroll.offsetHeight - this.getScrollPaddingTop();
|
|
var top = 0, p, firstVisibleGrp, firstVisible, lastVisibleGrp, lastVisible;
|
|
var itemH = (this.props.layout == 'message-on-right' ? 60 : 30);
|
|
var i;
|
|
for (i = 0; i < groups.length; i++)
|
|
{
|
|
p = top;
|
|
top += (i > 0 ? 30 : 0) + itemH*groups[i].messageCount;
|
|
if (firstVisibleGrp === undefined && scrollTop < top)
|
|
{
|
|
firstVisibleGrp = i;
|
|
if (i > 0 && scrollTop < p+30)
|
|
firstVisible = 0;
|
|
else
|
|
firstVisible = Math.floor((scrollTop - p - (i > 0 ? 30 : 0))/itemH);
|
|
}
|
|
if (lastVisibleGrp === undefined && scrollTop+scrollSize < top)
|
|
{
|
|
lastVisibleGrp = i;
|
|
if (i > 0 && scrollTop+scrollSize < p+30)
|
|
lastVisible = 0;
|
|
else
|
|
lastVisible = Math.floor((scrollTop+scrollSize - p - (i > 0 ? 30 : 0))/itemH);
|
|
if (lastVisible >= groups[i].messageCount)
|
|
lastVisible = groups[i].messageCount-1;
|
|
}
|
|
if (firstVisibleGrp !== undefined && lastVisibleGrp !== undefined)
|
|
break;
|
|
}
|
|
if (firstVisibleGrp === undefined || firstVisibleGrp >= groups.length)
|
|
{
|
|
this.refs.scroll.scrollTop = 0;
|
|
return;
|
|
}
|
|
if (lastVisibleGrp === undefined)
|
|
{
|
|
lastVisibleGrp = groups.length-1;
|
|
lastVisible = groups[lastVisibleGrp].messageCount-1;
|
|
}
|
|
this.setState({
|
|
firstDayTop: scrollTop,
|
|
firstDay: firstVisibleGrp !== undefined ? groups[firstVisibleGrp].name : null,
|
|
firstGrp: firstVisibleGrp,
|
|
firstMsg: firstVisible,
|
|
lastGrp: lastVisibleGrp,
|
|
lastMsg: lastVisible
|
|
});
|
|
var loadFirst = groups[firstVisibleGrp].start+firstVisible-this._preloadSize;
|
|
var loadLast = groups[lastVisibleGrp].start+lastVisible+1+this._preloadSize;
|
|
var total = groups[groups.length-1].messageCount+groups[groups.length-1].start;
|
|
loadLast = Math.floor((loadLast + this._pageSize - 1) / this._pageSize) * this._pageSize;
|
|
loadLast = loadLast < total ? loadLast : total;
|
|
loadFirst = loadFirst < 0 ? 0 : loadFirst;
|
|
loadFirst = loadFirst - (loadFirst % this._pageSize);
|
|
var loadFirstEnd;
|
|
for (loadFirstEnd = loadFirst; loadFirstEnd < loadLast && messages[loadFirstEnd] === undefined; loadFirstEnd++)
|
|
messages[loadFirstEnd] = null;
|
|
var loadLastStart;
|
|
for (loadLastStart = loadLast; loadLastStart > loadFirst && messages[loadLastStart-1] === undefined; loadLastStart--)
|
|
messages[loadLastStart-1] = null;
|
|
if (loadFirstEnd > loadFirst)
|
|
Store.loadMessages(loadFirst, loadFirstEnd-loadFirst);
|
|
if (loadFirstEnd < loadLastStart && loadLastStart < loadLast)
|
|
Store.loadMessages(loadLastStart, loadLast-loadLastStart);
|
|
}
|
|
|
|
changeFirstDay = (ev) =>
|
|
{
|
|
this.setFirstDayFromProps(this.props);
|
|
}
|
|
|
|
deleteSelected = () =>
|
|
{
|
|
|
|
}
|
|
|
|
onSelectCurrent = (index) =>
|
|
{
|
|
var self = this;
|
|
var total = 0, p, msg, idx;
|
|
for (var i = 0; i < (self.props.groups||[]).length; i++)
|
|
{
|
|
p = total;
|
|
total += (i > 0 ? 1 : 0)+self.props.groups[i].messageCount;
|
|
if (index < total)
|
|
{
|
|
idx = self.props.groups[i].start+index-p-(i > 0 ? 1 : 0);
|
|
msg = self.props.messages[idx];
|
|
if (msg && !msg.body_text && !msg.body_html)
|
|
{
|
|
Store.loadMessage(msg.id, function(newMsg)
|
|
{
|
|
Store.set('msg', newMsg);
|
|
if (self.props.messages[idx] == msg)
|
|
{
|
|
self.props.messages[idx] = newMsg;
|
|
}
|
|
});
|
|
}
|
|
else
|
|
Store.set('msg', msg);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
getTotalItems = () =>
|
|
{
|
|
var total = -1; // do not count first-day as item
|
|
for (var i = 0; i < (this.props.groups||[]).length; i++)
|
|
{
|
|
total += 1+this.props.groups[i].messageCount;
|
|
}
|
|
return total;
|
|
}
|
|
|
|
getPageSize = () =>
|
|
{
|
|
return Math.floor(this.refs.scroll.offsetHeight / (this.props.layout == 'message-on-right' ? 60 : 30));
|
|
}
|
|
|
|
getItemOffset = (index) =>
|
|
{
|
|
var n = 0, top = 0, p;
|
|
var h = (this.props.layout == 'message-on-right' ? 60 : 30);
|
|
for (var i = 0; i < (this.props.groups||[]).length; i++)
|
|
{
|
|
p = n;
|
|
n += (i > 0 ? 1 : 0)+this.props.groups[i].messageCount;
|
|
if (index < n)
|
|
{
|
|
top += (index > p && i > 0 ? 30+h*(index-p-1) : h*(index-p));
|
|
break;
|
|
}
|
|
top += (i > 0 ? 30 : 0) + h*this.props.groups[i].messageCount;
|
|
}
|
|
return [ top, index == p && i > 0 ? 30 : h ];
|
|
}
|
|
|
|
getScrollPaddingTop = () =>
|
|
{
|
|
return this.refs.title.offsetHeight;
|
|
}
|
|
|
|
getMessages = (grp, start, end) =>
|
|
{
|
|
var a = this.props.messages.slice(grp.start+start, grp.start+end);
|
|
for (var i = 0; i < end-start; i++)
|
|
if (!a[i])
|
|
a[i] = null;
|
|
return a;
|
|
}
|
|
|
|
onSearchTextChange = (event) =>
|
|
{
|
|
var s = event.target.value;
|
|
this.setState({ searchText: s });
|
|
if (this._searchTimeout)
|
|
clearTimeout(this._searchTimeout);
|
|
this._searchTimeout = setTimeout(function() { Store.search(s) }, 300);
|
|
}
|
|
|
|
render()
|
|
{
|
|
var self = this;
|
|
var total = 0;
|
|
var itemH = (this.props.layout == 'message-on-right' ? 60 : 30);
|
|
return <div className="message-list">
|
|
<div className="top-border-gradient"></div>
|
|
<div className="bottom-border-gradient"></div>
|
|
<div className="actions">
|
|
<div className="searchbox">
|
|
<input type="text" placeholder="Search mail" value={this.state.searchText} onChange={this.onSearchTextChange} />
|
|
</div>
|
|
<DropDownButton dropdownId="threads" className="threads"
|
|
title="Show Message Thread" checkedTitle="Hide Message Thread" icon="thread" checkedIcon="thread_selected" checkable="1" />
|
|
<DropDownButton dropdownId="settings" className="settings" whole="1" hidden={self.props.layout == 'message-on-right'}
|
|
title="Settings for self folder" icon="config" />
|
|
<DropDownButton dropdownId="list-sort" className="list-sort" whole="1"
|
|
title="Sorting settings" icon="list_sort" />
|
|
<div className="clear"></div>
|
|
</div>
|
|
<div ref="scroll" className="listview" tabIndex="1" onScroll={self.changeFirstDay} onKeyDown={self.onListKeyDown}>
|
|
<div ref="title" className="day first-day"
|
|
style={{ top: self.state.firstDayTop, display: self.state.firstDay ? '' : 'none' }}>
|
|
{(self.state.firstDay||'').toUpperCase()}
|
|
</div>
|
|
{(self.props.groups||[]).map(function(grp, i) {
|
|
if (i > 0)
|
|
total++;
|
|
var start = total+(self.state.firstGrp == i ? self.state.firstMsg : 0);
|
|
var r = [
|
|
i > 0 ? <div className="day" data-i={total-1}>{grp.name.toUpperCase()}</div> : null,
|
|
<div className="day-list">
|
|
{(self.state.firstGrp > i || self.state.lastGrp < i
|
|
? <div className="placeholder" style={{ height: itemH*grp.messageCount }}></div>
|
|
: [
|
|
(self.state.firstGrp == i
|
|
? <div className="placeholder" style={{ height: itemH*self.state.firstMsg }}></div>
|
|
: null),
|
|
self.getMessages(grp,
|
|
self.state.firstGrp == i ? self.state.firstMsg : 0,
|
|
self.state.lastGrp == i ? self.state.lastMsg+1 : grp.messageCount
|
|
).map(function(msg, j) { return (msg
|
|
? [
|
|
<MessageInList threads={self.props.threads} msg={msg} i={start+j} selected={self.isSelected(start+j)} onClick={self.onListItemClick} />,
|
|
/*(msg.thread && Store.threads ?
|
|
<div className="thread">
|
|
{msg.thread.map(reply => <MessageInList msg={reply} i={0} onClick={self.onListItemClick} />)}
|
|
</div>
|
|
: null)*/
|
|
]
|
|
: <div data-i={start+j} className={'message'+(self.isSelected(start+j) ? ' selected' : '')} onMouseDown={self.onListItemClick}></div>
|
|
); }),
|
|
(self.state.lastGrp == i
|
|
? <div className="placeholder" style={{ height: itemH*(grp.messageCount-self.state.lastMsg-1) }}></div>
|
|
: null)
|
|
]
|
|
)}
|
|
</div>
|
|
];
|
|
total += grp.messageCount;
|
|
return r;
|
|
})}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
window.addEventListener('resize', this.changeFirstDay);
|
|
}
|
|
|
|
componentWillUnmount()
|
|
{
|
|
window.removeEventListener('resize', this.changeFirstDay);
|
|
}
|
|
}
|
|
|
|
export default StoreListener(MessageList, function(data)
|
|
{
|
|
return {
|
|
threads: data.threads,
|
|
layout: data.layout,
|
|
groups: data.listGroups,
|
|
messages: data.messages
|
|
};
|
|
});
|