multiselect

src/components/Fields/Image.tsx

@@ -14,7 +14,7 @@ interface Props {
 }
 
 const Image = (props: any) => {
-  const { columnData, cellData, cellActions, rowData, rowIndex } = props;
+  const { columnData, cellData, rowData } = props;
   const [uploaderState, upload] = useUploader();
   const [localImage, setLocalImage] = useState<string | null>(null);
   const onDrop = useCallback(acceptedFiles => {

src/components/Fields/MultiSelect.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import EditIcon from "@material-ui/icons/Edit";
+import WarningIcon from "@material-ui/icons/Warning";
+import { Select } from "@material-ui/core";
+import {
+  createStyles,
+  makeStyles,
+  useTheme,
+  Theme,
+} from "@material-ui/core/styles";
+
+import Input from "@material-ui/core/Input";
+import Grid from "@material-ui/core/Grid";
+import MenuItem from "@material-ui/core/MenuItem";
+import Chip from "@material-ui/core/Chip";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: "flex",
+      flexWrap: "wrap",
+    },
+    formControl: {
+      margin: theme.spacing(1),
+      minWidth: 120,
+      maxWidth: 300,
+    },
+    chips: {
+      display: "flex",
+      flexWrap: "wrap",
+    },
+    chip: {
+      margin: 2,
+    },
+    noLabel: {
+      marginTop: theme.spacing(3),
+    },
+    noOptions: {
+      position: "absolute",
+      top: -15,
+    },
+  })
+);
+interface Props {
+  value: string[] | null;
+  row: { ref: firebase.firestore.DocumentReference; id: string };
+  options: string[];
+  onSubmit: Function;
+}
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
+const MultiSelect = (props: Props) => {
+  const classes = useStyles();
+  console.log(props);
+  const { value, row, options, onSubmit } = props;
+  const handleChange = (e: any, v: any) => {
+    console.log(v.props.value);
+    if (!value) {
+      // creates new array
+      onSubmit(row.ref, [v.props.value]);
+    } else if (!value.includes(v.props.value)) {
+      // adds to array
+      onSubmit(row.ref, [...value, v.props.value]);
+    } else {
+      // removes from array
+      let _updatedValues = [...value];
+      const index = _updatedValues.indexOf(v.props.value);
+      _updatedValues.splice(index, 1);
+      onSubmit(row.ref, _updatedValues);
+    }
+  };
+
+  if (options && options.length !== 0)
+    return (
+      <Select
+        multiple
+        value={value ? value : []}
+        defaultValue={[]}
+        onChange={handleChange}
+        input={<Input id="select-multiple-chip" />}
+        renderValue={selected => (
+          <div className={classes.chips}>
+            {(selected as string[]).map(value => (
+              <Chip key={value} label={value} className={classes.chip} />
+            ))}
+          </div>
+        )}
+        MenuProps={MenuProps}
+      >
+        {options.map(option => (
+          <MenuItem key={option} value={option}>
+            {option}
+          </MenuItem>
+        ))}
+      </Select>
+    );
+  else
+    return (
+      <Grid className={classes.noOptions} direction="row">
+        {/* <Grid item>
+          <WarningIcon />
+        </Grid>{" "} */}
+        <Grid item>
+          <Typography>add options!</Typography>
+        </Grid>
+      </Grid>
+    );
+};
+export default MultiSelect;

src/components/Table/ColumnEditor/index.tsx

@@ -136,7 +136,7 @@ const ColumnEditor = (props: any) => {
     let updatables: { field: string; value: any }[] = [
       { field: "name", value: values.name },
       { field: "type", value: values.type },
-      { field: "resizable", value: flags.includes("resizable") },
+      // { field: "resizable", value: flags.includes("resizable") },
     ];
     if (
       values.type === FieldType.multiSelect ||
@@ -161,6 +161,8 @@ const ColumnEditor = (props: any) => {
             <Fade {...TransitionProps} timeout={350}>
               <Paper className={classes.container}>
                 <Grid container direction="column">
+                  {/* 
+                  // TODO: functional flags 
                   <ToggleButtonGroup
                     size="small"
                     value={flags}
@@ -188,7 +190,7 @@ const ColumnEditor = (props: any) => {
                     <ToggleButton value="resizable" aria-label="resizable">
                       <FormatColorFillIcon />
                     </ToggleButton>
-                  </ToggleButtonGroup>
+                  </ToggleButtonGroup> */}
 
                   <TextField
                     label="Column name"

src/components/Table/grid-fns.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { FieldType, getFieldIcon } from "../Fields";
+import { FieldType } from "../Fields";
 
 import Date from "../Fields/Date";
 import Rating from "../Fields/Rating";
@@ -7,15 +7,17 @@ import CheckBox from "../Fields/CheckBox";
 import UrlLink from "../Fields/UrlLink";
 import firebase from "firebase/app";
 import { Editors } from "react-data-grid-addons";
-export const copyPaste = (props: any) => {
-  console.log(props);
-};
+import MultiSelect from "../Fields/MultiSelect";
+
+const { AutoComplete } = Editors;
+
 export const editable = (fieldType: FieldType) => {
   switch (fieldType) {
     case FieldType.date:
     case FieldType.dateTime:
     case FieldType.rating:
     case FieldType.checkBox:
+    case FieldType.multiSelect:
       return false;
 
     default:
@@ -44,11 +46,12 @@ export const onGridRowsUpdated = (props: any) => {
 export const onCellSelected = (args: any) => {
   console.log(args);
 };
-export const cellFormatter = (fieldType: FieldType, key: string) => {
-  switch (fieldType) {
+export const cellFormatter = (column: any) => {
+  const { type, key, options } = column;
+  switch (type) {
     case FieldType.date:
     case FieldType.dateTime:
-      return DateFormatter(key, fieldType);
+      return DateFormatter(key, type);
     case FieldType.rating:
       return (props: any) => {
         return (
@@ -65,15 +68,19 @@ export const cellFormatter = (fieldType: FieldType, key: string) => {
       };
     case FieldType.url:
       return (props: any) => {
-        return <UrlLink {...props} onSubmit={onSubmit(key)} />;
+        return <UrlLink {...props} />;
+      };
+    case FieldType.multiSelect:
+      return (props: any) => {
+        return (
+          <MultiSelect {...props} onSubmit={onSubmit(key)} options={options} />
+        );
       };
     default:
       return false;
   }
 };
 
-const { DropDownEditor, AutoComplete } = Editors;
-
 export const singleSelectEditor = (options: string[]) => {
   const _options = options.map(option => ({
     id: option,

src/components/Table/index.tsx

@@ -94,7 +94,7 @@ function Table(props: any) {
       editable: editable(column.type),
       resizable: true,
       headerRenderer: headerRenderer,
-      formatter: cellFormatter(column.type, column.key),
+      formatter: cellFormatter(column),
       editor:
         column.type === FieldType.singleSelect
           ? singleSelectEditor(column.options)
@@ -112,7 +112,7 @@ function Table(props: any) {
     return (
       <>
         <ReactDataGrid
-          rowHeight={60}
+          rowHeight={40}
           columns={columns}
           rowGetter={i => rows[i]}
           rowsCount={rows.length}