+
+
+
+ );
+};
+
+const Hit = (props: any) => {
+ return (
+
+
+
+ {value}
+
+
+ {
+ setQuery(e.target.value);
+ }}
+ />
+
+
+
+
+
+ {/*
+
+ */}
+
+
+
+ );
+};
+
+export default DocSelect;
diff --git a/src/components/Fields/File.tsx b/src/components/Fields/File.tsx
new file mode 100644
index 00000000..3e75e68a
--- /dev/null
+++ b/src/components/Fields/File.tsx
@@ -0,0 +1,71 @@
+import React, { useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import useUploader from "../../hooks/useFiretable/useUploader";
+
+import { FieldType } from ".";
+import Chip from "@material-ui/core/Chip";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+
+// TODO: indicate state completion / error
+// TODO: Create an interface for props
+
+interface Props {
+ value: any;
+ row: { ref: firebase.firestore.DocumentReference; id: string };
+ onSubmit: Function;
+ fieldType: FieldType;
+ fieldName: string;
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: "flex",
+ flexWrap: "wrap",
+ },
+ chip: {},
+ })
+);
+
+const File = (props: Props) => {
+ const { fieldName, value, row, onSubmit } = props;
+ const classes = useStyles();
+ const [uploaderState, upload] = useUploader();
+ const onDrop = useCallback(acceptedFiles => {
+ // Do something with the files
+ const imageFile = acceptedFiles[0];
+ if (imageFile) {
+ upload(row.ref, fieldName, [imageFile]);
+ }
+ }, []);
+
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({
+ onDrop,
+ multiple: false,
+ });
+ const handleDelete = () => {
+ onSubmit([]);
+ };
+
+ return (
+ {props.hit.firstName}
+{props.hit.email}
+
+
+ {value && value.length !== 0 ? (
+ {
+ window.open(value[0].downloadURL);
+ }}
+ onDelete={handleDelete}
+ />
+ ) : isDragActive ? (
+
+ );
+};
+export default File;
diff --git a/src/components/Fields/Image.tsx b/src/components/Fields/Image.tsx
index 3ed8ecfc..358dc90e 100644
--- a/src/components/Fields/Image.tsx
+++ b/src/components/Fields/Image.tsx
@@ -11,17 +11,18 @@ interface Props {
row: { ref: firebase.firestore.DocumentReference; id: string };
onSubmit: Function;
fieldType: FieldType;
+ fieldName: string;
}
-const Image = (props: any) => {
- const { columnData, cellData, cellActions, rowData, rowIndex } = props;
+const Image = (props: Props) => {
+ const { fieldName, value, row } = props;
const [uploaderState, upload] = useUploader();
const [localImage, setLocalImage] = useStateDrop the files here ...
+ ) : ( +click to select files
+ )} +
- 
+
- ) : cellData ? (
- Drop the files here ...
) : ( diff --git a/src/components/Fields/LongText.tsx b/src/components/Fields/LongText.tsx index ab30c21f..aa83bf05 100644 --- a/src/components/Fields/LongText.tsx +++ b/src/components/Fields/LongText.tsx @@ -1,22 +1,89 @@ -import React from "react"; +import React, { useState } from "react"; import ExpandIcon from "@material-ui/icons/AspectRatio"; import IconButton from "@material-ui/core/IconButton"; +import Typography from "@material-ui/core/Typography"; +import Button from "@material-ui/core/Button"; +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; +import Popper from "@material-ui/core/Popper"; +import Fade from "@material-ui/core/Fade"; +import Paper from "@material-ui/core/Paper"; +import TextareaAutosize from "@material-ui/core/TextareaAutosize"; +import ClickAwayListener from "@material-ui/core/ClickAwayListener"; +import { onSubmit } from "components/Table/grid-fns"; +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + position: "relative", + + display: "flex", + flexWrap: "wrap", + }, + typography: { + padding: theme.spacing(2), + }, + textArea: { + fontSize: 14, + minWidth: 230, + }, + }) +); interface Props { - value: firebase.firestore.Timestamp | null; - row: any; + value: any; + row: { ref: firebase.firestore.DocumentReference; id: string }; onSubmit: Function; } -const UrlLink = (props: any) => { - const { value, cellActions } = props; - return value ? ( - <> -{value}
- - ) : null; +const LongText = (props: Props) => { + const { value, row, onSubmit } = props; + const [text, setText] = useState(value ? value : ""); + + const [anchorEl, setAnchorEl] = useState
+
+
+
+ );
};
-export default UrlLink;
+export default LongText;
diff --git a/src/components/Fields/MultiSelect.tsx b/src/components/Fields/MultiSelect.tsx
new file mode 100644
index 00000000..d9f27430
--- /dev/null
+++ b/src/components/Fields/MultiSelect.tsx
@@ -0,0 +1,118 @@
+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();
+
+ const { value, row, options, onSubmit } = props;
+ const handleChange = (e: any, v: any) => {
+ if (!value) {
+ // creates new array
+ onSubmit([v.props.value]);
+ } else if (!value.includes(v.props.value)) {
+ // adds to array
+ onSubmit([...value, v.props.value]);
+ } else {
+ // removes from array
+ let _updatedValues = [...value];
+ const index = _updatedValues.indexOf(v.props.value);
+ _updatedValues.splice(index, 1);
+ onSubmit(_updatedValues);
+ }
+ };
+
+ if (options && options.length !== 0)
+ return (
+ }
+ renderValue={selected => (
+
+
+
+ {text}
+
+
+
+ {
+ setText(e.target.value);
+ }}
+ />
+
+
+
+
+
+ {(selected as string[]).map(value => (
+
+ )}
+ MenuProps={MenuProps}
+ >
+ {options.map(option => (
+
+ ))}
+
+ );
+ else
+ return (
+
+
+ );
+ }}
/>
-