removed _rowy_arrayTableData and expanded _rowy_ref

2025-12-29 00:16:39 +01:00 · 2023-04-14 17:56:12 +05:30
parent da0cf161df
commit dd481415fc
20 changed files with 72 additions and 101 deletions
--- a/src/components/SideDrawer/MemoizedField.tsx
+++ b/src/components/SideDrawer/MemoizedField.tsx
@@ -5,7 +5,7 @@ import { isEqual, isEmpty } from "lodash-es";
 import FieldWrapper from "./FieldWrapper";
 import { IFieldConfig } from "@src/components/fields/types";
 import { getFieldProp } from "@src/components/fields";
-import { ArrayTableRowData, ColumnConfig, TableRowRef } from "@src/types/table";
+import { ColumnConfig, TableRowRef } from "@src/types/table";

 export interface IMemoizedFieldProps {
  field: ColumnConfig;
@@ -13,7 +13,6 @@ export interface IMemoizedFieldProps {
  hidden: boolean;
  value: any;
  _rowy_ref: TableRowRef;
-  _rowy_arrayTableData?: ArrayTableRowData;
  isDirty: boolean;
  onDirty: (fieldName: string) => void;
  onSubmit: (fieldName: string, value: any) => void;
@@ -26,7 +25,6 @@ export const MemoizedField = memo(
    hidden,
    value,
    _rowy_ref,
-    _rowy_arrayTableData,
    isDirty,
    onDirty,
    onSubmit,
@@ -80,7 +78,6 @@ export const MemoizedField = memo(
          },
          onSubmit: handleSubmit,
          disabled,
-          _rowy_arrayTableData,
        })}
      </FieldWrapper>
    );
--- a/src/components/SideDrawer/SideDrawer.tsx
+++ b/src/components/SideDrawer/SideDrawer.tsx
@@ -35,7 +35,7 @@ export default function SideDrawer() {
    cell?.arrayIndex === undefined
      ? ["_rowy_ref.path", cell?.path]
      : // if the table is an array table, we need to use the array index to find the row
-        ["_rowy_arrayTableData.index", cell?.arrayIndex]
+        ["_rowy_ref.arrayTableData.index", cell?.arrayIndex]
  );

  const selectedCellRowIndex = findIndex(
@@ -43,7 +43,7 @@ export default function SideDrawer() {
    cell?.arrayIndex === undefined
      ? ["_rowy_ref.path", cell?.path]
      : // if the table is an array table, we need to use the array index to find the row
-        ["_rowy_arrayTableData.index", cell?.arrayIndex]
+        ["_rowy_ref.arrayTableData.index", cell?.arrayIndex]
  );

  const handleNavigate = (direction: "up" | "down") => () => {
@@ -55,8 +55,9 @@ export default function SideDrawer() {

    setCell((cell) => ({
      columnKey: cell!.columnKey,
-      path: newPath,
+      path: cell?.arrayIndex !== undefined ? cell.path : newPath,
      focusInside: false,
+      arrayIndex: cell?.arrayIndex !== undefined ? rowIndex : undefined,
    }));
  };

--- a/src/components/SideDrawer/SideDrawerFields.tsx
+++ b/src/components/SideDrawer/SideDrawerFields.tsx
@@ -130,7 +130,6 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
          onDirty={onDirty}
          onSubmit={onSubmit}
          isDirty={dirtyField === field.key}
-          _rowy_arrayTableData={row._rowy_arrayTableData}
        />
      ))}

@@ -139,12 +138,12 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
        fieldName="_rowy_ref.path"
        label="Document path"
        debugText={
-          row._rowy_arrayTableData
+          row._rowy_ref.arrayTableData
            ? row._rowy_ref.path +
              " → " +
-              row._rowy_arrayTableData.parentField +
+              row._rowy_ref.arrayTableData.parentField +
              "[" +
-              row._rowy_arrayTableData.index +
+              row._rowy_ref.arrayTableData.index +
              "]"
            : row._rowy_ref.path
        }
--- a/src/components/Table/ContextMenu/MenuContents.tsx
+++ b/src/components/Table/ContextMenu/MenuContents.tsx
@@ -69,7 +69,7 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
    selectedCell?.arrayIndex === undefined
      ? ["_rowy_ref.path", selectedCell.path]
      : // if the table is an array table, we need to use the array index to find the row
