2016-02-18 16:26:52 +09:00
|
|
|
const CommentItem = React.createClass({
|
|
|
|
|
2016-02-18 21:39:33 +09:00
|
|
|
propTypes: {
|
|
|
|
comment: React.PropTypes.object.isRequired, // the current comment
|
|
|
|
currentUser: React.PropTypes.object, // the current user
|
|
|
|
},
|
|
|
|
|
2016-02-18 16:26:52 +09:00
|
|
|
getInitialState() {
|
2016-02-18 21:39:33 +09:00
|
|
|
return {
|
|
|
|
showReply: false,
|
|
|
|
showEdit: false
|
|
|
|
};
|
2016-02-18 16:26:52 +09:00
|
|
|
},
|
|
|
|
|
|
|
|
showReply(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.setState({showReply: true});
|
|
|
|
},
|
|
|
|
|
|
|
|
cancelReply(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.setState({showReply: false});
|
|
|
|
},
|
|
|
|
|
2016-02-18 21:39:33 +09:00
|
|
|
replyCallback() {
|
|
|
|
this.setState({showReply: false});
|
|
|
|
},
|
|
|
|
|
|
|
|
showEdit(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.setState({showEdit: true});
|
|
|
|
},
|
|
|
|
|
|
|
|
cancelEdit(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.setState({showEdit: false});
|
|
|
|
},
|
|
|
|
|
|
|
|
editCallback() {
|
|
|
|
this.setState({showEdit: false});
|
|
|
|
},
|
|
|
|
|
|
|
|
renderComment() {
|
|
|
|
const htmlBody = {__html: this.props.comment.htmlBody};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div dangerouslySetInnerHTML={htmlBody}></div>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
|
2016-02-18 17:53:04 +09:00
|
|
|
renderReply() {
|
2016-02-18 16:26:52 +09:00
|
|
|
|
2016-02-18 17:53:04 +09:00
|
|
|
({CommentNew} = Telescope.components);
|
2016-02-18 16:26:52 +09:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="comment-reply">
|
2016-02-18 21:39:33 +09:00
|
|
|
<CommentNew comment={this.props.comment} submitCallback={this.replyCallback} type="reply" />
|
2016-02-19 09:54:13 +09:00
|
|
|
<a href="#" onClick={this.cancelReply} className="button button--secondary">Cancel</a>
|
2016-02-18 16:26:52 +09:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
|
2016-02-18 21:39:33 +09:00
|
|
|
renderEdit() {
|
|
|
|
|
|
|
|
({CommentEdit} = Telescope.components);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<CommentEdit comment={this.props.comment} submitCallback={this.editCallback}/>
|
|
|
|
)
|
|
|
|
},
|
2016-02-18 17:53:04 +09:00
|
|
|
|
2016-02-18 21:39:33 +09:00
|
|
|
renderActions() {
|
2016-02-18 16:26:52 +09:00
|
|
|
return (
|
2016-02-18 21:39:33 +09:00
|
|
|
<ul>
|
|
|
|
<li><a href="#" onClick={this.showReply}>Reply</a></li>
|
|
|
|
{Users.can.edit(this.props.currentUser, this.props.comment) ? <li><a href="#" onClick={this.showEdit}>Edit</a></li> : ""}
|
|
|
|
</ul>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div className="comment">
|
|
|
|
{this.state.showEdit ? this.renderEdit() : this.renderComment()}
|
|
|
|
{this.renderActions()}
|
2016-02-18 16:26:52 +09:00
|
|
|
{this.state.showReply ? this.renderReply() : ""}
|
2016-02-18 21:39:33 +09:00
|
|
|
</div>
|
2016-02-18 16:26:52 +09:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
2016-02-16 16:12:13 +09:00
|
|
|
|
|
|
|
module.exports = CommentItem;
|