@solidxai/core-ui 0.1.12-beta.6 → 0.1.12-beta.8

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

@@ -27,6 +27,7 @@ import { SolidFieldTooltip } from "../../../../components/common/SolidFieldToolt
 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;
@@ -158,6 +159,7 @@ export class SolidMediaMultipleField implements ISolidField {
 
 
 export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaFormFieldWidgetProps) => {
+    type MediaFileDetail = { name: string; type: string; size: number; mediaId: number | string | null; fileKey: string; fileUrl: string };
 
     const fieldMetadata = fieldContext.fieldMetadata;
     const fieldLayoutInfo = fieldContext.field;
@@ -176,8 +178,7 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
     const isFieldReadonly = formReadonly || fieldReadonly || readOnlyPermission;
 
     const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
-    const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
-    const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number, id: number, fileUrl: string }[]>([]);
+    const [fileDetails, setFileDetails] = useState<MediaFileDetail[]>([]);
     const [selectedFileId, setSelectedFileId] = useState<string | null>(null);
     const [fileSizeError, setFileSizeError] = useState<string | null>(null);
 
@@ -186,63 +187,63 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
             ? `${(size / (1024 * 1024)).toFixed(1)} MB`
             : `${(size / 1024).toFixed(1)} KB`;
     };
-    const [
-        deleteMedia,
-        { isLoading: isMediaDeleted, isSuccess: isDeleteMediaSuceess, isError: isMediaDeleteError, error: mediaDeleteError, data: DeletedMedia },
-    ] = useDeleteMediaMutation();
+    const [deleteMedia] = useDeleteMediaMutation();
     useEffect(() => {
         const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+        const objectUrls: string[] = [];
 
         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[] = [];
+            const details: MediaFileDetail[] = [];
             fieldValue.forEach((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);
+                    objectUrls.push(fileUrl);
 
                     details.push({
                         name: file.name,
                         type: file.type,
                         size: file.size,
-                        id: `${file.name}-${file.size}`,
-                        fileUrl: fileUrl // ✅ Store the generated object URL
+                        mediaId: null,
+                        fileKey: buildMediaFieldKey(file),
+                        fileUrl: fileUrl
                     });
                 } 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,
+                        mediaId: getPersistedMediaId(file),
+                        fileKey: buildMediaFieldKey(file),
                         fileUrl: file._full_url
                     });
                 }
             });
             setFileDetails(details);
+        } else {
+            setFileDetails([]);
         }
+
+        return () => {
+            objectUrls.forEach((url) => URL.revokeObjectURL(url));
+        };
     }, [formik.values, fieldLayoutInfo.attrs.name]);
 
     const handleDropImages = (acceptedFiles: any[]) => {
         if (!acceptedFiles.length) return;
         setFileSizeError(null);
-        const newFileDetails = [...fileDetails];
+        const existingFiles = Array.isArray(formik?.values[fieldLayoutInfo.attrs.name])
+            ? formik.values[fieldLayoutInfo.attrs.name]
+            : [];
         acceptedFiles.forEach((file) => {
-            newFileDetails.push({ name: file.name, type: file.type, size: file.size, id: file.id, fileUrl: file._full_url });
             const reader = new FileReader();
             reader.readAsDataURL(file);
         });
 
-        setFileDetails(newFileDetails);
-
         fieldContext.onChange(
             {
                 target: {
                     name: fieldLayoutInfo.attrs.name,
-                    value: acceptedFiles,
+                    value: [...existingFiles, ...acceptedFiles],
                     type: "text",
                 },
             } as any,
@@ -250,41 +251,53 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
         );
     };
 
