updated checkbox, completed rating field

ROADMAP.md

@@ -33,7 +33,7 @@
 - image(firebase storage url string)
 - single select reference(DocRefrence)
 - mulit select reference(DocRefrence)
-- [https://material-ui.com/components/rating/] rating(number)
+- rating ✅
 
 ### Functionality:
 
@@ -46,7 +46,7 @@
 - Fixed column
 - keyboard Navigation:
   - Up key to move to the cell above ✅
-  - Down key to move to the cell bellow if last cell, create a new row ✅
+  - Down key to move to the cell bellow, if last cell create a new row ✅
   - Tab to go to the next cell
 - column / table Create/edit validation
 

src/components/Fields/CheckBox.tsx

@@ -5,18 +5,19 @@ import CheckBoxIcon from "@material-ui/icons/CheckBox";
 import CheckBoxOutlineIcon from "@material-ui/icons/CheckBoxOutlineBlank";
 
 const CheckBox = (props: any) => {
-  const { isFocusedCell, cellData, cellActions } = props;
-  const [state, setState] = useState(cellData);
-  if (isFocusedCell)
-    return (
-      <Checkbox
-        checked={state}
-        onChange={e => {
-          setState(!state);
-          cellActions.update(!state);
-        }}
-      />
-    );
-  else return cellData === true ? <CheckBoxIcon /> : <CheckBoxOutlineIcon />;
+  const { columnData, cellData, cellActions, rowData, rowIndex } = props;
+  return (
+    <Checkbox
+      checked={cellData}
+      onChange={e => {
+        cellActions.updateFirestore({
+          rowIndex,
+          value: !cellData,
+          docId: rowData.id,
+          fieldName: columnData.fieldName
+        });
+      }}
+    />
+  );
 };
 export default CheckBox;

src/components/Fields/Rating.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import MuiRating from "@material-ui/lab/Rating";
+
+const Rating = (props: any) => {
+  const { columnData, cellData, cellActions, rowData, rowIndex } = props;
+  // console.log(columnData, cellData, cellActions, rowData, rowIndex);
+
+  return (
+    <MuiRating
+      name={`rating-controlled-${columnData.fieldName}-${rowIndex}`}
+      value={cellData}
+      onChange={(event, newValue) => {
+        const cell = {
+          rowIndex,
+          value: newValue,
+          docId: rowData.id,
+          fieldName: columnData.fieldName
+        };
+        cellActions.updateFirestore(cell);
+      }}
+    />
+  );
+};
+export default Rating;

src/components/TableCell.tsx

@@ -3,7 +3,6 @@ import { TableCell as MuiTableCell, Switch } from "@material-ui/core";
 import clsx from "clsx";
 import { FieldType } from "./Fields";
 
-import Rating from "@material-ui/lab/Rating";
 import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
 import AddIcon from "@material-ui/icons/AddCircle";
@@ -11,7 +10,9 @@ import AddIcon from "@material-ui/icons/AddCircle";
 import DateFnsUtils from "@date-io/date-fns";
 import SimpleText from "./Fields/SimpleText";
 import CheckBox from "./Fields/CheckBox";
+
 import Number from "./Fields/Number";
+import Rating from "./Fields/Rating";
 
 const TableCell = (props: any) => {
   const {
@@ -76,6 +77,19 @@ const TableCell = (props: any) => {
       case FieldType.checkBox:
         return (
           <CheckBox
+            rowIndex={rowIndex}
+            rowData={rowData}
+            isFocusedCell={isFocusedCell}
+            cellData={cellData}
+            cellActions={cellActions}
+            columnData={columnData}
+          />
+        );
+      case FieldType.rating:
+        return (
+          <Rating
+            rowIndex={rowIndex}
+            rowData={rowData}
             isFocusedCell={isFocusedCell}
             cellData={cellData}
             cellActions={cellActions}