npm - @solidxai/core-ui - Versions diffs - 0.1.13-beta.1 → 0.1.13-beta.3 - Mend

@solidxai/core-ui 0.1.13-beta.1 → 0.1.13-beta.3

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 (94) hide show

package/dist/components/core/list/SolidListView.tsx CHANGED Viewed

@@ -518,7 +518,7 @@ export const SolidListView = forwardRef<SolidListViewHandle, SolidListViewParams
   const [listViewRowActionData, setListRowActionData] = useState<any>();
   // Get the list view data.
-  const [triggerGetSolidEntities, { data: solidEntityListViewData, isLoading, error },] = useLazyGetSolidEntitiesQuery();
+  const [triggerGetSolidEntities, { data: solidEntityListViewData, isLoading,isFetching: isListViewFetching, error }] = useLazyGetSolidEntitiesQuery();
   const [
     triggerRecoverSolidEntitiesById,
@@ -1248,6 +1248,7 @@ export const SolidListView = forwardRef<SolidListViewHandle, SolidListViewParams
   const isListViewEmptyWithoutFilters =
     !loading &&
     !isLoading &&
+    !isListViewFetching &&
     listViewData.length === 0 &&
     !hasAppliedFilterValues &&
     !hasFilterPredicatesApplied;
@@ -1257,12 +1258,12 @@ export const SolidListView = forwardRef<SolidListViewHandle, SolidListViewParams
       ? "Deleting..."
       : recoverByIdIsLoading || recoverByIsLoading
         ? "Recovering..."
-        : loading || isLoading || solidListViewMetaDataIsLoading || !queryDataLoaded
+        : loading || isLoading || isListViewFetching || solidListViewMetaDataIsLoading || !queryDataLoaded
           ? "Loading..."
           : null;
   const showListBodyLoadingPlaceholder =
-    (loading || isLoading || solidListViewMetaDataIsLoading || !queryDataLoaded) &&
+    (loading || isLoading || isListViewFetching || solidListViewMetaDataIsLoading || !queryDataLoaded) &&
     listViewData.length === 0 &&
     params.embeded === false &&
     viewMode !== "view";

package/dist/components/core/list/columns/SolidMediaMultipleColumn.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SolidMediaMultipleColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/columns/SolidMediaMultipleColumn.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;~~AAsG9E~~,QAAA,MAAM,wBAAwB,uFAAwF,yBAAyB,4CAmC9I,CAAC;AAEF,eAAe,wBAAwB,CAAC;AAGxC,eAAO,MAAM,8BAA8B,iEAAkE,8BAA8B,~~mDAgJ1I~~,CAAC"}
1	+ {"version":3,"file":"SolidMediaMultipleColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/columns/SolidMediaMultipleColumn.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAqF9E,QAAA,MAAM,wBAAwB,uFAAwF,yBAAyB,4CAmC9I,CAAC;AAEF,eAAe,wBAAwB,CAAC;AAGxC,eAAO,MAAM,8BAA8B,iEAAkE,8BAA8B,mDAmI1I,CAAC"}

package/dist/components/core/list/columns/SolidMediaMultipleColumn.js CHANGED Viewed

@@ -11,57 +11,35 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Download, Volume2 } from "lucide-react";
+import { Volume2 } from "lucide-react";
 import { Column } from "../SolidDataTable";
 import { getExtensionComponent } from '../../../../helpers/registry';
 import { FileReaderExt } from '../../../../components/common/FileReaderExt';
-import { SolidButton, SolidDialog } from "../../../shad-cn-ui";
+import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogHeader, SolidDialogTitle, SolidIcon } from "../../../shad-cn-ui";
 import { SolidFileTypeIcon } from '../../../../helpers/fileTypeIcon';
