From 376b0ef122ed78851c71d25dcb045cdc53383f8e Mon Sep 17 00:00:00 2001 From: shamsmosowi Date: Tue, 31 May 2022 17:14:29 +0800 Subject: [PATCH] reference field type --- src/components/fields/Reference/BasicCell.tsx | 5 + .../fields/Reference/EditorCell.tsx | 99 +++++++++++++++++++ .../fields/Reference/SideDrawerField.tsx | 18 ++++ src/components/fields/Reference/index.tsx | 39 ++++++++ src/components/fields/Reference/utils.ts | 5 + src/components/fields/index.ts | 2 + src/constants/fields.ts | 2 + 7 files changed, 170 insertions(+) create mode 100644 src/components/fields/Reference/BasicCell.tsx create mode 100644 src/components/fields/Reference/EditorCell.tsx create mode 100644 src/components/fields/Reference/SideDrawerField.tsx create mode 100644 src/components/fields/Reference/index.tsx create mode 100644 src/components/fields/Reference/utils.ts diff --git a/src/components/fields/Reference/BasicCell.tsx b/src/components/fields/Reference/BasicCell.tsx new file mode 100644 index 00000000..e92f55c5 --- /dev/null +++ b/src/components/fields/Reference/BasicCell.tsx @@ -0,0 +1,5 @@ +import { IBasicCellProps } from "@src/components/fields/types"; + +export default function Number_({ value }: IBasicCellProps) { + return <>{`${value?.path ?? ""}`}; +} diff --git a/src/components/fields/Reference/EditorCell.tsx b/src/components/fields/Reference/EditorCell.tsx new file mode 100644 index 00000000..3db626dc --- /dev/null +++ b/src/components/fields/Reference/EditorCell.tsx @@ -0,0 +1,99 @@ +import { useAtom } from "jotai"; +import { globalScope } from "@src/atoms/globalScope"; + +import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase"; + +import { useRef, useLayoutEffect } from "react"; +import { EditorProps } from "react-data-grid"; +import { useSetAtom } from "jotai"; +import { get } from "lodash-es"; + +import { TextField } from "@mui/material"; + +import { tableScope, updateFieldAtom } from "@src/atoms/tableScope"; +import { FieldType } from "@src/constants/fields"; +import { getFieldType } from "@src/components/fields"; +import { doc } from "firebase/firestore"; + +/** WARNING: THIS DOES NOT WORK IN REACT 18 STRICT MODE */ +export default function TextEditor({ row, column }: EditorProps) { + const updateField = useSetAtom(updateFieldAtom, tableScope); + const [firebaseDb] = useAtom(firebaseDbAtom, globalScope); + + const inputRef = useRef(null); + + // WARNING: THIS DOES NOT WORK IN REACT 18 STRICT MODE + useLayoutEffect(() => { + const inputElement = inputRef.current; + return () => { + const newValue = inputElement?.value; + if (newValue !== undefined && newValue !== "") { + updateField({ + path: row._rowy_ref.path, + fieldName: column.key, + value: doc(firebaseDb, newValue), + }); + } else { + updateField({ + path: row._rowy_ref.path, + fieldName: column.key, + value: null, + }); + } + }; + }, [column.key, row._rowy_ref.path, updateField]); + + const defaultValue = get(row, column.key)?.path ?? ""; + const { maxLength } = (column as any).config; + + return ( + theme.typography.body2.lineHeight, + maxHeight: "100%", + boxSizing: "border-box", + py: 3 / 8, + }, + }} + // InputProps={{ + // endAdornment: + // (column as any).type === FieldType.percentage ? "%" : undefined, + // }} + autoFocus + onKeyDown={(e) => { + if (e.key === "ArrowLeft" || e.key === "ArrowRight") { + e.stopPropagation(); + } + + if (e.key === "Escape") { + (e.target as any).value = defaultValue; + } + }} + /> + ); +} diff --git a/src/components/fields/Reference/SideDrawerField.tsx b/src/components/fields/Reference/SideDrawerField.tsx new file mode 100644 index 00000000..68b03cf8 --- /dev/null +++ b/src/components/fields/Reference/SideDrawerField.tsx @@ -0,0 +1,18 @@ +import { Controller } from "react-hook-form"; +import { ISideDrawerFieldProps } from "@src/components/fields/types"; + +export default function Reference({ + column, + control, + disabled, +}: ISideDrawerFieldProps) { + const config = column.config ?? {}; + + return ( + <>} + /> + ); +} diff --git a/src/components/fields/Reference/index.tsx b/src/components/fields/Reference/index.tsx new file mode 100644 index 00000000..a9327b64 --- /dev/null +++ b/src/components/fields/Reference/index.tsx @@ -0,0 +1,39 @@ +import { lazy } from "react"; +import { IFieldConfig, FieldType } from "@src/components/fields/types"; + +import SingleSelectIcon from "@src/assets/icons/SingleSelect"; +//import InlineCell from "./InlineCell"; +import BasicCell from "./BasicCell"; +import { filterOperators } from "@src/components/fields/ShortText/Filter"; +import withBasicCell from "@src/components/fields/_withTableCell/withBasicCell"; + +const EditorCell = lazy( + () => import("./EditorCell" /* webpackChunkName: "EditorCell-Reference" */) +); +const SideDrawerField = lazy( + () => + import( + "./SideDrawerField" /* webpackChunkName: "SideDrawerField-Reference" */ + ) +); +// const Settings = lazy( +// () => import("./Settings" /* webpackChunkName: "Settings-Reference" */) +// ); + +export const config: IFieldConfig = { + type: FieldType.reference, + name: "Reference", + group: "Connectors", + dataType: "reference", + initialValue: null, + initializable: true, + icon: , + description: "Firestore field reference type", + TableCell: withBasicCell(BasicCell), + TableEditor: EditorCell, + SideDrawerField, + //settings: Settings, + filter: { operators: filterOperators }, + requireConfiguration: true, +}; +export default config; diff --git a/src/components/fields/Reference/utils.ts b/src/components/fields/Reference/utils.ts new file mode 100644 index 00000000..3070d669 --- /dev/null +++ b/src/components/fields/Reference/utils.ts @@ -0,0 +1,5 @@ +export const sanitiseValue = (value: any) => { + if (value === undefined || value === null || value === "") return null; + else if (Array.isArray(value)) return value[0] as string; + else return value as string; +}; diff --git a/src/components/fields/index.ts b/src/components/fields/index.ts index 2485837d..a84da7d8 100644 --- a/src/components/fields/index.ts +++ b/src/components/fields/index.ts @@ -27,6 +27,7 @@ import Connector from "./Connector"; import SubTable from "./SubTable"; import ConnectTable from "./ConnectTable"; import ConnectService from "./ConnectService"; +import Reference from "./Reference"; import Json from "./Json"; import Code from "./Code"; import Action from "./Action"; @@ -72,6 +73,7 @@ export const FIELDS: IFieldConfig[] = [ SubTable, ConnectTable, ConnectService, + Reference, /** CODE */ Json, Code, diff --git a/src/constants/fields.ts b/src/constants/fields.ts index 71a80666..d0ab8a2d 100644 --- a/src/constants/fields.ts +++ b/src/constants/fields.ts @@ -29,6 +29,7 @@ export enum FieldType { connector = "CONNECTOR", connectTable = "DOCUMENT_SELECT", connectService = "SERVICE_SELECT", + reference = "REFERENCE", // CODE json = "JSON", code = "CODE", @@ -43,6 +44,7 @@ export enum FieldType { createdAt = "CREATED_AT", updatedAt = "UPDATED_AT", // METADATA + user = "USER", id = "ID", last = "LAST",