From 00e94e5faaf7900adba71d63dc2cf63424868179 Mon Sep 17 00:00:00 2001 From: shams mosowi Date: Mon, 23 Sep 2019 07:07:59 +1000 Subject: [PATCH] column poppers and updated fields --- src/components/Fields/LongText.tsx | 16 ++++ src/components/Fields/Rating.tsx | 2 +- src/components/Fields/SimpleText.tsx | 18 ----- src/components/Fields/index.tsx | 85 --------------------- src/components/Table/HeaderPopper.tsx | 95 ++++++++++++++++++++---- src/components/Table/NewColumnPopper.tsx | 85 +++++++++++++++++++++ src/components/Table/index.tsx | 74 +++++++++++------- 7 files changed, 232 insertions(+), 143 deletions(-) create mode 100644 src/components/Fields/LongText.tsx delete mode 100644 src/components/Fields/SimpleText.tsx create mode 100644 src/components/Table/NewColumnPopper.tsx diff --git a/src/components/Fields/LongText.tsx b/src/components/Fields/LongText.tsx new file mode 100644 index 00000000..4fdd68cd --- /dev/null +++ b/src/components/Fields/LongText.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import ExpandIcon from "@material-ui/icons/AspectRatio"; +import IconButton from "@material-ui/core/IconButton"; + +const UrlLink = (props: any) => { + const { value, cellActions } = props; + return value ? ( + <> + + + +

{value}

+ + ) : null; +}; +export default UrlLink; diff --git a/src/components/Fields/Rating.tsx b/src/components/Fields/Rating.tsx index 14fec3c3..b5e2ea8a 100644 --- a/src/components/Fields/Rating.tsx +++ b/src/components/Fields/Rating.tsx @@ -5,7 +5,7 @@ const Rating = (props: any) => { const { value, row, onSubmit } = props; return ( { diff --git a/src/components/Fields/SimpleText.tsx b/src/components/Fields/SimpleText.tsx deleted file mode 100644 index f8914f3a..00000000 --- a/src/components/Fields/SimpleText.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; -import TextField from "@material-ui/core/TextField"; -const SimpleText = (props: any) => { - const { isFocusedCell, cellData, cellActions } = props; - - if (isFocusedCell) - return ( - { - cellActions.update(e.target.value); - }} - /> - ); - else return

{cellData}

; -}; -export default SimpleText; diff --git a/src/components/Fields/index.tsx b/src/components/Fields/index.tsx index 50f1e111..c29e8349 100644 --- a/src/components/Fields/index.tsx +++ b/src/components/Fields/index.tsx @@ -13,12 +13,6 @@ 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", @@ -52,82 +46,3 @@ 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 ( - - ); - case FieldType.rating: - return ( - - ); - case FieldType.image: - return ( - - ); - case FieldType.date: - return ( - - ); - case FieldType.number: - return ( - - ); - default: - return ( - - ); - } -}; diff --git a/src/components/Table/HeaderPopper.tsx b/src/components/Table/HeaderPopper.tsx index b7573c5b..d1646b3a 100644 --- a/src/components/Table/HeaderPopper.tsx +++ b/src/components/Table/HeaderPopper.tsx @@ -1,12 +1,22 @@ import React from "react"; import Button from "@material-ui/core/Button"; import Typography from "@material-ui/core/Typography"; +import InputLabel from "@material-ui/core/InputLabel"; +import MenuItem from "@material-ui/core/MenuItem"; +import FormHelperText from "@material-ui/core/FormHelperText"; +import FormControl from "@material-ui/core/FormControl"; +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 { 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 + }, typography: { padding: 1 }, @@ -18,25 +28,82 @@ const useStyles = makeStyles(Theme => }, button: { // margin: theme.spacing(1) + }, + root: { + display: "flex", + flexWrap: "wrap" + }, + formControl: { + margin: Theme.spacing(1), + minWidth: 120 + }, + selectEmpty: { + marginTop: Theme.spacing(2) } }) ); const HeaderPopper = (props: any) => { - const { anchorEl } = props; + const { anchorEl, column, handleClose } = props; + console.log(column); + const [values, setValues] = React.useState({ + age: "", + name: "hai" + }); + console.log(props); const classes = useStyles(); - return ( - - {({ TransitionProps }) => ( - - - - The content of the Popper. - - - - )} - - ); + function handleChange( + event: React.ChangeEvent<{ name?: string; value: unknown }> + ) { + setValues(oldValues => ({ + ...oldValues, + [event.target.name as string]: event.target.value + })); + } + + if (column) { + return ( + + {({ TransitionProps }) => ( + + + + + + Field Type + + + + + + + + )} + + ); + } + return
; }; export default HeaderPopper; diff --git a/src/components/Table/NewColumnPopper.tsx b/src/components/Table/NewColumnPopper.tsx new file mode 100644 index 00000000..70e7f36e --- /dev/null +++ b/src/components/Table/NewColumnPopper.tsx @@ -0,0 +1,85 @@ +import React from "react"; +import Button from "@material-ui/core/Button"; +import Typography from "@material-ui/core/Typography"; +import InputLabel from "@material-ui/core/InputLabel"; +import MenuItem from "@material-ui/core/MenuItem"; +import FormHelperText from "@material-ui/core/FormHelperText"; +import FormControl from "@material-ui/core/FormControl"; +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 { createStyles, Theme, makeStyles } from "@material-ui/core/styles"; +import { TextField } from "@material-ui/core"; +const useStyles = makeStyles(Theme => + createStyles({ + typography: { + padding: 1 + }, + header: { + position: "absolute", + left: 0, + top: 0 + //zIndex: 100000 + }, + button: { + // margin: theme.spacing(1) + }, + root: { + display: "flex", + flexWrap: "wrap" + }, + formControl: { + margin: Theme.spacing(1), + minWidth: 120 + }, + selectEmpty: { + marginTop: Theme.spacing(2) + } + }) +); +const NewColumnPopper = (props: any) => { + const { anchorEl, column } = props; + const [values, setValues] = React.useState({ + age: "", + name: "hai" + }); + console.log(props); + const classes = useStyles(); + function handleChange( + event: React.ChangeEvent<{ name?: string; value: unknown }> + ) { + setValues(oldValues => ({ + ...oldValues, + [event.target.name as string]: event.target.value + })); + } + return ( + + {({ TransitionProps }) => ( + + + + + Age + + + + + )} + + ); +}; + +export default NewColumnPopper; diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index 98b6bd97..9b744207 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -15,7 +15,6 @@ 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: { @@ -26,8 +25,8 @@ const useStyles = makeStyles(Theme => left: 0, top: 0 }, - button: { - // margin: theme.spacing(1) + headerButton: { + width: "100%" } }) ); @@ -65,7 +64,6 @@ const DateFormatter = (fieldName: string, fieldType: FieldType) => ( }; const formatter = (fieldType: FieldType, fieldName: string) => { - console.log(fieldType); switch (fieldType) { case FieldType.date: case FieldType.dateTime: @@ -95,45 +93,67 @@ function Table(props: any) { const [header, setHeader] = useState(); - const handleClick = ( + const handleCloseHeader = () => { + setHeader(null); + setAnchorEl(null); + }; + const handleClick = (headerProps: any) => ( event: React.MouseEvent ) => { + handleCloseHeader(); setAnchorEl(event.currentTarget); + setHeader(headerProps); }; const onGridRowsUpdated = (props: any) => { const { fromRowData, updated } = props; fromRowData.ref.update(updated); }; - + const onCellSelected = (args: any) => { + handleCloseHeader(); + console.log(args); + }; const headerRenderer = (props: any) => { - console.log(props); - return ( -
- {props.column.name}{" "} - - - -
- ); + switch (props.column.key) { + case "new": + return ( + + ); + default: + return ( +
+ +
+ ); + } }; if (tableState.columns) { - const columns = tableState.columns.map((column: any) => ({ + let columns = tableState.columns.map((column: any) => ({ key: column.fieldName, name: column.columnName, editable: editable(column.type), resizeable: true, - frozen: column.fieldName === "cohort", + // frozen: column.fieldName === "cohort", headerRenderer: headerRenderer, formatter: formatter(column.type, column.fieldName), - width: 200 + width: 200, + ...column })); + columns.push({ + key: "new", + name: "Add column", + width: 160, + headerRenderer: headerRenderer + }); const rows = tableState.rows; return ( <> @@ -145,10 +165,14 @@ function Table(props: any) { enableCellSelect={true} onCellCopyPaste={copyPaste} minHeight={500} - // getCellActions={getCellActions} + onCellSelected={onCellSelected} /> - + ); } else return

Loading

;