2016-09-11 15:49:57 +03:00
|
|
|
const React = require('react');
|
|
|
|
const AccountFolders = require('./AccountFolders.js');
|
|
|
|
const DropDownButton = require('./DropDownButton.js');
|
2016-10-02 02:04:16 +03:00
|
|
|
const Store = require('./Store.js');
|
2016-09-11 15:49:57 +03:00
|
|
|
|
|
|
|
var FolderList = module.exports = React.createClass({
|
|
|
|
render: function()
|
|
|
|
{
|
|
|
|
var self = this;
|
2016-10-02 11:31:27 +03:00
|
|
|
return <div className={"folder-list"+(self.props.progress !== undefined ? ' progress-visible' : '')}>
|
2016-09-11 15:49:57 +03:00
|
|
|
<div className="top-border-gradient"></div>
|
|
|
|
<div className="bottom-border-gradient"></div>
|
|
|
|
<div className="actions">
|
|
|
|
<a className="button"><img src="icons/compose.png" /> Compose</a>
|
|
|
|
<DropDownButton dropdownId="check-send" className="check-send" icon="mail_check_send" />
|
|
|
|
</div>
|
|
|
|
// TODO: keyboard navigation
|
|
|
|
<div className="listview" tabIndex="1">
|
2016-10-02 11:31:27 +03:00
|
|
|
{self.props.accounts.map(function(account, i) {
|
|
|
|
return <AccountFolders key={'a'+account.accountId} accountIndex={i}
|
|
|
|
onSelect={self.onSelectFolder} selected={self.state.selectedAccount == i ? self.state.selectedFolder : -1} account={account} />
|
2016-09-11 15:49:57 +03:00
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
<div className="progress-bar" ref="pbar">
|
2016-10-02 11:31:27 +03:00
|
|
|
<div className="pending" style={{ width: self.state.pbarWidth }}>Loading database ({self.props.progress||0}%)</div>
|
|
|
|
<div className="clip" style={{ width: (self.props.progress||0)+'%', overflow: 'hidden' }}>
|
|
|
|
<div className="done" ref="pdone" style={{ width: self.state.pbarWidth }}>Loading database ({self.props.progress||0}%)</div>
|
2016-09-11 15:49:57 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
},
|
2016-10-02 02:04:16 +03:00
|
|
|
onSelectFolder: function(accIndex, folderIndex)
|
2016-09-11 15:49:57 +03:00
|
|
|
{
|
2016-10-02 02:04:16 +03:00
|
|
|
var acc = this.props.accounts[accIndex];
|
|
|
|
var folder = this.props.accounts[accIndex].folders[folderIndex];
|
2016-10-02 22:12:53 +03:00
|
|
|
if (folder.folderId && (this.state.selectedAccount != accIndex || this.state.selectedFolder != folderIndex))
|
2016-10-02 02:04:16 +03:00
|
|
|
Store.loadFolder(folder.folderId);
|
2016-10-02 11:31:27 +03:00
|
|
|
this.setState({ selectedAccount: accIndex, selectedFolder: folderIndex });
|
2016-09-11 15:49:57 +03:00
|
|
|
},
|
|
|
|
getInitialState: function()
|
|
|
|
{
|
2016-10-02 11:31:27 +03:00
|
|
|
return { pbarWidth: '', selectedAccount: -1, selectedFolder: -1 };
|
2016-09-11 15:49:57 +03:00
|
|
|
},
|
|
|
|
onResize: function()
|
|
|
|
{
|
|
|
|
this.setState({ pbarWidth: this.refs.pbar.offsetWidth });
|
|
|
|
},
|
|
|
|
componentDidMount: function()
|
|
|
|
{
|
|
|
|
window.addEventListener('resize', this.onResize);
|
|
|
|
this.onResize();
|
|
|
|
},
|
|
|
|
componentWillUnmount: function()
|
|
|
|
{
|
|
|
|
window.removeEventListener('resize', this.onResize);
|
|
|
|
}
|
|
|
|
});
|