Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fun with React.js and ES6 Module Transpiler
/**
* @jsx React.DOM
*/
import React from 'react';
var ImagePlaceholder = {
imgLoadError: function() {
this.getDOMNode().querySelector('img').src = '/img/no-image.jpg';
}
};
var ReviewTmpl = React.createClass({
mixins: [ImagePlaceholder],
render: function() {
var data = this.props.data;
var rating = data.average || data.Rating;
var ratingStarsWidth = {width: "calc(" + ( rating /5) * 100 + "% - 0.12em)"};
return (
<div id="" className="review item">
<div className="product-image-thumbnail"><img onError={this.imgLoadError} className="product-image" src={data.Product.ImageUrl} />
<div className="product-name">{data.Product.Name}</div>
</div>
<div className="review-container">
<div className="stars" rating={rating}>
<div className="filled" style={ratingStarsWidth}>★★★★★</div>
<div className="unfilled">★★★★★</div>
</div>
<div className="title">{data.Title}</div>
<div className="nickname">{data.UserNickname}</div>
<div className="text">{data.ReviewText}</div>
<div className="tags">
<div className="tags-pro hide"></div>
<div className="tags-con hide"></div>
</div>
</div>
</div>
)
}
});
var ProductTmpl = React.createClass({
mixins: [ImagePlaceholder],
render: function() {
var data = this.props.data;
var imageUrl = data.ImageUrl || data.product.ImageUrl;
var rating = data.average || data.Rating;
var ratingStarsWidth = {width: "calc(" + ( rating /5) * 100 + "% - 0.12em)"};
var tags = typeof data.Tags === 'undefined' ? {Pro: [], Con: []} : data.Tags;
return <div className="data item">
<div className="product-data">
<div className="rating">
<div className="stars" rating={data.average}>
<div className="filled" style={ratingStarsWidth}>★★★★★</div>
<div className="unfilled">★★★★★</div>
</div>
<div className="hide rating-value">{rating}</div>
</div>
<div className="percent-recommend">
<span className="percent-value">100%&nbsp;</span>
<span className="percent-recommend-suffix">of reviewers recommend this product</span>
</div>
</div>
<div className="product-image-thumbnail">
<img src={imageUrl} onerror="this.src='/img/no-image.jpg'" className="product-image" />
<div className="product-name medium_headline"></div>
</div>
<div className="tags">
<div className="tags-pro">
<Tags tags={tags.Pro} tagType="pro" />
</div>
<div className="tags-con">
<Tags tags={tags.Con} tagType="con" />
</div>
</div>
</div>
}
});
/* Private */
var Tags = React.createClass({
render: function() {
var className = 'tag tag-' + this.props.tagType;
var tags = this.props.tags.slice(0,2).map(function(tag) {
return <div key={tag} className={className}>{tag}</div>
});
return <span>{tags}</span>
}
})
export { ReviewTmpl, ProductTmpl }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.