#513: Added Customizable Icons for Ratings Field

src/components/fields/Rating/Settings.tsx

@@ -1,48 +1,81 @@
 import { ISettingsProps } from "@src/components/fields/types";
-
-import { Slider, InputLabel, TextField, Grid } from "@mui/material";
+import RatingIcon from "@mui/icons-material/Star";
+import { Slider, InputLabel, TextField, Grid, FormControlLabel, Checkbox, Stack, Fab } from "@mui/material";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import { get } from "lodash-es";
 
 export default function Settings({ onChange, config }: ISettingsProps) {
   return (
-    <>
-      <Grid container spacing={2} justifyItems="end" direction={"row"}>
-        <Grid item xs={6}>
-          <TextField
-            label="Maximum number of stars"
-            type={"number"}
-            value={config.max}
-            fullWidth
-            onChange={(e) => {
-              onChange("max")(parseInt(e.target.value));
-            }}
-            inputProps={{ min: 1, max: 20 }}
-          />
-        </Grid>
-        <Grid item xs={6}>
-          <InputLabel>Star fraction</InputLabel>
-          <ToggleButtonGroup
-            value={config.precision}
-            exclusive
-            fullWidth
-            onChange={(_, value) => {
-              onChange("precision")(value);
-            }}
-            aria-label="text alignment"
-          >
-            <ToggleButton value={0.25} aria-label="quarter">
-              1/4
-            </ToggleButton>
-            <ToggleButton value={0.5} aria-label="half">
-              1/2
-            </ToggleButton>
-            <ToggleButton value={1} aria-label="whole">
-              1
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Grid>
+    <Grid container spacing={2} justifyItems="end" direction={"row"}>
+      <Grid item xs={6}>
+        <TextField
+          label="Maximum number of stars"
+          type={"number"}
+          value={config.max}
+          fullWidth
+          onChange={(e) => {
+            onChange("max")(parseInt(e.target.value));
+          }}
+          inputProps={{ min: 1, max: 20 }}
+        />
       </Grid>
-    </>
+      <Grid item xs={6}>
+        <InputLabel>Star fraction</InputLabel>
+        <ToggleButtonGroup
+          value={config.precision}
+          exclusive
+          fullWidth
+          onChange={(_, value) => {
+            onChange("precision")(value);
+          }}
+          aria-label="text alignment"
+        >
+          <ToggleButton value={0.25} aria-label="quarter">
+            1/4
+          </ToggleButton>
+          <ToggleButton value={0.5} aria-label="half">
+            1/2
+          </ToggleButton>
+          <ToggleButton value={1} aria-label="whole">
+            1
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </Grid>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={config.customIcons?.enabled}
+            onChange={(e) =>
+              onChange("customIcons.enabled")(e.target.checked)
+            }
+            name="customIcons.enabled"
+          />
+        }
+        label="Customize button icons with emoji"
+        style={{ marginLeft: -11 }}
+      />
+      {config.customIcons?.enabled && (
+        <Grid container spacing={2} sx={{ mt: { xs: 0, sm: -1 } }}>
+          <Grid item xs={12} sm={true}>
+            <Stack direction="row" spacing={1}>
+              <TextField
+                id="customIcons.rating"
+                value={get(config, "customIcons.rating")}
+                onChange={(e) =>
+                  onChange("customIcons.rating")(e.target.value)
+                }
+                label="Rating:"
+                className="labelHorizontal"
+                inputProps={{ style: { width: "3ch" } }}
+              />
+              <Fab size="small" aria-label="Preview of rating button">
+                {get(config, "customIcons.rating") || <RatingIcon />}
+              </Fab>
+            </Stack>
+          </Grid>
+        </Grid>
+      )}
+    </Grid>
   );
-}
+}

src/components/fields/Rating/TableCell.tsx

@@ -1,7 +1,15 @@
 import { IHeavyCellProps } from "@src/components/fields/types";
 
 import MuiRating from "@mui/material/Rating";
-import StarBorderIcon from "@mui/icons-material/StarBorder";
+import RatingIcon from "@mui/icons-material/Star";
+import { get } from "lodash-es";
+
+
+const getStateIcon = (config: any) => {
+  // only use the config to get the custom rating icon if enabled via toggle
+  if (!get(config, "customIcons.enabled")) { return <RatingIcon /> }
+  return get(config, "customIcons.rating") || <RatingIcon />;
+};
 
 export default function Rating({
   row,
@@ -28,9 +36,10 @@ export default function Rating({
       name={`${row.id}-${column.key}`}
       value={typeof value === "number" ? value : 0}
       onClick={(e) => e.stopPropagation()}
+      icon={getStateIcon(column.config)}
       disabled={disabled}
       onChange={(_, newValue) => onSubmit(newValue)}
-      emptyIcon={<StarBorderIcon />}
+      emptyIcon={getStateIcon(column.config)}
       max={max}
       precision={precision}
       sx={{ mx: -0.25 }}