Merge branch 'data-layer-rewrite' of https://github.com/rowyio/rowy into data-layer-rewrite

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 ?? ""}`}</>;
+}

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<any>) {
+  const updateField = useSetAtom(updateFieldAtom, tableScope);
+  const [firebaseDb] = useAtom(firebaseDbAtom, globalScope);
+
+  const inputRef = useRef<HTMLInputElement>(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 (
+    <TextField
+      defaultValue={defaultValue}
+      fullWidth
+      variant="standard"
+      inputProps={{
+        ref: inputRef,
+        maxLength: maxLength,
+      }}
+      sx={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: "var(--background-color)",
+
+        "& .MuiInputBase-root": {
+          height: "100%",
+          font: "inherit", // Prevent text jumping
+          letterSpacing: "inherit", // Prevent text jumping
+          p: 0,
+        },
+        "& .MuiInputBase-input": {
+          height: "100%",
+          font: "inherit", // Prevent text jumping
+          letterSpacing: "inherit", // Prevent text jumping
+          p: "var(--cell-padding)",
+          pb: 1 / 8,
+        },
+        "& textarea.MuiInputBase-input": {
+          lineHeight: (theme) => 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;
+        }
+      }}
+    />
+  );
+}

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 (
+    <Controller
+      control={control}
+      name={column.key}
+      render={({ field: { onChange, onBlur, value } }) => <></>}
+    />
+  );
+}

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: <SingleSelectIcon />,
+  description: "Firestore field reference type",
+  TableCell: withBasicCell(BasicCell),
+  TableEditor: EditorCell,
+  SideDrawerField,
+  //settings: Settings,
+  filter: { operators: filterOperators },
+  requireConfiguration: true,
+};
+export default config;

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;
+};

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,

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",