albinasoft-ui-package 1.1.36 → 1.1.38

package/dist/components/CustomFileUploader.d.ts

@@ -55,6 +55,11 @@ export interface CustomFileUploaderProps {
    * Eğer bu prop’un değeri değişirse uploader içini temizle
    */
     clearTrigger?: any;
+    /**
+     * Yükleme işlemi sırasında yükleme durumunu parent'a bildirmek için callback.
+     * Bu, yükleme işlemi başladığında ve bittiğinde çağrılabilir.
+     */
+    onUploadingChange?: (uploading: boolean) => void;
 }
 declare const CustomFileUploader: React.FC<CustomFileUploaderProps>;
 export default CustomFileUploader;

package/dist/components/CustomFileUploader.js

@@ -117,6 +117,18 @@ exports.defaultTranslations = {
 // ====================
 // Stil Ayarları
 // ====================
+var spinnerStyle = {
+    position: "absolute",
+    top: "40%",
+    left: "40%",
+    width: "20px",
+    height: "20px",
+    border: "2px solid #007bff",
+    borderTop: "2px solid transparent",
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite",
+    zIndex: 3,
+};
 var dropAreaStyle = {
     border: "2px dashed #007bff",
     borderRadius: "5px",
@@ -210,7 +222,7 @@ var isAllowedFileType = function (file, allowedType) {
 // CustomFileUploader Bileşeni
 // ====================
 var CustomFileUploader = function (props) {
-    var url = props.url, multi = props.multi, allowedTypes = props.allowedTypes, maxFile = props.maxFile, maxSize = props.maxSize, onUploadComplete = props.onUploadComplete, onRemoveUploaded = props.onRemoveUploaded, label = props.label, onPendingChange = props.onPendingChange, translations = props.translations, clearTrigger = props.clearTrigger;
+    var url = props.url, multi = props.multi, allowedTypes = props.allowedTypes, maxFile = props.maxFile, maxSize = props.maxSize, onUploadComplete = props.onUploadComplete, onRemoveUploaded = props.onRemoveUploaded, label = props.label, onPendingChange = props.onPendingChange, translations = props.translations, clearTrigger = props.clearTrigger, onUploadingChange = props.onUploadingChange;
     // Varsayılan çeviri metinlerini, gelen prop ile birleştiriyoruz.
     var finalTranslations = __assign(__assign({}, exports.defaultTranslations), translations);
     var _a = (0, react_1.useState)([]), previews = _a[0], setPreviews = _a[1];
@@ -235,6 +247,14 @@ var CustomFileUploader = function (props) {
             handleClearAll();
         }
     }, [clearTrigger]);
+    (0, react_1.useEffect)(function () {
+        var style = document.createElement("style");
+        style.innerHTML = "\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n  ";
+        document.head.appendChild(style);
+        return function () {
+            document.head.removeChild(style);
+        };
+    }, []);
     // Pending dosya sayısını parent'a iletecek yardımcı fonksiyon
     var updatePendingStatus = function (previewsArray) {
         if (onPendingChange) {
@@ -322,18 +342,25 @@ var CustomFileUploader = function (props) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    onUploadingChange === null || onUploadingChange === void 0 ? void 0 : onUploadingChange(true);
                     filesToUpload = previews.filter(function (item) { return !item.uploaded; }).map(function (item) { return item.file; });
                     if (filesToUpload.length === 0) {
                         react_toastify_1.toast.warning(finalTranslations.noFileSelectedWarning);
                         return [2 /*return*/];
                     }
+                    // Yüklenmeye başlayan dosyaları işaretle
+                    setPreviews(function (prev) {
+                        return prev.map(function (item) {
+                            return !item.uploaded ? __assign(__assign({}, item), { isUploading: true }) : item;
+                        });
+                    });
                     formData = new FormData();
                     filesToUpload.forEach(function (file) {
                         formData.append("file", file);
                     });
                     _a.label = 1;
                 case 1:
-                    _a.trys.push([1, 7, , 8]);
+                    _a.trys.push([1, 7, 8, 9]);
                     return [4 /*yield*/, fetch(url, {
                             method: "POST",
                             body: formData,
@@ -355,7 +382,7 @@ var CustomFileUploader = function (props) {
                         setPreviews(function (prev) {
                             var updatedPreviews = prev.map(function (item, index) {
                                 if (!item.uploaded) {
-                                    return __assign(__assign({}, item), { uploaded: true, serverFileName: uploadedFileNames_1[index] || item.file.name });
+                                    return __assign(__assign({}, item), { uploaded: true, isUploading: false, serverFileName: uploadedFileNames_1[index] || item.file.name });
                                 }
                                 return item;
                             });
@@ -374,13 +401,16 @@ var CustomFileUploader = function (props) {
                     console.error("API Hatası:", errorData);
                     react_toastify_1.toast.error(finalTranslations.uploadErrorToast);
                     _a.label = 6;
-                case 6: return [3 /*break*/, 8];
+                case 6: return [3 /*break*/, 9];
                 case 7:
                     error_1 = _a.sent();
                     console.error("API çağrısında hata:", error_1);
                     react_toastify_1.toast.error(finalTranslations.uploadErrorToast);
-                    return [3 /*break*/, 8];
-                case 8: return [2 /*return*/];
+                    return [3 /*break*/, 9];
+                case 8:
+                    onUploadingChange === null || onUploadingChange === void 0 ? void 0 : onUploadingChange(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
             }
         });
     }); };
@@ -393,10 +423,12 @@ var CustomFileUploader = function (props) {
             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: 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: {
                         width: "100%",
                         height: "100%",
                         objectFit: "cover",
+                        opacity: item.isUploading ? 0.5 : 1,
                     } })) : (react_1.default.createElement("div", { style: {
                         width: "100%",
                         height: "100%",
@@ -404,11 +436,12 @@ var CustomFileUploader = function (props) {
                         justifyContent: "center",
                         alignItems: "center",
                         fontSize: "48px",
+                        opacity: item.isUploading ? 0.5 : 1,
                     } }, item.previewContent)),
                 react_1.default.createElement("button", { type: "button", style: removeButtonStyle, onClick: function (e) {
                         e.stopPropagation();
                         handleRemoveFile(item.id);
-                    }, title: finalTranslations.removeButtonTitle }, "\u00D7"),
+                    }, title: finalTranslations.removeButtonTitle, disabled: item.isUploading }, "\u00D7"),
                 item.uploaded && react_1.default.createElement("div", { style: tickOverlayStyle }, "\u2713")),
             react_1.default.createElement("div", { style: {
                     marginTop: "4px",

package/dist/components/CustomForm.js

@@ -74,6 +74,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElementType = exports.CustomForm = void 0;
+//CustomForm.tsx
 var react_1 = __importStar(require("react"));
 var react_toastify_1 = require("react-toastify");
 var CustomButton_1 = __importDefault(require("./CustomButton"));
@@ -120,6 +121,7 @@ var CustomForm = function (_a) {
     var formRef = (0, react_1.useRef)(null);
     var _f = (0, react_1.useState)(false), isLoading = _f[0], setIsLoading = _f[1];
     var _g = (0, react_1.useState)(false), submitted = _g[0], setSubmitted = _g[1];
+    var _h = (0, react_1.useState)(false), isUploading = _h[0], setIsUploading = _h[1];
     var handleConfirm = function (e) { return __awaiter(void 0, void 0, void 0, function () {
         var form, customSelectValid, isValid, formValues_1, error_1;
         return __generator(this, function (_a) {
@@ -228,14 +230,14 @@ var CustomForm = function (_a) {
                     return (react_1.default.createElement("div", { className: "row ".concat(innerRowCustomClass), key: "inner-row-".concat(rowId, "-").concat(colId, "-").concat(innerRowId) }, elements.map(function (element) { return (react_1.default.createElement("div", { className: element.colClass || "col-12", key: element.id }, element.type === ElementType.TEXT ? (react_1.default.createElement(CustomText_1.default, __assign({}, element))) : element.type === ElementType.INPUT ? (react_1.default.createElement(CustomInput_1.default, __assign({}, element))) : element.type === ElementType.TEXTAREA ? (react_1.default.createElement(CustomTextarea_1.default, __assign({}, element))) : element.type === ElementType.CHECKBOX ? (react_1.default.createElement(CustomCheckbox_1.default, __assign({}, element))) : element.type === ElementType.RADIO ? (react_1.default.createElement(CustomRadioButton_1.default, __assign({}, element))) : element.type === ElementType.SELECT ? (react_1.default.createElement(CustomSelect_1.default, __assign({}, element, { submitted: submitted }))) : element.type === ElementType.SIMPLESELECT ? (react_1.default.createElement(CustomSimpleSelect_1.default, __assign({}, element, { value: Array.isArray(element.value) ? element.value[0] || "" : "", onChange: function (val) { return element.onChange(val); } }))) : 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))) : 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, { 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 }))) : null)); })));
+                        react_1.default.createElement(CustomFileUploader_1.default, { 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 }))) : null)); })));
                 })));
             })));
         }),
         (showConfirmButton || showCancelButton) && (react_1.default.createElement("div", { className: "card-footer mt-3" },
             react_1.default.createElement("div", { className: "form-actions mt-3", style: { display: "flex", justifyContent: "flex-end", gap: "10px" } },
-                showCancelButton && (react_1.default.createElement(CustomButton_1.default, { label: cancelLabel, className: "btn btn-secondary", onClick: handleCancel || (function () { }), isLoading: isLoading })),
-                showConfirmButton && (react_1.default.createElement(CustomButton_1.default, { label: confirmLabel, className: "btn btn-primary", onClick: handleConfirm, isLoading: isLoading })))))));
+                showCancelButton && (react_1.default.createElement(CustomButton_1.default, { label: cancelLabel, className: "btn btn-secondary", onClick: handleCancel || (function () { }), isLoading: isLoading || isUploading })),
+                showConfirmButton && (react_1.default.createElement(CustomButton_1.default, { label: confirmLabel, className: "btn btn-primary", onClick: handleConfirm, isLoading: isLoading || isUploading })))))));
 };
 exports.CustomForm = CustomForm;
 exports.default = CustomForm;

package/package.json

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