Merge pull request #6 from AntlerEngineering/react-data-grid

merge and close React data grid branch

src/components/Fields/CheckBox.tsx

@@ -3,12 +3,18 @@ import React from "react";
 import { Checkbox } from "@material-ui/core";
 
 // TODO: Create an interface for props
-const CheckBox = (props: any) => {
+interface Props {
+  value: boolean | null;
+  row: any;
+  onSubmit: Function;
+}
+
+const CheckBox = (props: Props) => {
   const { value, row, onSubmit } = props;
   return (
     <Checkbox
       name={`checkBox-controlled-${row.id}`}
-      checked={value}
+      checked={!!value}
       onChange={e => {
         onSubmit(row.ref, !value);
       }}

src/components/Fields/Date.tsx

@@ -11,7 +11,14 @@ import {
 } from "@material-ui/pickers";
 
 // TODO: Create an interface for props
-const Date = (props: any) => {
+interface Props {
+  value: firebase.firestore.Timestamp | null;
+  row: any;
+  onSubmit: Function;
+  fieldType: FieldType;
+}
+
+const Date = (props: Props) => {
   const { value, row, onSubmit, fieldType } = props;
   function handleDateChange(date: Date | null) {
     if (date) {
@@ -25,12 +32,14 @@ const Date = (props: any) => {
         <DatePicker
           value={value ? value.toDate() : null}
           onChange={handleDateChange}
+          format="dd/MM/yy"
           emptyLabel="select a date"
         />
       ) : (
         <DateTimePicker
           value={value ? value.toDate() : null}
           onChange={handleDateChange}
+          format="dd/MM/yy HH:mm a"
           emptyLabel="select a time"
         />
       )}

src/components/Fields/Image.tsx

@@ -2,8 +2,19 @@ import React, { useCallback, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import useUploader from "../../hooks/useFiretable/useUploader";
 
-// TODO:  indecate state completion / error
+import { FieldType } from '.';
+// TODO:  indicate state completion / error
 // TODO: Create an interface for props
+
+
+interface Props {
+  value: any;
+  row: any;
+  onSubmit: Function;
+  fieldType: FieldType;
+}
+
+
 const Image = (props: any) => {
   const { columnData, cellData, cellActions, rowData, rowIndex } = props;
   const [uploaderState, upload] = useUploader();

src/components/Fields/LongText.tsx

@@ -2,6 +2,12 @@ import React from "react";
 import ExpandIcon from "@material-ui/icons/AspectRatio";
 import IconButton from "@material-ui/core/IconButton";
 
+interface Props {
+  value: firebase.firestore.Timestamp | null;
+  row: any;
+  onSubmit: Function;
+}
+
 const UrlLink = (props: any) => {
   const { value, cellActions } = props;
   return value ? (

src/components/Fields/Rating.tsx

@@ -2,7 +2,14 @@ import React from "react";
 import MuiRating from "@material-ui/lab/Rating";
 
 // TODO: Create an interface for props
-const Rating = (props: any) => {
+
+interface Props {
+  value: number | null;
+  row: any;
+  onSubmit: Function;
+  //fieldType: FieldType;
+}
+const Rating = (props: Props) => {
   const { value, row, onSubmit } = props;
   return (
     <MuiRating

src/components/Fields/UrlLink.tsx

@@ -2,9 +2,12 @@ import React from "react";
 import EditIcon from "@material-ui/icons/Edit";
 // TODO: regex validating url
 // ^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$
+interface Props {
+  value: string | null;
+}
 
-const UrlLink = (props: any) => {
-  const { value, cellActions } = props;
+const UrlLink = (props: Props) => {
+  const { value } = props;
   return value ? (
     <>
       <EditIcon />

src/components/Table/HeaderPopper.tsx

@@ -9,21 +9,22 @@ import Select from "@material-ui/core/Select";
 import Popper from "@material-ui/core/Popper";
 import Fade from "@material-ui/core/Fade";
 import Paper from "@material-ui/core/Paper";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
 import { TextField, Grid } from "@material-ui/core";
 import { FIELDS } from "../Fields";
 const useStyles = makeStyles(Theme =>
   createStyles({
     container: {
-      padding: 10
+      padding: 10,
     },
     typography: {
-      padding: 1
+      padding: 1,
     },
     header: {
       position: "absolute",
       left: 0,
-      top: 0
+      top: 0,
       //zIndex: 100000
     },
     button: {
@@ -31,15 +32,15 @@ const useStyles = makeStyles(Theme =>
     },
     root: {
       display: "flex",
-      flexWrap: "wrap"
+      flexWrap: "wrap",
     },
     formControl: {
       margin: Theme.spacing(1),
-      minWidth: 120
+      minWidth: 120,
     },
     selectEmpty: {
-      marginTop: Theme.spacing(2)
-    }
+      marginTop: Theme.spacing(2),
+    },
   })
 );
 const HeaderPopper = (props: any) => {
@@ -47,7 +48,7 @@ const HeaderPopper = (props: any) => {
   console.log(column);
   const [values, setValues] = React.useState({
     age: "",
-    name: "hai"
+    name: "hai",
   });
   console.log(props);
   const classes = useStyles();
@@ -56,51 +57,53 @@ const HeaderPopper = (props: any) => {
   ) {
     setValues(oldValues => ({
       ...oldValues,
-      [event.target.name as string]: event.target.value
+      [event.target.name as string]: event.target.value,
     }));
   }
-
+  console.log(column);
   if (column) {
     return (
-      <Popper
-        id={`id-${column.name}`}
-        open={!!anchorEl}
-        anchorEl={anchorEl}
-        transition
-      >
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={350}>
-            <Paper className={classes.container}>
-              <Grid container direction="column">
-                <TextField label="Column name" defaultValue={column.name} />
-                <FormControl className={classes.formControl}>
-                  <InputLabel htmlFor="age-simple">Field Type</InputLabel>
-                  <Select
-                    value={FIELDS[0].type}
-                    onChange={handleChange}
-                    inputProps={{
-                      name: "age",
-                      id: "age-simple"
-                    }}
-                  >
-                    {FIELDS.map((field: any) => {
-                      return (
-                        <MenuItem value={field.type}>
-                          {field.icon} {field.name}
-                        </MenuItem>
-                      );
-                    })}
-                  </Select>
-                  <Button>Add</Button>
-                  <Button color="secondary" onClick={handleClose}>
-                    cancel
-                  </Button>
-                </FormControl>
-              </Grid>
-            </Paper>
-          </Fade>
-        )}
-      </Popper>
+      <ClickAwayListener onClickAway={handleClose}>
+        <Popper
+          id={`id-${column.name}`}
+          open={!!anchorEl}
+          anchorEl={anchorEl}
+          transition
+        >
+          {({ TransitionProps }) => (
+            <Fade {...TransitionProps} timeout={350}>
+              <Paper className={classes.container}>
+                <Grid container direction="column">
+                  <TextField label="Column name" defaultValue={column.name} />
+                  <FormControl className={classes.formControl}>
+                    <InputLabel htmlFor="age-simple">Field Type</InputLabel>
+                    <Select
+                      value={column.type}
+                      onChange={handleChange}
+                      inputProps={{
+                        name: "age",
+                        id: "age-simple",
+                      }}
+                    >
+                      {FIELDS.map((field: any) => {
+                        return (
+                          <MenuItem value={field.type}>
+                            {field.icon} {field.name}
+                          </MenuItem>
+                        );
+                      })}
+                    </Select>
+                    <Button>Add</Button>
+                    <Button color="secondary" onClick={handleClose}>
+                      cancel
+                    </Button>
+                  </FormControl>
+                </Grid>
+              </Paper>
+            </Fade>
+          )}
+        </Popper>
+      </ClickAwayListener>
     );
   }
   return <div />;

src/components/Table/index.tsx

@@ -18,16 +18,16 @@ import UrlLink from "../Fields/UrlLink";
 const useStyles = makeStyles(Theme =>
   createStyles({
     typography: {
-      padding: 1
+      padding: 1,
     },
     header: {
       position: "absolute",
       left: 0,
-      top: 0
+      top: 0,
     },
     headerButton: {
-      width: "100%"
-    }
+      width: "100%",
+    },
   })
 );
 
@@ -145,14 +145,14 @@ function Table(props: any) {
       //  frozen: column.fieldName === "cohort",
       headerRenderer: headerRenderer,
       formatter: formatter(column.type, column.fieldName),
-      width: 200,
-      ...column
+      width: 220,
+      ...column,
     }));
     columns.push({
       key: "new",
       name: "Add column",
       width: 160,
-      headerRenderer: headerRenderer
+      headerRenderer: headerRenderer,
     });
     const rows = tableState.rows;
     return (