npm - @solidxai/core-ui - Versions diffs - 0.1.2 → 0.1.4-beta.0 - Mend

@solidxai/core-ui 0.1.2 → 0.1.4-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/dist/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.js CHANGED Viewed

@@ -44,6 +44,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useState } from "react";
+import qs from "qs";
 import { createSolidEntityApi } from "../../../../../../../redux/api/solidEntityApi";
 export var useRelationEntityHandler = function (_a) {
     var fieldContext = _a.fieldContext, formik = _a.formik, _b = _a.autoCompleteLimit, autoCompleteLimit = _b === void 0 ? 1000 : _b;
@@ -80,6 +81,55 @@ export var useRelationEntityHandler = function (_a) {
             });
         });
     };
+    var populateFormikWithRelatedEntities = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var relationFieldName, parentId, queryData, qsString, response, data, mappedItems;
+        var _a;
+        var _b, _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    relationFieldName = (_c = (_b = fieldContext.fieldMetadata) === null || _b === void 0 ? void 0 : _b.relationCoModelFieldName) !== null && _c !== void 0 ? _c : fieldContext.modelName;
+                    parentId = (_e = (_d = fieldContext.data) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : -1;
+                    queryData = {
+                        offset: 0,
+                        limit: autoCompleteLimit,
+                        filters: {
+                            $and: [
+                                (_a = {},
+                                    _a[relationFieldName] = {
+                                        id: { $eq: parentId },
+                                    },
+                                    _a),
+                            ],
+                        },
+                    };
+                    qsString = qs.stringify(queryData, {
+                        encodeValuesOnly: true,
+                    });
+                    return [4 /*yield*/, triggerGetSolidEntities(qsString)];
+                case 1:
+                    response = _f.sent();
+                    data = response.data;
+                    if (!data)
+                        return [2 /*return*/];
+                    mappedItems = data.records.map(function (item) {
+                        var _a, _b;
+                        return ({
+                            label: item[(_b = (_a = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _a === void 0 ? void 0 : _a.userKeyField) === null || _b === void 0 ? void 0 : _b.name],
+                            value: item.id,
+                            original: item,
+                        });
+                    });
+                    /**
+                     * IMPORTANT:
+                     * 1. Set checkbox options
+                     * 2. Set formik selected values (checked state)
+                     */
+                    formik.setFieldValue(fieldLayoutInfo.attrs.name, mappedItems);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     var addNewRelation = function (values) {
         var _a, _b;
         var currentData = formik.values[fieldLayoutInfo.attrs.name] || [];
@@ -99,6 +149,7 @@ export var useRelationEntityHandler = function (_a) {
     return {
         autoCompleteItems: autoCompleteItems,
         fetchRelationEntities: fetchRelationEntities,
+        populateFormikWithRelatedEntities: populateFormikWithRelatedEntities,
         addNewRelation: addNewRelation
     };
 };

package/dist/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRelationEntityHandler.js","sourceRoot":"","sources":["../../../../../../../../src/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAEjC~~,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AAErF,MAAM,CAAC,IAAM,wBAAwB,GAAG,UAAC,EAAuD;QAArD,YAAY,kBAAA,EAAE,MAAM,YAAA,EAAE,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA;IACvF,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IACjD,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAE3C,IAAM,SAAS,GAAG,oBAAoB,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;IAC1E,IAAA,4BAA4B,GAAK,SAAS,6BAAd,CAAe;IAC5C,IAAA,uBAAuB,GAAI,4BAA4B,EAAE,GAAlC,CAAmC;IAE3D,IAAA,KAA4C,QAAQ,CAAC,EAAE,CAAC,EAAvD,iBAAiB,QAAA,EAAE,oBAAoB,QAAgB,CAAC;IAE/D,IAAM,qBAAqB,GAAG,UAAO,cAAmB,EAAE,KAAyB;QAA9C,+BAAA,EAAA,mBAAmB;QAAE,sBAAA,EAAA,yBAAyB;;;;;4BAahE,qBAAM,uBAAuB,CAAC,cAAc,CAAC,EAAA;;wBAAxD,QAAQ,GAAG,SAA6C;wBACxD,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;wBAE3B,IAAI,IAAI,EAAE;4BACF,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,IAAS;;gCAAK,OAAA,CAAC;oCACnD,KAAK,EAAE,IAAI,CAAC,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,0CAAE,YAAY,0CAAE,IAAI,CAAC;oCAC7D,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;oCACjB,QAAQ,EAAE,IAAI;iCACf,CAAC,CAAA;6BAAA,CAAC,CAAC;4BACJ,oBAAoB,CAAC,WAAW,CAAC,CAAC;yBACnC;;;;;KACF,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,MAAW;;QACjC,IAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACpE,IAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;QACxD,IAAM,OAAO,GAAG;YACd,KAAK,EAAE,UAAU,CAAC,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,0CAAE,YAAY,0CAAE,IAAI,CAAC;YACnE,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,UAAU;SACrB,CAAC;QAEF,MAAM,CAAC,aAAa,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,kCAAM,WAAW,UAAE,OAAO,UAAE,CAAC;QAE5E,sCAAsC;QACtC,oBAAoB,CAAC,UAAC,IAAS;YAC7B,IAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAC,IAAS,IAAK,OAAA,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,EAA5B,CAA4B,CAAC,CAAC;YACtE,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,iCAAK,IAAI,UAAE,OAAO,SAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO;QACL,iBAAiB,mBAAA;QACjB,qBAAqB,uBAAA;QACrB,cAAc,gBAAA;KACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState } from \"react\";\nimport qs from \"qs\";\nimport { createSolidEntityApi } from \"../../../../../../../redux/api/solidEntityApi\";\n\nexport const useRelationEntityHandler = ({ fieldContext, formik, autoCompleteLimit = 1000 }: any) => {\n const fieldMetadata = fieldContext.fieldMetadata;\n const fieldLayoutInfo = fieldContext.field;\n\n const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);\n const { useLazyGetSolidEntitiesQuery } = entityApi;\n const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();\n\n const [autoCompleteItems, setAutoCompleteItems] = useState([]);\n\n const fetchRelationEntities = async (autocompleteQs = \"\", limit = autoCompleteLimit) => {\n // const queryData = {\n // offset: 0,\n // limit: limit,\n // filters: {\n // [fieldMetadata?.relationModel?.userKeyField?.name]: {\n // '$containsi': query\n // }\n // }\n // };\n\n // const autocompleteQs = qs.stringify(queryData, { encodeValuesOnly: true });\n\n const response = await triggerGetSolidEntities(autocompleteQs);\n const data = response.data;\n\n if (data) {\n const mappedItems = data.records.map((item: any) => ({\n label: item[fieldMetadata?.relationModel?.userKeyField?.name],\n value: item['id'],\n original: item\n }));\n setAutoCompleteItems(mappedItems);\n }\n };\n\n const addNewRelation = (values: any) => {\n const currentData = formik.values[fieldLayoutInfo.attrs.name] \|\| [];\n const jsonValues = Object.fromEntries(values.entries());\n const newItem = {\n label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],\n value: \"new\",\n original: jsonValues,\n };\n\n formik.setFieldValue(fieldLayoutInfo.attrs.name, [...currentData, newItem]);\n\n // Optionally add to autocomplete list\n setAutoCompleteItems((prev: any) => {\n const exists = prev.some((item: any) => item.label === newItem.label);\n return exists ? prev : [...prev, newItem];\n });\n };\n\n return {\n autoCompleteItems,\n fetchRelationEntities,\n addNewRelation\n };\n};\n"]}
1	+ {"version":3,"file":"useRelationEntityHandler.js","sourceRoot":"","sources":["../../../../../../../../src/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport qs from \"qs\";\nimport { createSolidEntityApi } from \"../../../../../../../redux/api/solidEntityApi\";\n\nexport const useRelationEntityHandler = ({ fieldContext, formik, autoCompleteLimit = 1000 }: any) => {\n const fieldMetadata = fieldContext.fieldMetadata;\n const fieldLayoutInfo = fieldContext.field;\n\n const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);\n const { useLazyGetSolidEntitiesQuery } = entityApi;\n const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();\n\n const [autoCompleteItems, setAutoCompleteItems] = useState([]);\n\n const fetchRelationEntities = async (autocompleteQs = \"\", limit = autoCompleteLimit) => {\n // const queryData = {\n // offset: 0,\n // limit: limit,\n // filters: {\n // [fieldMetadata?.relationModel?.userKeyField?.name]: {\n // '$containsi': query\n // }\n // }\n // };\n\n // const autocompleteQs = qs.stringify(queryData, { encodeValuesOnly: true });\n\n const response = await triggerGetSolidEntities(autocompleteQs);\n const data = response.data;\n\n if (data) {\n const mappedItems = data.records.map((item: any) => ({\n label: item[fieldMetadata?.relationModel?.userKeyField?.name],\n value: item['id'],\n original: item\n }));\n setAutoCompleteItems(mappedItems);\n }\n };\n\n const populateFormikWithRelatedEntities = async () => {\n\n /*\n Example:\n * permissions filtered by roles.id = current role id\n /\n\n const relationFieldName =\n fieldContext.fieldMetadata?.relationCoModelFieldName ??\n fieldContext.modelName;\n\n const parentId = fieldContext.data?.id ?? -1;\n\n const queryData = {\n offset: 0,\n limit: autoCompleteLimit,\n filters: {\n $and: [\n {\n [relationFieldName]: {\n id: { $eq: parentId },\n },\n },\n ],\n },\n };\n\n const qsString = qs.stringify(queryData, {\n encodeValuesOnly: true,\n });\n\n const response = await triggerGetSolidEntities(qsString);\n const data = response.data;\n\n if (!data) return;\n\n const mappedItems = data.records.map((item: any) => ({\n label: item[fieldMetadata?.relationModel?.userKeyField?.name],\n value: item.id,\n original: item,\n }));\n\n /\n IMPORTANT:\n * 1. Set checkbox options\n * 2. Set formik selected values (checked state)\n */\n formik.setFieldValue(fieldLayoutInfo.attrs.name, mappedItems);\n };\n\n const addNewRelation = (values: any) => {\n const currentData = formik.values[fieldLayoutInfo.attrs.name] \|\| [];\n const jsonValues = Object.fromEntries(values.entries());\n const newItem = {\n label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],\n value: \"new\",\n original: jsonValues,\n };\n\n formik.setFieldValue(fieldLayoutInfo.attrs.name, [...currentData, newItem]);\n\n // Optionally add to autocomplete list\n setAutoCompleteItems((prev: any) => {\n const exists = prev.some((item: any) => item.label === newItem.label);\n return exists ? prev : [...prev, newItem];\n });\n };\n\n return {\n autoCompleteItems,\n fetchRelationEntities,\n populateFormikWithRelatedEntities,\n addNewRelation\n };\n};\n"]}

