updated rating/checkbox/date inputs for campatiblity

src/components/Fields/CheckBox.tsx

@@ -2,17 +2,12 @@ import React from "react";
 import Checkbox from "@material-ui/core/Checkbox";
 
 const CheckBox = (props: any) => {
-  const { columnData, cellData, cellActions, rowData, rowIndex } = props;
+  const { value, row, onSubmit } = props;
   return (
     <Checkbox
-      checked={cellData}
+      checked={value}
       onChange={e => {
-        cellActions.updateFirestore({
-          rowIndex,
-          value: !cellData,
-          docRef: rowData.ref,
-          fieldName: columnData.fieldName
-        });
+        onSubmit(row.ref, !value);
       }}
     />
   );

src/components/Fields/Date.tsx

@@ -5,40 +5,35 @@ import {
   MuiPickersUtilsProvider,
   // KeyboardTimePicker,
   // KeyboardDatePicker,
-  DatePicker
+  DatePicker,
+  DateTimePicker
 } from "@material-ui/pickers";
-import Button from "@material-ui/core/Button";
+import { FieldType } from ".";
 
 const Date = (props: any) => {
-  const {
-    isFocusedCell,
-    columnData,
-    cellData,
-    cellActions,
-    rowData,
-    rowIndex
-  } = props;
+  const { value, row, onSubmit, fieldType } = props;
   function handleDateChange(date: Date | null) {
     if (date) {
-      const cell = {
-        rowIndex,
-        value: date,
-        docRef: rowData.ref,
-        fieldName: columnData.fieldName
-      };
-      cellActions.updateFirestore(cell);
+      onSubmit(row.ref, date);
     }
   }
-  if (!cellData && !isFocusedCell) return <Button>click to set</Button>;
-  else
-    return (
-      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      {fieldType === FieldType.date ? (
         <DatePicker
-          value={cellData && cellData.toDate()}
+          value={value ? value.toDate() : null}
           onChange={handleDateChange}
           emptyLabel="select a date"
         />
-      </MuiPickersUtilsProvider>
-    );
+      ) : (
+        <DateTimePicker
+          value={value ? value.toDate() : null}
+          onChange={handleDateChange}
+          emptyLabel="select a time"
+        />
+      )}
+    </MuiPickersUtilsProvider>
+  );
 };
 export default Date;

src/components/Fields/Rating.tsx

