Skip to content

Instantly share code, notes, and snippets.

@manujosephv
Created November 26, 2020 17:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manujosephv/de27c203497bfacee4460c17afbff378 to your computer and use it in GitHub Desktop.
Save manujosephv/de27c203497bfacee4460c17afbff378 to your computer and use it in GitHub Desktop.
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