Vulcan/packages/example-customization/lib/components/CustomPostsItem.jsx

63 lines
2 KiB
React
Raw Normal View History

2017-03-23 16:27:59 +09:00
import { Components, getRawComponent, replaceComponent } from 'meteor/vulcan:core';
2017-05-19 14:42:43 -06:00
import React from 'react';
2016-06-19 16:25:19 +09:00
import { FormattedMessage, FormattedRelative } from 'react-intl';
import { Link } from 'react-router';
2017-03-23 16:27:59 +09:00
import Posts from "meteor/vulcan:posts";
class CustomPostsItem extends getRawComponent('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">
<Components.Vote collection={Posts} document={post} currentUser={this.props.currentUser}/>
</div>
{post.thumbnailUrl ? <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">
{post.user? <div className="posts-item-user"><Components.UsersAvatar user={post.user} size="small"/><Components.UsersName user={post.user}/></div> : null}
2016-06-19 16:25:19 +09:00
<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.props.currentUser && this.props.currentUser.isAdmin ? <Components.PostsStats post={post} /> : null}
{Posts.options.mutations.edit.check(this.props.currentUser, post) ? this.renderActions() : null}
</div>
</div>
{this.renderCommenters()}
</div>
)
}
}
replaceComponent('PostsItem', CustomPostsItem);