mirror of
https://github.com/devfake/flox.git
synced 2024-11-15 06:32:34 +01:00
listen on rate change for color change
This commit is contained in:
parent
5b174b9e5a
commit
782ef43d7d
@ -8,7 +8,8 @@ class FloxItem extends React.Component {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
removed: false
|
||||
removed: false,
|
||||
ratingColor: this.formatRating()
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +33,7 @@ class FloxItem extends React.Component {
|
||||
</div>
|
||||
<div className="item-image">
|
||||
{this.props.image ? <img src={this.props.image} /> : <i className="icon-no-image"></i>}
|
||||
<div className={"rating rating-" + this.formatRating()}></div>
|
||||
<div className={"rating rating-" + this.state.ratingColor}></div>
|
||||
</div>
|
||||
|
||||
<div className="item-content">
|
||||
@ -44,9 +45,7 @@ class FloxItem extends React.Component {
|
||||
);
|
||||
}
|
||||
|
||||
formatRating() {
|
||||
let rating = this.props.data.rating;
|
||||
|
||||
formatRating(rating = this.props.data.rating) {
|
||||
return rating.replace('.', '-');
|
||||
}
|
||||
|
||||
@ -69,7 +68,9 @@ class FloxItem extends React.Component {
|
||||
}
|
||||
|
||||
onHoverRate(value) {
|
||||
console.log(value);
|
||||
this.setState({
|
||||
ratingColor: value ? this.formatRating(value.toString()) : this.formatRating()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -48,7 +48,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.rating-0-5 { background: linear-gradient(#000 20%, #ac1b1b 25%); }
|
||||
.rating-0-5 { background: linear-gradient(#ac1b1b 20%, #000 25%); }
|
||||
.rating-1 { background: #ac1b1b; }
|
||||
.rating-1-5 { background: linear-gradient(#c15e33 20%, #ac1b1b 25%); }
|
||||
.rating-2 { background: #c15e33; }
|
||||
|
Loading…
Reference in New Issue
Block a user