From 6d4e2b255c5cdd190675dfe52a1eaba6b16bbcaf Mon Sep 17 00:00:00 2001
From: Shams mosowi <shams.mosowi@gmail.com>
Date: Thu, 24 Sep 2020 00:37:12 +1000
Subject: [PATCH] star rating precision config

---
 .../Table/ColumnMenu/Settings/index.tsx         | 17 ++++++++++++++++-
 www/src/components/Table/formatters/Rating.tsx  |  6 +++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/www/src/components/Table/ColumnMenu/Settings/index.tsx b/www/src/components/Table/ColumnMenu/Settings/index.tsx
index 7864f682..771d64be 100644
--- a/www/src/components/Table/ColumnMenu/Settings/index.tsx
+++ b/www/src/components/Table/ColumnMenu/Settings/index.tsx
@@ -126,7 +126,7 @@ const ConfigFields = ({ fieldType, config, handleChange, tables, columns }) => {
             defaultValue={5}
             value={config.max}
             getAriaValueText={(v) => `${v} max stars`}
-            aria-labelledby="discrete-slider"
+            aria-labelledby="max-slider"
             valueLabelDisplay="auto"
             onChange={(_, v) => {
               handleChange("max")(v);
@@ -136,6 +136,21 @@ const ConfigFields = ({ fieldType, config, handleChange, tables, columns }) => {
             min={1}
             max={15}
           />
+          <Typography variant="overline">Slider precision stars</Typography>
+          <Slider
+            defaultValue={0.5}
+            value={config.precision}
+            getAriaValueText={(v) => `${v} rating step size`}
+            aria-labelledby="precision-slider"
+            valueLabelDisplay="auto"
+            onChange={(_, v) => {
+              handleChange("precision")(v);
+            }}
+            step={0.25}
+            marks
+            min={0.25}
+            max={1}
+          />
         </>
       );
     case FieldType.action:
diff --git a/www/src/components/Table/formatters/Rating.tsx b/www/src/components/Table/formatters/Rating.tsx
index dc59c075..5e56b082 100644
--- a/www/src/components/Table/formatters/Rating.tsx
+++ b/www/src/components/Table/formatters/Rating.tsx
@@ -19,7 +19,10 @@ export default function Rating({
   onSubmit,
 }: CustomCellProps) {
   const classes = useStyles();
-  const { max } = (column as any).config as { max: number };
+  const { max, precision } = (column as any).config as {
+    max: number;
+    precision: number;
+  };
   return (
     <MuiRating
       name={`${row.id}-${column.key as string}`}
@@ -30,6 +33,7 @@ export default function Rating({
       emptyIcon={<StarBorderIcon />}
       // TODO: Make this customisable in config
       max={max ?? 5}
+      precision={precision ?? 1}
       classes={{ root: classes.rating, iconEmpty: classes.iconEmpty }}
     />
   );