@solidxai/core-ui 0.1.2 → 0.1.3

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx

@@ -1,11 +1,13 @@
 
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
 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, type FetchS3UrlOptions } from "../../../../..//helpers/fetchS3Url";
 
 /**
  * SolidS3FileViewerWidget (PrimeReact version)
@@ -31,35 +33,25 @@ export const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormField
 
     const [resolveS3Url] = useResolveS3UrlMutation();
 
-    const fetchS3Url = async () => {
-        console.log("fetch url called");
+    const resolveFileUrl = async () => {
         setIsLoading(true);
-        try {
-            const result = await resolveS3Url({
-                modelName: fieldContext.modelName,
-                fieldName: fieldContext.fieldMetadata.name,
-                s3Key: value,
-                fileType: fileType,
-                bucketName: bucketName,
-                mediaStorageProviderUserKey: mediaStorageProviderUserKey,
-                isPrivate: isPrivate
-            }).unwrap();
-
-            setIsLoading(false);
-            if (result.statusCode == "200") {
-                console.log("fetch url success", result.data.url);
-                return result.data.url;
-            }
-        } catch (e) {
-            console.error("Failed to resolve S3 URL:", e);
-            setIsLoading(false);
-            return null;
-        }
+
+        const options: FetchS3UrlOptions = {
+            s3Key: value,
+            fileType: fileType,
+            bucketName: bucketName,
+            mediaStorageProviderUserKey: mediaStorageProviderUserKey,
+            isPrivate: isPrivate
+        };
+
+        const url = await fetchS3Url(resolveS3Url, options);
+        setIsLoading(false);
+        return url;
     };
 
     const handleDownload = async () => {
         if (isLoading) return;
-        const url = await fetchS3Url();
+        const url = await resolveFileUrl();
         if (!url) return;
         const a = document.createElement("a");
         a.href = url;
@@ -72,13 +64,13 @@ export const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormField
     const handleView = async () => {
         console.log("isLoading in view", isLoading);
         if (isLoading) return;
-        
-        const url = await fetchS3Url();
+
+        const url = await resolveFileUrl();
         console.log("url after fetch success", url);
         if (!url) return;
-        
+
         setPreviewUrl(url);
-        
+
         if (isImage) {
             // Trigger viewer to show after state update
             setShouldShowViewer(true);
@@ -92,54 +84,54 @@ export const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormField
     const isDownloadOnly = ["xlsx", "xls", "csv", "doc", "docx"].includes(fileType);
 
     // 🔹 Initialize Viewer.js once image exists
-    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]);
+    // 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(() => {
-        if (shouldShowViewer && viewerRef.current) {
-            console.log("Showing viewer");
-            viewerRef.current.show();
-        }
-    }, [shouldShowViewer]);
+    // useEffect(() => {
+    //     if (shouldShowViewer && viewerRef.current) {
+    //         console.log("Showing viewer");
+    //         viewerRef.current.show();
+    //     }
+    // }, [shouldShowViewer]);
 
     return (
         <div className="mt-2 flex flex-col gap-2">
@@ -179,17 +171,32 @@ export const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormField
 
             {/* Hidden image for Viewer.js - keep visibility hidden instead of display none */}
             {isImage && previewUrl && (
-                <img
-                    ref={imageRef}
-                    src={previewUrl}
-                    alt={value}
-                    style={{ 
-                        position: "absolute",
-                        visibility: "hidden",
-                        width: "1px",
-                        height: "1px"
+                // <img
+                //     ref={imageRef}
+                //     src={previewUrl}
+                //     alt={value}
+                //     style={{
+                //         position: "absolute",
+                //         visibility: "hidden",
+                //         width: "1px",
+                //         height: "1px"
+                //     }}
+                // />
+                <SolidImageViewer
+                    images={[previewUrl]}
+                    open={shouldShowViewer}
+                    onClose={() => setShouldShowViewer(false)}
+                    viewerOptions={{
+                        toolbar: {
+                            zoomIn: 1,
+                            zoomOut: 1,
+                            rotateLeft: 1,
+                            rotateRight: 1,
+                            reset: 1,
+                        },
                     }}
                 />
+
             )}
 
             <Dialog
@@ -219,4 +226,4 @@ export const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormField
             </Dialog>
         </div>
     );
-};
+};

