85 lines
3.2 KiB
JavaScript
85 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import DropDownBase from './DropDownBase.js';
|
|
|
|
export default class AccountFolders extends React.PureComponent
|
|
{
|
|
state = {
|
|
collapsed: this.props.collapsed,
|
|
animating: false,
|
|
h: null,
|
|
cfgPressed: false,
|
|
}
|
|
|
|
render()
|
|
{
|
|
return <div className="account">
|
|
<div className={"account-header"+(this.state.collapsed ? ' collapsed' : '')} onClick={this.onClick}>
|
|
{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.account.folders.map((f, i) =>
|
|
<div key={'f'+i} data-i={i} className={'folder'+(f.type != 'pinned' && f.unreadCount > 0 ? ' with-unread' : '')+
|
|
(this.props.selected == i ? ' selected' : '')} onClick={this.selectFolder}>
|
|
{f.icon ? <img src={'icons/'+f.icon+'.png'} /> : null}
|
|
{' '}
|
|
<span>{f.name}</span>
|
|
{f.unreadCount > 0 ? <div className="msg-count">{f.unreadCount}</div> : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
selectFolder = (ev) =>
|
|
{
|
|
let t = ev.target;
|
|
while (t && !t.getAttribute('data-i') && t != this.refs.vis)
|
|
t = t.parentNode;
|
|
if (t && t != this.refs.vis)
|
|
{
|
|
let i = t.getAttribute('data-i');
|
|
this.props.onSelect(this.props.accountIndex, i);
|
|
}
|
|
// FIXME: send select event + switch focus to message list if folder changed
|
|
}
|
|
|
|
showCfg = (ev) =>
|
|
{
|
|
let i = DropDownBase.instances.account.state.items;
|
|
i[0].text = 'Read '+(this.props.account.email||this.props.account.name);
|
|
DropDownBase.instances.account.setState({ items: i });
|
|
DropDownBase.instances.account.showAt(ev.target, () =>
|
|
{
|
|
this.setState({ cfgPressed: false });
|
|
});
|
|
this.setState({ cfgPressed: true });
|
|
ev.stopPropagation();
|
|
}
|
|
|
|
onClick = () =>
|
|
{
|
|
if (this.state.animating)
|
|
return;
|
|
this.setState({ animating: true, h: this.refs.vis.offsetHeight });
|
|
if (!this.state.collapsed)
|
|
{
|
|
setTimeout(() =>
|
|
{
|
|
this.setState({ h: 0 });
|
|
}, 50);
|
|
}
|
|
setTimeout(() =>
|
|
{
|
|
this.setState({ collapsed: !this.state.collapsed, animating: false, h: null });
|
|
}, this.state.collapsed ? 200 : 250);
|
|
}
|
|
}
|