116 lines
2.9 KiB
JavaScript
116 lines
2.9 KiB
JavaScript
import React from "react"
|
|
import { connect } from "react-redux"
|
|
|
|
class Rating extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
opened: false,
|
|
rating: 0,
|
|
hovered: 0,
|
|
stars: []
|
|
}
|
|
|
|
let outOf = props.outOf ? props.outOf : 5
|
|
|
|
for (var i = 0; i < outOf; i++) {
|
|
this.state.stars.push(i + 1)
|
|
}
|
|
}
|
|
|
|
static getDerivedStateFromProps(nextProps, prevState) {
|
|
return {}
|
|
}
|
|
|
|
componentDidMount() {}
|
|
|
|
componentDidUpdate(prevProps, prevState) {}
|
|
|
|
changeRating(newRating) {
|
|
this.setState({
|
|
rating: newRating
|
|
})
|
|
|
|
if (this.props.onChange) this.props.onChange(newRating)
|
|
}
|
|
|
|
hoverRating(rating) {
|
|
this.setState({
|
|
hovered: rating
|
|
})
|
|
}
|
|
|
|
_handleRate = () => {
|
|
if (this.state.rating > 0) {
|
|
this.setState({
|
|
opened: true
|
|
})
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { opened, stars, rating, hovered } = this.state
|
|
const data = ["Очень плохо", "Плохо", "Нормально", "Хорошо", "Отлично"]
|
|
|
|
return (
|
|
<div className={opened ? "rate_us opened" : "rate_us"}>
|
|
<div className="rate_body">
|
|
<p>Оцените нас</p>
|
|
<div className="rate_start">
|
|
<div className="stars">
|
|
{stars.map((star) => {
|
|
return (
|
|
<label
|
|
className={rating < star ? (hovered < star ? "" : "hover") : "active"}
|
|
onClick={() => {
|
|
this.changeRating(star)
|
|
}}
|
|
onMouseEnter={() => {
|
|
this.hoverRating(star)
|
|
}}
|
|
onMouseLeave={() => {
|
|
this.hoverRating(0)
|
|
}}
|
|
></label>
|
|
)
|
|
})}
|
|
</div>
|
|
{opened ? (
|
|
<p>{data[this.state.rating - 1]}</p>
|
|
) : (
|
|
<button
|
|
className="button button button-blue"
|
|
onClick={() => {
|
|
this._handleRate()
|
|
}}
|
|
>
|
|
Оценить
|
|
</button>
|
|
)}
|
|
</div>
|
|
<form>
|
|
<div className="form_field">
|
|
<input type="text" value="" placeholder="Имя" />
|
|
</div>
|
|
<div className="form_field">
|
|
<input type="text" value="" placeholder="Телефон" />
|
|
</div>
|
|
<div className="form_field">
|
|
<textarea placeholder="Комментарий"></textarea>
|
|
</div>
|
|
<button type="submit" className="button button button-blue">
|
|
Отправить
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state, ownProps) {
|
|
return {}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Rating)
|