Vulcan/packages/my-custom-package/lib/components/CustomPostsItem.jsx

73 lines
2.3 KiB
React
Raw Normal View History

import React, { PropTypes, Component } from 'react';
2016-06-19 16:25:19 +09:00
import { FormattedMessage, FormattedRelative } from 'react-intl';
import { Button } from 'react-bootstrap';
import moment from 'moment';
2016-06-19 16:25:19 +09:00
import { ModalTrigger } from "meteor/nova:core";
import { Link } from 'react-router';
2016-06-23 11:40:35 +09:00
import Posts from "meteor/nova:posts";
2016-06-23 15:11:56 +09:00
import Categories from "meteor/nova:categories";
2016-06-22 09:06:56 +09:00
class CustomPostsItem extends Telescope.components.PostsItem {
render() {
const post = this.props.post;
let postClass = "posts-item";
2016-06-19 16:25:19 +09:00
if (post.sticky) postClass += " posts-sticky";
// ⭐ custom code starts here ⭐
if (post.color) {
postClass += " post-"+post.color;
}
// ⭐ custom code ends here ⭐
return (
<div className={postClass}>
<div className="posts-item-vote">
2016-06-19 16:25:19 +09:00
<Telescope.components.Vote post={post} currentUser={this.context.currentUser}/>
</div>
2016-06-19 16:25:19 +09:00
{post.thumbnailUrl ? <Telescope.components.PostsThumbnail post={post}/> : null}
<div className="posts-item-content">
<h3 className="posts-item-title">
2016-06-19 16:25:19 +09:00
<Link to={Posts.getLink(post)} className="posts-item-title-link" target={Posts.getLinkTarget(post)}>
{post.title}
</Link>
{this.renderCategories()}
</h3>
<div className="posts-item-meta">
2016-06-19 16:25:19 +09:00
{post.user? <div className="posts-item-user"><Telescope.components.UsersAvatar user={post.user} size="small"/><Telescope.components.UsersName user={post.user}/></div> : null}
<div className="posts-item-date"><FormattedRelative value={post.postedAt}/></div>
<div className="posts-item-comments">
<Link to={Posts.getPageUrl(post)}>
<FormattedMessage id="comments.count" values={{count: post.commentCount}}/>
</Link>
</div>
{(this.context.currentUser && this.context.currentUser.isAdmin) ?<Telescope.components.PostsStats post={post} />:null}
{this.renderActions()}
</div>
</div>
{this.renderCommenters()}
2016-06-19 16:25:19 +09:00
</div>
)
}
};
2016-06-19 16:25:19 +09:00
CustomPostsItem.propTypes = {
post: React.PropTypes.object.isRequired
}
CustomPostsItem.contextTypes = {
currentUser: React.PropTypes.object
};
export default CustomPostsItem;