vitalif
/
likeopera-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Remove external state manipulation for AccountFolders

master
Vitaliy Filippov 2016-10-02 11:31:27 +03:00
parent 243599601c
commit d8cd4f17e0
2 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
AccountFolders.js
View File

@ -6,19 +6,19 @@ var AccountFolders = module.exports = React.createClass({
{
return <div className="account">
<div className={"account-header"+(this.state.collapsed ? ' collapsed' : '')} onClick={this.onClick}>
{this.props.email || this.props.name}
<div key="n" className="msg-count">{this.props.unreadCount}</div>
{this.props.accountId ? [
<div key="load" className="loading icon" style={{display: this.props.loading ? '' : 'none'}}></div>,
<div key="warn" className="warning icon" style={{display: this.props.warning ? '' : 'none'}}></div>,
{this.props.account.email || this.props.account.name}
<div key="n" className="msg-count">{this.props.account.unreadCount}</div>
{this.props.account.accountId ? [
<div key="load" className="loading icon" style={{display: this.props.account.loading ? '' : 'none'}}></div>,
<div key="warn" className="warning icon" style={{display: this.props.account.warning ? '' : 'none'}}></div>,
<div key="cfg" className={'cfg'+(this.state.cfgPressed ? ' pressed' : '')} onClick={this.showCfg}></div>
] : null}
</div>
<div className={"account-folders"+(this.state.collapsed ? ' collapsed' : '')} style={{ height: this.state.h }}>
<div ref="vis" className={'visible-part'+(this.state.animating ? ' animating' : '')}>
{this.props.folders.map((f, i) =>
{this.props.account.folders.map((f, i) =>
<div key={'f'+i} data-i={i} className={'folder'+(f.unreadCount > 0 ? ' with-unread' : '')+
(this.state.selected == i ? ' selected' : '')} onClick={this.selectFolder}>
(this.props.selected == i ? ' selected' : '')} onClick={this.selectFolder}>
{f.icon ? <img src={'icons/'+f.icon+'.png'} /> : null}
{' '}
<span>{f.name}</span>
@ -37,7 +37,6 @@ var AccountFolders = module.exports = React.createClass({
if (t && t != this.refs.vis)
{
var i = t.getAttribute('data-i');
this.setState({ selected: i });
this.props.onSelect(this.props.accountIndex, i);
}
// FIXME: send select event + switch focus to message list if folder changed
@ -46,7 +45,7 @@ var AccountFolders = module.exports = React.createClass({
{
var self = this;
var i = DropDownBase.instances.account.state.items;
i[0].text = 'Read '+(this.props.email||this.props.name);
i[0].text = 'Read '+(this.props.account.email||this.props.account.name);
DropDownBase.instances.account.setState({ items: i });
DropDownBase.instances.account.showAt(ev.target, function()
{
@ -57,7 +56,7 @@ var AccountFolders = module.exports = React.createClass({
},
getInitialState: function()
{
return { collapsed: this.props.collapsed, animating: false, h: null, cfgPressed: false, selected: -1 };
return { collapsed: this.props.collapsed, animating: false, h: null, cfgPressed: false };
},
onClick: function()
{

19
FolderList.js
View File

@ -7,7 +7,7 @@ var FolderList = module.exports = React.createClass({
render: function()
{
var self = this;
return <div className={"folder-list"+(this.props.progress !== undefined ? ' progress-visible' : '')}>
return <div className={"folder-list"+(self.props.progress !== undefined ? ' progress-visible' : '')}>
<div className="top-border-gradient"></div>
<div className="bottom-border-gradient"></div>
<div className="actions">
@ -16,14 +16,15 @@ var FolderList = module.exports = React.createClass({
</div>
// TODO: keyboard navigation
<div className="listview" tabIndex="1">
{this.props.accounts.map(function(account, i) {
return <AccountFolders key={'a'+account.accountId} accountIndex={i} onSelect={self.onSelectFolder} {...account} />
{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} />
})}
</div>
<div className="progress-bar" ref="pbar">
<div className="pending" style={{ width: this.state.pbarWidth }}>Loading database ({this.props.progress||0}%)</div>
<div className="clip" style={{ width: (this.props.progress||0)+'%', overflow: 'hidden' }}>
<div className="done" ref="pdone" style={{ width: this.state.pbarWidth }}>Loading database ({this.props.progress||0}%)</div>
<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>
</div>
</div>
</div>
@ -34,13 +35,11 @@ var FolderList = module.exports = React.createClass({
var folder = this.props.accounts[accIndex].folders[folderIndex];
if (folder.folderId)
Store.loadFolder(folder.folderId);
if (this.prevSelected && this.prevSelected != accIndex)
this.prevSelected.setState({ selected: -1 });
this.prevSelected = accIndex;
this.setState({ selectedAccount: accIndex, selectedFolder: folderIndex });
},
getInitialState: function()
{
return { pbarWidth: '' };
return { pbarWidth: '', selectedAccount: -1, selectedFolder: -1 };
},
onResize: function()
{