package/dist/components/core/list/SolidListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidListView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/list/SolidListView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgF,MAAM,OAAO,CAAC;AAwCrG,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AA0BxD,eAAO,MAAM,wBAAwB,WAgBpC,CAAC;AAGF,eAAO,MAAM,6BAA6B,mBAgBzC,CAAC;AAEF,eAAO,MAAM,wBAAwB,gBAAiB,MAAM,kBAU3D,CAAC;AAGF,eAAO,MAAM,6BAA6B,0BAAsB,MAAM,kBAUrE,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,YAAY,CAAC,EAAE,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;;OAKG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;;;;;OAMG;IACH,WAAW,EAAE,CAAC,MAAM,EAAE;QACpB,uBAAuB,CAAC,EAAE,GAAG,CAAC;QAC9B,gBAAgB,CAAC,EAAE,GAAG,CAAC;QACvB,sBAAsB,CAAC,EAAE,GAAG,CAAC;QAC7B,2BAA2B,CAAC,EAAE,GAAG,CAAC;KACnC,KAAK,IAAI,CAAC;IACX;;;;OAIG;IACH,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,OAAO,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpE;;;OAGG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,QAAQ,EAAE,MAAM;QACd,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC;QACtB,OAAO,EAAE,GAAG,CAAC;QACb,gBAAgB,EAAE,GAAG,CAAC;QACtB,QAAQ,EAAE,GAAG,EAAE,CAAC;QAChB,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,aAAa,iGAg2DxB,CAAC"}
+{"version":3,"file":"SolidListView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/list/SolidListView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgF,MAAM,OAAO,CAAC;AAwCrG,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AA0BxD,eAAO,MAAM,wBAAwB,WAgBpC,CAAC;AAGF,eAAO,MAAM,6BAA6B,mBAgBzC,CAAC;AAEF,eAAO,MAAM,wBAAwB,gBAAiB,MAAM,kBAU3D,CAAC;AAGF,eAAO,MAAM,6BAA6B,0BAAsB,MAAM,kBAUrE,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,YAAY,CAAC,EAAE,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;;OAKG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;;;;;OAMG;IACH,WAAW,EAAE,CAAC,MAAM,EAAE;QACpB,uBAAuB,CAAC,EAAE,GAAG,CAAC;QAC9B,gBAAgB,CAAC,EAAE,GAAG,CAAC;QACvB,sBAAsB,CAAC,EAAE,GAAG,CAAC;QAC7B,2BAA2B,CAAC,EAAE,GAAG,CAAC;KACnC,KAAK,IAAI,CAAC;IACX;;;;OAIG;IACH,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,OAAO,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpE;;;OAGG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,QAAQ,EAAE,MAAM;QACd,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC;QACtB,OAAO,EAAE,GAAG,CAAC;QACb,gBAAgB,EAAE,GAAG,CAAC;QACtB,QAAQ,EAAE,GAAG,EAAE,CAAC;QAChB,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,aAAa,iGAk2DxB,CAAC"}

package/dist/components/core/list/SolidListView.js

@@ -565,8 +565,10 @@ export var SolidListView = forwardRef(function (params, ref) {
                 setToPopulateMedia(populateMedia);
                 setFirst(0);
             }
+            //below line was added to handle state stale issue when we converted boilerplate to vite 
+            //since now we dont need it becuase our component is remounted on every router change
             setFilters(params.customFilter || { $and: [] });
-            setFilterPredicates(null);
+            //setFilterPredicates(null);
             setSelectedRecords([]);
             setSelectedRecoverRecords([]);
             setQueryDataLoaded(true);
@@ -650,7 +652,7 @@ export var SolidListView = forwardRef(function (params, ref) {
         latestFilterPredicatesRef.current = filterPredicates;
     }, [filterPredicates]);
     useEffect(function () {
-        console.log("useEffect: [first- ".concat(first, ", rows- ").concat(rows, ", sortField- ").concat(sortField, ", sortOrder- ").concat(sortOrder, ", showArchived- ").concat(showArchived, ", toPopulate- ").concat(toPopulate, ", toPopulateMedia- ").concat(toPopulateMedia, ", queryDataLoaded- ").concat(queryDataLoaded, "]"));
+        console.log("useEffect: [first- ".concat(first, ", rows- ").concat(rows, ", sortField- ").concat(sortField, ", sortOrder- ").concat(sortOrder, ", showArchived- ").concat(showArchived, ", toPopulate- ").concat(toPopulate, ", toPopulateMedia- ").concat(toPopulateMedia, ", queryDataLoaded- ").concat(queryDataLoaded, ", filterPredicates- ").concat(filterPredicates, "]"));
         if (queryDataLoaded && filters && (filterPredicates || params.embeded == true)) {
             setQueryString();
         }
@@ -663,7 +665,8 @@ export var SolidListView = forwardRef(function (params, ref) {
         showArchived,
         toPopulate,
         toPopulateMedia,
-        queryDataLoaded
+        queryDataLoaded,
+        filterPredicates
     ]);
     // Handle pagination event.
     var onPageChange = function (event) {
@@ -794,7 +797,6 @@ export var SolidListView = forwardRef(function (params, ref) {
         latestFilterPredicatesRef.current = updatedFilterPredicates;
         // Then update state
         setFilters(updatedFilter);
-        setPersistFilter(persistFilter);
         setFilterPredicates(updatedFilterPredicates);
         // Force synchronous state updates
     };