var React = require('react'); var Col = require('react-bootstrap/Col'); var Badge = require('react-bootstrap/Badge'); var Button = require('react-bootstrap/Button'); var ButtonGroup = require('react-bootstrap/ButtonGroup'); var Glyphicon = require('react-bootstrap/Glyphicon'); var MenuStore = require('../stores/MenuStore'); var MenuActions = require('../actions/MenuActions'); var MiddlePanelActions = require('../actions/MiddlePanelActions'); var FeedItem = React.createClass({ propTypes: {feed_id: React.PropTypes.number.isRequired, title: React.PropTypes.string.isRequired, unread: React.PropTypes.number.isRequired, error_count: React.PropTypes.number.isRequired, icon_url: React.PropTypes.string, active: React.PropTypes.bool.isRequired, }, render: function() { var icon = null; var badge_unread = null; if(this.props.icon_url){ icon = (); } else { icon = ; } if(this.props.unread){ badge_unread = {this.props.unread}; } var classes = "nav-feed"; if(this.props.active) { classes += " bg-primary"; } if(this.props.error_count >= 6) { classes += " bg-danger"; } else if(this.props.error_count > 3) { classes += " bg-warning"; } var title = {this.props.title}; return (
  • {icon}{title}{badge_unread}
  • ); }, handleClick: function() { MiddlePanelActions.setFeedFilter(this.props.feed_id); }, }); var Category = React.createClass({ propTypes: {category_id: React.PropTypes.number, active_type: React.PropTypes.string, active_id: React.PropTypes.number}, render: function() { var classes = "nav-cat"; if((this.props.active_type == 'category_id' || this.props.category_id == null) && this.props.active_id == this.props.category_id) { classes += " bg-primary"; } return (
  • {this.props.children}
  • ); }, handleClick: function(evnt) { // hack to avoid selection when clicking on folding icon if(!evnt.target.classList.contains('glyphicon')) { if(this.props.category_id != null) { MiddlePanelActions.setCategoryFilter(this.props.category_id); } else { MiddlePanelActions.removeParentFilter(); } } }, }); var CategoryGroup = React.createClass({ propTypes: {cat_id: React.PropTypes.number.isRequired, filter: React.PropTypes.string.isRequired, active_type: React.PropTypes.string, active_id: React.PropTypes.number, name: React.PropTypes.string.isRequired, feeds: React.PropTypes.array.isRequired, unread: React.PropTypes.number.isRequired, }, getInitialState: function() { return {unfolded: true}; }, render: function() { var filter = this.props.filter; var a_type = this.props.active_type; var a_id = this.props.active_id; if(this.state.unfolded) { // filtering according to this.props.filter var feeds = this.props.feeds.filter(function(feed) { if (filter == 'unread' && feed.unread <= 0) { return false; } else if (filter == 'error' && feed.error_count <= 3) { return false; } return true; }).sort(function(feed_a, feed_b){ return feed_b.unread - feed_a.unread; }).map(function(feed) { return ( ); }); } else { var feeds = []; } var unread = null; if(this.props.unread){ unread = {this.props.unread}; } var ctrl = ( ); return (
      {ctrl}

      {this.props.name}

      {unread}
      {feeds}
    ); }, handleClick: function() { MiddlePanelActions.setCategoryFilter(this.props.cat_id); }, toggleFolding: function(evnt) { this.setState({unfolded: !this.state.unfolded}); evnt.stopPropagation(); }, }); var MenuFilter = React.createClass({ propTypes: {feed_in_error: React.PropTypes.bool, filter: React.PropTypes.string.isRequired}, render: function() { var error_button = null; if (this.props.feed_in_error) { error_button = ( ); } return ( {error_button} ); }, setAllFilter: function() { MenuActions.setFilter("all"); }, setUnreadFilter: function() { MenuActions.setFilter("unread"); }, setErrorFilter: function() { MenuActions.setFilter("error"); }, }); var Menu = React.createClass({ getInitialState: function() { return {filter: 'all', categories: [], all_unread_count: 0, active_type: null, active_id: null}; }, render: function() { var state = this.state; var rmPrntFilt = (

      All

    ); return ( {rmPrntFilt} {this.state.categories.map(function(category){ return (); })} ); }, componentDidMount: function() { MenuActions.reload(); MenuStore.addChangeListener(this._onChange); }, componentWillUnmount: function() { MenuStore.removeChangeListener(this._onChange); }, _onChange: function() { var datas = MenuStore.getAll(); this.setState({filter: datas.filter, categories: datas.categories, active_type: datas.active_type, active_id: datas.active_id, feed_in_error: datas.feed_in_error, all_unread_count: datas.all_unread_count}); }, }); module.exports = Menu;