@aatulwork/customform-renderer 1.12.0 → 1.14.0

package/dist/index.d.mts

@@ -30,8 +30,9 @@ interface FieldViewProps {
     field: FormField;
     value: any;
     services?: FormServices;
+    colors?: FormColors;
 }
-declare const FieldView: ({ field, value, services }: FieldViewProps) => react_jsx_runtime.JSX.Element;
+declare const FieldView: ({ field, value, services, colors }: FieldViewProps) => react_jsx_runtime.JSX.Element;
 
 interface SimpleSelectOption {
     value: string | number;

package/dist/index.d.ts

@@ -30,8 +30,9 @@ interface FieldViewProps {
     field: FormField;
     value: any;
     services?: FormServices;
+    colors?: FormColors;
 }
-declare const FieldView: ({ field, value, services }: FieldViewProps) => react_jsx_runtime.JSX.Element;
+declare const FieldView: ({ field, value, services, colors }: FieldViewProps) => react_jsx_runtime.JSX.Element;
 
 interface SimpleSelectOption {
     value: string | number;

package/dist/index.js

@@ -1390,7 +1390,22 @@ var FieldRenderer = (props) => {
       return null;
   }
 };
-var FieldView = ({ field, value, services }) => {
+var REFERENCE_OPTIONS_CACHE_TTL = 5 * 60 * 1e3;
+var referenceOptionsCache = /* @__PURE__ */ new Map();
+var getCachedOptions = (key) => {
+  const cached = referenceOptionsCache.get(key);
+  if (!cached) return null;
+  if (Date.now() - cached.timestamp > REFERENCE_OPTIONS_CACHE_TTL) {
+    referenceOptionsCache.delete(key);
+    return null;
+  }
+  return cached.options;
+};
+var setCachedOptions = (key, options) => {
+  referenceOptionsCache.set(key, { options, timestamp: Date.now() });
+};
+var FieldView = ({ field, value, services, colors }) => {
+  const formColors = useFormColors(colors);
   const dateFormatter = services?.dateFormatter || defaultDateFormatterService;
   const FileDisplayComponent = services?.FileDisplayComponent;
   const CKEditorDisplayComponent = services?.CKEditorDisplayComponent;
@@ -1428,13 +1443,49 @@ var FieldView = ({ field, value, services }) => {
           borderColor: "divider"
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, color: formColors.primary }, children: field.label }),
           /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { color: "text.secondary" }, children: value ? Array.isArray(value) ? `${value.length} file(s)` : "1 file" : "\u2014" })
         ]
       },
       field.name
     );
   }
+  if (field.type === "formReference" || field.type === "apiReference") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ReferenceFieldView, { field, value, services });
+  }
+  if (field.type === "color") {
+    const colorValue = value && typeof value === "string" ? value : "#000000";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          py: 1.5,
+          px: 1,
+          borderColor: "divider"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: value ? /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                width: 30,
+                height: 30,
+                backgroundColor: colorValue,
+                border: "1px solid",
+                borderColor: "divider",
+                borderRadius: 1
+              }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { color: "text.disabled", fontStyle: "italic" }, children: "\u2014" }) })
+        ]
+      },
+      field.name
+    );
+  }
   if (field.type === "ckeditor") {
     if (CKEditorDisplayComponent) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1524,6 +1575,93 @@ var FieldView = ({ field, value, services }) => {
     field.name
   );
 };