-var getCleanUrl = function (url) { return url.split("?")[0]; };
-var isImageFile = function (url) { return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(getCleanUrl(url)); };
-var isVideoFile = function (url) { return /\.(mp4|webm|ogg)$/i.test(getCleanUrl(url)); };
-var isAudioFile = function (url) { return /\.(mp3|wav|ogg)$/i.test(getCleanUrl(url)); };
-var isDocumentType = function (url) {
-    var _a;
-    var ext = (_a = getCleanUrl(url).split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    return ext ? downloadOnlyExt.includes(ext) : false;
-};
-var downloadOnlyExt = [
-    "txt", "zip", "rar",
-    "doc", "docx",
-    "xls", "xlsx",
-    "ppt", "pptx",
-    "pdf", "csv"
-];
-var downloadFile = function (url, name) {
-    if (name === void 0) { name = ""; }
-    var link = document.createElement("a");
-    link.href = url;
-    link.download = name;
-    link.target = "_blank";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-};
+import { getMediaPreviewKind, isLightboxMediaKind } from '../../../../helpers/mediaType';
+import { openMediaInNewTab } from '../../../../helpers/mediaUrl';
+import { downloadMediaFile } from '../../../../helpers/downloadMediaFile';
+import styles from "../../form/fields/solidFields.module.css";
 // Thumbnail preview component
 var MediaPreview = function (_a) {
-    var src = _a.src, onClick = _a.onClick;
+    var src = _a.src, fileName = _a.fileName, previewKind = _a.previewKind, onClick = _a.onClick;
     var _b = useState(false), isBroken = _b[0], setIsBroken = _b[1];
     var handleClick = function (event) {
         onClick(event);
     };
     if (!isBroken) {
-        if (isImageFile(src)) {
+        if (previewKind === "image") {
             return (_jsx("img", { src: src, alt: "media", className: "rounded shadow-md", width: 40, height: 40, style: { objectFit: "cover" }, onError: function () { return setIsBroken(true); }, onClick: handleClick }));
         }
-        if (isVideoFile(src)) {
+        if (previewKind === "video") {
             return (_jsx("video", { src: src, width: 40, height: 40, className: "rounded shadow-md", style: { objectFit: "cover" }, onError: function () { return setIsBroken(true); }, onClick: handleClick, muted: true }));
         }
-        if (isAudioFile(src)) {
+        if (previewKind === "audio") {
             return (_jsx("div", { className: "flex items-center justify-center rounded bg-gray-100 shadow-md", style: { width: 40, height: 40 }, onClick: handleClick, children: _jsx(Volume2, { size: 18, className: "text-gray-600" }) }));
         }
     }
-    return (_jsx("div", { style: { width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center" }, onClick: handleClick, children: _jsx(SolidFileTypeIcon, { fileUrl: src, size: 24 }) }));
+    return (_jsx("div", { style: { width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center" }, onClick: handleClick, children: _jsx(SolidFileTypeIcon, { fileUrl: src, fileName: fileName, size: 24 }) }));
 };
 var SolidMediaMultipleColumn = function (_a) {
     var _b;
@@ -87,9 +65,9 @@ var SolidMediaMultipleColumn = function (_a) {
 export default SolidMediaMultipleColumn;
 // Default multiple widget
 export var DefaultMediaMultipleListWidget = function (_a) {
-    var _b, _c, _d;
+    var _b, _c, _d, _e, _f;
     var rowData = _a.rowData, fieldMetadata = _a.fieldMetadata, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox;
-    var _e = useState(false), isShowAllFiles = _e[0], setShowAllFiles = _e[1];
+    var _g = useState(false), isShowAllFiles = _g[0], setShowAllFiles = _g[1];
     if (!((_b = rowData === null || rowData === void 0 ? void 0 : rowData._media) === null || _b === void 0 ? void 0 : _b[fieldMetadata.name]))
         return null;
     var fullrecord = (_c = rowData._media[fieldMetadata.name]) === null || _c === void 0 ? void 0 : _c.map(function (file) { return ({
@@ -97,67 +75,50 @@ export var DefaultMediaMultipleListWidget = function (_a) {
         type: file.mimeType,
         size: file.fileSize,
         id: file.id,
-        fileUrl: file._full_url
+        fileUrl: file === null || file === void 0 ? void 0 : file._full_url,
+        previewKind: getMediaPreviewKind({
+            url: file === null || file === void 0 ? void 0 : file._full_url,
+            fileName: file === null || file === void 0 ? void 0 : file.originalFileName,
+            mimeType: file === null || file === void 0 ? void 0 : file.mimeType,
+        })
     }); });
     var formatFileSize = function (size) {
         return size >= 1024 * 1024 ? "".concat((size / (1024 * 1024)).toFixed(1), " MB") : "".concat((size / 1024).toFixed(1), " KB");
     };
     var handleFileView = function (file) {
-        var fileUrl = (file === null || file === void 0 ? void 0 : file.fileUrl) || "";
-        // const cleanUrl = fileUrl.split("?")[0];
-        // const ext = cleanUrl.split(".").pop()?.toLowerCase();
-        if (isDocumentType(fileUrl)) {
-            downloadFile(file === null || file === void 0 ? void 0 : file.fileUrl, "");
-        }
-        else {
-            setLightboxUrls === null || setLightboxUrls === void 0 ? void 0 : setLightboxUrls([{ src: file.fileUrl, downloadUrl: file.fileUrl }]);
+        if (isLightboxMediaKind(file === null || file === void 0 ? void 0 : file.previewKind)) {
+            setLightboxUrls === null || setLightboxUrls === void 0 ? void 0 : setLightboxUrls([{
+                    src: file.fileUrl,
+                    downloadUrl: file.fileUrl,
+                    type: file.previewKind === "video" ? "video" : undefined
+                }]);
             setOpenLightbox === null || setOpenLightbox === void 0 ? void 0 : setOpenLightbox(true);
+            return;
         }
+        openMediaInNewTab(file === null || file === void 0 ? void 0 : file.fileUrl);
+    };
+    var renderMediaFileCard = function (file, className) {
+        if (className === void 0) { className = ""; }
+        return (_jsx("div", { className: "".concat(styles.mediaAttachmentCard, " ").concat(className).trim(), children: _jsxs("div", { className: "".concat(styles.mediaAttachmentRow, " flex items-center md:gap-2"), children: [_jsx(FileReaderExt, { fileDetails: file }), _jsxs("div", { className: "".concat(styles.mediaAttachmentMeta, " w-full"), children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx("button", { type: "button", className: styles.mediaAttachmentName, onClick: function () { return handleFileView(file); }, title: file.name, children: file.name }), _jsx("div", { className: "".concat(styles.mediaAttachmentActions, " flex items-center md:gap-2"), children: _jsx("button", { type: "button", className: "solid-file-icon-btn", "aria-label": "Download file", onClick: function (event) {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                downloadMediaFile(file === null || file === void 0 ? void 0 : file.fileUrl, file === null || file === void 0 ? void 0 : file.name);
+                                            }, children: _jsx(SolidIcon, { name: "si-download", "aria-hidden": true }) }) })] }), _jsx("div", { className: styles.mediaAttachmentSize, children: formatFileSize(file.size) })] })] }) }));
     };
-    return fullrecord.length > 0 ? (_jsxs("div", { className: 'flex items-end gap-2', children: [_jsx(MediaPreview, { src: (_d = fullrecord[0]) === null || _d === void 0 ? void 0 : _d.fileUrl, onClick: function (event) {
-                    var _a, _b, _c;
+    return fullrecord.length > 0 ? (_jsxs("div", { className: 'flex items-end gap-2', children: [_jsx(MediaPreview, { src: (_d = fullrecord[0]) === null || _d === void 0 ? void 0 : _d.fileUrl, fileName: (_e = fullrecord[0]) === null || _e === void 0 ? void 0 : _e.name, previewKind: (_f = fullrecord[0]) === null || _f === void 0 ? void 0 : _f.previewKind, onClick: function (event) {
                     event.stopPropagation();
-                    // const cleanUrl = fullrecord[0]?.fileUrl.split("?")[0];
-                    // const ext = cleanUrl.split(".").pop()?.toLowerCase();
-                    if (isDocumentType((_a = fullrecord[0]) === null || _a === void 0 ? void 0 : _a.fileUrl) && (fullrecord === null || fullrecord === void 0 ? void 0 : fullrecord.length) > 1) {
-                        setShowAllFiles(true);
-                        return;
-                    }
-                    else if (isDocumentType((_b = fullrecord[0]) === null || _b === void 0 ? void 0 : _b.fileUrl)) {
-                        downloadFile((_c = fullrecord[0]) === null || _c === void 0 ? void 0 : _c.fileUrl, "");
-                        return;
-                    }
-                    // FIRST FILE IS MEDIA ⇒ OPEN LIGHTBOX
-                    var urlsWithType = fullrecord.map(function (file) { return ({
-                        src: file.fileUrl,
-                        downloadUrl: file.fileUrl,
-                    }); });
-                    setLightboxUrls(urlsWithType);
-                    setOpenLightbox(true);
+                    handleFileView(fullrecord[0]);
                 } }), (fullrecord === null || fullrecord === void 0 ? void 0 : fullrecord.length) > 1 && _jsxs("span", { style: {
                     color: "#0895CD",
                     fontWeight: "bold",
                     cursor: "pointer",
                     marginLeft: "4px"
                 }, onClick: function (event) {
-                    var _a;
                     event.stopPropagation();
-                    if (isDocumentType((_a = fullrecord[0]) === null || _a === void 0 ? void 0 : _a.fileUrl)) {
-                        setShowAllFiles(true);
-                    }
-                    else {
-                        var urlsWithType = fullrecord.map(function (file) { return ({
-                            src: file.fileUrl,
-                            downloadUrl: file.fileUrl
-                        }); });
-                        setLightboxUrls(urlsWithType);
-                        setOpenLightbox(true);
-                    }
-                }, children: ["+", fullrecord.length - 1] }), _jsx(SolidDialog, { open: isShowAllFiles, onOpenChange: setShowAllFiles, header: "Items Uploaded", style: { width: '32rem', maxWidth: '94vw' }, children: fullrecord === null || fullrecord === void 0 ? void 0 : fullrecord.map(function (file) {
-                    var fileId = "".concat(file.name, "-").concat(file.size);
-                    return (_jsx("div", { className: "solid-file-upload-wrapper mb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileReaderExt, { fileDetails: file }), _jsxs("div", { className: "flex w-full flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "m-0 w-11 font-normal text-[var(--primary-color)] solid-media-column-text-wrapper", style: { cursor: "pointer" }, onClick: function () { return handleFileView(file); }, children: file === null || file === void 0 ? void 0 : file.name }), _jsx(SolidButton, { type: "button", size: "small", variant: "ghost", leftIcon: _jsx(Download, { size: 14 }), onClick: function () {
-                                                        downloadFile(file === null || file === void 0 ? void 0 : file.fileUrl, "");
-                                                    }, style: { height: 16, width: 16 } })] }), _jsx("div", { className: "text-sm", children: formatFileSize(file.size) })] })] }) }, fileId));
-                }) })] })) : (_jsx("div", { style: { height: 40, width: 40 } }));
+                    setShowAllFiles(true);
+                }, children: ["+", fullrecord.length - 1] }), _jsxs(SolidDialog, { open: isShowAllFiles, onOpenChange: setShowAllFiles, style: { minWidth: 450 }, children: [_jsxs(SolidDialogHeader, { children: [_jsx(SolidDialogTitle, { children: "Items Uploaded" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogBody, { children: fullrecord === null || fullrecord === void 0 ? void 0 : fullrecord.map(function (file, index) {
+                            var fileId = "".concat(file.name, "-").concat(file.size);
+                            return (_jsx("div", { className: index === fullrecord.length - 1 ? "" : "mb-3", children: renderMediaFileCard(file) }, fileId));
+                        }) })] })] })) : (_jsx("div", { style: { height: 40, width: 40 } }));
 };
 //# sourceMappingURL=SolidMediaMultipleColumn.js.map

package/dist/components/core/list/columns/SolidMediaMultipleColumn.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SolidMediaMultipleColumn.js","sourceRoot":"","sources":["../../../../../src/components/core/list/columns/SolidMediaMultipleColumn.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport React, { useState } from 'react';\nimport { Download, Volume2 } from \"lucide-react\";\nimport { Column } from \"../SolidDataTable\";\nimport { SolidListViewColumnParams } from '../SolidListViewColumn';\nimport { SolidMediaListFieldWidgetProps } from '../../../../types/solid-core';\nimport { getExtensionComponent } from '../../../../helpers/registry';\nimport { FileReaderExt } from '../../../../components/common/FileReaderExt';\nimport { SolidButton, SolidDialog } from \"../../../shad-cn-ui\";\nimport { SolidFileTypeIcon } from '../../../../helpers/fileTypeIcon';\n\nconst getCleanUrl = (url: string) => url.split(\"?\")[0];\n\nconst isImageFile = (url: string) => /\\.(jpg\|jpeg\|png\|gif\|bmp\|webp)$/i.test(getCleanUrl(url));\n\nconst isVideoFile = (url: string) => /\\.(mp4\|webm\|ogg)$/i.test(getCleanUrl(url));\n\nconst isAudioFile = (url: string) => /\\.(mp3\|wav\|ogg)$/i.test(getCleanUrl(url));\n\nconst isDocumentType = (url: string) => {\n const ext = getCleanUrl(url).split(\".\").pop()?.toLowerCase();\n return ext ? downloadOnlyExt.includes(ext) : false;\n};\n\nconst downloadOnlyExt = [\n \"txt\", \"zip\", \"rar\",\n \"doc\", \"docx\",\n \"xls\", \"xlsx\",\n \"ppt\", \"pptx\",\n \"pdf\", \"csv\"\n];\n\nconst downloadFile = (url: string, name: string = \"\") => {\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = name;\n link.target = \"_blank\";\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n};\n\n\n\n// Thumbnail preview component\nconst MediaPreview = ({ src, onClick }: { src: string; onClick: (event: React.MouseEvent) => void }) => {\n const [isBroken, setIsBroken] = useState(false);\n\n const handleClick = (event: React.MouseEvent) => {\n onClick(event);\n };\n\n if (!isBroken) {\n if (isImageFile(src)) {\n return (\n <img\n src={src}\n alt=\"media\"\n className=\"rounded shadow-md\"\n width={40}\n height={40}\n style={{ objectFit: \"cover\" }}\n onError={() => setIsBroken(true)}\n onClick={handleClick}\n />\n );\n }\n\n if (isVideoFile(src)) {\n return (\n <video\n src={src}\n width={40}\n height={40}\n className=\"rounded shadow-md\"\n style={{ objectFit: \"cover\" }}\n onError={() => setIsBroken(true)}\n onClick={handleClick}\n muted\n />\n );\n }\n\n if (isAudioFile(src)) {\n return (\n <div\n className=\"flex items-center justify-center rounded bg-gray-100 shadow-md\"\n style={{ width: 40, height: 40 }}\n onClick={handleClick}\n >\n <Volume2 size={18} className=\"text-gray-600\" />\n </div>\n );\n }\n }\n\n return (\n <div\n style={{ width: 40, height: 40, display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}\n onClick={handleClick}\n >\n <SolidFileTypeIcon fileUrl={src} size={24} />\n </div>\n );\n};\n\n\nconst SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {\n const header = column.attrs.label ?? fieldMetadata.displayName;\n\n return (\n <Column\n key={fieldMetadata.name}\n field={fieldMetadata.name}\n header={header}\n body={(rowData) => {\n let viewWidget = column.attrs.viewWidget;\n if (!viewWidget) {\n viewWidget = 'DefaultMediaMultipleListWidget';\n }\n let DynamicWidget = getExtensionComponent(viewWidget);\n const widgetProps: SolidMediaListFieldWidgetProps = {\n rowData,\n solidListViewMetaData,\n fieldMetadata,\n column,\n setLightboxUrls,\n setOpenLightbox\n }\n return (\n <>\n {\n DynamicWidget && <DynamicWidget {...widgetProps} />\n }\n </>\n )\n }}\n sortable={column.attrs.sortable}\n style={{ minWidth: \"12rem\" }}\n headerClassName=\"table-header-fs\"\n />\n );\n};\n\nexport default SolidMediaMultipleColumn;\n\n// Default multiple widget\nexport const DefaultMediaMultipleListWidget = ({ rowData, fieldMetadata, setLightboxUrls, setOpenLightbox }: SolidMediaListFieldWidgetProps) => {\n const [isShowAllFiles, setShowAllFiles] = useState(false);\n\n if (!rowData?._media?.[fieldMetadata.name]) return null;\n\n const fullrecord = rowData._media[fieldMetadata.name]?.map((file: any) => ({\n name: file.originalFileName,\n type: file.mimeType,\n size: file.fileSize,\n id: file.id,\n fileUrl: file._full_url\n }));\n\n\n const formatFileSize = (size: number) =>\n size >= 1024 * 1024 ? `${(size / (1024 * 1024)).toFixed(1)} MB` : `${(size / 1024).toFixed(1)} KB`;\n\n\n const handleFileView = (file: any) => {\n const fileUrl = file?.fileUrl \|\| \"\";\n // const cleanUrl = fileUrl.split(\"?\")[0];\n // const ext = cleanUrl.split(\".\").pop()?.toLowerCase();\n\n if (isDocumentType(fileUrl)) {\n downloadFile(file?.fileUrl, \"\")\n\n } else {\n setLightboxUrls?.([{ src: file.fileUrl, downloadUrl: file.fileUrl }]);\n setOpenLightbox?.(true);\n }\n };\n\n\n\n return fullrecord.length > 0 ? (\n <div className='flex items-end gap-2'>\n\n {/* THUMBNAIL - FIXED BEHAVIOR /}\n <MediaPreview\n src={fullrecord[0]?.fileUrl}\n onClick={(event) => {\n event.stopPropagation();\n\n // const cleanUrl = fullrecord[0]?.fileUrl.split(\"?\")[0];\n // const ext = cleanUrl.split(\".\").pop()?.toLowerCase();\n\n if (isDocumentType(fullrecord[0]?.fileUrl) && fullrecord?.length > 1) {\n setShowAllFiles(true)\n return;\n }\n\n else if (isDocumentType(fullrecord[0]?.fileUrl)) {\n downloadFile(fullrecord[0]?.fileUrl, \"\")\n return;\n }\n // FIRST FILE IS MEDIA ⇒ OPEN LIGHTBOX\n const urlsWithType = fullrecord.map((file: any) => ({\n src: file.fileUrl,\n downloadUrl: file.fileUrl,\n }));\n setLightboxUrls(urlsWithType);\n setOpenLightbox(true);\n }}\n />\n\n {fullrecord?.length > 1 && <span\n style={{\n color: \"#0895CD\",\n fontWeight: \"bold\",\n cursor: \"pointer\",\n marginLeft: \"4px\"\n }}\n onClick={(event) => {\n event.stopPropagation();\n\n if (isDocumentType(fullrecord[0]?.fileUrl)) {\n setShowAllFiles(true);\n } else {\n const urlsWithType = fullrecord.map((file: any) => ({\n src: file.fileUrl,\n downloadUrl: file.fileUrl\n }));\n setLightboxUrls(urlsWithType);\n setOpenLightbox(true);\n }\n }}\n >\n +{fullrecord.length - 1}\n </span>\n }\n\n\n\n {/ VIEW ALL DIALOG */}\n <SolidDialog\n open={isShowAllFiles}\n onOpenChange={setShowAllFiles}\n header=\"Items Uploaded\"\n style={{ width: '32rem', maxWidth: '94vw' }}\n >\n {fullrecord?.map((file: any) => {\n const fileId = `${file.name}-${file.size}`;\n return (\n <div key={fileId} className=\"solid-file-upload-wrapper mb-3\">\n <div className=\"flex items-center gap-2\">\n\n <FileReaderExt fileDetails={file} />\n\n <div className=\"flex w-full flex-col gap-1\">\n <div className=\"flex items-center justify-between\">\n\n <p\n className=\"m-0 w-11 font-normal text-[var(--primary-color)] solid-media-column-text-wrapper\"\n style={{ cursor: \"pointer\" }}\n onClick={() => handleFileView(file)}\n >\n {file?.name}\n </p>\n\n <SolidButton\n type=\"button\"\n size=\"small\"\n variant=\"ghost\"\n leftIcon={<Download size={14} />}\n onClick={() => {\n downloadFile(file?.fileUrl, \"\")\n }}\n style={{ height: 16, width: 16 }}\n />\n </div>\n\n <div className=\"text-sm\">{formatFileSize(file.size)}</div>\n </div>\n\n </div>\n </div>\n )\n }\n )}\n </SolidDialog>\n </div>\n ) : (\n <div style={{ height: 40, width: 40 }} />\n );\n};\n"]}
1	+ {"version":3,"file":"SolidMediaMultipleColumn.js","sourceRoot":"","sources":["../../../../../src/components/core/list/columns/SolidMediaMultipleColumn.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport React, { useState } from 'react';\nimport { Volume2 } from \"lucide-react\";\nimport { Column } from \"../SolidDataTable\";\nimport { SolidListViewColumnParams } from '../SolidListViewColumn';\nimport { SolidMediaListFieldWidgetProps } from '../../../../types/solid-core';\nimport { getExtensionComponent } from '../../../../helpers/registry';\nimport { FileReaderExt } from '../../../../components/common/FileReaderExt';\nimport { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogHeader, SolidDialogTitle, SolidIcon } from \"../../../shad-cn-ui\";\nimport { SolidFileTypeIcon } from '../../../../helpers/fileTypeIcon';\nimport { getMediaPreviewKind, isLightboxMediaKind, type MediaPreviewKind } from '../../../../helpers/mediaType';\nimport { openMediaInNewTab } from '../../../../helpers/mediaUrl';\nimport { downloadMediaFile } from '../../../../helpers/downloadMediaFile';\nimport styles from \"../../form/fields/solidFields.module.css\";\n\n\n\n// Thumbnail preview component\nconst MediaPreview = ({\n src,\n fileName,\n previewKind,\n onClick\n}: {\n src: string;\n fileName?: string;\n previewKind: MediaPreviewKind;\n onClick: (event: React.MouseEvent) => void\n}) => {\n const [isBroken, setIsBroken] = useState(false);\n\n const handleClick = (event: React.MouseEvent) => {\n onClick(event);\n };\n\n if (!isBroken) {\n if (previewKind === \"image\") {\n return (\n <img\n src={src}\n alt=\"media\"\n className=\"rounded shadow-md\"\n width={40}\n height={40}\n style={{ objectFit: \"cover\" }}\n onError={() => setIsBroken(true)}\n onClick={handleClick}\n />\n );\n }\n\n if (previewKind === \"video\") {\n return (\n <video\n src={src}\n width={40}\n height={40}\n className=\"rounded shadow-md\"\n style={{ objectFit: \"cover\" }}\n onError={() => setIsBroken(true)}\n onClick={handleClick}\n muted\n />\n );\n }\n\n if (previewKind === \"audio\") {\n return (\n <div\n className=\"flex items-center justify-center rounded bg-gray-100 shadow-md\"\n style={{ width: 40, height: 40 }}\n onClick={handleClick}\n >\n <Volume2 size={18} className=\"text-gray-600\" />\n </div>\n );\n }\n }\n\n return (\n <div\n style={{ width: 40, height: 40, display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}\n onClick={handleClick}\n >\n <SolidFileTypeIcon fileUrl={src} fileName={fileName} size={24} />\n </div>\n );\n};\n\n\nconst SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {\n const header = column.attrs.label ?? fieldMetadata.displayName;\n\n return (\n <Column\n key={fieldMetadata.name}\n field={fieldMetadata.name}\n header={header}\n body={(rowData) => {\n let viewWidget = column.attrs.viewWidget;\n if (!viewWidget) {\n viewWidget = 'DefaultMediaMultipleListWidget';\n }\n let DynamicWidget = getExtensionComponent(viewWidget);\n const widgetProps: SolidMediaListFieldWidgetProps = {\n rowData,\n solidListViewMetaData,\n fieldMetadata,\n column,\n setLightboxUrls,\n setOpenLightbox\n }\n return (\n <>\n {\n DynamicWidget && <DynamicWidget {...widgetProps} />\n }\n </>\n )\n }}\n sortable={column.attrs.sortable}\n style={{ minWidth: \"12rem\" }}\n headerClassName=\"table-header-fs\"\n />\n );\n};\n\nexport default SolidMediaMultipleColumn;\n\n// Default multiple widget\nexport const DefaultMediaMultipleListWidget = ({ rowData, fieldMetadata, setLightboxUrls, setOpenLightbox }: SolidMediaListFieldWidgetProps) => {\n const [isShowAllFiles, setShowAllFiles] = useState(false);\n\n if (!rowData?._media?.[fieldMetadata.name]) return null;\n\n const fullrecord = rowData._media[fieldMetadata.name]?.map((file: any) => ({\n name: file.originalFileName,\n type: file.mimeType,\n size: file.fileSize,\n id: file.id,\n fileUrl: file?._full_url,\n previewKind: getMediaPreviewKind({\n url: file?._full_url,\n fileName: file?.originalFileName,\n mimeType: file?.mimeType,\n })\n }));\n\n\n const formatFileSize = (size: number) =>\n size >= 1024 * 1024 ? `${(size / (1024 * 1024)).toFixed(1)} MB` : `${(size / 1024).toFixed(1)} KB`;\n\n\n const handleFileView = (file: any) => {\n if (isLightboxMediaKind(file?.previewKind)) {\n setLightboxUrls?.([{\n src: file.fileUrl,\n downloadUrl: file.fileUrl,\n type: file.previewKind === \"video\" ? \"video\" : undefined\n }]);\n setOpenLightbox?.(true);\n return;\n }\n\n openMediaInNewTab(file?.fileUrl);\n };\n\n const renderMediaFileCard = (file: any, className = \"\") => (\n <div className={`${styles.mediaAttachmentCard} ${className}`.trim()}>\n <div className={`${styles.mediaAttachmentRow} flex items-center md:gap-2`}>\n <FileReaderExt fileDetails={file} />\n <div className={`${styles.mediaAttachmentMeta} w-full`}>\n <div className=\"flex items-start justify-between gap-4\">\n <button\n type=\"button\"\n className={styles.mediaAttachmentName}\n onClick={() => handleFileView(file)}\n title={file.name}\n >\n {file.name}\n </button>\n <div className={`${styles.mediaAttachmentActions} flex items-center md:gap-2`}>\n <button\n type=\"button\"\n className=\"solid-file-icon-btn\"\n aria-label=\"Download file\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n downloadMediaFile(file?.fileUrl, file?.name);\n }}\n >\n <SolidIcon name=\"si-download\" aria-hidden />\n </button>\n </div>\n </div>\n <div className={styles.mediaAttachmentSize}>\n {formatFileSize(file.size)}\n </div>\n </div>\n </div>\n </div>\n );\n\n\n return fullrecord.length > 0 ? (\n <div className='flex items-end gap-2'>\n\n <MediaPreview\n src={fullrecord[0]?.fileUrl}\n fileName={fullrecord[0]?.name}\n previewKind={fullrecord[0]?.previewKind}\n onClick={(event) => {\n event.stopPropagation();\n handleFileView(fullrecord[0]);\n }}\n />\n\n {fullrecord?.length > 1 && <span\n style={{\n color: \"#0895CD\",\n fontWeight: \"bold\",\n cursor: \"pointer\",\n marginLeft: \"4px\"\n }}\n onClick={(event) => {\n event.stopPropagation();\n setShowAllFiles(true);\n }}\n >\n +{fullrecord.length - 1}\n </span>\n }\n\n\n\n {/* VIEW ALL DIALOG */}\n <SolidDialog\n open={isShowAllFiles}\n onOpenChange={setShowAllFiles}\n style={{ minWidth: 450 }}\n >\n <SolidDialogHeader>\n <SolidDialogTitle>Items Uploaded</SolidDialogTitle>\n <SolidDialogClose />\n </SolidDialogHeader>\n <SolidDialogBody>\n {fullrecord?.map((file: any, index: number) => {\n const fileId = `${file.name}-${file.size}`;\n return (\n <div key={fileId} className={index === fullrecord.length - 1 ? \"\" : \"mb-3\"}>\n {renderMediaFileCard(file)}\n </div>\n )\n })}\n </SolidDialogBody>\n </SolidDialog>\n </div>\n ) : (\n <div style={{ height: 40, width: 40 }} />\n );\n};\n"]}

package/dist/components/core/list/columns/SolidMediaMultipleColumn.tsx CHANGED Viewed

@@ -1,49 +1,32 @@
 import React, { useState } from 'react';
-import { Download, Volume2 } from "lucide-react";
+import { Volume2 } from "lucide-react";
 import { Column } from "../SolidDataTable";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { SolidMediaListFieldWidgetProps } from '../../../../types/solid-core';
 import { getExtensionComponent } from '../../../../helpers/registry';
 import { FileReaderExt } from '../../../../components/common/FileReaderExt';
-import { SolidButton, SolidDialog } from "../../../shad-cn-ui";
+import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogHeader, SolidDialogTitle, SolidIcon } from "../../../shad-cn-ui";
 import { SolidFileTypeIcon } from '../../../../helpers/fileTypeIcon';
-const getCleanUrl = (url: string) => url.split("?")[0];
-const isImageFile = (url: string) => /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(getCleanUrl(url));
-const isVideoFile = (url: string) => /\.(mp4|webm|ogg)$/i.test(getCleanUrl(url));
-const isAudioFile = (url: string) => /\.(mp3|wav|ogg)$/i.test(getCleanUrl(url));
-const isDocumentType = (url: string) => {
-    const ext = getCleanUrl(url).split(".").pop()?.toLowerCase();
-    return ext ? downloadOnlyExt.includes(ext) : false;
-};
-const downloadOnlyExt = [
-    "txt", "zip", "rar",
-    "doc", "docx",
-    "xls", "xlsx",
-    "ppt", "pptx",
-    "pdf", "csv"
-];
-const downloadFile = (url: string, name: string = "") => {
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = name;
-    link.target = "_blank";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-};
+import { getMediaPreviewKind, isLightboxMediaKind, type MediaPreviewKind } from '../../../../helpers/mediaType';
+import { openMediaInNewTab } from '../../../../helpers/mediaUrl';
+import { downloadMediaFile } from '../../../../helpers/downloadMediaFile';
+import styles from "../../form/fields/solidFields.module.css";
 // Thumbnail preview component
-const MediaPreview = ({ src, onClick }: { src: string; onClick: (event: React.MouseEvent) => void }) => {
+const MediaPreview = ({
+    src,
+    fileName,
+    previewKind,
+    onClick
+}: {
+    src: string;
+    fileName?: string;
+    previewKind: MediaPreviewKind;
+    onClick: (event: React.MouseEvent) => void
+}) => {
     const [isBroken, setIsBroken] = useState(false);
     const handleClick = (event: React.MouseEvent) => {
@@ -51,7 +34,7 @@ const MediaPreview = ({ src, onClick }: { src: string; onClick: (event: React.Mo
     };
     if (!isBroken) {
-        if (isImageFile(src)) {
+        if (previewKind === "image") {
             return (
                 <img
                     src={src}
@@ -66,7 +49,7 @@ const MediaPreview = ({ src, onClick }: { src: string; onClick: (event: React.Mo
             );
         }
-        if (isVideoFile(src)) {
+        if (previewKind === "video") {
             return (
                 <video
                     src={src}
@@ -81,7 +64,7 @@ const MediaPreview = ({ src, onClick }: { src: string; onClick: (event: React.Mo
             );
         }
-        if (isAudioFile(src)) {
+        if (previewKind === "audio") {
             return (
                 <div
                     className="flex items-center justify-center rounded bg-gray-100 shadow-md"
@@ -99,7 +82,7 @@ const MediaPreview = ({ src, onClick }: { src: string; onClick: (event: React.Mo
             style={{ width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center" }}
             onClick={handleClick}
         >
-            <SolidFileTypeIcon fileUrl={src} size={24} />
+            <SolidFileTypeIcon fileUrl={src} fileName={fileName} size={24} />
         </div>
     );
 };
@@ -155,7 +138,12 @@ export const DefaultMediaMultipleListWidget = ({ rowData, fieldMetadata, setLigh
         type: file.mimeType,
         size: file.fileSize,
         id: file.id,
-        fileUrl: file._full_url
+        fileUrl: file?._full_url,
+        previewKind: getMediaPreviewKind({
+            url: file?._full_url,
+            fileName: file?.originalFileName,
+            mimeType: file?.mimeType,
+        })
     }));
@@ -164,49 +152,67 @@ export const DefaultMediaMultipleListWidget = ({ rowData, fieldMetadata, setLigh
     const handleFileView = (file: any) => {
-        const fileUrl = file?.fileUrl || "";
-        // const cleanUrl = fileUrl.split("?")[0];
-        // const ext = cleanUrl.split(".").pop()?.toLowerCase();
-        if (isDocumentType(fileUrl)) {
-            downloadFile(file?.fileUrl, "")
-        } else {
-            setLightboxUrls?.([{ src: file.fileUrl, downloadUrl: file.fileUrl }]);
+        if (isLightboxMediaKind(file?.previewKind)) {
+            setLightboxUrls?.([{
+                src: file.fileUrl,
+                downloadUrl: file.fileUrl,
+                type: file.previewKind === "video" ? "video" : undefined
+            }]);
             setOpenLightbox?.(true);
+            return;
         }
+        openMediaInNewTab(file?.fileUrl);
     };
+    const renderMediaFileCard = (file: any, className = "") => (
+        <div className={`${styles.mediaAttachmentCard} ${className}`.trim()}>
+            <div className={`${styles.mediaAttachmentRow} flex items-center md:gap-2`}>
+                <FileReaderExt fileDetails={file} />
+                <div className={`${styles.mediaAttachmentMeta} w-full`}>
+                    <div className="flex items-start justify-between gap-4">
+                        <button
+                            type="button"
+                            className={styles.mediaAttachmentName}
+                            onClick={() => handleFileView(file)}
+                            title={file.name}
+                        >
+                            {file.name}
+                        </button>
+                        <div className={`${styles.mediaAttachmentActions} flex items-center md:gap-2`}>
+                            <button
+                                type="button"
+                                className="solid-file-icon-btn"
+                                aria-label="Download file"
+                                onClick={(event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    downloadMediaFile(file?.fileUrl, file?.name);
+                                }}
+                            >
+                                <SolidIcon name="si-download" aria-hidden />
+                            </button>
+                        </div>
+                    </div>
+                    <div className={styles.mediaAttachmentSize}>
+                        {formatFileSize(file.size)}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
     return fullrecord.length > 0 ? (
         <div className='flex items-end gap-2'>
-            {/* THUMBNAIL - FIXED BEHAVIOR */}
             <MediaPreview
                 src={fullrecord[0]?.fileUrl}
+                fileName={fullrecord[0]?.name}
+                previewKind={fullrecord[0]?.previewKind}
                 onClick={(event) => {
                     event.stopPropagation();
-                    // const cleanUrl = fullrecord[0]?.fileUrl.split("?")[0];
-                    // const ext = cleanUrl.split(".").pop()?.toLowerCase();
-                    if (isDocumentType(fullrecord[0]?.fileUrl) && fullrecord?.length > 1) {
-                        setShowAllFiles(true)
-                        return;
-                    }
-                    else if (isDocumentType(fullrecord[0]?.fileUrl)) {
-                        downloadFile(fullrecord[0]?.fileUrl, "")
-                        return;
-                    }
-                    // FIRST FILE IS MEDIA ⇒ OPEN LIGHTBOX
-                    const urlsWithType = fullrecord.map((file: any) => ({
-                        src: file.fileUrl,
-                        downloadUrl: file.fileUrl,
-                    }));
-                    setLightboxUrls(urlsWithType);
-                    setOpenLightbox(true);
+                    handleFileView(fullrecord[0]);
                 }}
             />
@@ -219,17 +225,7 @@ export const DefaultMediaMultipleListWidget = ({ rowData, fieldMetadata, setLigh
                 }}
                 onClick={(event) => {
                     event.stopPropagation();
-                    if (isDocumentType(fullrecord[0]?.fileUrl)) {
-                        setShowAllFiles(true);
-                    } else {
-                        const urlsWithType = fullrecord.map((file: any) => ({
-                            src: file.fileUrl,
-                            downloadUrl: file.fileUrl
-                        }));
-                        setLightboxUrls(urlsWithType);
-                        setOpenLightbox(true);
-                    }
+                    setShowAllFiles(true);
                 }}
             >
                 +{fullrecord.length - 1}
@@ -242,48 +238,22 @@ export const DefaultMediaMultipleListWidget = ({ rowData, fieldMetadata, setLigh
             <SolidDialog
                 open={isShowAllFiles}
                 onOpenChange={setShowAllFiles}
-                header="Items Uploaded"
-                style={{ width: '32rem', maxWidth: '94vw' }}
+                style={{ minWidth: 450 }}
             >
-                {fullrecord?.map((file: any) => {
-                    const fileId = `${file.name}-${file.size}`;
-                    return (
-                        <div key={fileId} className="solid-file-upload-wrapper mb-3">
-                            <div className="flex items-center gap-2">
-                                <FileReaderExt fileDetails={file} />
-                                <div className="flex w-full flex-col gap-1">
-                                    <div className="flex items-center justify-between">
-                                        <p
-                                            className="m-0 w-11 font-normal text-[var(--primary-color)] solid-media-column-text-wrapper"
-                                            style={{ cursor: "pointer" }}
-                                            onClick={() => handleFileView(file)}
-                                        >
-                                            {file?.name}
-                                        </p>
-                                        <SolidButton
-                                            type="button"
-                                            size="small"
-                                            variant="ghost"
-                                            leftIcon={<Download size={14} />}
-                                            onClick={() => {
-                                                downloadFile(file?.fileUrl, "")
-                                            }}
-                                            style={{ height: 16, width: 16 }}
-                                        />
-                                    </div>
-                                    <div className="text-sm">{formatFileSize(file.size)}</div>
-                                </div>
+                <SolidDialogHeader>
+                    <SolidDialogTitle>Items Uploaded</SolidDialogTitle>
+                    <SolidDialogClose />
+                </SolidDialogHeader>
+                <SolidDialogBody>
+                    {fullrecord?.map((file: any, index: number) => {
+                        const fileId = `${file.name}-${file.size}`;
+                        return (
+                            <div key={fileId} className={index === fullrecord.length - 1 ? "" : "mb-3"}>
+                                {renderMediaFileCard(file)}
                             </div>
-                        </div>
-                    )
-                }
-                )}
+                        )
+                    })}
+                </SolidDialogBody>
             </SolidDialog>
         </div>
     ) : (

package/dist/components/core/list/columns/SolidMediaSingleColumn.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SolidMediaSingleColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/columns/SolidMediaSingleColumn.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;~~AAmG9E~~,QAAA,MAAM,sBAAsB,uFAAwF,yBAAyB,4CAkC5I,CAAC;AAEF,eAAe,sBAAsB,CAAC;AAGtC,eAAO,MAAM,4BAA4B,gGAOtC,8BAA8B,~~mDAqBhC~~,CAAC"}
1	+ {"version":3,"file":"SolidMediaSingleColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/columns/SolidMediaSingleColumn.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAmF9E,QAAA,MAAM,sBAAsB,uFAAwF,yBAAyB,4CAkC5I,CAAC;AAEF,eAAe,sBAAsB,CAAC;AAGtC,eAAO,MAAM,4BAA4B,gGAOtC,8BAA8B,mDA0ChC,CAAC"}