1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
var React = require('react');
var Col = require('react-bootstrap/Col');
var Panel = require('react-bootstrap/Panel');
var RightPanelStore = require('../stores/RightPanelStore');
var RightPanelActions = require('../actions/RightPanelActions');
var Article = React.createClass({
propTypes: {article: React.PropTypes.object.isRequired},
render: function() {
return (<div />);
},
});
var Feed = React.createClass({
propTypes: {feed: React.PropTypes.object.isRequired},
render: function() {
var icon = null;
if(this.props.feed.icon_url){
icon = (<img width="16px" src={this.props.feed.icon_url} />);
}
var header = (<h4>
{icon}<strong>Title:</strong> {this.props.feed.title}
</h4>);
return (<Panel collapsible defaultExpanded header={header}>
<dl className="dl-horizontal">
<dt>Description</dt>
<dd>{this.props.feed.description}</dd>
<dt>Created on</dt>
<dd>{this.props.feed.created_date}</dd>
<dt>Feed adress</dt>
<dd>
<a href={this.props.feed.link}>
{this.props.feed.link}
</a>
</dd>
<dt>Site link</dt>
<dd>
<a href={this.props.feed.site_link}>
{this.props.feed.site_link}
</a>
</dd>
<dt>Last fetched</dt>
<dd>{this.props.feed.last_retrieved}</dd>
<dt>Enabled</dt>
<dd>{this.props.feed.enabled}</dd>
</dl>
</Panel>
);
},
});
var Category = React.createClass({
propTypes: {category: React.PropTypes.object.isRequired},
render: function() {
return (<Panel header={this.props.category.name}>
test
</Panel>
);
},
});
var RightPanel = React.createClass({
getInitialState: function() {
return {category: null, feed: null, article: null};
},
getCategoryCrum: function() {
return (<li><a onClick={this.selectCategory} href="#">
{this.state.category.name}
</a></li>);
},
getFeedCrum: function() {
return (<li><a onClick={this.selectFeed} href="#">
{this.state.feed.title}
</a></li>);
},
getArticleCrum: function() {
return <li>Article</li>;
},
render: function() {
var content = null;
var breadcrum = null;
if(this.state.article) {
var breadcrum = (<ol className="breadcrumb">
{this.getCategoryCrum()}
{this.getFeedCrum()}
{this.getArticleCrum()}
</ol>);
var content = <Article />;
} else if(this.state.feed) {
var breadcrum = (<ol className="breadcrumb">
{this.getCategoryCrum()}
{this.getFeedCrum()}
</ol>);
var content = <Feed feed={this.state.feed} />;
} else if(this.state.category) {
var breadcrum = (<ol className="breadcrumb">
{this.getCategoryCrum()}
</ol>);
var content = <Category category={this.state.category} />;
}
return (<Col id="right-panel" xsOffset={2} smOffset={2}
mdOffset={7} lgOffset={6}
xs={10} sm={10} md={5} lg={6}>
{breadcrum}
{content}
</Col>
);
},
selectCategory: function() {
this.setState({feed: null, article: null});
},
selectFeed: function() {
this.setState({article: null});
},
componentDidMount: function() {
RightPanelStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
RightPanelStore.removeChangeListener(this._onChange);
},
_onChange: function() {
this.setState(RightPanelStore._datas);
},
});
module.exports = RightPanel;
|