package/dist/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts CHANGED Viewed

@@ -38,6 +38,56 @@ export const useRelationEntityHandler = ({ fieldContext, formik, autoCompleteLim
     }
   };
+  const populateFormikWithRelatedEntities = async () => {
+    /**
+     * Example:
+     * permissions filtered by roles.id = current role id
+     */
+    const relationFieldName =
+      fieldContext.fieldMetadata?.relationCoModelFieldName ??
+      fieldContext.modelName;
+    const parentId = fieldContext.data?.id ?? -1;
+    const queryData = {
+      offset: 0,
+      limit: autoCompleteLimit,
+      filters: {
+        $and: [
+          {
+            [relationFieldName]: {
+              id: { $eq: parentId },
+            },
+          },
+        ],
+      },
+    };
+    const qsString = qs.stringify(queryData, {
+      encodeValuesOnly: true,
+    });
+    const response = await triggerGetSolidEntities(qsString);
+    const data = response.data;
+    if (!data) return;
+    const mappedItems = data.records.map((item: any) => ({
+      label: item[fieldMetadata?.relationModel?.userKeyField?.name],
+      value: item.id,
+      original: item,
+    }));
+    /**
+     * IMPORTANT:
+     * 1. Set checkbox options
+     * 2. Set formik selected values (checked state)
+     */
+    formik.setFieldValue(fieldLayoutInfo.attrs.name, mappedItems);
+  };
   const addNewRelation = (values: any) => {
     const currentData = formik.values[fieldLayoutInfo.attrs.name] || [];
     const jsonValues = Object.fromEntries(values.entries());
@@ -59,6 +109,7 @@ export const useRelationEntityHandler = ({ fieldContext, formik, autoCompleteLim
   return {
     autoCompleteItems,
     fetchRelationEntities,
+    populateFormikWithRelatedEntities,
     addNewRelation
   };
 };

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SolidS3FileViewerWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAK5E,OAAO,0BAA0B,CAAC;~~AAElC~~;;GAEG;AACH,eAAO,MAAM,uBAAuB,6BAA8B,yBAAyB,~~4CAiN1F~~,CAAC"}
1	+ {"version":3,"file":"SolidS3FileViewerWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAK5E,OAAO,0BAA0B,CAAC;AAIlC;;GAEG;AACH,eAAO,MAAM,uBAAuB,6BAA8B,yBAAyB,4CAsN1F,CAAC"}

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.js CHANGED Viewed

@@ -35,12 +35,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
 import { useResolveS3UrlMutation } from "../../../../../redux/api/fieldApi";
-import Viewer from "viewerjs";
 import "viewerjs/dist/viewer.css";
+import { SolidImageViewer } from "../../../../../components/core/common/SolidImageViewer";
+import { fetchS3Url } from "../../../../..//helpers/fetchS3Url";
 /**
  * SolidS3FileViewerWidget (PrimeReact version)
  */
@@ -63,39 +64,24 @@ export var SolidS3FileViewerWidget = function (_a) {
     var _f = useState(false), open = _f[0], setOpen = _f[1];
     var _g = useState(false), shouldShowViewer = _g[0], setShouldShowViewer = _g[1];
     var resolveS3Url = useResolveS3UrlMutation()[0];
-    var fetchS3Url = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var result, e_1;
+    var resolveFileUrl = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var options, url;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    console.log("fetch url called");
                     setIsLoading(true);
-                    _a.label = 1;
+                    options = {
+                        s3Key: value,
+                        fileType: fileType,
+                        bucketName: bucketName,
+                        mediaStorageProviderUserKey: mediaStorageProviderUserKey,
+                        isPrivate: isPrivate
+                    };
+                    return [4 /*yield*/, fetchS3Url(resolveS3Url, options)];
                 case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, resolveS3Url({
-                            modelName: fieldContext.modelName,
-                            fieldName: fieldContext.fieldMetadata.name,
-                            s3Key: value,
-                            fileType: fileType,
-                            bucketName: bucketName,
-                            mediaStorageProviderUserKey: mediaStorageProviderUserKey,
-                            isPrivate: isPrivate
-                        }).unwrap()];
-                case 2:
-                    result = _a.sent();
-                    setIsLoading(false);
-                    if (result.statusCode == "200") {
-                        console.log("fetch url success", result.data.url);
-                        return [2 /*return*/, result.data.url];
-                    }
-                    return [3 /*break*/, 4];
-                case 3:
-                    e_1 = _a.sent();
-                    console.error("Failed to resolve S3 URL:", e_1);
+                    url = _a.sent();
                     setIsLoading(false);
-                    return [2 /*return*/, null];
-                case 4: return [2 /*return*/];
+                    return [2 /*return*/, url];
             }
         });
     }); };
