StarRate.js
2.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import React from 'react';
import Reset from '../images/reset.svg';
import '../styles/StarRate.css';
function StarRate(props) {
const _resetRating = (e) => {
if(e.type === "mouseleave" || e.type === "onTouchEnd"){
props.onChange(props.cacheIdx, props.cacheRating);
}else if(e.type === "click"){
props.onChange(0,0);
}
}
const _makeStars = () => {
let stars = [];
for(let i = 0; i < 10; i+=2){
let starClass = "star__rate";
if(props.rating !== 0){
if (i <= props.idx) {
if(props.idx === i && props.rating % 2 !== 0){
starClass += ' is-half-selected';
}else{
starClass += ' is-selected';
}
}
}else if(props.cacheRating !== 0){
if (i <= props.cacheIdx) {
if(props.cacheIdx === i && props.cacheRating % 2 !== 0){
starClass += ' is-half-selected';
}else{
starClass += ' is-selected';
}
}
}
stars.push(
<label key={i}
className={starClass}
onClick={()=>{props.onChange(props.idx,props.rating, true)}}
onMouseOver={(e)=>{props._mouseOver(e,i)}}
onMouseMove={(e)=>{props._mouseOver(e,i)}}
onMouseLeave={(e)=>{_resetRating(e)}}
onTouchMove={(e)=>{props._mouseOver(e,i)}}
onTouchStart={(e)=>{props._mouseOver(e,i)}}
onTouchEnd={(e)=>{_resetRating(e)}}
>
</label>
)
}
return stars;
}
return (
<div className="starRate__wrap">
{_makeStars()}
</div>
)
}
export default StarRate