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

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

@@ -21,6 +21,8 @@ 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 { SolidMediaFormFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
@@ -28,6 +30,13 @@ import styles from "./solidFields.module.css";
 import { SolidIcon } from "../../../shad-cn-ui";
 import { getPersistedMediaId } from "./mediaFieldUtils";
 
+type SingleMediaFileDetail = {
+    name: string;
+    type: string;
+    fileUrl: string;
+    fileSize: number;
+};
+
 export class SolidMediaSingleField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -170,7 +179,7 @@ export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLigh
     const isFieldReadonly = formReadonly || fieldReadonly || readOnlyPermission;
 
     const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
-    const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
+    const [fileDetails, setFileDetails] = useState<SingleMediaFileDetail | null>(null);
     const [isReplaceImageDialogVisible, setReplaceImageDialogVisible] = useState(false);
     const [newFileToUpload, setNewFileToUpload] = useState<any>(null);
     const [fileSizeError, setFileSizeError] = useState<string | null>(null);
@@ -272,34 +281,38 @@ export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLigh
 
     useEffect(() => {
         const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+        if (!fieldValue || typeof fieldValue !== "object") {
+            setFileDetails(null);
+            return;
+        }
 
-        if (fieldValue && typeof fieldValue === "object") {
-            let fileUrl = "";
-            let fileName = "Unknown File";
-            let fileSize = 0;
-
-            if (fieldValue instanceof File) {
-                fileUrl = URL.createObjectURL(fieldValue);
-                fileName = fieldValue.name;
-                fileSize = fieldValue.size;
-            } else if (fieldValue._full_url) {
-                fileUrl = fieldValue._full_url;
-                fileName = fieldValue.originalFileName;
-                fileSize = fieldValue.fileSize;
-            }
-
+        if (fieldValue instanceof File) {
+            const fileUrl = URL.createObjectURL(fieldValue);
             setFileDetails({
-                name: fileName,
-                type: fieldValue.mimeType ? fieldValue.mimeType : fieldValue.type,
+                name: fieldValue.name,
+                type: fieldValue.type,
                 fileUrl,
-                fileSize
+                fileSize: fieldValue.size,
             });
 
-            // Ensure formik has the correct value
             formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
-        } else {
+            return () => URL.revokeObjectURL(fileUrl);
+        }
+
+        const fileUrl = fieldValue._full_url;
+        if (!fileUrl) {
             setFileDetails(null);
+            return;
         }
+
+        setFileDetails({
+            name: fieldValue.originalFileName,
+            type: fieldValue.mimeType ? fieldValue.mimeType : fieldValue.type,
+            fileUrl,
+            fileSize: fieldValue.fileSize,
+        });
+
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
     }, [formik.values, fieldLayoutInfo.attrs.name]);
 
     const {
@@ -332,32 +345,25 @@ export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLigh
     }
 
     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);
     }
 
 
@@ -412,7 +418,11 @@ export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLigh
                                             className="solid-file-icon-btn"
                                             disabled={isFieldDisabled || isFieldReadonly}
                                             aria-label="Download file"
-                                            onClick={() => downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name)}
+                                            onClick={(event) => {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name);
+                                            }}
                                         >
                                             <SolidIcon name="si-download" aria-hidden />
                                         </button>
@@ -484,7 +494,7 @@ export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLigh
 }
 
 export const DefaultMediaSingleFormViewWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaFormFieldWidgetProps) => {
-    const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
+    const [fileDetails, setFileDetails] = useState<SingleMediaFileDetail | null>(null);
     const fieldMetadata = fieldContext.fieldMetadata;
     const fieldLayoutInfo = fieldContext.field;
     const className = fieldLayoutInfo.attrs?.className || 'field w-full px-2 pt-2';
@@ -502,60 +512,57 @@ export const DefaultMediaSingleFormViewWidget = ({ formik, fieldContext, setLigh
 
     useEffect(() => {
         const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+        if (!fieldValue || typeof fieldValue !== "object") {
+            setFileDetails(null);
+            return;
+        }
 
-        if (fieldValue && typeof fieldValue === "object") {
-            let fileUrl = "";
-            let fileName = "Unknown File";
-            let fileSize = 0;
-
-            if (fieldValue instanceof File) {
-                fileUrl = URL.createObjectURL(fieldValue);
-                fileName = fieldValue.name;
-                fileSize = fieldValue.size;
-            } else if (fieldValue._full_url) {
-                fileUrl = fieldValue._full_url;
-                fileName = fieldValue.originalFileName;
-                fileSize = fieldValue.fileSize;
-            }
-
+        if (fieldValue instanceof File) {
+            const fileUrl = URL.createObjectURL(fieldValue);
             setFileDetails({
-                name: fileName,
-                type: fieldValue.mimeType ? fieldValue.mimeType : fieldValue.type,
+                name: fieldValue.name,
+                type: fieldValue.type,
                 fileUrl,
-                fileSize
+                fileSize: fieldValue.size,
             });
-            // Ensure formik has the correct value
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
+
+            return () => URL.revokeObjectURL(fileUrl);
+        }
+
+        const fileUrl = fieldValue._full_url;
+        if (!fileUrl) {
+            setFileDetails(null);
+            return;
         }
+
+        setFileDetails({
+            name: fieldValue.originalFileName,
+            type: fieldValue.mimeType ? fieldValue.mimeType : fieldValue.type,
+            fileUrl,
+            fileSize: fieldValue.fileSize,
+        });
     }, [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);
     }
 
     return (
@@ -585,7 +592,11 @@ export const DefaultMediaSingleFormViewWidget = ({ formik, fieldContext, setLigh
                                         type="button"
                                         className="solid-file-icon-btn"
                                         aria-label="Download file"
-                                        onClick={() => downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name)}
+                                        onClick={(event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name);
+                                        }}
                                     >
                                         <SolidIcon name="si-download" aria-hidden />
                                     </button>

package/dist/components/core/form/fields/relations/SolidRelationManyToOneField.d.ts

@@ -19,7 +19,7 @@ export declare class SolidRelationManyToOneField implements ISolidField {
     renderExtensionRenderMode(widget: string, formik: FormikObject): import("react/jsx-runtime").JSX.Element;
 }
 export declare const DefaultRelationManyToOneFormEditWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RenderSolidFormEmbededView: ({ formik, fieldContext, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderSolidFormEmbededView: ({ formik, fieldContext, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams }: any) => import("react/jsx-runtime").JSX.Element | null;
 export declare const DefaultRelationManyToOneFormViewWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 export declare const PseudoRelationManyToOneFormWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidRelationManyToOneField.d.ts.map

package/dist/components/core/form/fields/relations/SolidRelationManyToOneField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationManyToOneField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAI5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAe5E,MAAM,MAAM,cAAc,GAAG;IACzB,UAAU,EAAE,GAAG,CAAC;IAChB,SAAS,EAAE,GAAG,CAAC;IACf,EAAE,EAAE,GAAG,CAAC;IACR,OAAO,EAAE,GAAG,CAAC;IACb,oBAAoB,EAAE,GAAG,CAAC;IAC1B,MAAM,EAAE,GAAG,CAAC;CACf,CAAA;AAED,qBAAa,2BAA4B,YAAW,WAAW;IAE3D,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,YAAY,IAAI,GAAG;IAqBnB,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAUnD,gBAAgB,IAAI,GAAG,CAAC,MAAM;IA4D9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAED,eAAO,MAAM,sCAAsC,6BAA8B,yBAAyB,4CAqTzG,CAAA;AAED,eAAO,MAAM,0BAA0B,+HAAgI,GAAG,4CA8DzK,CAAA;AAGD,eAAO,MAAM,sCAAsC,6BAA8B,yBAAyB,4CAiBzG,CAAA;AAMD,eAAO,MAAM,iCAAiC,6BAA8B,yBAAyB,4CA2cpG,CAAA"}
+{"version":3,"file":"SolidRelationManyToOneField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAI5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAe5E,MAAM,MAAM,cAAc,GAAG;IACzB,UAAU,EAAE,GAAG,CAAC;IAChB,SAAS,EAAE,GAAG,CAAC;IACf,EAAE,EAAE,GAAG,CAAC;IACR,OAAO,EAAE,GAAG,CAAC;IACb,oBAAoB,EAAE,GAAG,CAAC;IAC1B,MAAM,EAAE,GAAG,CAAC;CACf,CAAA;AAED,qBAAa,2BAA4B,YAAW,WAAW;IAE3D,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,YAAY,IAAI,GAAG;IAqBnB,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAUnD,gBAAgB,IAAI,GAAG,CAAC,MAAM;IA4D9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAED,eAAO,MAAM,sCAAsC,6BAA8B,yBAAyB,4CAqTzG,CAAA;AAED,eAAO,MAAM,0BAA0B,+HAAgI,GAAG,mDAoEzK,CAAA;AAGD,eAAO,MAAM,sCAAsC,6BAA8B,yBAAyB,4CAiBzG,CAAA;AAMD,eAAO,MAAM,iCAAiC,6BAA8B,yBAAyB,4CA2cpG,CAAA"}

package/dist/components/core/form/fields/relations/SolidRelationManyToOneField.js

@@ -479,6 +479,7 @@ export var RenderSolidFormEmbededView = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     var formik = _a.formik, fieldContext = _a.fieldContext, customCreateHandler = _a.customCreateHandler, visibleCreateRelationEntity = _a.visibleCreateRelationEntity, setvisibleCreateRelationEntity = _a.setvisibleCreateRelationEntity, formViewParams = _a.formViewParams;
     var fieldLayoutInfo = fieldContext.field;
+    var viewMode = fieldContext.viewMode;
     var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field w-1/2 px-2 pt-2';
     var parentModelName = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.parentModelName;
     var childModelName = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.childModelName;
@@ -502,6 +503,9 @@ export var RenderSolidFormEmbededView = function (_a) {
             setvisibleCreateRelationEntity(false);
         }),
     };
+    if (viewMode === "view") {
+        return null;
+    }
     return (_jsxs("div", { children: [_jsx("div", { children: _jsx(SolidButton, { icon: "si si-plus", rounded: true, variant: "outline", "aria-label": "Filter", type: "button", size: "sm", onClick: function () { return setvisibleCreateRelationEntity(true); }, className: "custom-add-button" }) }), _jsxs(SolidDialog, { open: visibleCreateRelationEntity, onOpenChange: setvisibleCreateRelationEntity, style: {
                     width: (_s = (_r = (_q = (_p = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _p === void 0 ? void 0 : _p.inlineCreateLayout) === null || _q === void 0 ? void 0 : _q.attrs) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : "60vw",
                     height: (_w = (_v = (_u = (_t = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _t === void 0 ? void 0 : _t.inlineCreateLayout) === null || _u === void 0 ? void 0 : _u.attrs) === null || _v === void 0 ? void 0 : _v.height) !== null && _w !== void 0 ? _w : "auto"