feat: Array value formatted on display cells

src/components/fields/Array/DisplayCell.tsx

@@ -1,5 +1,7 @@
 import { useTheme } from "@mui/material";
 import { IDisplayCellProps } from "@src/components/fields/types";
+import { isArray } from "lodash-es";
+import { SupportedTypes, detectType } from "./SideDrawerField/SupportedTypes";
 
 export default function Array({ value }: IDisplayCellProps) {
   const theme = useTheme();
@@ -7,6 +9,14 @@ export default function Array({ value }: IDisplayCellProps) {
   if (!value) {
     return null;
   }
+  if (isArray(value)) {
+    value = value.map((item: any) => {
+      let itemType = detectType(item);
+      let converter = SupportedTypes[itemType].humanize;
+      if (!converter) return item;
+      return converter(item);
+    });
+  }
 
   return (
     <div

src/components/fields/Array/SideDrawerField/SupportedTypes.ts

@@ -28,18 +28,21 @@ export const SupportedTypes = {
     initialValue: 0,
     dataType: "common",
     instance: Object,
+    humanize: undefined,
   },
   [FieldType.shortText]: {
     Sidebar: ShortTextValueSidebar,
     initialValue: "",
     dataType: "common",
     instance: Object,
+    humanize: undefined,
   },
   [FieldType.checkbox]: {
     Sidebar: CheckBoxValueSidebar,
     initialValue: false,
     dataType: "common",
     instance: Object,
+    humanize: undefined,
   },
   [FieldType.json]: {
     Sidebar: JsonValueSidebar,
@@ -51,24 +54,34 @@ export const SupportedTypes = {
     ],
     dataType: "common",
     instance: Object,
+    humanize: undefined,
   },
   [FieldType.geoPoint]: {
     Sidebar: GeoPointValueSidebar,
     initialValue: new GeoPoint(0, 0),
     dataType: "firestore-type",
     instance: GeoPoint,
+    humanize: (value: GeoPoint) => {
+      return `${value.latitude}, ${value.longitude}`;
+    },
   },
   [FieldType.dateTime]: {
     Sidebar: DateTimeValueSidebar,
     initialValue: Timestamp.now(),
     dataType: "firestore-type",
     instance: Timestamp,
+    humanize: (value: Timestamp) => {
+      return value.toDate().toLocaleString();
+    },
   },
   [FieldType.reference]: {
     Sidebar: ReferenceValueSidebar,
     initialValue: null,
     dataType: "firestore-type",
     instance: DocumentReference,
+    humanize: (value: DocumentReference) => {
+      return value.path;
+    },
   },
 };