Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

long text support

Browse Source
This commit is contained in:
shams mosowi
2019-09-25 11:53:05 +10:00
parent d634d9b8c9
commit 970f257d5c
8 changed files with 134 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ROADMAP.md
View File

@@ -1,6 +1,6 @@
# Firetable Roadmap
## POC
## POC ✅
### Initial fields:
@@ -10,7 +10,7 @@
- phone(string) ✅
- url(string) ✅
- Number(number) ✅
- long text(string)
- long text(string) ✅
### Functionality:

7
src/components/Fields/File.tsx
View File

@@ -4,12 +4,7 @@ import useUploader from "../../hooks/useFiretable/useUploader";
import { FieldType } from ".";
import Chip from "@material-ui/core/Chip";
import {
createStyles,
makeStyles,
useTheme,
Theme,
} from "@material-ui/core/styles";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
// TODO: indicate state completion / error
// TODO: Create an interface for props

95
src/components/Fields/LongText.tsx
View File

@@ -1,20 +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: string | null;
value: any;
row: { ref: firebase.firestore.DocumentReference; id: string };
onSubmit: Function;
}
const UrlLink = (props: Props) => {
const { value } = props;
return value ? (
<>
<IconButton>
<ExpandIcon />
</IconButton>
<p>{value}</p>
</>
) : null;
const LongText = (props: Props) => {
const { value, row, onSubmit } = props;
const [text, setText] = useState(value ? value : "");
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const classes = useStyles();
const handleClick = (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
setAnchorEl(event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? "no-transition-popper" : undefined;
const onClickAway = (event: any) => {
if (event.target.id !== id) {
onSubmit(row.ref, text);
setAnchorEl(null);
}
};
return (
<div className={classes.root}>
<ClickAwayListener onClickAway={onClickAway}>
<div>
<IconButton onClick={handleClick}>
<ExpandIcon />
</IconButton>
{text}
<Popper id={id} open={open} anchorEl={anchorEl}>
<Paper>
<Typography className={classes.typography}>
<TextareaAutosize
id={id}
className={classes.textArea}
rowsMax={6}
aria-label="maximum height"
placeholder="enter text"
defaultValue={text}
autoFocus
onKeyPress={(e: any) => {
setText(e.target.value);
}}
/>
</Typography>
</Paper>
</Popper>
</div>
</ClickAwayListener>
</div>
);
};
export default UrlLink;
export default LongText;

3
src/components/Fields/MultiSelect.tsx
View File

@@ -61,10 +61,9 @@ const MenuProps = {
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]);

17
src/components/Table/ColumnEditor/index.tsx
View File

@@ -108,10 +108,14 @@ const ColumnEditor = (props: any) => {
}
}
}, [column]);
const clearValues = () => {
setValues({ type: null, name: "", options: [] });
};
const onClickAway = (event: any) => {
const dropDownClicked = isFieldType(event.target.dataset.value);
if (!dropDownClicked) {
handleClose();
clearValues();
}
};
const handleToggle = (
@@ -125,14 +129,14 @@ const ColumnEditor = (props: any) => {
const { name, type } = values;
actions.add(name, type);
handleClose();
clearValues();
};
const deleteColumn = () => {
actions.remove(props.column.idx);
handleClose();
clearValues();
};
const updateColumn = () => {
console.log(values, props);
let updatables: { field: string; value: any }[] = [
{ field: "name", value: values.name },
{ field: "type", value: values.type },
@@ -146,6 +150,7 @@ const ColumnEditor = (props: any) => {
}
actions.update(props.column.idx, updatables);
handleClose();
clearValues();
};
if (column) {
@@ -227,7 +232,13 @@ const ColumnEditor = (props: any) => {
<DeleteIcon /> Delete
</Button>
)}
<Button color="secondary" onClick={handleClose}>
<Button
color="secondary"
onClick={() => {
handleClose();
clearValues();
}}
>
cancel
</Button>
</FormControl>

6
src/components/Table/grid-fns.tsx
View File

@@ -10,6 +10,7 @@ import { Editors } from "react-data-grid-addons";
import MultiSelect from "../Fields/MultiSelect";
import Image from "../Fields/Image";
import File from "../Fields/File";
import LongText from "../Fields/LongText";
const { AutoComplete } = Editors;
@@ -22,6 +23,7 @@ export const editable = (fieldType: FieldType) => {
case FieldType.multiSelect:
case FieldType.image:
case FieldType.file:
case FieldType.longText:
return false;
default:
return true;
@@ -87,6 +89,10 @@ export const cellFormatter = (column: any) => {
return (props: any) => {
return <File {...props} onSubmit={onSubmit(key)} fieldName={key} />;
};
case FieldType.longText:
return (props: any) => {
return <LongText {...props} onSubmit={onSubmit(key)} fieldName={key} />;
};
default:
return false;
}

2
src/components/Table/index.tsx
View File

@@ -89,8 +89,6 @@ function Table(props: any) {
if (tableState.columns) {
let columns = tableState.columns.map((column: any) => ({
width: 220,
key: column.fieldName,
name: column.columnName,
editable: editable(column.type),
resizable: true,
headerRenderer: headerRenderer,

38
yarn.lock
View File

@@ -7316,6 +7316,17 @@ lines-and-columns@^1.1.6:
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
load-json-file@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=
dependencies:
graceful-fs "^4.1.2"
parse-json "^2.2.0"
pify "^2.0.0"
pinkie-promise "^2.0.0"
strip-bom "^2.0.0"
load-json-file@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
@@ -7384,7 +7395,6 @@ locate-path@^3.0.0:
p-locate "^3.0.0"
path-exists "^3.0.0"
lodash-es@^4.17.14, lodash-es@^4.2.1:
locate-path@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -7392,7 +7402,7 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"
lodash-es@^4.17.14:
lodash-es@^4.17.14, lodash-es@^4.2.1:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
@@ -7803,6 +7813,11 @@ move-concurrently@^1.0.1:
rimraf "^2.5.4"
run-queue "^1.0.3"
mri@^1.1.0:
version "1.1.4"
resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.4.tgz#7cb1dd1b9b40905f1fac053abe25b6720f44744a"
integrity sha512-6y7IjGPm8AzlvoUrwAaw1tLnUBudaS3752vcd8JtrpGGQn+rXIe63LFVHm/YMwtqAuh+LJPCFdlLYPWM1nYn6w==
ms@0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
@@ -7812,10 +7827,6 @@ ms@0.7.2:
version "0.7.2"
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
integrity sha1-riXPJRKziFodldfwN4aNhDESR2U=
mri@^1.1.0:
version "1.1.4"
resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.4.tgz#7cb1dd1b9b40905f1fac053abe25b6720f44744a"
integrity sha512-6y7IjGPm8AzlvoUrwAaw1tLnUBudaS3752vcd8JtrpGGQn+rXIe63LFVHm/YMwtqAuh+LJPCFdlLYPWM1nYn6w==
ms@2.0.0:
version "2.0.0"
@@ -8288,6 +8299,11 @@ open@^6.3.0:
dependencies:
is-wsl "^1.1.0"
opencollective-postinstall@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
openurl@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.1.tgz#3875b4b0ef7a52c156f0db41d4609dbb0f94b387"
@@ -8299,11 +8315,13 @@ opn@5.3.0:
integrity sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==
dependencies:
is-wsl "^1.1.0"
opencollective-postinstall@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
opn@^5.1.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
dependencies:
is-wsl "^1.1.0"
optimist@^0.6.1:
version "0.6.1"