mirror of
https://github.com/rowyio/rowy.git
synced 2025-12-29 00:16:39 +01:00
clean up
This commit is contained in:
shams mosowi
@@ -1,44 +0,0 @@
|
||||
import React from "react";
|
||||
import "date-fns";
|
||||
import DateFnsUtils from "@date-io/date-fns";
|
||||
import {
|
||||
MuiPickersUtilsProvider,
|
||||
// KeyboardTimePicker,
|
||||
// KeyboardDatePicker,
|
||||
DateTimePicker
|
||||
} from "@material-ui/pickers";
|
||||
import Button from "@material-ui/core/Button";
|
||||
|
||||
const DateTime = (props: any) => {
|
||||
const {
|
||||
isFocusedCell,
|
||||
columnData,
|
||||
cellData,
|
||||
cellActions,
|
||||
rowData,
|
||||
rowIndex
|
||||
} = props;
|
||||
function handleDateChange(date: Date | null) {
|
||||
if (date) {
|
||||
const cell = {
|
||||
rowIndex,
|
||||
value: date,
|
||||
docRef: rowData.ref,
|
||||
fieldName: columnData.fieldName
|
||||
};
|
||||
cellActions.updateFirestore(cell);
|
||||
}
|
||||
}
|
||||
if (!cellData && !isFocusedCell) return <Button>click to set</Button>;
|
||||
else
|
||||
return (
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||
<DateTimePicker
|
||||
value={cellData && cellData.toDate()}
|
||||
onChange={handleDateChange}
|
||||
emptyLabel="select a date"
|
||||
/>
|
||||
</MuiPickersUtilsProvider>
|
||||
);
|
||||
};
|
||||
export default DateTime;
|
||||
@@ -1,18 +1,15 @@
|
||||
import React from "react";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
const Number = (props: any) => {
|
||||
const { isFocusedCell, cellData, cellActions } = props;
|
||||
if (isFocusedCell)
|
||||
return (
|
||||
<TextField
|
||||
autoFocus
|
||||
type="number"
|
||||
defaultValue={cellData}
|
||||
onChange={e => {
|
||||
cellActions.update(e.target.value);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
else return <p>{cellData}</p>;
|
||||
const { value, cellActions } = props;
|
||||
return (
|
||||
<TextField
|
||||
autoFocus
|
||||
type="number"
|
||||
defaultValue={value}
|
||||
onChange={e => {}}
|
||||
/>
|
||||
);
|
||||
// else return <p>{cellData}</p>;
|
||||
};
|
||||
export default Number;
|
||||
|
||||
@@ -1,260 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
createStyles,
|
||||
Theme,
|
||||
withStyles,
|
||||
WithStyles
|
||||
} from "@material-ui/core/styles";
|
||||
import { TableCell as MuiTableCell } from "@material-ui/core";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import {
|
||||
AutoSizer,
|
||||
Column,
|
||||
Table as MuiTable,
|
||||
TableCellRenderer,
|
||||
TableHeaderProps
|
||||
} from "react-virtualized";
|
||||
import Button from "@material-ui/core/Button";
|
||||
|
||||
import { FieldType, getFieldIcon } from "./Fields";
|
||||
import ColumnDrawer from "./ColumnDrawer";
|
||||
import TableCell from "../components/TableCell";
|
||||
|
||||
import useCell, { Cell } from "../hooks/useFiretable/useCell";
|
||||
import useFiretable from "../hooks/useFiretable";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
flexContainer: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
boxSizing: "border-box"
|
||||
},
|
||||
tableRow: {
|
||||
cursor: "pointer"
|
||||
},
|
||||
tableRowHover: {
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.grey[200]
|
||||
}
|
||||
},
|
||||
tableCell: {
|
||||
flex: 1
|
||||
},
|
||||
noClick: {
|
||||
cursor: "initial"
|
||||
}
|
||||
});
|
||||
|
||||
interface ColumnData {
|
||||
columnData: any;
|
||||
dataKey: string;
|
||||
label: string;
|
||||
numeric?: boolean;
|
||||
width: number;
|
||||
}
|
||||
|
||||
interface Row {
|
||||
index: number;
|
||||
}
|
||||
|
||||
interface MuiVirtualizedTableProps extends WithStyles<typeof styles> {
|
||||
columns: ColumnData[];
|
||||
focusedCell: Cell | null;
|
||||
cellActions: any;
|
||||
headerHeight?: number;
|
||||
onRowClick?: () => void;
|
||||
rowCount: number;
|
||||
rowGetter: (row: Row) => any;
|
||||
rowHeight?: number;
|
||||
}
|
||||
|
||||
class MuiVirtualizedTable extends React.PureComponent<
|
||||
MuiVirtualizedTableProps
|
||||
> {
|
||||
static defaultProps = {
|
||||
headerHeight: 48,
|
||||
rowHeight: 40
|
||||
};
|
||||
|
||||
getRowClassName = ({ index }: Row) => {
|
||||
const { classes, onRowClick } = this.props;
|
||||
|
||||
return clsx(classes.tableRow, classes.flexContainer, {
|
||||
[classes.tableRowHover]: index !== -1 && onRowClick != null
|
||||
});
|
||||
};
|
||||
|
||||
cellRenderer: TableCellRenderer = ({
|
||||
cellData,
|
||||
columnData,
|
||||
columnIndex,
|
||||
dataKey,
|
||||
isScrolling,
|
||||
rowData,
|
||||
rowIndex
|
||||
}) => {
|
||||
const {
|
||||
columns,
|
||||
classes,
|
||||
rowHeight,
|
||||
onRowClick,
|
||||
cellActions,
|
||||
focusedCell
|
||||
} = this.props;
|
||||
const fieldType = columnData.fieldType;
|
||||
return (
|
||||
<TableCell
|
||||
fieldType={fieldType}
|
||||
rowIndex={rowIndex}
|
||||
rowData={rowData}
|
||||
columnData={columnData}
|
||||
classes={classes}
|
||||
cellActions={cellActions}
|
||||
cellData={cellData}
|
||||
onRowClick={onRowClick}
|
||||
rowHeight={rowHeight}
|
||||
columnIndex={columnIndex}
|
||||
columns={columns}
|
||||
focusedCell={focusedCell}
|
||||
/>
|
||||
);
|
||||
};
|
||||
headerRenderer = ({
|
||||
label,
|
||||
columnData,
|
||||
dataKey,
|
||||
columnIndex
|
||||
}: TableHeaderProps & { columnIndex: number }) => {
|
||||
const { headerHeight, columns, classes } = this.props;
|
||||
|
||||
return (
|
||||
<MuiTableCell
|
||||
component="div"
|
||||
className={clsx(
|
||||
classes.tableCell,
|
||||
classes.flexContainer,
|
||||
classes.noClick
|
||||
)}
|
||||
variant="head"
|
||||
style={{ height: headerHeight }}
|
||||
align={columns[columnIndex].numeric || false ? "right" : "left"}
|
||||
>
|
||||
{dataKey === "add" ? (
|
||||
<ColumnDrawer
|
||||
columns={columns}
|
||||
addColumn={columnData.actions.addColumn}
|
||||
/>
|
||||
) : (
|
||||
<Button size="small">
|
||||
{getFieldIcon(columnData.fieldType)} {label}
|
||||
</Button>
|
||||
)}
|
||||
</MuiTableCell>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
classes,
|
||||
columns,
|
||||
rowHeight,
|
||||
headerHeight,
|
||||
...tableProps
|
||||
} = this.props;
|
||||
return (
|
||||
<AutoSizer>
|
||||
{({ height, width }) => (
|
||||
<>
|
||||
<MuiTable
|
||||
height={height}
|
||||
width={width}
|
||||
rowHeight={rowHeight!}
|
||||
headerHeight={headerHeight!}
|
||||
{...tableProps}
|
||||
rowClassName={this.getRowClassName}
|
||||
>
|
||||
{[
|
||||
...columns.map(({ dataKey, ...other }, index) => {
|
||||
return (
|
||||
<Column
|
||||
key={dataKey}
|
||||
headerRenderer={headerProps =>
|
||||
this.headerRenderer({
|
||||
...headerProps,
|
||||
columnIndex: index
|
||||
})
|
||||
}
|
||||
className={classes.flexContainer}
|
||||
cellRenderer={this.cellRenderer}
|
||||
dataKey={dataKey}
|
||||
{...other}
|
||||
/>
|
||||
);
|
||||
})
|
||||
]}
|
||||
</MuiTable>
|
||||
</>
|
||||
)}
|
||||
</AutoSizer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
|
||||
|
||||
export default function Table(props: any) {
|
||||
const { collection } = props;
|
||||
const { tableState, tableActions } = useFiretable(collection);
|
||||
|
||||
useEffect(() => {
|
||||
tableActions.table.set(collection);
|
||||
}, [collection]);
|
||||
|
||||
if (tableState.columns)
|
||||
return (
|
||||
<>
|
||||
<Paper style={{ height: 400, width: "100%" }}>
|
||||
<VirtualizedTable
|
||||
focusedCell={tableState.cell}
|
||||
cellActions={tableActions.cell}
|
||||
rowCount={tableState.rows.length}
|
||||
rowGetter={({ index }) => tableState.rows[index]}
|
||||
columns={[
|
||||
...tableState.columns.map(
|
||||
(column: {
|
||||
fieldName: string;
|
||||
columnName: string;
|
||||
type: FieldType;
|
||||
}) => ({
|
||||
width: 200,
|
||||
label: column.columnName,
|
||||
dataKey: column.fieldName,
|
||||
columnData: {
|
||||
fieldType: column.type,
|
||||
fieldName: column.fieldName,
|
||||
actions: {}
|
||||
}
|
||||
})
|
||||
),
|
||||
{
|
||||
width: 80,
|
||||
label: "add",
|
||||
dataKey: "add",
|
||||
columnData: {
|
||||
fieldType: "DELETE",
|
||||
actions: {
|
||||
addColumn: tableActions.column.add,
|
||||
deleteRow: tableActions.row.delete
|
||||
}
|
||||
}
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</Paper>
|
||||
<Button onClick={tableActions.row.add}>Add Row</Button>
|
||||
</>
|
||||
);
|
||||
else return <>insert loading Skeleton here</>;
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { TableCell as MuiTableCell, Switch } from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
import { FieldType } from "./Fields";
|
||||
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
|
||||
import SimpleText from "./Fields/SimpleText";
|
||||
import CheckBox from "./Fields/CheckBox";
|
||||
|
||||
import Number from "./Fields/Number";
|
||||
import Rating from "./Fields/Rating";
|
||||
import Date from "./Fields/Date";
|
||||
import DateTime from "./Fields/DateTime";
|
||||
import Image from "./Fields/Image";
|
||||
|
||||
const TableCell = (props: any) => {
|
||||
const {
|
||||
fieldType,
|
||||
rowIndex,
|
||||
rowData,
|
||||
columnData,
|
||||
classes,
|
||||
cellActions,
|
||||
cellData,
|
||||
onRowClick,
|
||||
rowHeight,
|
||||
columnIndex,
|
||||
columns,
|
||||
focusedCell
|
||||
} = props;
|
||||
const isFocusedCell =
|
||||
focusedCell &&
|
||||
focusedCell.fieldName === columnData.fieldName &&
|
||||
focusedCell.rowIndex === rowIndex;
|
||||
|
||||
const renderCell = () => {
|
||||
switch (fieldType) {
|
||||
case FieldType.checkBox:
|
||||
return (
|
||||
<CheckBox
|
||||
rowIndex={rowIndex}
|
||||
rowData={rowData}
|
||||
isFocusedCell={isFocusedCell}
|
||||
cellData={cellData}
|
||||
cellActions={cellActions}
|
||||
columnData={columnData}
|
||||
/>
|
||||
);
|
||||
case FieldType.rating:
|
||||
return (
|
||||
<Rating
|
||||
rowIndex={rowIndex}
|
||||
rowData={rowData}
|
||||
isFocusedCell={isFocusedCell}
|
||||
cellData={cellData}
|
||||
cellActions={cellActions}
|
||||
columnData={columnData}
|
||||
/>
|
||||
);
|
||||
case FieldType.image:
|
||||
return (
|
||||
<Image
|
||||
rowIndex={rowIndex}
|
||||
rowData={rowData}
|
||||
isFocusedCell={isFocusedCell}
|
||||
cellData={cellData}
|
||||
cellActions={cellActions}
|
||||
columnData={columnData}
|
||||
/>
|
||||
);
|
||||
case FieldType.date:
|
||||
return (
|
||||
<Date
|
||||
rowIndex={rowIndex}
|
||||
rowData={rowData}
|
||||
isFocusedCell={isFocusedCell}
|
||||
cellData={cellData}
|
||||
cellActions={cellActions}
|
||||
columnData={columnData}
|
||||
/>
|
||||
);
|
||||
case FieldType.dateTime:
|
||||
return (
|
||||
<DateTime
|
||||
rowIndex={rowIndex}
|
||||
rowData={rowData}
|
||||
isFocusedCell={isFocusedCell}
|
||||
cellData={cellData}
|
||||
cellActions={cellActions}
|
||||
columnData={columnData}
|
||||
/>
|
||||
);
|
||||
case FieldType.number:
|
||||
return (
|
||||
<Number
|
||||
isFocusedCell={isFocusedCell}
|
||||
cellData={cellData}
|
||||
cellActions={cellActions}
|
||||
columnData={columnData}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<SimpleText
|
||||
isFocusedCell={isFocusedCell}
|
||||
cellData={cellData}
|
||||
cellActions={cellActions}
|
||||
columnData={columnData}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
if (fieldType === "DELETE")
|
||||
return (
|
||||
<IconButton
|
||||
aria-label="delete"
|
||||
onClick={() => {
|
||||
columnData.actions.deleteRow(rowIndex, rowData.id);
|
||||
}}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
);
|
||||
|
||||
return (
|
||||
<MuiTableCell
|
||||
component="div"
|
||||
className={clsx(classes.tableCell, classes.flexContainer, {
|
||||
[classes.noClick]: onRowClick == null
|
||||
})}
|
||||
variant="body"
|
||||
onClick={() => {
|
||||
// set focusedCell on click
|
||||
cellActions.set({
|
||||
rowIndex,
|
||||
docRef: rowData.ref,
|
||||
fieldName: columnData.fieldName,
|
||||
value: cellData
|
||||
});
|
||||
}}
|
||||
style={{ height: rowHeight }}
|
||||
align={
|
||||
(columnIndex != null && columns[columnIndex].numeric) || false
|
||||
? "right"
|
||||
: "left"
|
||||
}
|
||||
>
|
||||
{renderCell()}
|
||||
</MuiTableCell>
|
||||
);
|
||||
};
|
||||
export default TableCell;
|
||||
Reference in New Issue
Block a user