53 lines
1.1 KiB
React
53 lines
1.1 KiB
React
|
import React, { Component } from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import _ from 'lodash';
|
||
|
|
import { styles } from './styles';
|
||
|
|
|
||
|
|
class Rating extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.clickStar = this.clickStar.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
shouldComponentUpdate() {
|
||
|
|
// when component re render lost checked item
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
clickStar(e) {
|
||
|
|
this.props.onRate(e);
|
||
|
|
}
|
||
|
|
|
||
|
|
renderStars(num) {
|
||
|
|
return (
|
||
|
|
<div className={styles.starRating}>
|
||
|
|
<fieldset>
|
||
|
|
|
||
|
|
{
|
||
|
|
_.range(num)
|
||
|
|
.map(i =>
|
||
|
|
[(<input type="radio" id={`star ${i + 1}`} name="rating" value={i + 1} key={_.uniqueId('star-')} onChange={() => this.clickStar(i + 1)} />),
|
||
|
|
(<label htmlFor={`star ${i + 1}`} title={`star ${i + 1}`} key={_.uniqueId('star-')}>star {i + 1}</label>),
|
||
|
|
]).reverse()
|
||
|
|
}
|
||
|
|
</fieldset>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {
|
||
|
|
total,
|
||
|
|
} = this.props;
|
||
|
|
return (
|
||
|
|
<div className={styles.father}>
|
||
|
|
{
|
||
|
|
this.renderStars(total)
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Rating;
|