var React = require('react'); var Row = require('react-bootstrap/lib/Row'); var Button = require('react-bootstrap/lib/Button'); var ButtonGroup = require('react-bootstrap/lib/ButtonGroup'); var Glyphicon = require('react-bootstrap/lib/Glyphicon'); var MiddlePanelStore = require('../stores/MiddlePanelStore'); var MiddlePanelActions = require('../actions/MiddlePanelActions'); var RightPanelActions = require('../actions/RightPanelActions'); var JarrTime = require('./time.react'); var TableLine = React.createClass({ propTypes: {article_id: React.PropTypes.number.isRequired, feed_title: React.PropTypes.string.isRequired, icon_url: React.PropTypes.string, title: React.PropTypes.string.isRequired, timestamp: React.PropTypes.number.isRequired, date: React.PropTypes.string.isRequired, read: React.PropTypes.bool.isRequired, selected: React.PropTypes.bool.isRequired, liked: React.PropTypes.bool.isRequired, }, getInitialState: function() { return {read: this.props.read, liked: this.props.liked, selected: false}; }, render: function() { var liked = this.state.liked ? 'l' : ''; var icon = null; if(this.props.icon_url){ icon = (); } else { icon = ; } var title = ( {icon} {this.props.feed_title} ); var read = (); var liked = (); icon = ; var clsses = "list-group-item"; if(this.props.selected) { clsses += " active"; } // FIXME https://github.com/yahoo/react-intl/issues/189 // use FormattedRelative when fixed, will have to upgrade to ReactIntlv2 return (
{title}
{read} {liked} {this.props.title}
); }, openRedirectLink: function(evnt) { if(!this.state.read) { this.toogleRead(evnt); } }, toogleRead: function(evnt) { this.setState({read: !this.state.read}, function() { MiddlePanelActions.changeRead(this.props.category_id, this.props.feed_id, this.props.article_id, this.state.read); }.bind(this)); evnt.stopPropagation(); }, toogleLike: function(evnt) { this.setState({liked: !this.state.liked}, function() { MiddlePanelActions.changeLike(this.props.category_id, this.props.feed_id, this.props.article_id, this.state.liked); }.bind(this)); evnt.stopPropagation(); }, loadArticle: function() { this.setState({selected: true, read: true}, function() { RightPanelActions.loadArticle( this.props.article_id, this.props.read); }.bind(this)); }, stopPropagation: function(evnt) { evnt.stopPropagation(); }, }); var MiddlePanelSearchRow = React.createClass({ getInitialState: function() { return {query: MiddlePanelStore._datas.query, search_title: MiddlePanelStore._datas.search_title, search_content: MiddlePanelStore._datas.search_content, }; }, render: function() { return (
Title Content
); }, setQuery: function(evnt) { this.setState({query: evnt.target.value}); }, toogleSTitle: function() { this.setState({search_title: !this.state.search_title}, this.launchSearch); }, toogleSContent: function() { this.setState({search_content: !this.state.search_content}, this.launchSearch); }, launchSearch: function(evnt) { if(this.state.query && (this.state.search_title || this.state.search_content)) { MiddlePanelActions.search({query: this.state.query, title: this.state.search_title, content: this.state.search_content}); } if(evnt) { evnt.preventDefault(); } }, }); var MiddlePanelFilter = React.createClass({ getInitialState: function() { return {filter: MiddlePanelStore._datas.filter, display_search: MiddlePanelStore._datas.display_search}; }, render: function() { var search_row = null; if(this.state.display_search) { search_row = } return (
{search_row}
); }, setAllFilter: function() { this.setState({filter: 'all'}, function() { MiddlePanelActions.setFilter('all'); }.bind(this)); }, setUnreadFilter: function() { this.setState({filter: 'unread'}, function() { MiddlePanelActions.setFilter('unread'); }.bind(this)); }, setLikedFilter: function() { this.setState({filter: 'liked'}, function() { MiddlePanelActions.setFilter('liked'); }.bind(this)); }, toogleSearch: function() { this.setState({display_search: !this.state.display_search}, function() { if(!this.state.display_search) { MiddlePanelActions.search_off(); } }.bind(this) ); }, }); var MiddlePanel = React.createClass({ getInitialState: function() { return {filter: MiddlePanelStore._datas.filter, articles: []}; }, render: function() { return (
{this.state.articles.map(function(article){ var key = "a" + article.article_id; if(article.read) {key+="r";} if(article.liked) {key+="l";} if(article.selected) {key+="s";} return ();})}
); }, componentDidMount: function() { MiddlePanelActions.reload(); MiddlePanelStore.addChangeListener(this._onChange); }, componentWillUnmount: function() { MiddlePanelStore.removeChangeListener(this._onChange); }, _onChange: function() { this.setState({filter: MiddlePanelStore._datas.filter, articles: MiddlePanelStore.getArticles()}); }, }); module.exports = {MiddlePanel: MiddlePanel, MiddlePanelFilter: MiddlePanelFilter};