@@ -2,19 +2,14 @@ import React from "react";
 import MuiRating from "@material-ui/lab/Rating";
 
 const Rating = (props: any) => {
-  const { columnData, cellData, cellActions, rowData, rowIndex } = props;
+  const { value, row, onSubmit } = props;
   return (
     <MuiRating
-      name={`rating-controlled-${columnData.fieldName}-${rowIndex}`}
-      value={cellData}
+      // TODO: make it uniqe for each
+      name={`rating-controlled-${row.id}`}
+      value={value}
       onChange={(event, newValue) => {
-        const cell = {
-          rowIndex,
-          value: newValue,
-          docRef: rowData.ref,
-          fieldName: columnData.fieldName
-        };
-        cellActions.updateFirestore(cell);
+        onSubmit(row.ref, newValue);
       }}
     />
   );

src/components/Fields/index.tsx

@@ -13,6 +13,12 @@ import URLIcon from "@material-ui/icons/Explore";
 import NumberIcon from "@material-ui/icons/Looks3";
 import propEq from "ramda/es/propEq";
 import find from "ramda/es/find";
+import SimpleText from "./SimpleText";
+import CheckBox from "./CheckBox";
+import Number from "./Number";
+import Rating from "./Rating";
+import Date from "./Date";
+import Image from "./Image";
 export enum FieldType {
   simpleText = "SIMPLE_TEXT",
   longText = "LONG_TEXT",
@@ -46,3 +52,82 @@ export const FIELDS = [
 export const getFieldIcon = (type: FieldType) => {
   return find(propEq("type", type))(FIELDS).icon;
 };
+
+export const CellField = (
+  fieldType: FieldType,
+  rowIndex: number,
+  ref: firebase.firestore.DocumentReference,
+  isFocusedCell: boolean,
+  value: any,
+  cellActions: any,
+  fieldName: string
+) => {
+  const columnData = { fieldName };
+  const rowData = { ref };
+
+  switch (fieldType) {
+    case FieldType.checkBox:
+      return (
+        <CheckBox
+          rowIndex={rowIndex}
+          rowData={rowData}
+          isFocusedCell={isFocusedCell}
+          cellData={value}
+          cellActions={cellActions}
+          columnData={columnData}
+        />
+      );
+    case FieldType.rating:
+      return (
+        <Rating
+          rowIndex={rowIndex}
+          rowData={rowData}
+          cellData={value}
+          cellActions={cellActions}
+          columnData={columnData}
+        />
+      );
+    case FieldType.image:
+      return (
+        <Image
+          rowIndex={rowIndex}
+          rowData={rowData}
+          isFocusedCell={isFocusedCell}
+          cellData={value}
+          cellActions={cellActions}
+          columnData={columnData}
+        />
+      );
+    case FieldType.date:
+      return (
+        <Date
+          rowIndex={rowIndex}
+          rowData={rowData}
+          isFocusedCell={isFocusedCell}
+          cellData={value}
+          cellActions={cellActions}
+          columnData={columnData}
+        />
+      );
+    case FieldType.number:
+      return (
+        <Number
+          isFocusedCell={isFocusedCell}
+          cellData={value}
+          cellActions={cellActions}
+          columnData={columnData}
+        />
+      );
+    default:
+      return (
+        <SimpleText
+          rowIndex={rowIndex}
+          rowData={rowData}
+          isFocusedCell={isFocusedCell}
+          cellData={value}
+          cellActions={cellActions}
+          columnData={columnData}
+        />
+      );
+  }
+};

src/components/Table.tsx

@@ -1,96 +0,0 @@
-import React from "react";
-import ReactDataGrid from "react-data-grid";
-import useFiretable from "../hooks/useFiretable";
-import Button from "@material-ui/core/Button";
-import Popper, { PopperPlacementType } from "@material-ui/core/Popper";
-import Typography from "@material-ui/core/Typography";
-import Fade from "@material-ui/core/Fade";
-import Paper from "@material-ui/core/Paper";
-import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
-
-const useStyles = makeStyles(Theme =>
-  createStyles({
-    typography: {
-      padding: 1
-    },
-    header: {
-      position: "absolute",
-      left: 0,
-      top: 0,
-      zIndex: 1000000
-    }
-  })
-);
-
-function Table(props: any) {
-  const { collection } = props;
-  const { tableState, tableActions } = useFiretable(collection);
-  const classes = useStyles();
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
-    null
-  );
-  const [open, setOpen] = React.useState(false);
-  const [placement, setPlacement] = React.useState<PopperPlacementType>();
-
-  const handleClick = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
-    setAnchorEl(event.currentTarget);
-    setOpen(!open);
-  };
-
-  const onGridRowsUpdated = (props: any) => {
-    const { fromRowData, updated } = props;
-    fromRowData.ref.update(updated);
-  };
-
-  const headerRenderer = (props: any) => {
-    return (
-      <div className={classes.header}>
-        <Button
-          aria-describedby={props.column.key}
-          variant="contained"
-          onClick={handleClick}
-        >
-          {props.column.name}
-        </Button>
-      </div>
-    );
-  };
-  if (tableState.columns) {
-    const columns = tableState.columns.map((column: any) => ({
-      key: column.fieldName,
-      name: column.columnName,
-      editable: true,
-      resizeable: true,
-      frozen: column.fieldName === "cohort",
-      headerRenderer: headerRenderer,
-      width: 200
-    }));
-    const rows = tableState.rows;
-    return (
-      <>
-        <ReactDataGrid
-          columns={columns}
-          rowGetter={i => rows[i]}
-          rowsCount={rows.length}
-          onGridRowsUpdated={onGridRowsUpdated}
-          enableCellSelect={true}
-        />
-        <Popper id={"id"} open={open} anchorEl={anchorEl} transition>
-          {({ TransitionProps }) => (
-            <Fade {...TransitionProps} timeout={350}>
-              <Paper>
-                <Typography className={classes.typography}>
-                  The content of the Popper.
-                </Typography>
-              </Paper>
-            </Fade>
-          )}
-        </Popper>
-      </>
-    );
-  } else return <p>Loading</p>;
-}
-
-export default Table;

src/components/Table/index.tsx

@@ -0,0 +1,157 @@
+import React, { useState } from "react";
+import ReactDataGrid from "react-data-grid";
+
+import useFiretable from "../../hooks/useFiretable";
+import Typography from "@material-ui/core/Typography";
+
+import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
+import IconButton from "@material-ui/core/IconButton";
+import Button from "@material-ui/core/Button";
+import EditIcon from "@material-ui/icons/Edit";
+import HeaderPopper from "./HeaderPopper";
+import { FieldType } from "../Fields";
+
+import Date from "../Fields/Date";
+import Rating from "../Fields/Rating";
+import CheckBox from "../Fields/CheckBox";
+import UrlLink from "../Fields/UrlLink";
+
+const useStyles = makeStyles(Theme =>
+  createStyles({
+    typography: {
+      padding: 1
+    },
+    header: {
+      position: "absolute",
+      left: 0,
+      top: 0
+    },
+    button: {
+      // margin: theme.spacing(1)
+    }
+  })
+);
+
+const copyPaste = (props: any) => {
+  console.log(props);
+};
+const editable = (fieldType: FieldType) => {
+  switch (fieldType) {
+    case FieldType.date:
+    case FieldType.dateTime:
+    case FieldType.rating:
+    case FieldType.checkBox:
+      return false;
+
+    default:
+      return true;
+  }
+};
+const onSubmit = (fieldName: string) => (
+  ref: firebase.firestore.DocumentReference,
+  value: any
+) => {
+  if (!!value) {
+    ref.update({ [fieldName]: value });
+  }
+};
+
+const DateFormatter = (fieldName: string, fieldType: FieldType) => (
+  props: any
+) => {
+  return (
+    <Date {...props} onSubmit={onSubmit(fieldName)} fieldType={fieldType} />
+  );
+};
+
+const formatter = (fieldType: FieldType, fieldName: string) => {
+  console.log(fieldType);
+  switch (fieldType) {
+    case FieldType.date:
+    case FieldType.dateTime:
+      return DateFormatter(fieldName, fieldType);
+    case FieldType.rating:
+      return (props: any) => {
+        return <Rating {...props} onSubmit={onSubmit(fieldName)} />;
+      };
+    case FieldType.checkBox:
+      return (props: any) => {
+        return <CheckBox {...props} onSubmit={onSubmit(fieldName)} />;
+      };
+    case FieldType.url:
+      return (props: any) => {
+        return <UrlLink {...props} onSubmit={onSubmit(fieldName)} />;
+      };
+    default:
+      return false;
+  }
+};
+
+function Table(props: any) {
+  const { collection } = props;
+  const { tableState, tableActions } = useFiretable(collection);
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const [header, setHeader] = useState<any | null>();
+
+  const handleClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const onGridRowsUpdated = (props: any) => {
+    const { fromRowData, updated } = props;
+    fromRowData.ref.update(updated);
+  };
+
+  const headerRenderer = (props: any) => {
+    console.log(props);
+    return (
+      <div className={classes.header}>
+        {props.column.name}{" "}
+        <IconButton
+          disableFocusRipple
+          onClick={handleClick}
+          className={classes.button}
+          aria-label="delete"
+        >
+          <EditIcon />
+        </IconButton>
+      </div>
+    );
+  };
+
+  if (tableState.columns) {
+    const columns = tableState.columns.map((column: any) => ({
+      key: column.fieldName,
+      name: column.columnName,
+      editable: editable(column.type),
+      resizeable: true,
+      frozen: column.fieldName === "cohort",
+      headerRenderer: headerRenderer,
+      formatter: formatter(column.type, column.fieldName),
+      width: 200
+    }));
+    const rows = tableState.rows;
+    return (
+      <>
+        <ReactDataGrid
+          columns={columns}
+          rowGetter={i => rows[i]}
+          rowsCount={rows.length}
+          onGridRowsUpdated={onGridRowsUpdated}
+          enableCellSelect={true}
+          onCellCopyPaste={copyPaste}
+          minHeight={500}
+          // getCellActions={getCellActions}
+        />
+        <Button onClick={tableActions.row.add}>Add Row</Button>
+        <HeaderPopper anchorEl={anchorEl} />
+      </>
+    );
+  } else return <p>Loading</p>;
+}
+
+export default Table;