likeopera-frontend/AccountFolders.js

const React = require('react');
const DropDownBase = require('./DropDownBase.js');

var AccountFolders = module.exports = React.createClass({
    render: function()
    {
        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.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: function(ev)
    {
        var t = ev.target;
        while (t && !t.getAttribute('data-i') && t != this.refs.vis)
            t = t.parentNode;
        if (t && t != this.refs.vis)
        {
            var 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: function(ev)
    {
        var self = this;
        var 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, function()
        {
            self.setState({ cfgPressed: false });
        });
        self.setState({ cfgPressed: true });
        ev.stopPropagation();
    },
    getInitialState: function()
    {
        return { collapsed: this.props.collapsed, animating: false, h: null, cfgPressed: false };
    },
    onClick: function()
    {
        var self = this;
        if (this.state.animating)
            return;
        this.setState({ animating: true, h: this.refs.vis.offsetHeight });
        if (!this.state.collapsed)
        {
            setTimeout(function()
            {
                self.setState({ h: 0 });
            }, 50);
        }
        setTimeout(function()
        {
            self.setState({ collapsed: !self.state.collapsed, animating: false, h: null });
        }, this.state.collapsed ? 200 : 250);
    }
});