@@ -106,7 +92,7 @@ export var SolidS3FileViewerWidget = function (_a) {
                 case 0:
                     if (isLoading)
                         return [2 /*return*/];
-                    return [4 /*yield*/, fetchS3Url()];
+                    return [4 /*yield*/, resolveFileUrl()];
                 case 1:
                     url = _a.sent();
                     if (!url)
@@ -129,7 +115,7 @@ export var SolidS3FileViewerWidget = function (_a) {
                     console.log("isLoading in view", isLoading);
                     if (isLoading)
                         return [2 /*return*/];
-                    return [4 /*yield*/, fetchS3Url()];
+                    return [4 /*yield*/, resolveFileUrl()];
                 case 1:
                     url = _a.sent();
                     console.log("url after fetch success", url);
@@ -151,55 +137,70 @@ export var SolidS3FileViewerWidget = function (_a) {
     var isPDF = fileType === "pdf";
     var isDownloadOnly = ["xlsx", "xls", "csv", "doc", "docx"].includes(fileType);
     // 🔹 Initialize Viewer.js once image exists
-    useEffect(function () {
-        if (imageRef.current && previewUrl && isImage) {
-            // Destroy existing viewer if any
-            if (viewerRef.current) {
-                viewerRef.current.destroy();
-            }
-            // Create new viewer instance
-            viewerRef.current = new Viewer(imageRef.current, {
-                toolbar: {
-                    zoomIn: 1,
-                    zoomOut: 1,
-                    rotateLeft: 1,
-                    rotateRight: 1,
-                    reset: 1,
-                },
-                navbar: false,
-                title: false,
-                transition: true,
-                movable: true,
-                scalable: true,
-                rotatable: true,
-                zoomable: true,
-                zIndex: 9999,
-                // Add hidden event to reset state
-                hidden: function () {
-                    setShouldShowViewer(false);
-                }
-            });
-            console.log("Viewer initialized");
-        }
-        return function () {
-            if (viewerRef.current) {
-                viewerRef.current.destroy();
-                viewerRef.current = null;
-            }
-        };
-    }, [previewUrl, isImage]);
+    // useEffect(() => {
+    //     if (imageRef.current && previewUrl && isImage) {
+    //         // Destroy existing viewer if any
+    //         if (viewerRef.current) {
+    //             viewerRef.current.destroy();
+    //         }
+    //         // Create new viewer instance
+    //         viewerRef.current = new Viewer(imageRef.current, {
+    //             toolbar: {
+    //                 zoomIn: 1,
+    //                 zoomOut: 1,
+    //                 rotateLeft: 1,
+    //                 rotateRight: 1,
+    //                 reset: 1,
+    //             },
+    //             navbar: false,
+    //             title: false,
+    //             transition: true,
+    //             movable: true,
+    //             scalable: true,
+    //             rotatable: true,
+    //             zoomable: true,
+    //             zIndex: 9999,
+    //             // Add hidden event to reset state
+    //             hidden: () => {
+    //                 setShouldShowViewer(false);
+    //             }
+    //         });
+    //         console.log("Viewer initialized");
+    //     }
+    //     return () => {
+    //         if (viewerRef.current) {
+    //             viewerRef.current.destroy();
+    //             viewerRef.current = null;
+    //         }
+    //     };
+    // }, [previewUrl, isImage]);
     // 🔹 Show viewer when shouldShowViewer becomes true
-    useEffect(function () {
-        if (shouldShowViewer && viewerRef.current) {
-            console.log("Showing viewer");
-            viewerRef.current.show();
-        }
-    }, [shouldShowViewer]);
-    return (_jsxs("div", { className: "mt-2 flex flex-col gap-2", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), value ? (_jsxs("div", { className: "flex gap-3 items-center", children: [(isImage || isPDF) && (_jsx(Button, { icon: "pi pi-eye", type: "button", style: { minWidth: 66 }, loading: isLoading, tooltip: value, disabled: isLoading, label: "View ".concat(fileType), size: "small", iconPos: "left", onClick: handleView })), downloadAllowed && (_jsx(Button, { size: "small", type: "button", icon: "pi pi-download", tooltip: "Download ".concat(value === null || value === void 0 ? void 0 : value.split("/").pop()), loading: isLoading, onClick: handleDownload, disabled: isLoading, className: 'solid-icon-button' }))] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "No file uploaded" })), isImage && previewUrl && (_jsx("img", { ref: imageRef, src: previewUrl, alt: value, style: {
-                    position: "absolute",
-                    visibility: "hidden",
-                    width: "1px",
-                    height: "1px"
+    // useEffect(() => {
+    //     if (shouldShowViewer && viewerRef.current) {
+    //         console.log("Showing viewer");
+    //         viewerRef.current.show();
+    //     }
+    // }, [shouldShowViewer]);
+    return (_jsxs("div", { className: "mt-2 flex flex-col gap-2", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), value ? (_jsxs("div", { className: "flex gap-3 items-center", children: [(isImage || isPDF) && (_jsx(Button, { icon: "pi pi-eye", type: "button", style: { minWidth: 66 }, loading: isLoading, tooltip: value, disabled: isLoading, label: "View ".concat(fileType), size: "small", iconPos: "left", onClick: handleView })), downloadAllowed && (_jsx(Button, { size: "small", type: "button", icon: "pi pi-download", tooltip: "Download ".concat(value === null || value === void 0 ? void 0 : value.split("/").pop()), loading: isLoading, onClick: handleDownload, disabled: isLoading, className: 'solid-icon-button' }))] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "No file uploaded" })), isImage && previewUrl && (
+            // <img
+            //     ref={imageRef}
+            //     src={previewUrl}
+            //     alt={value}
+            //     style={{
+            //         position: "absolute",
+            //         visibility: "hidden",
+            //         width: "1px",
+            //         height: "1px"
+            //     }}
+            // />
+            _jsx(SolidImageViewer, { images: [previewUrl], open: shouldShowViewer, onClose: function () { return setShouldShowViewer(false); }, viewerOptions: {
+                    toolbar: {
+                        zoomIn: 1,
+                        zoomOut: 1,
+                        rotateLeft: 1,
+                        rotateRight: 1,
+                        reset: 1,
+                    },
                 } })), _jsx(Dialog, { header: value, visible: open, modal: true, style: { width: "80vw", maxHeight: "90vh" }, onHide: function () { return setOpen(false); }, headerClassName: 'p-1 form-wrapper-title', contentClassName: 'p-0', contentStyle: { borderRadius: 6 }, children: previewUrl && isPDF && (_jsx("div", { style: {
                         width: "100%",
                         height: "75vh",

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SolidS3FileViewerWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useEffect, useRef, useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { Button } from \"primereact/button\";\nimport { Dialog } from \"primereact/dialog\";\nimport { useResolveS3UrlMutation } from \"../../../../../redux/api/fieldApi\";\nimport Viewer from \"viewerjs\";\nimport \"viewerjs/dist/viewer.css\";\n\n/*\n SolidS3FileViewerWidget (PrimeReact version)\n /\nexport const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n const fieldMetadata = fieldContext.fieldMetadata;\n const fieldLayoutInfo = fieldContext.field;\n const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n const value = formik.values[fieldLayoutInfo.attrs.name];\n const fileType = fieldLayoutInfo.attrs.fileType?.toLowerCase();\n const downloadAllowed = fieldLayoutInfo.attrs.downloadAllowed !== false;\n const bucketName = fieldLayoutInfo.attrs.bucketName;\n const mediaStorageProviderUserKey = fieldLayoutInfo.attrs.mediaStorageProviderUserKey;\n const isPrivate = fieldLayoutInfo.attrs.isPrivate ? fieldLayoutInfo.attrs.isPrivate : \"false\";\n\n const imageRef = useRef<HTMLImageElement \| null>(null);\n const viewerRef = useRef<Viewer \| null>(null);\n\n const [previewUrl, setPreviewUrl] = useState<string>(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [open, setOpen] = useState(false);\n const [shouldShowViewer, setShouldShowViewer] = useState(false);\n\n const [resolveS3Url] = useResolveS3UrlMutation();\n\n const fetchS3Url = async () => {\n console.log(\"fetch url called\");\n setIsLoading(true);\n try {\n const result = await resolveS3Url({\n modelName: fieldContext.modelName,\n fieldName: fieldContext.fieldMetadata.name,\n s3Key: value,\n fileType: fileType,\n bucketName: bucketName,\n mediaStorageProviderUserKey: mediaStorageProviderUserKey,\n isPrivate: isPrivate\n }).unwrap();\n\n setIsLoading(false);\n if (result.statusCode == \"200\") {\n console.log(\"fetch url success\", result.data.url);\n return result.data.url;\n }\n } catch (e) {\n console.error(\"Failed to resolve S3 URL:\", e);\n setIsLoading(false);\n return null;\n }\n };\n\n const handleDownload = async () => {\n if (isLoading) return;\n const url = await fetchS3Url();\n if (!url) return;\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = value?.split(\"/\").pop() \|\| \"file\";\n a.target = \"_blank\";\n a.rel = \"noopener noreferrer\";\n a.click();\n };\n\n const handleView = async () => {\n console.log(\"isLoading in view\", isLoading);\n if (isLoading) return;\n \n const url = await fetchS3Url();\n console.log(\"url after fetch success\", url);\n if (!url) return;\n \n setPreviewUrl(url);\n \n if (isImage) {\n // Trigger viewer to show after state update\n setShouldShowViewer(true);\n } else {\n setOpen(true);\n }\n };\n\n const isImage = [\"jpeg\", \"jpg\", \"png\", \"gif\", \"webp\"].includes(fileType);\n const isPDF = fileType === \"pdf\";\n const isDownloadOnly = [\"xlsx\", \"xls\", \"csv\", \"doc\", \"docx\"].includes(fileType);\n\n // 🔹 Initialize Viewer.js once image exists\n useEffect(() => {\n if (imageRef.current && previewUrl && isImage) {\n // Destroy existing viewer if any\n if (viewerRef.current) {\n viewerRef.current.destroy();\n }\n\n // Create new viewer instance\n viewerRef.current = new Viewer(imageRef.current, {\n toolbar: {\n zoomIn: 1,\n zoomOut: 1,\n rotateLeft: 1,\n rotateRight: 1,\n reset: 1,\n },\n navbar: false,\n title: false,\n transition: true,\n movable: true,\n scalable: true,\n rotatable: true,\n zoomable: true,\n zIndex:9999,\n // Add hidden event to reset state\n hidden: () => {\n setShouldShowViewer(false);\n }\n });\n\n console.log(\"Viewer initialized\");\n }\n\n return () => {\n if (viewerRef.current) {\n viewerRef.current.destroy();\n viewerRef.current = null;\n }\n };\n }, [previewUrl, isImage]);\n\n // 🔹 Show viewer when shouldShowViewer becomes true\n useEffect(() => {\n if (shouldShowViewer && viewerRef.current) {\n console.log(\"Showing viewer\");\n viewerRef.current.show();\n }\n }, [shouldShowViewer]);\n\n return (\n <div className=\"mt-2 flex flex-col gap-2\">\n <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n\n {value ? (\n <div className=\"flex gap-3 items-center\">\n {(isImage \|\| isPDF) && (\n <Button\n icon=\"pi pi-eye\"\n type=\"button\"\n style={{ minWidth: 66 }}\n loading={isLoading}\n tooltip={value}\n disabled={isLoading}\n label={`View ${fileType}`}\n size=\"small\"\n iconPos=\"left\"\n onClick={handleView}\n />\n )}\n {downloadAllowed && (\n <Button\n size=\"small\"\n type=\"button\"\n icon=\"pi pi-download\"\n tooltip={`Download ${value?.split(\"/\").pop()}`}\n loading={isLoading}\n onClick={handleDownload}\n disabled={isLoading}\n className='solid-icon-button' />\n )}\n </div>\n ) : (\n <p className=\"text-sm text-muted-foreground\">No file uploaded</p>\n )}\n\n {/ Hidden image for Viewer.js - keep visibility hidden instead of display none */}\n {isImage && previewUrl && (\n <img\n ref={imageRef}\n src={previewUrl}\n alt={value}\n style={{ \n position: \"absolute\",\n visibility: \"hidden\",\n width: \"1px\",\n height: \"1px\"\n }}\n />\n )}\n\n <Dialog\n header={value}\n visible={open}\n modal\n style={{ width: \"80vw\", maxHeight: \"90vh\" }}\n onHide={() => setOpen(false)}\n headerClassName='p-1 form-wrapper-title'\n contentClassName='p-0'\n contentStyle={{ borderRadius: 6 }}\n >\n {previewUrl && isPDF && (\n <div\n style={{\n width: \"100%\",\n height: \"75vh\",\n overflow: \"hidden\",\n }}\n >\n <iframe\n src={previewUrl}\n style={{ width: \"100%\", height: \"100%\", border: \"none\" }}\n />\n </div>\n )}\n </Dialog>\n </div>\n );\n};"]}
1	+ {"version":3,"file":"SolidS3FileViewerWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAE5E,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,UAAU,EAA0B,MAAM,oCAAoC,CAAC;AAExF;;GAEG;AACH,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,EAAmD;;QAAjD,MAAM,YAAA,EAAE,YAAY,kBAAA;IAC1D,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IACjD,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAC3C,IAAM,UAAU,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC,WAAW,CAAC;IAC5E,IAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxD,IAAM,QAAQ,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,QAAQ,0CAAE,WAAW,EAAE,CAAC;IAC/D,IAAM,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,eAAe,KAAK,KAAK,CAAC;IACxE,IAAM,UAAU,GAAG,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC;IACpD,IAAM,2BAA2B,GAAG,eAAe,CAAC,KAAK,CAAC,2BAA2B,CAAC;IACtF,IAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAE9F,IAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACvD,IAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAExC,IAAA,KAA8B,QAAQ,CAAS,EAAE,CAAC,EAAjD,UAAU,QAAA,EAAE,aAAa,QAAwB,CAAC;IACnD,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAC5C,IAAA,KAAkB,QAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAC;IAClC,IAAA,KAA0C,QAAQ,CAAC,KAAK,CAAC,EAAxD,gBAAgB,QAAA,EAAE,mBAAmB,QAAmB,CAAC;IAEzD,IAAA,YAAY,GAAI,uBAAuB,EAAE,GAA7B,CAA8B;IAEjD,IAAM,cAAc,GAAG;;;;;oBACnB,YAAY,CAAC,IAAI,CAAC,CAAC;oBAEb,OAAO,GAAsB;wBAC/B,KAAK,EAAE,KAAK;wBACZ,QAAQ,EAAE,QAAQ;wBAClB,UAAU,EAAE,UAAU;wBACtB,2BAA2B,EAAE,2BAA2B;wBACxD,SAAS,EAAE,SAAS;qBACvB,CAAC;oBAEU,qBAAM,UAAU,CAAC,YAAY,EAAE,OAAO,CAAC,EAAA;;oBAA7C,GAAG,GAAG,SAAuC;oBACnD,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,sBAAO,GAAG,EAAC;;;SACd,CAAC;IAEF,IAAM,cAAc,GAAG;;;;;oBACnB,IAAI,SAAS;wBAAE,sBAAO;oBACV,qBAAM,cAAc,EAAE,EAAA;;oBAA5B,GAAG,GAAG,SAAsB;oBAClC,IAAI,CAAC,GAAG;wBAAE,sBAAO;oBACX,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;oBACtC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC;oBACb,CAAC,CAAC,QAAQ,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAI,MAAM,CAAC;oBAC/C,CAAC,CAAC,MAAM,GAAG,QAAQ,CAAC;oBACpB,CAAC,CAAC,GAAG,GAAG,qBAAqB,CAAC;oBAC9B,CAAC,CAAC,KAAK,EAAE,CAAC;;;;SACb,CAAC;IAEF,IAAM,UAAU,GAAG;;;;;oBACf,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;oBAC5C,IAAI,SAAS;wBAAE,sBAAO;oBAEV,qBAAM,cAAc,EAAE,EAAA;;oBAA5B,GAAG,GAAG,SAAsB;oBAClC,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,GAAG,CAAC,CAAC;oBAC5C,IAAI,CAAC,GAAG;wBAAE,sBAAO;oBAEjB,aAAa,CAAC,GAAG,CAAC,CAAC;oBAEnB,IAAI,OAAO,EAAE;wBACT,4CAA4C;wBAC5C,mBAAmB,CAAC,IAAI,CAAC,CAAC;qBAC7B;yBAAM;wBACH,OAAO,CAAC,IAAI,CAAC,CAAC;qBACjB;;;;SACJ,CAAC;IAEF,IAAM,OAAO,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACzE,IAAM,KAAK,GAAG,QAAQ,KAAK,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEhF,4CAA4C;IAC5C,oBAAoB;IACpB,uDAAuD;IACvD,4CAA4C;IAC5C,mCAAmC;IACnC,2CAA2C;IAC3C,YAAY;IAEZ,wCAAwC;IACxC,6DAA6D;IAC7D,yBAAyB;IACzB,6BAA6B;IAC7B,8BAA8B;IAC9B,iCAAiC;IACjC,kCAAkC;IAClC,4BAA4B;IAC5B,iBAAiB;IACjB,6BAA6B;IAC7B,4BAA4B;IAC5B,gCAAgC;IAChC,6BAA6B;IAC7B,8BAA8B;IAC9B,+BAA+B;IAC/B,8BAA8B;IAC9B,4BAA4B;IAC5B,iDAAiD;IACjD,8BAA8B;IAC9B,8CAA8C;IAC9C,gBAAgB;IAChB,cAAc;IAEd,6CAA6C;IAC7C,QAAQ;IAER,qBAAqB;IACrB,mCAAmC;IACnC,2CAA2C;IAC3C,wCAAwC;IACxC,YAAY;IACZ,SAAS;IACT,6BAA6B;IAE7B,oDAAoD;IACpD,oBAAoB;IACpB,mDAAmD;IACnD,yCAAyC;IACzC,oCAAoC;IACpC,QAAQ;IACR,0BAA0B;IAE1B,OAAO,CACH,eAAK,SAAS,EAAC,0BAA0B,aACrC,YAAG,SAAS,EAAC,kCAAkC,YAAE,UAAU,GAAK,EAE/D,KAAK,CAAC,CAAC,CAAC,CACL,eAAK,SAAS,EAAC,yBAAyB,aACnC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CACnB,KAAC,MAAM,IACH,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,EACvB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,eAAQ,QAAQ,CAAE,EACzB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,UAAU,GACrB,CACL,EACA,eAAe,IAAI,CAChB,KAAC,MAAM,IACH,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,mBAAY,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,CAAE,EAC9C,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAC,mBAAmB,GAAG,CACvC,IACC,CACT,CAAC,CAAC,CAAC,CACA,YAAG,SAAS,EAAC,+BAA+B,iCAAqB,CACpE,EAGA,OAAO,IAAI,UAAU,IAAI;YACtB,OAAO;YACP,qBAAqB;YACrB,uBAAuB;YACvB,kBAAkB;YAClB,eAAe;YACf,gCAAgC;YAChC,gCAAgC;YAChC,wBAAwB;YACxB,wBAAwB;YACxB,SAAS;YACT,KAAK;YACL,KAAC,gBAAgB,IACb,MAAM,EAAE,CAAC,UAAU,CAAC,EACpB,IAAI,EAAE,gBAAgB,EACtB,OAAO,EAAE,cAAM,OAAA,mBAAmB,CAAC,KAAK,CAAC,EAA1B,CAA0B,EACzC,aAAa,EAAE;oBACX,OAAO,EAAE;wBACL,MAAM,EAAE,CAAC;wBACT,OAAO,EAAE,CAAC;wBACV,UAAU,EAAE,CAAC;wBACb,WAAW,EAAE,CAAC;wBACd,KAAK,EAAE,CAAC;qBACX;iBACJ,GACH,CAEL,EAED,KAAC,MAAM,IACH,MAAM,EAAE,KAAK,EACb,OAAO,EAAE,IAAI,EACb,KAAK,QACL,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAC3C,MAAM,EAAE,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,EAC5B,eAAe,EAAC,wBAAwB,EACxC,gBAAgB,EAAC,KAAK,EACtB,YAAY,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,YAEhC,UAAU,IAAI,KAAK,IAAI,CACpB,cACI,KAAK,EAAE;wBACH,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,QAAQ,EAAE,QAAQ;qBACrB,YAED,iBACI,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAC1D,GACA,CACT,GACI,IACP,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["\nimport { useRef, useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { Button } from \"primereact/button\";\nimport { Dialog } from \"primereact/dialog\";\nimport { useResolveS3UrlMutation } from \"../../../../../redux/api/fieldApi\";\nimport Viewer from \"viewerjs\";\nimport \"viewerjs/dist/viewer.css\";\nimport { SolidImageViewer } from \"../../../../../components/core/common/SolidImageViewer\";\nimport { fetchS3Url, type FetchS3UrlOptions } from \"../../../../..//helpers/fetchS3Url\";\n\n/*\n SolidS3FileViewerWidget (PrimeReact version)\n /\nexport const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n const fieldMetadata = fieldContext.fieldMetadata;\n const fieldLayoutInfo = fieldContext.field;\n const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n const value = formik.values[fieldLayoutInfo.attrs.name];\n const fileType = fieldLayoutInfo.attrs.fileType?.toLowerCase();\n const downloadAllowed = fieldLayoutInfo.attrs.downloadAllowed !== false;\n const bucketName = fieldLayoutInfo.attrs.bucketName;\n const mediaStorageProviderUserKey = fieldLayoutInfo.attrs.mediaStorageProviderUserKey;\n const isPrivate = fieldLayoutInfo.attrs.isPrivate ? fieldLayoutInfo.attrs.isPrivate : \"false\";\n\n const imageRef = useRef<HTMLImageElement \| null>(null);\n const viewerRef = useRef<Viewer \| null>(null);\n\n const [previewUrl, setPreviewUrl] = useState<string>(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [open, setOpen] = useState(false);\n const [shouldShowViewer, setShouldShowViewer] = useState(false);\n\n const [resolveS3Url] = useResolveS3UrlMutation();\n\n const resolveFileUrl = async () => {\n setIsLoading(true);\n\n const options: FetchS3UrlOptions = {\n s3Key: value,\n fileType: fileType,\n bucketName: bucketName,\n mediaStorageProviderUserKey: mediaStorageProviderUserKey,\n isPrivate: isPrivate\n };\n\n const url = await fetchS3Url(resolveS3Url, options);\n setIsLoading(false);\n return url;\n };\n\n const handleDownload = async () => {\n if (isLoading) return;\n const url = await resolveFileUrl();\n if (!url) return;\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = value?.split(\"/\").pop() \|\| \"file\";\n a.target = \"_blank\";\n a.rel = \"noopener noreferrer\";\n a.click();\n };\n\n const handleView = async () => {\n console.log(\"isLoading in view\", isLoading);\n if (isLoading) return;\n\n const url = await resolveFileUrl();\n console.log(\"url after fetch success\", url);\n if (!url) return;\n\n setPreviewUrl(url);\n\n if (isImage) {\n // Trigger viewer to show after state update\n setShouldShowViewer(true);\n } else {\n setOpen(true);\n }\n };\n\n const isImage = [\"jpeg\", \"jpg\", \"png\", \"gif\", \"webp\"].includes(fileType);\n const isPDF = fileType === \"pdf\";\n const isDownloadOnly = [\"xlsx\", \"xls\", \"csv\", \"doc\", \"docx\"].includes(fileType);\n\n // 🔹 Initialize Viewer.js once image exists\n // useEffect(() => {\n // if (imageRef.current && previewUrl && isImage) {\n // // Destroy existing viewer if any\n // if (viewerRef.current) {\n // viewerRef.current.destroy();\n // }\n\n // // Create new viewer instance\n // viewerRef.current = new Viewer(imageRef.current, {\n // toolbar: {\n // zoomIn: 1,\n // zoomOut: 1,\n // rotateLeft: 1,\n // rotateRight: 1,\n // reset: 1,\n // },\n // navbar: false,\n // title: false,\n // transition: true,\n // movable: true,\n // scalable: true,\n // rotatable: true,\n // zoomable: true,\n // zIndex: 9999,\n // // Add hidden event to reset state\n // hidden: () => {\n // setShouldShowViewer(false);\n // }\n // });\n\n // console.log(\"Viewer initialized\");\n // }\n\n // return () => {\n // if (viewerRef.current) {\n // viewerRef.current.destroy();\n // viewerRef.current = null;\n // }\n // };\n // }, [previewUrl, isImage]);\n\n // 🔹 Show viewer when shouldShowViewer becomes true\n // useEffect(() => {\n // if (shouldShowViewer && viewerRef.current) {\n // console.log(\"Showing viewer\");\n // viewerRef.current.show();\n // }\n // }, [shouldShowViewer]);\n\n return (\n <div className=\"mt-2 flex flex-col gap-2\">\n <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n\n {value ? (\n <div className=\"flex gap-3 items-center\">\n {(isImage \|\| isPDF) && (\n <Button\n icon=\"pi pi-eye\"\n type=\"button\"\n style={{ minWidth: 66 }}\n loading={isLoading}\n tooltip={value}\n disabled={isLoading}\n label={`View ${fileType}`}\n size=\"small\"\n iconPos=\"left\"\n onClick={handleView}\n />\n )}\n {downloadAllowed && (\n <Button\n size=\"small\"\n type=\"button\"\n icon=\"pi pi-download\"\n tooltip={`Download ${value?.split(\"/\").pop()}`}\n loading={isLoading}\n onClick={handleDownload}\n disabled={isLoading}\n className='solid-icon-button' />\n )}\n </div>\n ) : (\n <p className=\"text-sm text-muted-foreground\">No file uploaded</p>\n )}\n\n {/ Hidden image for Viewer.js - keep visibility hidden instead of display none */}\n {isImage && previewUrl && (\n // <img\n // ref={imageRef}\n // src={previewUrl}\n // alt={value}\n // style={{\n // position: \"absolute\",\n // visibility: \"hidden\",\n // width: \"1px\",\n // height: \"1px\"\n // }}\n // />\n <SolidImageViewer\n images={[previewUrl]}\n open={shouldShowViewer}\n onClose={() => setShouldShowViewer(false)}\n viewerOptions={{\n toolbar: {\n zoomIn: 1,\n zoomOut: 1,\n rotateLeft: 1,\n rotateRight: 1,\n reset: 1,\n },\n }}\n />\n\n )}\n\n <Dialog\n header={value}\n visible={open}\n modal\n style={{ width: \"80vw\", maxHeight: \"90vh\" }}\n onHide={() => setOpen(false)}\n headerClassName='p-1 form-wrapper-title'\n contentClassName='p-0'\n contentStyle={{ borderRadius: 6 }}\n >\n {previewUrl && isPDF && (\n <div\n style={{\n width: \"100%\",\n height: \"75vh\",\n overflow: \"hidden\",\n }}\n >\n <iframe\n src={previewUrl}\n style={{ width: \"100%\", height: \"100%\", border: \"none\" }}\n />\n </div>\n )}\n </Dialog>\n </div>\n );\n};\n"]}