import React from "react"; | |
import { withStyles, makeStyles } from "@material-ui/core/styles"; | |
import Rating from "@material-ui/lab/Rating"; | |
import FavoriteIcon from "@material-ui/icons/Favorite"; | |
import Typography from "@material-ui/core/Typography"; | |
import Box from "@material-ui/core/Box"; | |
import { Grid } from "@material-ui/core"; | |
const useStyles = makeStyles((theme) => ({ | |
starRating: { | |
position: "absolute", | |
top: "85%", | |
background: "rgba(0,0,0,0.6)", | |
borderRadius: "5px", | |
// justifyContent: "center", | |
alignItems: "center", | |
display: "flex", | |
// flexDirection: "column", | |
// margin: "auto", | |
color: "white", | |
}, | |
})); | |
const StyledRating = withStyles({ | |
iconEmpty: { | |
color: "#ffffff", | |
}, | |
iconFilled: { | |
color: "#ff6d75", | |
}, | |
iconHover: { | |
color: "#ff3d47", | |
}, | |
})(Rating); | |
const labels = { | |
1: "Useless", | |
2: "Meh!", | |
3: "Ok", | |
4: "Good", | |
5: "Awesome", | |
}; | |
function CustomizedRatings({ submitRating, value, setValue }) { | |
const classes = useStyles(); | |
const [hover, setHover] = React.useState(-1); | |
return ( | |
<div className={classes.starRating}> | |
<Box component="fieldset" mb={3} borderColor="transparent"> | |
<Typography component="legend" style={{ paddingTop: "10px" }}> | |
Tell us how much you liked the quote | |
</Typography> | |
<Grid | |
container | |
style={{ justifyContent: "center", alignItems: "center" }} | |
> | |
<StyledRating | |
name="rating" | |
value={value} | |
getLabelText={(value) => `${value} Heart${value !== 1 ? "s" : ""}`} | |
precision={1} | |
icon={<FavoriteIcon fontSize="inherit" />} | |
size="large" | |
onChange={(event, newValue) => { | |
setValue(newValue); | |
submitRating(newValue); | |
}} | |
onChangeActive={(event, newHover) => { | |
setHover(newHover); | |
}} | |
// onMouseDown = {()=>submitRating(value)} | |
/> | |
{/* </Grid> */} | |
<Grid item xs={4} sm={4} md={4}> | |
{value !== null && ( | |
<Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box> | |
)} | |
</Grid> | |
</Grid> | |
</Box> | |
</div> | |
); | |
} | |
export default CustomizedRatings; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment