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

package/dist/components/core/form/fields/SolidMediaMultipleField.tsx

@@ -22,12 +22,15 @@ import { FileReaderExt } from "../../../../components/common/FileReaderExt";
 import getAcceptedFileTypes from "../../../../helpers/getAcceptedFileTypes";
 import { downloadMediaFile } from "../../../../helpers/downloadMediaFile";
 import { getExtensionComponent } from "../../../../helpers/registry";
+import { openMediaInNewTab } from "../../../../helpers/mediaUrl";
+import { getMediaPreviewKind, isLightboxMediaKind } from "../../../../helpers/mediaType";
 import { SolidFormFieldWidgetProps, SolidMediaFormFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import styles from "./solidFields.module.css";
 import { SolidIcon } from "../../../shad-cn-ui";
 import { buildMediaFieldKey, getPersistedMediaId } from "./mediaFieldUtils";
+
 export class SolidMediaMultipleField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -190,41 +193,47 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
     const [deleteMedia] = useDeleteMediaMutation();
     useEffect(() => {
         const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
-        const objectUrls: string[] = [];
+        if (!Array.isArray(fieldValue) || fieldValue.length === 0) {
+            setFileDetails([]);
+            return;
+        }
 
-        if (Array.isArray(fieldValue) && fieldValue.length > 0) {
-            const details: MediaFileDetail[] = [];
-            fieldValue.forEach((file: File | any) => {
+        const objectUrls: string[] = [];
+        const details = fieldValue
+            .map((file: File | any): MediaFileDetail | null => {
                 if (file instanceof File) {
                     const fileUrl = URL.createObjectURL(file);
                     objectUrls.push(fileUrl);
-
-                    details.push({
+                    return {
                         name: file.name,
                         type: file.type,
                         size: file.size,
                         mediaId: null,
                         fileKey: buildMediaFieldKey(file),
-                        fileUrl: fileUrl
-                    });
-                } else if (typeof file === "object" && file._full_url) {
-                    details.push({
-                        name: file.originalFileName,
-                        type: file.mimeType,
-                        size: file.fileSize,
-                        mediaId: getPersistedMediaId(file),
-                        fileKey: buildMediaFieldKey(file),
-                        fileUrl: file._full_url
-                    });
+                        fileUrl,
+                    };
                 }
-            });
-            setFileDetails(details);
-        } else {
-            setFileDetails([]);
-        }
+
+                const fileUrl = file?._full_url;
+                if (!fileUrl) {
+                    return null;
+                }
+
+                return {
+                    name: file.originalFileName,
+                    type: file.mimeType,
+                    size: file.fileSize,
+                    mediaId: getPersistedMediaId(file),
+                    fileKey: buildMediaFieldKey(file),
+                    fileUrl,
+                };
+            })
+            .filter((detail): detail is MediaFileDetail => detail !== null);
+
+        setFileDetails(details);
 
         return () => {
-            objectUrls.forEach((url) => URL.revokeObjectURL(url));
+            objectUrls.forEach((fileUrl) => URL.revokeObjectURL(fileUrl));
         };
     }, [formik.values, fieldLayoutInfo.attrs.name]);
 
@@ -332,32 +341,25 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
     }
 
     const handleFileView = (url: any) => {
-        const downloadOnlyExt = [
-            "txt", "zip", "rar",
-            "doc", "docx",
-            "xls", "xlsx",
-            "ppt", "pptx"
-        ];
-
-        const fileUrl = url?.fileUrl || "";
-        const cleanUrl = fileUrl.split("?")[0];
-        const ext = cleanUrl.split(".").pop()?.toLowerCase();
-
-        if (ext && downloadOnlyExt.includes(ext)) {
-            const link = document.createElement('a');
-            link.href = url.fileUrl;
-            link.download = ''; // or specify a file name like 'file.pdf'
-            link.target = '_blank';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
+        const previewKind = getMediaPreviewKind({
+            url: url?.fileUrl,
+            fileName: url?.name,
+            mimeType: url?.type,
+        });
 
-        } else {
+        if (isLightboxMediaKind(previewKind)) {
             setLightboxUrls?.([
-                { src: url.fileUrl, downloadUrl: url.fileUrl },
+                {
+                    src: url.fileUrl,
+                    downloadUrl: url.fileUrl,
+                    type: previewKind === "video" ? "video" : undefined
+                },
             ]);
             setOpenLightbox?.(true);
+            return;
         }
+
+        openMediaInNewTab(url?.fileUrl);
     }
 
 
@@ -394,34 +396,45 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                 }
             </div>
             {fileDetails.length > 0 &&
-                <div className="solid-file-upload-wrapper">
-                    <div className="flex items-center md:gap-2">
+                <div className={`${styles.mediaAttachmentCard} mt-4`}>
+                    <div className={`${styles.mediaAttachmentRow} flex items-center md:gap-2`}>
                         <FileReaderExt fileDetails={fileDetails[0]} />
-                        <div className="w-full flex flex-col gap-1">
-                                <div className="flex items-center justify-between">
-                                    <p className="m-0 w-9 font-normal text-[var(--primary-color)] solid-img-text-wrapper" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails[0])}>{fileDetails[0].name}</p>
-                                    <div className="flex items-center gap-2">
+                        <div className={`${styles.mediaAttachmentMeta} w-full`}>
+                            <div className="flex items-start justify-between gap-4">
+                                <button
+                                    type="button"
+                                    className={styles.mediaAttachmentName}
+                                    onClick={() => handleFileView(fileDetails[0])}
+                                    title={fileDetails[0].name}
+                                >
+                                    {fileDetails[0].name}
+                                </button>
+                                <div className={`${styles.mediaAttachmentActions} flex items-center gap-2`}>
                                         <button
                                             type="button"
                                             className="solid-file-icon-btn"
                                             disabled={isFieldDisabled || isFieldReadonly}
                                             aria-label="Download file"
-                                            onClick={() => downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name)}
+                                            onClick={(event) => {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name);
+                                            }}
                                         >
                                             <SolidIcon name="si-download" aria-hidden />
                                         </button>
-                                        <button
-                                            type="button"
-                                            className="solid-file-icon-btn is-danger"
-                                            disabled={isFieldDisabled || isFieldReadonly}
-                                            aria-label="Remove file"
-                                            onClick={() => confirmDeleteFile(fileDetails[0].fileKey)}
-                                        >
-                                            <SolidIcon name="si-times" aria-hidden />
-                                        </button>
-                                    </div>
+                                    <button
+                                        type="button"
+                                        className="solid-file-icon-btn is-danger"
+                                        disabled={isFieldDisabled || isFieldReadonly}
+                                        aria-label="Remove file"
+                                        onClick={() => confirmDeleteFile(fileDetails[0].fileKey)}
+                                    >
+                                        <SolidIcon name="si-times" aria-hidden />
+                                    </button>
                                 </div>
-                            <div className="flex items-center gap-2 text-sm">
+                            </div>
+                            <div className={styles.mediaAttachmentSize}>
                                 {formatFileSize(fileDetails[0].size)}
                             </div>
                         </div>
@@ -456,35 +469,48 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                     fileDetails.map((file, index) => {
                         const fileId = file.fileKey;
                         return (
-                            <div key={fileId} className="solid-file-upload-wrapper">
-                                <div className="flex items-center md:gap-2">
-                                    <FileReaderExt fileDetails={file} />
-                                    <div className="w-full flex flex-col gap-1">
-                                        <div className="flex items-center justify-between">
-                                            <p className="m-0 w-11 font-normal text-[var(--primary-color)] solid-img-text-wrapper" style={{ cursor: 'pointer' }} onClick={() => handleFileView(file)}>{file.name}</p>
-                                            <div className="flex items-center gap-2">
-                                                <button
-                                                    type="button"
-                                                    className="solid-file-icon-btn"
-                                                    disabled={isFieldDisabled || isFieldReadonly}
-                                                    aria-label="Download file"
-                                                    onClick={() => downloadMediaFile(file?.fileUrl, file?.name)}
-                                                >
-                                                    <SolidIcon name="si-download" aria-hidden />
-                                                </button>
+                            <div key={fileId} className={index === fileDetails.length - 1 ? "" : "mb-3"}>
+                                <div className={styles.mediaAttachmentCard}>
+                                    <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="solid-file-icon-btn is-danger"
-                                                    disabled={isFieldDisabled || isFieldReadonly}
-                                                    aria-label="Remove file"
-                                                    onClick={() => confirmDeleteFile(fileId)}
+                                                    className={styles.mediaAttachmentName}
+                                                    onClick={() => handleFileView(file)}
+                                                    title={file.name}
                                                 >
-                                                    <SolidIcon name="si-times" aria-hidden />
+                                                    {file.name}
                                                 </button>
+                                                <div className={`${styles.mediaAttachmentActions} flex items-center gap-2`}>
+                                                    <button
+                                                        type="button"
+                                                        className="solid-file-icon-btn"
+                                                        disabled={isFieldDisabled || isFieldReadonly}
+                                                        aria-label="Download file"
+                                                        onClick={(event) => {
+                                                            event.preventDefault();
+                                                            event.stopPropagation();
+                                                            downloadMediaFile(file?.fileUrl, file?.name);
+                                                        }}
+                                                    >
+                                                        <SolidIcon name="si-download" aria-hidden />
+                                                    </button>
+                                                    <button
+                                                        type="button"
+                                                        className="solid-file-icon-btn is-danger"
+                                                        disabled={isFieldDisabled || isFieldReadonly}
+                                                        aria-label="Remove file"
+                                                        onClick={() => confirmDeleteFile(fileId)}
+                                                    >
+                                                        <SolidIcon name="si-times" aria-hidden />
+                                                    </button>
+                                                </div>
+                                            </div>
+                                            <div className={styles.mediaAttachmentSize}>
+                                                {formatFileSize(file.size)}
                                             </div>
-                                        </div>
-                                        <div className="flex items-center gap-2 text-sm">
-                                            {formatFileSize(file.size)}
                                         </div>
                                     </div>
                                 </div>
@@ -521,7 +547,7 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
 }
 
 export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaFormFieldWidgetProps) => {
-    const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number, id: number, fileUrl: string }[]>([]);
+    const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number; id: number | string; fileUrl: string }[]>([]);
     const [isShowAllFiles, setShowAllFiles] = useState(false);
     const fieldMetadata = fieldContext.fieldMetadata;
     const fieldLayoutInfo = fieldContext.field;
@@ -539,70 +565,71 @@ export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLi
 
     useEffect(() => {
         const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+        if (!Array.isArray(fieldValue) || fieldValue.length === 0) {
+            setFileDetails([]);
+            return;
+        }
 
-        if (Array.isArray(fieldValue) && fieldValue.length > 0) {
-            const urls: string[] = [];
-            const details: { name: string; type: string; size: number, id: any, fileUrl: string }[] = [];
-            const objectUrls: string[] = [];
-            fieldValue.forEach((file: File | any) => {
+        const objectUrls: string[] = [];
+        const details = fieldValue
+            .map((file: File | any) => {
                 if (file instanceof File) {
-                    // New file (from local upload)
                     const fileUrl = URL.createObjectURL(file);
-                    objectUrls.push(fileUrl); // Store URL for cleanup
-                    urls.push(fileUrl);
-
-                    details.push({
+                    objectUrls.push(fileUrl);
+                    return {
                         name: file.name,
                         type: file.type,
                         size: file.size,
                         id: `${file.name}-${file.size}`,
-                        fileUrl: fileUrl // ✅ Store the generated object URL
-                    });
-                } else if (typeof file === "object" && file._full_url) {
-                    urls.push(file._full_url);
-                    details.push({
-                        name: file.originalFileName,
-                        type: file.mimeType,
-                        size: file.fileSize,
-                        id: file.id,
-                        fileUrl: file._full_url
-                    });
+                        fileUrl,
+                    };
                 }
-            });
-            setFileDetails(details);
-        }
+
+                const fileUrl = file?._full_url;
+                if (!fileUrl) {
+                    return null;
+                }
+
+                return {
+                    name: file.originalFileName,
+                    type: file.mimeType,
+                    size: file.fileSize,
+                    id: file.id,
+                    fileUrl,
+                };
+            })
+            .filter(Boolean) as { name: string; type: string; size: number; id: number | string; fileUrl: string }[];
+
+        setFileDetails(details);
+
+        return () => {
+            objectUrls.forEach((fileUrl) => URL.revokeObjectURL(fileUrl));
+        };
     }, [formik.values, fieldLayoutInfo.attrs.name]);
 
     const handleFileView = (url: any) => {
-        const downloadOnlyExt = [
-            "txt", "zip", "rar",
-            "doc", "docx",
-            "xls", "xlsx",
-            "ppt", "pptx"
-        ];
-
-        const fileUrl = url?.fileUrl || "";
-        const cleanUrl = fileUrl.split("?")[0];
-        const ext = cleanUrl.split(".").pop()?.toLowerCase();
-
-        if (ext && downloadOnlyExt.includes(ext)) {
-            const link = document.createElement('a');
-            link.href = url.fileUrl;
-            link.download = ''; // or specify a file name like 'file.pdf'
-            link.target = '_blank';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
+        const previewKind = getMediaPreviewKind({
+            url: url?.fileUrl,
+            fileName: url?.name,
+            mimeType: url?.type,
+        });
 
-        } else {
+        if (isLightboxMediaKind(previewKind)) {
             setLightboxUrls?.([
-                { src: url.fileUrl, downloadUrl: url.fileUrl },
+                {
+                    src: url.fileUrl,
+                    downloadUrl: url.fileUrl,
+                    type: previewKind === "video" ? "video" : undefined
+                },
             ]);
             setOpenLightbox?.(true);
+            return;
         }
+
+        openMediaInNewTab(url?.fileUrl);
     }
 
-    const renderMediaFileCard = (file: { name: string; type: string; size: number; id: number; fileUrl: string }, className = "") => (
+    const renderMediaFileCard = (file: { name: string; type: string; size: number; id: number | string; fileUrl: string }, className = "") => (
         <div className={`${styles.mediaAttachmentCard} ${className}`.trim()}>
             <div className={`${styles.mediaAttachmentRow} flex items-center md:gap-2`}>
                 <FileReaderExt fileDetails={file} />
@@ -621,7 +648,11 @@ export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLi
                                 type="button"
                                 className="solid-file-icon-btn"
                                 aria-label="Download file"
-                                onClick={() => downloadMediaFile(file?.fileUrl, file?.name)}
+                                onClick={(event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    downloadMediaFile(file?.fileUrl, file?.name);
+                                }}
                             >
                                 <SolidIcon name="si-download" aria-hidden />
                             </button>

package/dist/components/core/form/fields/SolidMediaSingleField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidMediaSingleField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidMediaSingleField.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAK3E,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAO9E,qBAAa,qBAAsB,YAAW,WAAW;IAErD,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAyD;IACjF,OAAO,CAAC,eAAe,CAAC,CAA0B;gBACtC,YAAY,EAAE,eAAe,EAAE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,IAAI,EAC/G,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;IAM7C,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IAKnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAyC9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAcjE;AAMD,eAAO,MAAM,gCAAgC,+DAAgE,8BAA8B,4CA4U1I,CAAA;AAED,eAAO,MAAM,gCAAgC,+DAAgE,8BAA8B,4CAqH1I,CAAA"}
+{"version":3,"file":"SolidMediaSingleField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidMediaSingleField.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAO3E,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAc9E,qBAAa,qBAAsB,YAAW,WAAW;IAErD,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAyD;IACjF,OAAO,CAAC,eAAe,CAAC,CAA0B;gBACtC,YAAY,EAAE,eAAe,EAAE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,IAAI,EAC/G,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;IAM7C,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IAKnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAyC9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAcjE;AAMD,eAAO,MAAM,gCAAgC,+DAAgE,8BAA8B,4CA6U1I,CAAA;AAED,eAAO,MAAM,gCAAgC,+DAAgE,8BAA8B,4CAsH1I,CAAA"}