-    const confirmDeleteFile = (fileId: any, deleteId: number) => {
+    const confirmDeleteFile = (fileId: string) => {
         setSelectedFileId(fileId);
         setDeleteImageDialogVisible(true);
-        setImageToBeDeletedData(deleteId)
     };
 
-    const deleteFile = () => {
-        if (selectedFileId && imageToBeDeletedData) {
-            // Remove file from UI before making API call
-            setFileDetails((prev) => prev.filter((file) => `${file.name}-${file.size}` !== selectedFileId));
-
-            deleteMedia(imageToBeDeletedData)
-                .unwrap()
-                .then(() => {
-                    // Update form state
-                    const nextValue = fileDetails.filter((file) => `${file.name}-${file.size}` !== selectedFileId);
-                    fieldContext.onChange(
-                        {
-                            target: {
-                                name: fieldLayoutInfo.attrs.name,
-                                value: nextValue,
-                                type: "text",
-                            },
-                        } as any,
-                        "onFieldChange"
-                    );
-                })
-                .catch((error) => {
-                    console.error(ERROR_MESSAGES.ERROR_DELETING_FILE, error);
-                });
+    const deleteFile = async () => {
+        if (!selectedFileId) {
+            return;
+        }
+
+        const currentFiles = Array.isArray(formik?.values[fieldLayoutInfo.attrs.name])
+            ? formik.values[fieldLayoutInfo.attrs.name]
+            : [];
+        const fileToDelete = currentFiles.find((file: File | any) => buildMediaFieldKey(file) === selectedFileId);
 
+        if (!fileToDelete) {
             setDeleteImageDialogVisible(false);
             setShowAllFiles(false);
             setSelectedFileId(null);
+            return;
         }
+
+        try {
+            const persistedMediaId = getPersistedMediaId(fileToDelete);
+            if (persistedMediaId !== null) {
+                await deleteMedia(persistedMediaId).unwrap();
+            }
+
+            const nextValue = currentFiles.filter((file: File | any) => buildMediaFieldKey(file) !== selectedFileId);
+            fieldContext.onChange(
+                {
+                    target: {
+                        name: fieldLayoutInfo.attrs.name,
+                        value: nextValue,
+                        type: "text",
+                    },
+                } as any,
+                "onFieldChange"
+            );
+            setFileDetails((prev) => prev.filter((file) => file.fileKey !== selectedFileId));
+        } catch (error) {
+            console.error(ERROR_MESSAGES.ERROR_DELETING_FILE, error);
+        }
+
+        setDeleteImageDialogVisible(false);
+        setShowAllFiles(false);
+        setSelectedFileId(null);
     };
 
     const {
@@ -402,7 +415,7 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                                             className="solid-file-icon-btn is-danger"
                                             disabled={isFieldDisabled || isFieldReadonly}
                                             aria-label="Remove file"
-                                            onClick={() => confirmDeleteFile(`${fileDetails[0].name}-${fileDetails[0].size}`, fileDetails[0].id)}
+                                            onClick={() => confirmDeleteFile(fileDetails[0].fileKey)}
                                         >
                                             <SolidIcon name="si-times" aria-hidden />
                                         </button>
@@ -441,7 +454,7 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                 <SolidDialogBody>
                 {fileDetails.length > 1 &&
                     fileDetails.map((file, index) => {
-                        const fileId = `${file.name}-${file.size}`;
+                        const fileId = file.fileKey;
                         return (
                             <div key={fileId} className="solid-file-upload-wrapper">
                                 <div className="flex items-center md:gap-2">
@@ -464,7 +477,7 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                                                     className="solid-file-icon-btn is-danger"
                                                     disabled={isFieldDisabled || isFieldReadonly}
                                                     aria-label="Remove file"
-                                                    onClick={() => confirmDeleteFile(fileId, file?.id)}
+                                                    onClick={() => confirmDeleteFile(fileId)}
                                                 >
                                                     <SolidIcon name="si-times" 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;AAM9E,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;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"}

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

@@ -9,6 +9,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DropzonePlaceholder } from "../../../../components/common/DropzonePlaceholder";
 import { useDeleteMediaMutation } from "../../../../redux/api/mediaApi";
@@ -26,6 +62,7 @@ import { SolidFieldTooltip } from "../../../../components/common/SolidFieldToolt
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import styles from "./solidFields.module.css";
 import { SolidIcon } from "../../../shad-cn-ui";
+import { getPersistedMediaId } from "./mediaFieldUtils";
 var SolidMediaSingleField = /** @class */ (function () {
     function SolidMediaSingleField(fieldContext, setLightboxUrls, setOpenLightbox) {
         Object.defineProperty(this, "fieldContext", {
@@ -170,23 +207,17 @@ export var DefaultMediaSingleFormEditWidget = function (_a) {
     var isFieldDisabled = formDisabled || fieldDisabled;
     var isFieldReadonly = formReadonly || fieldReadonly || readOnlyPermission;
     var _q = useState(false), isDeleteImageDialogVisible = _q[0], setDeleteImageDialogVisible = _q[1];
-    var _r = useState(), imageToBeDeletedData = _r[0], setImageToBeDeletedData = _r[1];
-    var _s = useState(null), fileDetails = _s[0], setFileDetails = _s[1];
-    var _t = useState(false), isReplaceImageDialogVisible = _t[0], setReplaceImageDialogVisible = _t[1];
-    var _u = useState(null), newFileToUpload = _u[0], setNewFileToUpload = _u[1];
-    var _v = useState(null), fileSizeError = _v[0], setFileSizeError = _v[1];
+    var _r = useState(null), fileDetails = _r[0], setFileDetails = _r[1];
+    var _s = useState(false), isReplaceImageDialogVisible = _s[0], setReplaceImageDialogVisible = _s[1];
+    var _t = useState(null), newFileToUpload = _t[0], setNewFileToUpload = _t[1];
+    var _u = useState(null), fileSizeError = _u[0], setFileSizeError = _u[1];
     var formatFileSize = function (size) {
         return size >= 1024 * 1024
             ? "".concat((size / (1024 * 1024)).toFixed(1), " MB")
             : "".concat((size / 1024).toFixed(1), " KB");
     };
-    var _w = useDeleteMediaMutation(), deleteMedia = _w[0], _x = _w[1], isMediaDeleted = _x.isLoading, isDeleteMediaSuceess = _x.isSuccess, isMediaDeleteError = _x.isError, mediaDeleteError = _x.error, DeletedMedia = _x.data;
-    var handleCancelUpload = function (e) {
-        e.stopPropagation();
-        if (imageToBeDeletedData) {
-            deleteMedia(imageToBeDeletedData);
-        }
-        e.stopPropagation();
+    var deleteMedia = useDeleteMediaMutation()[0];
+    var clearSelectedFile = function () {
         setFileDetails(null);
         fieldContext.onChange({
             target: {
@@ -195,8 +226,48 @@ export var DefaultMediaSingleFormEditWidget = function (_a) {
                 type: "text",
             },
         }, "onFieldChange");
-        setDeleteImageDialogVisible(false);
     };
+    var deletePersistedMediaIfNeeded = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        var mediaId;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("DeletePersistedMedia Called");
+                    mediaId = getPersistedMediaId(value);
+                    if (!(mediaId !== null)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, deleteMedia(mediaId).unwrap()];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancelUpload = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("handleCancelUpload called");
+                    e.stopPropagation();
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, deletePersistedMediaIfNeeded(formik === null || formik === void 0 ? void 0 : formik.values[fieldLayoutInfo.attrs.name])];
+                case 2:
+                    _a.sent();
+                    clearSelectedFile();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error(ERROR_MESSAGES.ERROR_DELETING_FILE, error_1);
+                    return [3 /*break*/, 4];
+                case 4:
+                    setDeleteImageDialogVisible(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     var handleDropImage = function (acceptedFiles) {
         var file = acceptedFiles[0];
         if (!file)
@@ -229,26 +300,32 @@ export var DefaultMediaSingleFormEditWidget = function (_a) {
             },
         }, "onFieldChange");
     };
-    var handleReplaceFile = function () {
-        // Delete the existing file first
-        if (imageToBeDeletedData) {
-            deleteMedia(imageToBeDeletedData);
-        }
-        setFileDetails(null);
-        fieldContext.onChange({
-            target: {
-                name: fieldLayoutInfo.attrs.name,
-                value: null,
-                type: "text",
-            },
-        }, "onFieldChange");
-        // Proceed with uploading new file
-        if (newFileToUpload) {
-            uploadFile(newFileToUpload);
-            setNewFileToUpload(null);
-        }
-        setReplaceImageDialogVisible(false);
-    };
+    var handleReplaceFile = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, deletePersistedMediaIfNeeded(formik === null || formik === void 0 ? void 0 : formik.values[fieldLayoutInfo.attrs.name])];
+                case 1:
+                    _a.sent();
+                    clearSelectedFile();
+                    // Proceed with uploading new file
+                    if (newFileToUpload) {
+                        uploadFile(newFileToUpload);
+                        setNewFileToUpload(null);
+                    }
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_2 = _a.sent();
+                    console.error(ERROR_MESSAGES.ERROR_DELETING_FILE, error_2);
+                    return [3 /*break*/, 3];
+                case 3:
+                    setReplaceImageDialogVisible(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     useEffect(function () {
         var fieldValue = formik === null || formik === void 0 ? void 0 : formik.values[fieldLayoutInfo.attrs.name];
         if (fieldValue && typeof fieldValue === "object") {
@@ -271,13 +348,14 @@ export var DefaultMediaSingleFormEditWidget = function (_a) {
                 fileUrl: fileUrl,
                 fileSize: fileSize
             });
-            // Set file ID for delete operation
-            setImageToBeDeletedData(fieldValue.id);
             // Ensure formik has the correct value
             formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
         }
+        else {
+            setFileDetails(null);
+        }
     }, [formik.values, fieldLayoutInfo.attrs.name]);
-    var _y = useDropzone({
+    var _v = useDropzone({
         onDrop: handleDropImage,
         onDropRejected: function (fileRejections) {
             var _a;
@@ -293,7 +371,7 @@ export var DefaultMediaSingleFormEditWidget = function (_a) {
         accept: getAcceptedFileTypes(fieldMetadata.mediaTypes),
         maxSize: fieldMetadata.mediaMaxSizeKb * 1024,
         disabled: isFieldDisabled || isFieldReadonly
-    }), getRootProps = _y.getRootProps, getInputProps = _y.getInputProps, isDragActive = _y.isDragActive;
+    }), getRootProps = _v.getRootProps, getInputProps = _v.getInputProps, isDragActive = _v.isDragActive;
     var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
     var DynamicWidget = getExtensionComponent("SolidFormFieldViewMediaSingleWidget");
     var widgetProps = {