date / date time inputfields setup

src/components/Fields/Date.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import "date-fns";
+import DateFnsUtils from "@date-io/date-fns";
+import {
+  MuiPickersUtilsProvider,
+  // KeyboardTimePicker,
+  // KeyboardDatePicker,
+  DatePicker
+} from "@material-ui/pickers";
+import Button from "@material-ui/core/Button";
+
+const Date = (props: any) => {
+  const {
+    isFocusedCell,
+    columnData,
+    cellData,
+    cellActions,
+    rowData,
+    rowIndex
+  } = props;
+  function handleDateChange(date: Date | null) {
+    if (date) {
+      const cell = {
+        rowIndex,
+        value: date,
+        docId: rowData.id,
+        fieldName: columnData.fieldName
+      };
+      cellActions.updateFirestore(cell);
+    }
+  }
+  if (!cellData && !isFocusedCell) return <Button>click to set</Button>;
+  else
+    return (
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        <DatePicker
+          value={cellData && cellData.toDate()}
+          onChange={handleDateChange}
+          emptyLabel="select a date"
+        />
+      </MuiPickersUtilsProvider>
+    );
+};
+export default Date;

src/components/Fields/DateTime.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import "date-fns";
+import DateFnsUtils from "@date-io/date-fns";
+import {
+  MuiPickersUtilsProvider,
+  // KeyboardTimePicker,
+  // KeyboardDatePicker,
+  DateTimePicker
+} from "@material-ui/pickers";
+import Button from "@material-ui/core/Button";
+
+const DateTime = (props: any) => {
+  const {
+    isFocusedCell,
+    columnData,
+    cellData,
+    cellActions,
+    rowData,
+    rowIndex
+  } = props;
+  function handleDateChange(date: Date | null) {
+    if (date) {
+      const cell = {
+        rowIndex,
+        value: date,
+        docId: rowData.id,
+        fieldName: columnData.fieldName
+      };
+      cellActions.updateFirestore(cell);
+    }
+  }
+  if (!cellData && !isFocusedCell) return <Button>click to set</Button>;
+  else
+    return (
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        <DateTimePicker
+          value={cellData && cellData.toDate()}
+          onChange={handleDateChange}
+          emptyLabel="select a date"
+        />
+      </MuiPickersUtilsProvider>
+    );
+};
+export default DateTime;

src/components/Fields/Rating.tsx

@@ -3,8 +3,6 @@ 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}`}

src/components/Fields/index.tsx

@@ -18,7 +18,6 @@ export enum FieldType {
   PhoneNumber = "PHONE_NUMBER",
   checkBox = "CHECK_BOX",
   date = "DATE",
-  time = "TIME",
   dateTime = "DATE_TIME",
   number = "NUMBER",
   url = "URL",
@@ -33,7 +32,7 @@ export const FIELDS = [
   { icon: <CheckBoxIcon />, name: "Check Box", type: FieldType.checkBox },
   { icon: <NumberIcon />, name: "Number", type: FieldType.number },
   { icon: <DateIcon />, name: "Date", type: FieldType.date },
-  { icon: <TimeIcon />, name: "Time", type: FieldType.time },
+  { icon: <TimeIcon />, name: "Time", type: FieldType.dateTime },
   { icon: <URLIcon />, name: "URL", type: FieldType.url },
   { icon: <RatingIcon />, name: "Rating", type: FieldType.rating }
 ];

src/components/TableCell.tsx

@@ -5,14 +5,14 @@ import { FieldType } from "./Fields";
 
 import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
-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";
+import Date from "./Fields/Date";
+import DateTime from "./Fields/DateTime";
 
 const TableCell = (props: any) => {
   const {
@@ -96,6 +96,28 @@ const TableCell = (props: any) => {
             columnData={columnData}
           />
         );
+      case FieldType.date:
+        return (
+          <Date
+            rowIndex={rowIndex}
+            rowData={rowData}
+            isFocusedCell={isFocusedCell}
+            cellData={cellData}
+            cellActions={cellActions}
+            columnData={columnData}
+          />
+        );
+      case FieldType.dateTime:
+        return (
+          <DateTime
+            rowIndex={rowIndex}
+            rowData={rowData}
+            isFocusedCell={isFocusedCell}
+            cellData={cellData}
+            cellActions={cellActions}
+            columnData={columnData}
+          />
+        );
       case FieldType.number:
         return (
           <Number