-        ["_rowy_arrayTableData.index", selectedCell.arrayIndex]
+        ["_rowy_ref.arrayTableData.index", selectedCell.arrayIndex]
  );

  if (!row) return null;
@@ -78,11 +78,11 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {

  const handleDuplicate = () => {
    const _duplicate = () => {
-      if (row._rowy_arrayTableData !== undefined) {
+      if (row._rowy_ref.arrayTableData !== undefined) {
        if (!updateRowDb) return;

        return updateRowDb("", {}, undefined, {
-          index: row._rowy_arrayTableData.index,
+          index: row._rowy_ref.arrayTableData.index,
          operation: {
            addRow: "bottom",
            base: row,
@@ -95,7 +95,7 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
      });
    };

-    if (altPress || row._rowy_arrayTableData !== undefined) {
+    if (altPress || row._rowy_ref.arrayTableData !== undefined) {
      _duplicate();
    } else {
      confirm({
@@ -118,10 +118,10 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
    const _delete = () =>
      deleteRow({
        path: row._rowy_ref.path,
-        options: row._rowy_arrayTableData,
+        options: row._rowy_ref.arrayTableData,
      });

-    if (altPress || row._rowy_arrayTableData !== undefined) {
+    if (altPress || row._rowy_ref.arrayTableData !== undefined) {
      _delete();
    } else {
      confirm({
--- a/src/components/Table/FinalColumn/FinalColumn.tsx
+++ b/src/components/Table/FinalColumn/FinalColumn.tsx
@@ -43,9 +43,9 @@ export const FinalColumn = memo(function FinalColumn({
    const _delete = () =>
      deleteRow({
        path: row.original._rowy_ref.path,
-        options: row.original._rowy_arrayTableData,
+        options: row.original._rowy_ref.arrayTableData,
      });
-    if (altPress || row.original._rowy_arrayTableData !== undefined) {
+    if (altPress || row.original._rowy_ref.arrayTableData !== undefined) {
      _delete();
    } else {
      confirm({
@@ -68,11 +68,11 @@ export const FinalColumn = memo(function FinalColumn({

  const handleDuplicate = () => {
    const _duplicate = () => {
-      if (row.original._rowy_arrayTableData !== undefined) {
+      if (row.original._rowy_ref.arrayTableData !== undefined) {
        if (!updateRowDb) return;

        return updateRowDb("", {}, undefined, {
-          index: row.original._rowy_arrayTableData.index,
+          index: row.original._rowy_ref.arrayTableData.index,
          operation: {
            addRow: "bottom",
            base: row.original,
@@ -84,7 +84,7 @@ export const FinalColumn = memo(function FinalColumn({
        setId: addRowIdType === "custom" ? "decrement" : addRowIdType,
      });
    };
-    if (altPress || row.original._rowy_arrayTableData !== undefined) {
+    if (altPress || row.original._rowy_ref.arrayTableData !== undefined) {
      _duplicate();
    } else {
      confirm({
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -200,8 +200,6 @@ export default function Table({
      if (result.destination?.index === undefined || !result.draggableId)
        return;

-      console.log(result.draggableId, result.destination.index);
-
      updateColumn({
        key: result.draggableId,
        index: result.destination.index,
--- a/src/components/Table/TableBody.tsx
+++ b/src/components/Table/TableBody.tsx
@@ -105,7 +105,7 @@ export const TableBody = memo(function TableBody({
                selectedCell?.columnKey === cell.column.id &&
                // if the table is an array sub table, we need to check the array index as well
                selectedCell?.arrayIndex ===
-                  row.original._rowy_arrayTableData?.index;
+                  row.original._rowy_ref.arrayTableData?.index;

              const fieldTypeGroup = getFieldProp(
                "group",
--- a/src/components/Table/TableCell/EditorCellController.tsx
+++ b/src/components/Table/TableCell/EditorCellController.tsx
@@ -66,7 +66,7 @@ export default function EditorCellController({
        fieldName: props.column.fieldName,
        value: localValueRef.current,
        deleteField: localValueRef.current === undefined,
-        arrayTableData: props.row?._rowy_arrayTableData,
+        arrayTableData: props.row?._rowy_ref.arrayTableData,
      });
    } catch (e) {
      enqueueSnackbar((e as Error).message, { variant: "error" });
--- a/src/components/Table/TableCell/TableCell.tsx
+++ b/src/components/Table/TableCell/TableCell.tsx
@@ -123,7 +123,7 @@ export const TableCell = memo(function TableCell({
    focusInsideCell,
    setFocusInsideCell: (focusInside: boolean) =>
      setSelectedCell({
-        arrayIndex: row.original._rowy_arrayTableData?.index,
+        arrayIndex: row.original._rowy_ref.arrayTableData?.index,
        path: row.original._rowy_ref.path,
        columnKey: cell.column.id,
        focusInside,
@@ -167,7 +167,7 @@ export const TableCell = memo(function TableCell({
      }}
      onClick={(e) => {
        setSelectedCell({
-          arrayIndex: row.original._rowy_arrayTableData?.index,
+          arrayIndex: row.original._rowy_ref.arrayTableData?.index,
          path: row.original._rowy_ref.path,
          columnKey: cell.column.id,
          focusInside: false,
@@ -176,7 +176,7 @@ export const TableCell = memo(function TableCell({
      }}
      onDoubleClick={(e) => {
        setSelectedCell({
-          arrayIndex: row.original._rowy_arrayTableData?.index,
+          arrayIndex: row.original._rowy_ref.arrayTableData?.index,
          path: row.original._rowy_ref.path,
          columnKey: cell.column.id,
          focusInside: true,
@@ -186,7 +186,7 @@ export const TableCell = memo(function TableCell({
      onContextMenu={(e) => {
        e.preventDefault();
        setSelectedCell({
-          arrayIndex: row.original._rowy_arrayTableData?.index,
+          arrayIndex: row.original._rowy_ref.arrayTableData?.index,
          path: row.original._rowy_ref.path,
          columnKey: cell.column.id,
          focusInside: false,
--- a/src/components/Table/useKeyboardNavigation.tsx
+++ b/src/components/Table/useKeyboardNavigation.tsx
@@ -130,7 +130,7 @@ export function useKeyboardNavigation({
        columnKey: leafColumns[newColIndex].id! || leafColumns[0].id!,
        arrayIndex:
          newRowIndex > -1
-            ? tableRows[newRowIndex]._rowy_arrayTableData?.index
+            ? tableRows[newRowIndex]._rowy_ref.arrayTableData?.index
            : undefined,

        // When selected cell changes, exit current cell
--- a/src/components/Table/useMenuAction.tsx
+++ b/src/components/Table/useMenuAction.tsx
@@ -142,7 +142,7 @@ export function useMenuAction(
      selectedCell.arrayIndex === undefined
        ? ["_rowy_ref.path", selectedCell.path]
        : // if the table is an array table, we need to use the array index to find the row
-          ["_rowy_arrayTableData.index", selectedCell.arrayIndex]
+          ["_rowy_ref.arrayTableData.index", selectedCell.arrayIndex]
    );
    setCellValue(get(selectedRow, selectedCol.fieldName));
  }, [selectedCell, tableSchema, tableRows]);
--- a/src/components/fields/File/EditorCell.tsx
+++ b/src/components/fields/File/EditorCell.tsx
@@ -21,17 +21,11 @@ export default function File_({
  _rowy_ref,
  tabIndex,
  rowHeight,
-  row: { _rowy_arrayTableData },
 }: IEditorCellProps) {
  const confirm = useSetAtom(confirmDialogAtom, projectScope);

  const { loading, progress, handleDelete, localFiles, dropzoneState } =
-    useFileUpload(
-      _rowy_ref,
-      column.key,
-      { multiple: true },
-      _rowy_arrayTableData
-    );
+    useFileUpload(_rowy_ref, column.key, { multiple: true });

  const { isDragActive, getRootProps, getInputProps } = dropzoneState;
  const dropzoneProps = getRootProps();
--- a/src/components/fields/File/SideDrawerField.tsx
+++ b/src/components/fields/File/SideDrawerField.tsx
@@ -25,16 +25,10 @@ export default function File_({
  _rowy_ref,
  value,
  disabled,
-  _rowy_arrayTableData,
 }: ISideDrawerFieldProps) {
  const confirm = useSetAtom(confirmDialogAtom, projectScope);
  const { loading, progress, handleDelete, localFiles, dropzoneState } =
-    useFileUpload(
-      _rowy_ref,
-      column.key,
-      { multiple: true },
-      _rowy_arrayTableData
-    );
+    useFileUpload(_rowy_ref, column.key, { multiple: true });

  const { isDragActive, getRootProps, getInputProps } = dropzoneState;

--- a/src/components/fields/File/useFileUpload.ts
+++ b/src/components/fields/File/useFileUpload.ts
@@ -5,17 +5,12 @@ import { DropzoneOptions, useDropzone } from "react-dropzone";

 import { tableScope, updateFieldAtom } from "@src/atoms/tableScope";
 import useUploader from "@src/hooks/useFirebaseStorageUploader";
-import type {
-  ArrayTableRowData,
-  FileValue,
-  TableRowRef,
-} from "@src/types/table";
+import type { FileValue, TableRowRef } from "@src/types/table";

 export default function useFileUpload(
  docRef: TableRowRef,
  fieldName: string,
-  dropzoneOptions: DropzoneOptions = {},
-  arrayTableData?: ArrayTableRowData
+  dropzoneOptions: DropzoneOptions = {}
 ) {
  const updateField = useSetAtom(updateFieldAtom, tableScope);
  const { uploaderState, upload, deleteUpload } = useUploader();
@@ -52,8 +47,8 @@ export default function useFileUpload(
    async (files: File[]) => {
      const { uploads, failures } = await upload({
        docRef,
-        fieldName: arrayTableData
-          ? `${arrayTableData?.parentField}/${fieldName}`
+        fieldName: docRef.arrayTableData
+          ? `${docRef.arrayTableData?.parentField}/${fieldName}`
          : fieldName,
        files,
      });
@@ -62,11 +57,11 @@ export default function useFileUpload(
        fieldName,
        value: uploads,
        useArrayUnion: true,
-        arrayTableData,
+        arrayTableData: docRef.arrayTableData,
      });
      return { uploads, failures };
    },
-    [arrayTableData, docRef, fieldName, updateField, upload]
+    [docRef, fieldName, updateField, upload]
  );

  const handleDelete = useCallback(
@@ -77,11 +72,11 @@ export default function useFileUpload(
        value: [file],
        useArrayRemove: true,
        disableCheckEquality: true,
-        arrayTableData,
+        arrayTableData: docRef.arrayTableData,
      });
      deleteUpload(file);
    },
-    [arrayTableData, deleteUpload, docRef.path, fieldName, updateField]
+    [deleteUpload, docRef.arrayTableData, docRef.path, fieldName, updateField]
  );

  return {
--- a/src/components/fields/Image/EditorCell.tsx
+++ b/src/components/fields/Image/EditorCell.tsx
@@ -23,20 +23,14 @@ export default function Image_({
  _rowy_ref,
  tabIndex,
  rowHeight,
-  row: { _rowy_arrayTableData },
 }: IEditorCellProps) {
  const confirm = useSetAtom(confirmDialogAtom, projectScope);

  const { loading, progress, handleDelete, localFiles, dropzoneState } =
-    useFileUpload(
-      _rowy_ref,
-      column.key,
-      {
-        multiple: true,
-        accept: IMAGE_MIME_TYPES,
-      },
-      _rowy_arrayTableData
-    );
+    useFileUpload(_rowy_ref, column.key, {
+      multiple: true,
+      accept: IMAGE_MIME_TYPES,
+    });

  const localImages = useMemo(
    () =>
--- a/src/components/fields/Image/SideDrawerField.tsx
+++ b/src/components/fields/Image/SideDrawerField.tsx
@@ -84,7 +84,6 @@ export default function Image_({
  _rowy_ref,
  value,
  disabled,
-  _rowy_arrayTableData,
 }: ISideDrawerFieldProps) {
  const confirm = useSetAtom(confirmDialogAtom, projectScope);

@@ -95,15 +94,10 @@ export default function Image_({
    uploaderState,
    localFiles,
    dropzoneState,
-  } = useFileUpload(
-    _rowy_ref,
-    column.key,
-    {
-      multiple: true,
-      accept: IMAGE_MIME_TYPES,
-    },
-    _rowy_arrayTableData
-  );
+  } = useFileUpload(_rowy_ref, column.key, {
+    multiple: true,
+    accept: IMAGE_MIME_TYPES,
+  });

  const localImages = useMemo(
    () =>
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -6,7 +6,6 @@ import type {
  TableRow,
  TableRowRef,
  TableFilter,
-  ArrayTableRowData,
 } from "@src/types/table";
 import type { SelectedCell } from "@src/atoms/tableScope";
 import type { IContextMenuItem } from "@src/components/Table/ContextMenu/ContextMenuItem";
@@ -82,8 +81,6 @@ export interface ISideDrawerFieldProps<T = any> {
  column: ColumnConfig;
  /** The row’s _rowy_ref object */
  _rowy_ref: TableRowRef;
-  /** The array table row’s data */
-  _rowy_arrayTableData?: ArrayTableRowData;
  /** The field’s local value – synced with db when field is not dirty */
  value: T;
  /** Call when the user has input but changes have not been saved */
--- a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
+++ b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
@@ -111,10 +111,13 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
            const pseudoRow = pseudoDoc.map((row: any, i: number) => {
              return {
                ...row,
-                _rowy_ref: docSnapshot.ref,
-                _rowy_arrayTableData: {
-                  index: i,
-                  parentField: fieldName,
+                _rowy_ref: {
+                  path: docSnapshot.ref.path,
+                  id: docSnapshot.ref.id,
+                  arrayTableData: {
+                    index: i,
+                    parentField: fieldName,
+                  },
                },
              };
            });
@@ -188,7 +191,7 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
            temp.splice(options.index, 1);
            for (let i = options.index; i < temp.length; i++) {
              // @ts-ignore
-              temp[i]._rowy_arrayTableData.index = i;
+              temp[i]._rowy_ref.arrayTableData.index = i;
            }
            return sortRows(temp, sorts);
          });
@@ -263,10 +266,10 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
                  _rowy_ref: {
                    id: doc(firebaseDb, path).id,
                    path: doc(firebaseDb, path).path,
-                  },
-                  _rowy_arrayTableData: {
-                    index: i,
-                    parentField: fieldName,
+                    arrayTableData: {
+                      index: i,
+                      parentField: fieldName,
+                    },
                  },
                } as T);

@@ -279,8 +282,12 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
                  const modifiedPrevData = temp.map((row: any, i: number) => {
                    return {
                      ...row,
-                      _rowy_arrayTableData: {
-                        index: i + 1,
+                      _rowy_ref: {
+                        ...row._rowy_ref,
+                        arrayTableData: {
+                          index: i + 1,
+                          parentField: fieldName,
+                        },
                      },
                    };
                  });
@@ -353,5 +360,5 @@ function sortRows<T = TableRow>(
 }

 function unsortRows<T = TableRow>(rows: T[]): T[] {
-  return orderBy(rows, ["_rowy_arrayTableData.index"], ["asc"]);
+  return orderBy(rows, ["_rowy_ref.arrayTableData.index"], ["asc"]);
 }
--- a/src/types/table.d.ts
+++ b/src/types/table.d.ts
@@ -207,25 +207,27 @@ export type TableSort = {
  direction: Parameters<typeof orderBy>[1];
 };

+export type ArrayTableRowData = {
+  index: number;
+  parentField?: string;
+  operation?: ArrayTableOperations;
+};
+
 export type TableRowRef = {
  id: string;
  path: string;
+  arrayTableData?: ArrayTableRowData;
 } & Partial<DocumentReference>;

 type ArrayTableOperations = {
  addRow?: "top" | "bottom";
  base?: TableRow;
 };
-export type ArrayTableRowData = {
-  index: number;
-  parentField?: string;
-  operation?: ArrayTableOperations;
-};
+
 export type TableRow = DocumentData & {
  _rowy_ref: TableRowRef;
  _rowy_missingRequiredFields?: string[];
  _rowy_outOfOrder?: boolean;
-  _rowy_arrayTableData?: ArrayTableRowData;
 };

 export type FileValue = {
--- a/src/utils/table.ts
+++ b/src/utils/table.ts
@@ -51,7 +51,6 @@ export const omitRowyFields = <T = Record<string, any>>(row: T) => {
  delete shallowClonedRow["_rowy_outOfOrder"];
  delete shallowClonedRow["_rowy_missingRequiredFields"];
  delete shallowClonedRow["_rowy_new"];
-  delete shallowClonedRow["_rowy_arrayTableData"];

  return shallowClonedRow as T;
 };