albinasoft-ui-package 1.1.60 → 1.1.62

package/dist/components/CustomFileUploader.d.ts

@@ -22,6 +22,7 @@ export interface FileUploaderTranslations {
     fileTypeError: string;
     noFileSelectedWarning: string;
     pendingBeforeSubmitWarning?: string;
+    requiredBeforeSubmitWarning?: string;
 }
 export declare const defaultTranslations: FileUploaderTranslations;
 export interface CustomFileUploaderProps {
@@ -35,6 +36,8 @@ export interface CustomFileUploaderProps {
     maxFile: number;
     /** Her bir dosya için maksimum boyut (byte cinsinden) */
     maxSize: number;
+    required?: boolean;
+    submitted?: boolean;
     /**
      * Opsiyonel: Yükleme tamamlandığında dönen dosya isimlerini almak için callback.
      */

package/dist/components/CustomFileUploader.js

@@ -112,7 +112,8 @@ exports.defaultTranslations = {
     fileSizeError: "isimli dosya, boyut limitini aşıyor.",
     fileTypeError: "isimli dosya, seçilen dosya türüne uygun değil.",
     noFileSelectedWarning: "Önce en az bir dosya seçiniz.",
-    pendingBeforeSubmitWarning: "Henüz yüklenmemiş dosyalar var. Lütfen önce 'Yükle' butonuna basın."
+    pendingBeforeSubmitWarning: "Henüz yüklenmemiş dosyalar var. Lütfen önce 'Yükle' butonuna basın.",
+    requiredBeforeSubmitWarning: "En az bir dosya yüklemiş olmalısınız."
 };
 // ====================
 // Stil Ayarları
@@ -130,7 +131,7 @@ var spinnerStyle = {
     zIndex: 3,
 };
 var dropAreaStyle = {
-    border: "2px dashed #007bff",
+    //border: "2px dashed #007bff",
     borderRadius: "5px",
     padding: "20px",
     textAlign: "center",
@@ -227,6 +228,7 @@ var CustomFileUploader = (0, react_1.forwardRef)(function (props, ref) {
     var finalTranslations = __assign(__assign({}, exports.defaultTranslations), translations);
     var _a = (0, react_1.useState)([]), previews = _a[0], setPreviews = _a[1];
     var fileInputRef = (0, react_1.useRef)(null);
+    var isInvalid = props.required && props.submitted && !previews.some(function (p) { return p.uploaded; });
     // Parent submit öncesi çağırıyor: pending varsa uyar ve blokla
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         validateReady: function () {
@@ -235,9 +237,17 @@ var CustomFileUploader = (0, react_1.forwardRef)(function (props, ref) {
                 onNotify === null || onNotify === void 0 ? void 0 : onNotify.warning(finalTranslations.pendingBeforeSubmitWarning || exports.defaultTranslations.pendingBeforeSubmitWarning);
                 return false;
             }
+            // REQUIRED kuralı: en az 1 adet YÜKLENMİŞ dosya olmalı
+            if (props.required) {
+                var hasUploaded = previews.some(function (p) { return p.uploaded; });
+                if (!hasUploaded) {
+                    onNotify === null || onNotify === void 0 ? void 0 : onNotify.warning(finalTranslations.requiredBeforeSubmitWarning || exports.defaultTranslations.requiredBeforeSubmitWarning);
+                    return false;
+                }
+            }
             return true;
         }
-    }); }, [previews, finalTranslations, onNotify]);
+    }); }, [previews, finalTranslations, onNotify, props.required]);
     // CustomFileUploader.tsx içinde component’in üst kısmına, diğer handler’ların yanına ekleyin:
     var handleClearAll = function () {
         previews.forEach(function (item) {
@@ -433,7 +443,7 @@ var CustomFileUploader = (0, react_1.forwardRef)(function (props, ref) {
     return (react_1.default.createElement("div", { style: { width: "100%", height: "100%" } },
         label && (react_1.default.createElement("div", { style: { marginBottom: "10px" } },
             react_1.default.createElement("label", { style: { fontWeight: "bold" } }, label))),
-        react_1.default.createElement("div", { style: dropAreaStyle, onDrop: handleDrop, onDragOver: handleDragOver, onClick: handleAreaClick }, previews.length === 0 ? (react_1.default.createElement("div", null, dropAreaText)) : (react_1.default.createElement("div", { style: previewContainerStyle }, previews.map(function (item) { return (react_1.default.createElement("div", { key: item.id, style: { display: "flex", flexDirection: "column", alignItems: "center" } },
+        react_1.default.createElement("div", { style: __assign(__assign({}, dropAreaStyle), { border: isInvalid ? "2px dashed #ff0000ff" : "2px dashed #007bff" }), onDrop: handleDrop, onDragOver: handleDragOver, onClick: handleAreaClick }, previews.length === 0 ? (react_1.default.createElement("div", null, dropAreaText)) : (react_1.default.createElement("div", { style: previewContainerStyle }, previews.map(function (item) { return (react_1.default.createElement("div", { key: item.id, style: { display: "flex", flexDirection: "column", alignItems: "center" } },
             react_1.default.createElement("div", { style: previewItemStyle },
                 item.isUploading && react_1.default.createElement("div", { style: spinnerStyle }),
                 item.isImage ? (react_1.default.createElement("img", { src: item.previewContent, alt: "\u00D6nizleme ".concat(item.id), style: {
@@ -467,6 +477,9 @@ var CustomFileUploader = (0, react_1.forwardRef)(function (props, ref) {
         react_1.default.createElement("input", { type: "file", multiple: multi, ref: fileInputRef, onChange: handleFileChange, style: { display: "none" } }),
         react_1.default.createElement("div", { className: "d-flex justify-content-center gap-2 mt-3" },
             previews.length > 1 && (react_1.default.createElement(CustomButton_1.default, { label: "T\u00FCm\u00FCn\u00FC Sil", className: "btn btn-danger", onClick: handleClearAll })),
-            previews.filter(function (item) { return !item.uploaded; }).length > 0 && (react_1.default.createElement(CustomButton_1.default, { label: finalTranslations.uploadButtonText, className: "btn btn-primary", onClick: handleUpload })))));
+            previews.filter(function (item) { return !item.uploaded; }).length > 0 && (react_1.default.createElement(CustomButton_1.default, { label: finalTranslations.uploadButtonText, className: "btn btn-primary", onClick: handleUpload }))),
+        isInvalid && (react_1.default.createElement("div", { className: "invalid-feedback d-block text-danger mt-1" },
+            react_1.default.createElement(fa_1.FaExclamationTriangle, { className: "me-1" }),
+            finalTranslations.requiredBeforeSubmitWarning || "Bu alan boş bırakılamaz."))));
 });
 exports.default = CustomFileUploader;

package/dist/components/CustomForm.d.ts

@@ -200,6 +200,7 @@ interface FileUploaderElement {
     allowedTypes: AllowedTypes;
     maxFile: number;
     maxSize: number;
+    required?: boolean;
     onUploadComplete: (uploadedFileNames: string[]) => void;
     onRemoveUploaded: (fileName: string) => void;
     onPendingChange: (pendingFileCount: number) => void;

package/dist/components/CustomForm.js

@@ -131,35 +131,32 @@ var CustomForm = function (_a) {
         uploaderInstances.current[id] = inst;
     }; };
     var handleConfirm = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var instances, _i, instances_1, inst, ok, form, customSelectValid, customTreeViewValid, isValid, formValues_1, error_1;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var form, uploaderValid, instances, _i, instances_1, inst, ok, customSelectValid, customTreeViewValid, nativeValid, allValid, formValues_1, _a;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
                     e.preventDefault();
-                    setSubmitted(true); // Form gönderimi tetiklendi
+                    // 1) Görsel validasyon state'lerini aç
+                    setSubmitted(true);
+                    form = formRef.current;
+                    if (!form)
+                        return [2 /*return*/];
+                    uploaderValid = true;
                     instances = Object.values(uploaderInstances.current);
                     for (_i = 0, instances_1 = instances; _i < instances_1.length; _i++) {
                         inst = instances_1[_i];
-                        ok = (_a = inst === null || inst === void 0 ? void 0 : inst.validateReady) === null || _a === void 0 ? void 0 : _a.call(inst);
+                        ok = (_b = inst === null || inst === void 0 ? void 0 : inst.validateReady) === null || _b === void 0 ? void 0 : _b.call(inst);
                         if (ok === false) {
-                            // Uyarıyı uploader kendisi gösterdi; submit başlamasın.
-                            return [2 /*return*/];
+                            uploaderValid = false;
                         }
                     }
-                    setSubmitted(true);
-                    form = formRef.current;
-                    if (!form)
-                        return [2 /*return*/];
                     customSelectValid = true;
                     elements.forEach(function (element) {
-                        if (element.type === ElementType.SELECT &&
-                            element.required) {
+                        if (element.type === ElementType.SELECT && element.required) {
                             var selectElement = element;
-                            // Eğer değer boş (string) veya boş array ise geçersiz kabul edin
-                            if ((Array.isArray(selectElement.value) &&
-                                selectElement.value.length === 0) ||
-                                (!Array.isArray(selectElement.value) && !selectElement.value)) {
+                            var val = selectElement.value;
+                            if ((Array.isArray(val) && val.length === 0) || (!Array.isArray(val) && !val)) {
                                 customSelectValid = false;
                             }
                         }
@@ -174,12 +171,22 @@ var CustomForm = function (_a) {
                             }
                         }
                     });
-                    isValid = form.checkValidity() && customSelectValid && customTreeViewValid;
-                    if (!isValid) return [3 /*break*/, 6];
+                    nativeValid = form.checkValidity();
+                    allValid = uploaderValid && customSelectValid && customTreeViewValid && nativeValid;
+                    if (!allValid) {
+                        // Bootstrap görsel validasyonlarını hemen göster
+                        form.classList.add("was-validated");
+                        // Destekleyen tarayıcılarda nerenin hatalı olduğunu anında gösterir
+                        (_c = form.reportValidity) === null || _c === void 0 ? void 0 : _c.call(form);
+                        // Kullanıcıya genel mesaj
+                        notify.error("Gerekli tüm alanları doldurunuz.");
+                        return [2 /*return*/];
+                    }
+                    // 7) BURADAN SONRA GERÇEK SUBMIT
                     setIsLoading(true);
-                    _b.label = 1;
+                    _d.label = 1;
                 case 1:
-                    _b.trys.push([1, 3, 4, 5]);
+                    _d.trys.push([1, 3, 4, 5]);
                     formValues_1 = {};
                     Array.from(form.elements).forEach(function (element) {
                         if (element instanceof HTMLInputElement ||
@@ -187,18 +194,15 @@ var CustomForm = function (_a) {
                             element instanceof HTMLSelectElement) {
                             if (element.id) {
                                 var name_1 = element.name || element.id;
-                                if (element instanceof HTMLInputElement &&
-                                    element.type === ElementType.RADIO) {
+                                if (element instanceof HTMLInputElement && element.type === "radio") {
                                     if (element.checked) {
                                         formValues_1[name_1] = element.value;
                                     }
                                 }
-                                else if (element instanceof HTMLInputElement &&
-                                    element.type === ElementType.CHECKBOX) {
+                                else if (element instanceof HTMLInputElement && element.type === "checkbox") {
                                     formValues_1[name_1] = element.checked;
                                 }
-                                else if (element instanceof HTMLSelectElement &&
-                                    element.multiple) {
+                                else if (element instanceof HTMLSelectElement && element.multiple) {
                                     var selectedOptions = Array.from(element.selectedOptions).map(function (option) { return option.value; });
                                     formValues_1[name_1] = selectedOptions;
                                 }
@@ -211,7 +215,6 @@ var CustomForm = function (_a) {
                             }
                         }
                     });
-                    // Özel elemanlar için (örneğin RichTextbox) değerleri ekleyin
                     elements.forEach(function (element) {
                         if ("value" in element && element.type === ElementType.RICHTEXTBOX) {
                             formValues_1[element.id] = element.value;
@@ -219,21 +222,16 @@ var CustomForm = function (_a) {
                     });
                     return [4 /*yield*/, onSubmit(formValues_1)];
                 case 2:
-                    _b.sent();
+                    _d.sent();
                     return [3 /*break*/, 5];
                 case 3:
-                    error_1 = _b.sent();
+                    _a = _d.sent();
                     notify.error("Form gönderimi sırasında bir hata oluştu.");
                     return [3 /*break*/, 5];
                 case 4:
                     setIsLoading(false);
                     return [7 /*endfinally*/];
-                case 5: return [3 /*break*/, 7];
-                case 6:
-                    notify.error("Gerekli tüm alanları doldurunuz.");
-                    form.classList.add("was-validated");
-                    _b.label = 7;
-                case 7: return [2 /*return*/];
+                case 5: return [2 /*return*/];
             }
         });
     }); };
@@ -265,7 +263,7 @@ var CustomForm = function (_a) {
                         } }))) : element.type === ElementType.DATETIMEPICKER ? (react_1.default.createElement(CustomDateTimePicker_1.default, __assign({}, element, { submitted: submitted }))) : element.type === ElementType.DIVIDER ? (react_1.default.createElement(CustomDivider_1.default, __assign({}, element))) : element.type === ElementType.RICHTEXTBOX ? (react_1.default.createElement(CustomRichTextbox_1.default, __assign({}, element))) : element.type === ElementType.TREEVIEW ? (react_1.default.createElement(CustomTreeView_1.default, __assign({}, element, { submitted: submitted }))) : element.type === ElementType.BUTTON ? (react_1.default.createElement(CustomButton_1.default, __assign({}, element, { isLoading: isLoading }))) : element.type === ElementType.AUTOCOMPLETEINPUT ? (react_1.default.createElement(CustomAutocompleteInput_1.default, __assign({}, element))) : element.type === ElementType.PHONE ? (react_1.default.createElement(CustomPhoneInput_1.default, __assign({}, element))) : element.type === ElementType.FILEUPLOADER ? (
                     // FILEUPLOADER elemanı için CustomFileUploader'ı render ediyoruz
                     react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(CustomFileUploader_1.default, { ref: getUploaderRefCb(element.id), url: element.url, multi: element.multi, allowedTypes: element.allowedTypes, maxFile: element.maxFile, maxSize: element.maxSize, onUploadComplete: element.onUploadComplete, onRemoveUploaded: element.onRemoveUploaded, onPendingChange: element.onPendingChange, clearTrigger: element.clearTrigger, label: element.label, translations: element.translations, onUploadingChange: setIsUploading, onNotify: onNotify }))) : null)); })));
+                        react_1.default.createElement(CustomFileUploader_1.default, { ref: getUploaderRefCb(element.id), url: element.url, multi: element.multi, allowedTypes: element.allowedTypes, maxFile: element.maxFile, maxSize: element.maxSize, required: element.required, submitted: submitted, onUploadComplete: element.onUploadComplete, onRemoveUploaded: element.onRemoveUploaded, onPendingChange: element.onPendingChange, clearTrigger: element.clearTrigger, label: element.label, translations: element.translations, onUploadingChange: setIsUploading, onNotify: onNotify }))) : null)); })));
                 })));
             })));
         }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "albinasoft-ui-package",
-  "version": "1.1.60",
+  "version": "1.1.62",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {