Merge pull request #903 from mshamsrainey/enhancement/513-ratings-customized-icons

Refactor on custom rating icons

.github/workflows/deploy-preview.yml

@@ -8,7 +8,7 @@ on:
 env:
   REACT_APP_FIREBASE_PROJECT_ID: rowyio
   REACT_APP_FIREBASE_PROJECT_WEB_API_KEY:
-    "${{ secrets.FIREBASE_WEB_API_KEY_ROWYIO }}"
+    "${{ secrets.FIREBASE_WEB_API_KEY_TRYROWY }}"
   CI: ""
 jobs:
   build_and_preview:
@@ -27,6 +27,6 @@ jobs:
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"
           firebaseServiceAccount:
-            "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ROWYIO }}"
+            "${{ secrets.FIREBASE_SERVICE_ACCOUNT_TRYROWY }}"
           expires: 14d
           projectId: rowyio

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rowy",
-  "version": "3.0.0",
+  "version": "2.6.1",
   "homepage": "https://rowy.io",
   "repository": {
     "type": "git",
@@ -15,9 +15,10 @@
     "@mui/icons-material": "5.6.0",
     "@mui/lab": "^5.0.0-alpha.76",
     "@mui/material": "5.6.0",
+    "@mui/styles": "5.6.0",
     "@mui/x-date-pickers": "^5.0.0-alpha.4",
-    "@rowy/form-builder": "^0.7.0",
-    "@rowy/multiselect": "^0.4.1",
+    "@rowy/form-builder": "^0.6.2",
+    "@rowy/multiselect": "^0.4.0",
     "@tinymce/tinymce-react": "^3",
     "@uiw/react-md-editor": "^3.14.1",
     "algoliasearch": "^4.13.1",
@@ -30,13 +31,12 @@
     "file-saver": "^2.0.5",
     "firebase": "^9.6.11",
     "firebaseui": "^6.0.1",
-    "jotai": "^1.8.4",
+    "jotai": "^1.7.2",
     "json-stable-stringify-without-jsonify": "^1.0.1",
     "json2csv": "^5.0.7",
     "jszip": "^3.10.0",
     "lodash-es": "^4.17.21",
     "match-sorter": "^6.3.1",
-    "material-ui-popup-state": "^4.0.1",
     "mdi-material-ui": "^7.3.0",
     "monaco-editor-auto-typings": "^0.4.0",
     "notistack": "^2.0.4",
@@ -47,7 +47,6 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-color-palette": "^6.2.0",
     "react-data-grid": "7.0.0-beta.5",
-    "react-detect-offline": "^2.4.5",
     "react-div-100vh": "^0.7.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
@@ -65,7 +64,6 @@
     "react-scripts": "^5.0.0",
     "react-usestateref": "^1.0.8",
     "remark-gfm": "^3.0.1",
-    "seedrandom": "^3.0.5",
     "stream-browserify": "^3.0.0",
     "swr": "^1.3.0",
     "tinymce": "^5",
@@ -157,12 +155,10 @@
     "@types/node": "^17.0.23",
     "@types/react": "^18.0.5",
     "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-detect-offline": "^2.4.1",
     "@types/react-div-100vh": "^0.4.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-router-hash-link": "^2.4.5",
-    "@types/seedrandom": "^3.0.2",
     "@typescript-eslint/parser": "^5.18.0",
     "craco-alias": "^3.0.1",
     "craco-swc": "^0.5.1",

src/components/fields/Rating/Icon.tsx

@@ -0,0 +1,28 @@
+import RatingIcon from "@mui/icons-material/Star";
+import RatingOutlineIcon from "@mui/icons-material/StarBorder"
+import { get } from "lodash-es";
+
+
+export interface IIconProps{
+  config: any,
+  isEmpty: boolean
+}
+
+export default function Icon({config, isEmpty} : IIconProps) {
+if (isEmpty) {
+    return getStateOutline(config)
+ } else {
+    return getStateIcon(config)
+}
+} 
+
+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 /> }
+    console.log(get(config, "customIcons.rating"))
+    return get(config, "customIcons.rating") || <RatingIcon />;
+  };
+const getStateOutline = (config: any) => {
+    if (!get(config, "customIcons.enabled")) { return <RatingOutlineIcon /> }
+    return get(config, "customIcons.rating") || <RatingOutlineIcon />;
+  }

src/components/fields/Rating/Settings.tsx

@@ -1,11 +1,11 @@
 import { ISettingsProps } from "@src/components/fields/types";
-import RatingIcon from "@mui/icons-material/Star";
-import RatingOutlineIcon from "@mui/icons-material/StarBorder"
 import { InputLabel, TextField, Grid, FormControlLabel, Checkbox, Stack } from "@mui/material";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import MuiRating from "@mui/material/Rating";
 import { get } from "lodash-es";
+import Icon from "./Icon"
+
 
 export default function Settings({ onChange, config }: ISettingsProps) {
   return (
@@ -80,9 +80,9 @@ export default function Settings({ onChange, config }: ISettingsProps) {
             <MuiRating aria-label="Preview of the rating field with custom icon"
               name="Preview"
               onClick={(e) => e.stopPropagation()}
-              icon={get(config, "customIcons.rating") || <RatingIcon />}
+              icon={<Icon config={config} isEmpty={false} />}
               size="small"
-              emptyIcon={get(config, "customIcons.rating") || <RatingOutlineIcon />}
+              emptyIcon={<Icon config={config} isEmpty={true} />}
               max={get(config, "max")}
               precision={get(config, "precision")}
               sx={{ pt: 0.5 }}

src/components/fields/Rating/SideDrawerField.tsx

@@ -3,8 +3,9 @@ import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { Grid } from "@mui/material";
 import { Rating as MuiRating } from "@mui/material";
 import "@mui/lab";
-import { getStateIcon, getStateOutline } from "./TableCell";
 import { fieldSx } from "@src/components/SideDrawer/utils";
+import Icon from "./Icon"
+
 
 export default function Rating({
   column,
@@ -28,8 +29,8 @@ export default function Rating({
           onChange(newValue);
           onSubmit();
         }}
-        icon={getStateIcon(column.config)}
-        emptyIcon={getStateOutline(column.config)}
+        icon={<Icon config={column.config} isEmpty={false}/>}
+        emptyIcon={<Icon config={column.config} isEmpty={true} />}
         size="small"
         max={max}
         precision={precision}

src/components/fields/Rating/TableCell.tsx

@@ -1,22 +1,9 @@
 import { IHeavyCellProps } from "@src/components/fields/types";
 
 import MuiRating from "@mui/material/Rating";
-import RatingIcon from "@mui/icons-material/Star";
-import RatingOutlineIcon from "@mui/icons-material/StarBorder"
-import { get } from "lodash-es";
+import Icon from "./Icon"
 
 
-export 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 const getStateOutline = (config: any) => {
-  if (!get(config, "customIcons.enabled")) { return <RatingOutlineIcon /> }
-  return get(config, "customIcons.rating") || <RatingOutlineIcon />;
-}
-
 export default function Rating({
   row,
   column,
@@ -42,11 +29,11 @@ export default function Rating({
       name={`${row.id}-${column.key}`}
       value={typeof value === "number" ? value : 0}
       onClick={(e) => e.stopPropagation()}
-      icon={getStateIcon(column.config)}
+      icon={<Icon config={column.config} isEmpty={false} />}
       size="small"
       disabled={disabled}
       onChange={(_, newValue) => onSubmit(newValue)}
-      emptyIcon={getStateOutline(column.config)}
+      emptyIcon={<Icon config={column.config} isEmpty={true} />}
       max={max}
       precision={precision}
       sx={{ mx: -0.25 }}

src/theme/components.tsx

@@ -1375,11 +1375,12 @@ export const components = (theme: Theme): ThemeOptions => {
 
       MuiRating: {
         styleOverrides: {
-          iconFilled: { color: theme.palette.text.secondary },
           icon: {
             // https://github.com/mui/material-ui/issues/32557
             "& .MuiSvgIcon-root": { pointerEvents: "auto" },
+            color: theme.palette.text.secondary,
           },
+          iconEmpty: { opacity: 0.38 },
         },
       },