+var ReferenceFieldView = ({
+  field,
+  value,
+  services
+}) => {
+  const [displayLabels, setDisplayLabels] = react.useState(null);
+  react.useEffect(() => {
+    if (value === null || value === void 0 || value === "") {
+      setDisplayLabels([]);
+      return;
+    }
+    let values;
+    if (field.allowMultiple) {
+      values = Array.isArray(value) ? value : value ? [value] : [];
+    } else {
+      values = Array.isArray(value) && value.length > 0 ? [value[0]] : value ? [value] : [];
+    }
+    if (values.length === 0) {
+      setDisplayLabels([]);
+      return;
+    }
+    const fetchLabels = async () => {
+      try {
+        let cacheKey = null;
+        let options = null;
+        if (field.type === "formReference" && field.referenceFormName && field.referenceFieldName) {
+          cacheKey = `formRef:${field.referenceFormName}:${field.referenceFieldName}`;
+          options = getCachedOptions(cacheKey);
+          if (!options) {
+            const formRefService = services?.formReference || defaultFormReferenceService;
+            options = await formRefService.fetchOptions(field.referenceFormName, field.referenceFieldName);
+            setCachedOptions(cacheKey, options);
+          }
+        } else if (field.type === "apiReference" && field.apiEndpoint && field.apiLabelField) {
+          const valueField = field.apiValueField || "_id";
+          cacheKey = `apiRef:${field.apiEndpoint}:${field.apiLabelField}:${valueField}`;
+          options = getCachedOptions(cacheKey);
+          if (!options) {
+            const apiRefService = services?.apiReference || defaultApiReferenceService;
+            options = await apiRefService.fetchOptions(field.apiEndpoint, field.apiLabelField, valueField);
+            setCachedOptions(cacheKey, options);
+          }
+        }
+        const labels = values.map((val) => {
+          const option = (options || []).find((opt) => opt.value === val || String(opt.value) === String(val));
+          return option ? option.label : String(val);
+        });
+        setDisplayLabels(labels);
+      } catch {
+        setDisplayLabels(values.map((v) => String(v)));
+      }
+    };
+    fetchLabels();
+  }, [field, value, services]);
+  const displayText = displayLabels === null ? "..." : displayLabels.length === 0 ? "\u2014" : displayLabels.join(", ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.5,
+        py: 1.5,
+        px: 1,
+        borderColor: "divider"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "body1",
+            sx: {
+              color: displayText === "\u2014" ? "text.disabled" : "text.primary",
+              fontStyle: displayText === "\u2014" ? "italic" : "normal",
+              fontWeight: 400,
+              fontSize: "0.875rem",
+              lineHeight: 1.5
+            },
+            children: displayText
+          }
+        )
+      ]
+    },
+    field.name
+  );
+};
 var formatFieldValue = (field, value, dateFormatter, services) => {
   if (value === null || value === void 0 || value === "") {
     return "\u2014";
@@ -1535,8 +1673,6 @@ var formatFieldValue = (field, value, dateFormatter, services) => {
     case "datepicker":
       return dateFormatter?.format(value, { datePickerMode: field.datePickerMode }) || String(value);
     case "select":
-    case "formReference":
-    case "apiReference":
       let values;
       if (field.allowMultiple) {
         values = Array.isArray(value) ? value : value ? [value] : [];
@@ -1567,6 +1703,8 @@ var formatFieldValue = (field, value, dateFormatter, services) => {
         return labels.join(", ");
       }
       return getLabelForValue(values[0]);
+    case "color":
+      return value ? String(value) : "\u2014";
     case "radio":
       if (field.options) {
         const normalizedOptions = normalizeOptions(field.options);
@@ -1598,7 +1736,7 @@ var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services, co
           id: `panel-${section.id}-header`,
           children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", sx: { color: formColors.primary } }),
-            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600, color: formColors.primary }, children: section.title })
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { color: formColors.primary }, children: section.title })
           ] })
         }
       ),
@@ -1612,7 +1750,7 @@ var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services, co
               gridTemplateColumns: isMobile ? "repeat(1, 1fr)" : "repeat(2, 1fr)",
               gap: 1
             },
-            children: section.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(FieldView, { field, value: initialValues?.[field.name], services }, field.name))
+            children: section.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(FieldView, { field, value: initialValues?.[field.name], services, colors }, field.name))
           }
         )
       ] })