var React = require('react'); var Row = require('react-bootstrap/Row'); var Button = require('react-bootstrap/Button'); var ButtonGroup = require('react-bootstrap/ButtonGroup'); var Glyphicon = require('react-bootstrap/Glyphicon'); var MiddlePanelStore = require('../stores/MiddlePanelStore'); var MiddlePanelActions = require('../actions/MiddlePanelActions'); 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, date: React.PropTypes.string.isRequired, read: React.PropTypes.bool.isRequired, liked: React.PropTypes.bool.isRequired, }, getInitialState: function() { return {read: this.props.read, liked: this.props.liked}; }, 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 = (); return (
{title}
{read} {liked} {this.props.title}
); }, toogleRead: function() { 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)); }, toogleLike: function() { 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)); }, }); 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 = } var delay = 750; 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){ 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};