albinasoft-ui-package 1.1.44 → 1.1.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/dist/assets/css/custom-autocomplete-input.css +49 -49
- package/dist/assets/css/custom-datatable.css +2 -2
- package/dist/assets/css/custom-datetime-picker.css +779 -779
- package/dist/assets/css/custom-progress-bar.css +37 -37
- package/dist/assets/css/custom-select.css +62 -62
- package/dist/assets/css/custom-simple-select.css +117 -117
- package/dist/assets/css/custom-timeline.css +43 -43
- package/dist/assets/css/custom-treeview.css +83 -83
- package/dist/assets/css/dark.css +2159 -2159
- package/dist/assets/css/main.css +26664 -26664
- package/dist/components/AlbinaForm.d.ts +28 -28
- package/dist/components/AlbinaForm.js +88 -88
- package/dist/components/CustomAutocompleteInput.d.ts +23 -23
- package/dist/components/CustomAutocompleteInput.js +185 -185
- package/dist/components/CustomButton.d.ts +14 -14
- package/dist/components/CustomButton.js +98 -98
- package/dist/components/CustomCheckbox.d.ts +20 -20
- package/dist/components/CustomCheckbox.js +58 -58
- package/dist/components/CustomDatatable.d.ts +42 -42
- package/dist/components/CustomDatatable.js +92 -92
- package/dist/components/CustomDateTimePicker.d.ts +33 -33
- package/dist/components/CustomDateTimePicker.js +97 -91
- package/dist/components/CustomDivider.d.ts +51 -51
- package/dist/components/CustomDivider.js +87 -87
- package/dist/components/CustomFileUploader.d.ts +65 -65
- package/dist/components/CustomFileUploader.js +460 -460
- package/dist/components/CustomForm.d.ts +225 -225
- package/dist/components/CustomForm.js +259 -259
- package/dist/components/CustomInput.d.ts +37 -37
- package/dist/components/CustomInput.js +85 -85
- package/dist/components/CustomModal.d.ts +15 -15
- package/dist/components/CustomModal.js +17 -17
- package/dist/components/CustomPhoneInput.d.ts +29 -29
- package/dist/components/CustomPhoneInput.js +251 -251
- package/dist/components/CustomProgressBar.d.ts +9 -9
- package/dist/components/CustomProgressBar.js +40 -40
- package/dist/components/CustomRadioButton.d.ts +25 -25
- package/dist/components/CustomRadioButton.js +34 -34
- package/dist/components/CustomRichTextbox.d.ts +14 -14
- package/dist/components/CustomRichTextbox.js +89 -89
- package/dist/components/CustomSelect.d.ts +32 -32
- package/dist/components/CustomSelect.js +193 -193
- package/dist/components/CustomSimpleSelect.d.ts +21 -21
- package/dist/components/CustomSimpleSelect.js +64 -64
- package/dist/components/CustomTab.d.ts +44 -44
- package/dist/components/CustomTab.js +122 -122
- package/dist/components/CustomText.d.ts +72 -72
- package/dist/components/CustomText.js +158 -158
- package/dist/components/CustomTextarea.d.ts +22 -22
- package/dist/components/CustomTextarea.js +33 -33
- package/dist/components/CustomTimeline.d.ts +30 -30
- package/dist/components/CustomTimeline.js +80 -80
- package/dist/components/CustomTreeView.d.ts +20 -20
- package/dist/components/CustomTreeView.js +197 -168
- package/dist/index.d.ts +22 -22
- package/dist/index.js +48 -48
- package/package.json +45 -44
- package/readme.md +9 -9
@@ -1,460 +1,460 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
3
|
-
__assign = Object.assign || function(t) {
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
-
s = arguments[i];
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
-
t[p] = s[p];
|
8
|
-
}
|
9
|
-
return t;
|
10
|
-
};
|
11
|
-
return __assign.apply(this, arguments);
|
12
|
-
};
|
13
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
14
|
-
if (k2 === undefined) k2 = k;
|
15
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
16
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
17
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
18
|
-
}
|
19
|
-
Object.defineProperty(o, k2, desc);
|
20
|
-
}) : (function(o, m, k, k2) {
|
21
|
-
if (k2 === undefined) k2 = k;
|
22
|
-
o[k2] = m[k];
|
23
|
-
}));
|
24
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
25
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
26
|
-
}) : function(o, v) {
|
27
|
-
o["default"] = v;
|
28
|
-
});
|
29
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
30
|
-
if (mod && mod.__esModule) return mod;
|
31
|
-
var result = {};
|
32
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
33
|
-
__setModuleDefault(result, mod);
|
34
|
-
return result;
|
35
|
-
};
|
36
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
37
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
38
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
39
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
40
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
41
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
42
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
43
|
-
});
|
44
|
-
};
|
45
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
46
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
47
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
48
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
49
|
-
function step(op) {
|
50
|
-
if (f) throw new TypeError("Generator is already executing.");
|
51
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
52
|
-
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;
|
53
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
54
|
-
switch (op[0]) {
|
55
|
-
case 0: case 1: t = op; break;
|
56
|
-
case 4: _.label++; return { value: op[1], done: false };
|
57
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
58
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
59
|
-
default:
|
60
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
61
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
62
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
63
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
64
|
-
if (t[2]) _.ops.pop();
|
65
|
-
_.trys.pop(); continue;
|
66
|
-
}
|
67
|
-
op = body.call(thisArg, _);
|
68
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
69
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
70
|
-
}
|
71
|
-
};
|
72
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
73
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
74
|
-
if (ar || !(i in from)) {
|
75
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
76
|
-
ar[i] = from[i];
|
77
|
-
}
|
78
|
-
}
|
79
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
80
|
-
};
|
81
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
82
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
83
|
-
};
|
84
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
85
|
-
exports.defaultTranslations = exports.AllowedTypes = void 0;
|
86
|
-
// CustomFileUploader.tsx
|
87
|
-
var react_1 = __importStar(require("react"));
|
88
|
-
var react_toastify_1 = require("react-toastify");
|
89
|
-
var fa_1 = require("react-icons/fa");
|
90
|
-
var CustomButton_1 = __importDefault(require("./CustomButton"));
|
91
|
-
// ====================
|
92
|
-
// Tip Tanımlamaları
|
93
|
-
// ====================
|
94
|
-
var AllowedTypes;
|
95
|
-
(function (AllowedTypes) {
|
96
|
-
AllowedTypes["PDF"] = "pdf";
|
97
|
-
AllowedTypes["FILE"] = "file";
|
98
|
-
AllowedTypes["IMAGE"] = "image";
|
99
|
-
AllowedTypes["VIDEO"] = "video";
|
100
|
-
AllowedTypes["VISUAL"] = "visual";
|
101
|
-
AllowedTypes["ALL"] = "all";
|
102
|
-
})(AllowedTypes = exports.AllowedTypes || (exports.AllowedTypes = {}));
|
103
|
-
exports.defaultTranslations = {
|
104
|
-
dropAreaText: "Dosyaları buraya sürükleyip bırakın veya tıklayarak dosya seçin.",
|
105
|
-
fileLimitMultiText: "Maksimum dosya limiti",
|
106
|
-
fileLimitSingleText: "Tek dosya seçilebilir",
|
107
|
-
uploadButtonText: "Yükle",
|
108
|
-
removeButtonTitle: "Kaldır",
|
109
|
-
uploadSuccessToast: "Dosyalar başarıyla yüklendi.",
|
110
|
-
uploadErrorToast: "Dosyalar yüklenirken bir hata oluştu.",
|
111
|
-
uploadWarningLimit: "Dosya yükleme limitini doldurdunuz. Yeni dosya ekleyebilmek için mevcut dosyaları kaldırın.",
|
112
|
-
uploadWarningExceed: "Seçilen dosya sayısı limiti aştı. Eklenebilecek dosya sayısı: ",
|
113
|
-
fileSizeError: "isimli dosya, boyut limitini aşıyor.",
|
114
|
-
fileTypeError: "isimli dosya, seçilen dosya türüne uygun değil.",
|
115
|
-
noFileSelectedWarning: "Önce en az bir dosya seçiniz."
|
116
|
-
};
|
117
|
-
// ====================
|
118
|
-
// Stil Ayarları
|
119
|
-
// ====================
|
120
|
-
var spinnerStyle = {
|
121
|
-
position: "absolute",
|
122
|
-
top: "40%",
|
123
|
-
left: "40%",
|
124
|
-
width: "20px",
|
125
|
-
height: "20px",
|
126
|
-
border: "2px solid #007bff",
|
127
|
-
borderTop: "2px solid transparent",
|
128
|
-
borderRadius: "50%",
|
129
|
-
animation: "spin 1s linear infinite",
|
130
|
-
zIndex: 3,
|
131
|
-
};
|
132
|
-
var dropAreaStyle = {
|
133
|
-
border: "2px dashed #007bff",
|
134
|
-
borderRadius: "5px",
|
135
|
-
padding: "20px",
|
136
|
-
textAlign: "center",
|
137
|
-
cursor: "pointer",
|
138
|
-
position: "relative",
|
139
|
-
minHeight: "150px",
|
140
|
-
};
|
141
|
-
var previewContainerStyle = {
|
142
|
-
display: "flex",
|
143
|
-
flexWrap: "wrap",
|
144
|
-
gap: "10px",
|
145
|
-
justifyContent: "center",
|
146
|
-
};
|
147
|
-
var previewItemStyle = {
|
148
|
-
position: "relative",
|
149
|
-
width: "100px",
|
150
|
-
height: "100px",
|
151
|
-
border: "1px solid #ccc",
|
152
|
-
overflow: "hidden",
|
153
|
-
};
|
154
|
-
var removeButtonStyle = {
|
155
|
-
position: "absolute",
|
156
|
-
top: "2px",
|
157
|
-
right: "2px",
|
158
|
-
background: "rgba(255,255,255,0.7)",
|
159
|
-
border: "none",
|
160
|
-
cursor: "pointer",
|
161
|
-
borderRadius: "50%",
|
162
|
-
zIndex: 2,
|
163
|
-
};
|
164
|
-
var tickOverlayStyle = {
|
165
|
-
position: "absolute",
|
166
|
-
bottom: "2px",
|
167
|
-
right: "2px",
|
168
|
-
backgroundColor: "rgba(0, 128, 0, 0.7)",
|
169
|
-
color: "white",
|
170
|
-
borderRadius: "50%",
|
171
|
-
width: "24px",
|
172
|
-
height: "24px",
|
173
|
-
display: "flex",
|
174
|
-
justifyContent: "center",
|
175
|
-
alignItems: "center",
|
176
|
-
zIndex: 2,
|
177
|
-
};
|
178
|
-
// Dosya ikonları
|
179
|
-
var fileTypeIcons = {
|
180
|
-
".doc": react_1.default.createElement(fa_1.FaFileWord, null),
|
181
|
-
".docx": react_1.default.createElement(fa_1.FaFileWord, null),
|
182
|
-
".xls": react_1.default.createElement(fa_1.FaFileExcel, null),
|
183
|
-
".xlsx": react_1.default.createElement(fa_1.FaFileExcel, null),
|
184
|
-
".pdf": react_1.default.createElement(fa_1.FaFilePdf, null),
|
185
|
-
".txt": react_1.default.createElement(fa_1.FaFilePdf, null),
|
186
|
-
};
|
187
|
-
var defaultFileIcon = react_1.default.createElement(fa_1.FaFile, null);
|
188
|
-
// İzin verilen dosya uzantıları
|
189
|
-
var allowedFileExtensions = [".pdf", ".doc", ".docx", ".xls", ".xlsx", ".txt"];
|
190
|
-
var allowedImageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
|
191
|
-
var allowedVideoExtensions = [".mp4", ".avi", ".mov", ".mkv", ".webm", ".flv"];
|
192
|
-
// ====================
|
193
|
-
// Yardımcı Fonksiyonlar
|
194
|
-
// ====================
|
195
|
-
var getFileExtension = function (file) {
|
196
|
-
var dotIndex = file.name.lastIndexOf(".");
|
197
|
-
return dotIndex !== -1 ? file.name.substring(dotIndex).toLowerCase() : "";
|
198
|
-
};
|
199
|
-
var isImageFile = function (file) {
|
200
|
-
return allowedImageExtensions.includes(getFileExtension(file));
|
201
|
-
};
|
202
|
-
var isAllowedFileType = function (file, allowedType) {
|
203
|
-
var ext = getFileExtension(file);
|
204
|
-
switch (allowedType) {
|
205
|
-
case AllowedTypes.ALL:
|
206
|
-
return true;
|
207
|
-
case AllowedTypes.PDF:
|
208
|
-
return ext === ".pdf";
|
209
|
-
case AllowedTypes.FILE:
|
210
|
-
return allowedFileExtensions.includes(ext);
|
211
|
-
case AllowedTypes.IMAGE:
|
212
|
-
return allowedImageExtensions.includes(ext);
|
213
|
-
case AllowedTypes.VIDEO:
|
214
|
-
return allowedVideoExtensions.includes(ext);
|
215
|
-
case AllowedTypes.VISUAL:
|
216
|
-
return allowedImageExtensions.includes(ext) || allowedVideoExtensions.includes(ext);
|
217
|
-
default:
|
218
|
-
return false;
|
219
|
-
}
|
220
|
-
};
|
221
|
-
// ====================
|
222
|
-
// CustomFileUploader Bileşeni
|
223
|
-
// ====================
|
224
|
-
var CustomFileUploader = function (props) {
|
225
|
-
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;
|
226
|
-
// Varsayılan çeviri metinlerini, gelen prop ile birleştiriyoruz.
|
227
|
-
var finalTranslations = __assign(__assign({}, exports.defaultTranslations), translations);
|
228
|
-
var _a = (0, react_1.useState)([]), previews = _a[0], setPreviews = _a[1];
|
229
|
-
var fileInputRef = (0, react_1.useRef)(null);
|
230
|
-
// CustomFileUploader.tsx içinde component’in üst kısmına, diğer handler’ların yanına ekleyin:
|
231
|
-
var handleClearAll = function () {
|
232
|
-
previews.forEach(function (item) {
|
233
|
-
if (item.uploaded && item.serverFileName && onRemoveUploaded) {
|
234
|
-
onRemoveUploaded(item.serverFileName);
|
235
|
-
}
|
236
|
-
});
|
237
|
-
setPreviews([]);
|
238
|
-
updatePendingStatus([]);
|
239
|
-
if (fileInputRef.current) {
|
240
|
-
fileInputRef.current.value = "";
|
241
|
-
}
|
242
|
-
};
|
243
|
-
// form submit olduğunda temizlemeyi tetikleyecek listener
|
244
|
-
(0, react_1.useEffect)(function () {
|
245
|
-
// clearTrigger her değiştiğinde uploader’ı temizle
|
246
|
-
if (clearTrigger !== undefined) {
|
247
|
-
handleClearAll();
|
248
|
-
}
|
249
|
-
}, [clearTrigger]);
|
250
|
-
(0, react_1.useEffect)(function () {
|
251
|
-
var style = document.createElement("style");
|
252
|
-
style.innerHTML = "\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n ";
|
253
|
-
document.head.appendChild(style);
|
254
|
-
return function () {
|
255
|
-
document.head.removeChild(style);
|
256
|
-
};
|
257
|
-
}, []);
|
258
|
-
// Pending dosya sayısını parent'a iletecek yardımcı fonksiyon
|
259
|
-
var updatePendingStatus = function (previewsArray) {
|
260
|
-
if (onPendingChange) {
|
261
|
-
var pendingFileCount = previewsArray.filter(function (item) { return !item.uploaded; }).length;
|
262
|
-
onPendingChange(pendingFileCount);
|
263
|
-
}
|
264
|
-
};
|
265
|
-
// Dosyaları ekleme işlemi
|
266
|
-
var handleFiles = function (files) {
|
267
|
-
var filesArray = Array.from(files);
|
268
|
-
var currentCount = multi ? previews.length : (previews.length > 0 ? 1 : 0);
|
269
|
-
var availableSlots = multi ? maxFile - currentCount : (currentCount === 0 ? 1 : 0);
|
270
|
-
if (availableSlots <= 0) {
|
271
|
-
react_toastify_1.toast.warning(finalTranslations.uploadWarningLimit);
|
272
|
-
return;
|
273
|
-
}
|
274
|
-
var filesToAdd = filesArray.slice(0, availableSlots);
|
275
|
-
if (filesArray.length > availableSlots) {
|
276
|
-
react_toastify_1.toast.warning(finalTranslations.uploadWarningExceed + availableSlots);
|
277
|
-
}
|
278
|
-
var newPreviews = [];
|
279
|
-
filesToAdd.forEach(function (file, index) {
|
280
|
-
if (file.size > maxSize) {
|
281
|
-
// Dosya adını eklemek için file.name'i dışarıda ekliyoruz.
|
282
|
-
react_toastify_1.toast.error(file.name + " " + finalTranslations.fileSizeError);
|
283
|
-
return;
|
284
|
-
}
|
285
|
-
if (!isAllowedFileType(file, allowedTypes)) {
|
286
|
-
react_toastify_1.toast.error(file.name + " " + finalTranslations.fileTypeError);
|
287
|
-
return;
|
288
|
-
}
|
289
|
-
var isImg = allowedTypes === AllowedTypes.IMAGE || (allowedTypes === AllowedTypes.VISUAL && isImageFile(file));
|
290
|
-
var previewContent = isImg && isImageFile(file)
|
291
|
-
? URL.createObjectURL(file)
|
292
|
-
: fileTypeIcons[getFileExtension(file)] || defaultFileIcon;
|
293
|
-
newPreviews.push({
|
294
|
-
id: "".concat(file.name, "_").concat(file.lastModified, "_").concat(Date.now(), "_").concat(index),
|
295
|
-
file: file,
|
296
|
-
isImage: isImg,
|
297
|
-
previewContent: previewContent,
|
298
|
-
uploaded: false,
|
299
|
-
});
|
300
|
-
});
|
301
|
-
setPreviews(function (prev) {
|
302
|
-
var updatedPreviews = __spreadArray(__spreadArray([], prev, true), newPreviews, true);
|
303
|
-
updatePendingStatus(updatedPreviews);
|
304
|
-
return updatedPreviews;
|
305
|
-
});
|
306
|
-
};
|
307
|
-
// Dosya input değişiminde
|
308
|
-
var handleFileChange = function (e) {
|
309
|
-
if (e.target.files && e.target.files.length > 0) {
|
310
|
-
handleFiles(e.target.files);
|
311
|
-
}
|
312
|
-
};
|
313
|
-
// Drag & Drop olayları
|
314
|
-
var handleDrop = function (e) {
|
315
|
-
e.preventDefault();
|
316
|
-
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
317
|
-
handleFiles(e.dataTransfer.files);
|
318
|
-
e.dataTransfer.clearData();
|
319
|
-
}
|
320
|
-
};
|
321
|
-
var handleDragOver = function (e) {
|
322
|
-
e.preventDefault();
|
323
|
-
};
|
324
|
-
// Dosya seçim alanına tıklayınca input'u tetikleyin
|
325
|
-
var handleAreaClick = function () {
|
326
|
-
var _a;
|
327
|
-
(_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
328
|
-
};
|
329
|
-
// Dosya kaldırma işlemi
|
330
|
-
var handleRemoveFile = function (previewId) {
|
331
|
-
var updatedPreviews = previews.filter(function (item) { return item.id !== previewId; });
|
332
|
-
setPreviews(updatedPreviews);
|
333
|
-
updatePendingStatus(updatedPreviews);
|
334
|
-
var itemToRemove = previews.find(function (item) { return item.id === previewId; });
|
335
|
-
if (itemToRemove && itemToRemove.uploaded && itemToRemove.serverFileName && onRemoveUploaded) {
|
336
|
-
onRemoveUploaded(itemToRemove.serverFileName);
|
337
|
-
}
|
338
|
-
};
|
339
|
-
// Dosyaları sunucuya yükleme işlemi
|
340
|
-
var handleUpload = function () { return __awaiter(void 0, void 0, void 0, function () {
|
341
|
-
var filesToUpload, formData, response, data, uploadedFileNames_1, errorData, error_1;
|
342
|
-
return __generator(this, function (_a) {
|
343
|
-
switch (_a.label) {
|
344
|
-
case 0:
|
345
|
-
onUploadingChange === null || onUploadingChange === void 0 ? void 0 : onUploadingChange(true);
|
346
|
-
filesToUpload = previews.filter(function (item) { return !item.uploaded; }).map(function (item) { return item.file; });
|
347
|
-
if (filesToUpload.length === 0) {
|
348
|
-
react_toastify_1.toast.warning(finalTranslations.noFileSelectedWarning);
|
349
|
-
return [2 /*return*/];
|
350
|
-
}
|
351
|
-
// Yüklenmeye başlayan dosyaları işaretle
|
352
|
-
setPreviews(function (prev) {
|
353
|
-
return prev.map(function (item) {
|
354
|
-
return !item.uploaded ? __assign(__assign({}, item), { isUploading: true }) : item;
|
355
|
-
});
|
356
|
-
});
|
357
|
-
formData = new FormData();
|
358
|
-
filesToUpload.forEach(function (file) {
|
359
|
-
formData.append("file", file);
|
360
|
-
});
|
361
|
-
_a.label = 1;
|
362
|
-
case 1:
|
363
|
-
_a.trys.push([1, 7, 8, 9]);
|
364
|
-
return [4 /*yield*/, fetch(url, {
|
365
|
-
method: "POST",
|
366
|
-
body: formData,
|
367
|
-
})];
|
368
|
-
case 2:
|
369
|
-
response = _a.sent();
|
370
|
-
if (!response.ok) return [3 /*break*/, 4];
|
371
|
-
return [4 /*yield*/, response.json()];
|
372
|
-
case 3:
|
373
|
-
data = _a.sent();
|
374
|
-
if (data.responseCode === 200 &&
|
375
|
-
data.content &&
|
376
|
-
data.content.fileList &&
|
377
|
-
data.content.fileList.length > 0) {
|
378
|
-
uploadedFileNames_1 = data.content.fileList.map(function (item) { return item.fileName; });
|
379
|
-
if (onUploadComplete) {
|
380
|
-
onUploadComplete(uploadedFileNames_1);
|
381
|
-
}
|
382
|
-
setPreviews(function (prev) {
|
383
|
-
var updatedPreviews = prev.map(function (item, index) {
|
384
|
-
if (!item.uploaded) {
|
385
|
-
return __assign(__assign({}, item), { uploaded: true, isUploading: false, serverFileName: uploadedFileNames_1[index] || item.file.name });
|
386
|
-
}
|
387
|
-
return item;
|
388
|
-
});
|
389
|
-
updatePendingStatus(updatedPreviews);
|
390
|
-
return updatedPreviews;
|
391
|
-
});
|
392
|
-
react_toastify_1.toast.success(finalTranslations.uploadSuccessToast);
|
393
|
-
}
|
394
|
-
else {
|
395
|
-
react_toastify_1.toast.error(finalTranslations.uploadErrorToast);
|
396
|
-
}
|
397
|
-
return [3 /*break*/, 6];
|
398
|
-
case 4: return [4 /*yield*/, response.json()];
|
399
|
-
case 5:
|
400
|
-
errorData = _a.sent();
|
401
|
-
console.error("API Hatası:", errorData);
|
402
|
-
react_toastify_1.toast.error(finalTranslations.uploadErrorToast);
|
403
|
-
_a.label = 6;
|
404
|
-
case 6: return [3 /*break*/, 9];
|
405
|
-
case 7:
|
406
|
-
error_1 = _a.sent();
|
407
|
-
console.error("API çağrısında hata:", error_1);
|
408
|
-
react_toastify_1.toast.error(finalTranslations.uploadErrorToast);
|
409
|
-
return [3 /*break*/, 9];
|
410
|
-
case 8:
|
411
|
-
onUploadingChange === null || onUploadingChange === void 0 ? void 0 : onUploadingChange(false);
|
412
|
-
return [7 /*endfinally*/];
|
413
|
-
case 9: return [2 /*return*/];
|
414
|
-
}
|
415
|
-
});
|
416
|
-
}); };
|
417
|
-
// Dosya seçme alanı için drop area metni: dropAreaText + dosya limiti bilgisi
|
418
|
-
var dropAreaText = multi
|
419
|
-
? finalTranslations.dropAreaText + " (" + finalTranslations.fileLimitMultiText + ": " + maxFile + ") "
|
420
|
-
: finalTranslations.dropAreaText + " " + (finalTranslations.fileLimitSingleText);
|
421
|
-
return (react_1.default.createElement("div", { style: { width: "100%", height: "100%" } },
|
422
|
-
label && (react_1.default.createElement("div", { style: { marginBottom: "10px" } },
|
423
|
-
react_1.default.createElement("label", { style: { fontWeight: "bold" } }, label))),
|
424
|
-
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" } },
|
425
|
-
react_1.default.createElement("div", { style: previewItemStyle },
|
426
|
-
item.isUploading && react_1.default.createElement("div", { style: spinnerStyle }),
|
427
|
-
item.isImage ? (react_1.default.createElement("img", { src: item.previewContent, alt: "\u00D6nizleme ".concat(item.id), style: {
|
428
|
-
width: "100%",
|
429
|
-
height: "100%",
|
430
|
-
objectFit: "cover",
|
431
|
-
opacity: item.isUploading ? 0.5 : 1,
|
432
|
-
} })) : (react_1.default.createElement("div", { style: {
|
433
|
-
width: "100%",
|
434
|
-
height: "100%",
|
435
|
-
display: "flex",
|
436
|
-
justifyContent: "center",
|
437
|
-
alignItems: "center",
|
438
|
-
fontSize: "48px",
|
439
|
-
opacity: item.isUploading ? 0.5 : 1,
|
440
|
-
} }, item.previewContent)),
|
441
|
-
react_1.default.createElement("button", { type: "button", style: removeButtonStyle, onClick: function (e) {
|
442
|
-
e.stopPropagation();
|
443
|
-
handleRemoveFile(item.id);
|
444
|
-
}, title: finalTranslations.removeButtonTitle, disabled: item.isUploading }, "\u00D7"),
|
445
|
-
item.uploaded && react_1.default.createElement("div", { style: tickOverlayStyle }, "\u2713")),
|
446
|
-
react_1.default.createElement("div", { style: {
|
447
|
-
marginTop: "4px",
|
448
|
-
fontSize: "12px",
|
449
|
-
textAlign: "center",
|
450
|
-
maxWidth: "100px",
|
451
|
-
overflow: "hidden",
|
452
|
-
textOverflow: "ellipsis",
|
453
|
-
whiteSpace: "nowrap",
|
454
|
-
}, title: item.file.name }, item.file.name))); })))),
|
455
|
-
react_1.default.createElement("input", { type: "file", multiple: multi, ref: fileInputRef, onChange: handleFileChange, style: { display: "none" } }),
|
456
|
-
react_1.default.createElement("div", { className: "d-flex justify-content-center gap-2 mt-3" },
|
457
|
-
previews.length > 1 && (react_1.default.createElement(CustomButton_1.default, { label: "T\u00FCm\u00FCn\u00FC Sil", className: "btn btn-danger", onClick: handleClearAll })),
|
458
|
-
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 })))));
|
459
|
-
};
|
460
|
-
exports.default = CustomFileUploader;
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
14
|
+
if (k2 === undefined) k2 = k;
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
18
|
+
}
|
19
|
+
Object.defineProperty(o, k2, desc);
|
20
|
+
}) : (function(o, m, k, k2) {
|
21
|
+
if (k2 === undefined) k2 = k;
|
22
|
+
o[k2] = m[k];
|
23
|
+
}));
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
26
|
+
}) : function(o, v) {
|
27
|
+
o["default"] = v;
|
28
|
+
});
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
30
|
+
if (mod && mod.__esModule) return mod;
|
31
|
+
var result = {};
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
33
|
+
__setModuleDefault(result, mod);
|
34
|
+
return result;
|
35
|
+
};
|
36
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
37
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
38
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
39
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
40
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
41
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
42
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
43
|
+
});
|
44
|
+
};
|
45
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
46
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
47
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
48
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
49
|
+
function step(op) {
|
50
|
+
if (f) throw new TypeError("Generator is already executing.");
|
51
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
52
|
+
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;
|
53
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
54
|
+
switch (op[0]) {
|
55
|
+
case 0: case 1: t = op; break;
|
56
|
+
case 4: _.label++; return { value: op[1], done: false };
|
57
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
58
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
59
|
+
default:
|
60
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
61
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
62
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
63
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
64
|
+
if (t[2]) _.ops.pop();
|
65
|
+
_.trys.pop(); continue;
|
66
|
+
}
|
67
|
+
op = body.call(thisArg, _);
|
68
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
69
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
70
|
+
}
|
71
|
+
};
|
72
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
73
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
74
|
+
if (ar || !(i in from)) {
|
75
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
76
|
+
ar[i] = from[i];
|
77
|
+
}
|
78
|
+
}
|
79
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
80
|
+
};
|
81
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
82
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
83
|
+
};
|
84
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
85
|
+
exports.defaultTranslations = exports.AllowedTypes = void 0;
|
86
|
+
// CustomFileUploader.tsx
|
87
|
+
var react_1 = __importStar(require("react"));
|
88
|
+
var react_toastify_1 = require("react-toastify");
|
89
|
+
var fa_1 = require("react-icons/fa");
|
90
|
+
var CustomButton_1 = __importDefault(require("./CustomButton"));
|
91
|
+
// ====================
|
92
|
+
// Tip Tanımlamaları
|
93
|
+
// ====================
|
94
|
+
var AllowedTypes;
|
95
|
+
(function (AllowedTypes) {
|
96
|
+
AllowedTypes["PDF"] = "pdf";
|
97
|
+
AllowedTypes["FILE"] = "file";
|
98
|
+
AllowedTypes["IMAGE"] = "image";
|
99
|
+
AllowedTypes["VIDEO"] = "video";
|
100
|
+
AllowedTypes["VISUAL"] = "visual";
|
101
|
+
AllowedTypes["ALL"] = "all";
|
102
|
+
})(AllowedTypes = exports.AllowedTypes || (exports.AllowedTypes = {}));
|
103
|
+
exports.defaultTranslations = {
|
104
|
+
dropAreaText: "Dosyaları buraya sürükleyip bırakın veya tıklayarak dosya seçin.",
|
105
|
+
fileLimitMultiText: "Maksimum dosya limiti",
|
106
|
+
fileLimitSingleText: "Tek dosya seçilebilir",
|
107
|
+
uploadButtonText: "Yükle",
|
108
|
+
removeButtonTitle: "Kaldır",
|
109
|
+
uploadSuccessToast: "Dosyalar başarıyla yüklendi.",
|
110
|
+
uploadErrorToast: "Dosyalar yüklenirken bir hata oluştu.",
|
111
|
+
uploadWarningLimit: "Dosya yükleme limitini doldurdunuz. Yeni dosya ekleyebilmek için mevcut dosyaları kaldırın.",
|
112
|
+
uploadWarningExceed: "Seçilen dosya sayısı limiti aştı. Eklenebilecek dosya sayısı: ",
|
113
|
+
fileSizeError: "isimli dosya, boyut limitini aşıyor.",
|
114
|
+
fileTypeError: "isimli dosya, seçilen dosya türüne uygun değil.",
|
115
|
+
noFileSelectedWarning: "Önce en az bir dosya seçiniz."
|
116
|
+
};
|
117
|
+
// ====================
|
118
|
+
// Stil Ayarları
|
119
|
+
// ====================
|
120
|
+
var spinnerStyle = {
|
121
|
+
position: "absolute",
|
122
|
+
top: "40%",
|
123
|
+
left: "40%",
|
124
|
+
width: "20px",
|
125
|
+
height: "20px",
|
126
|
+
border: "2px solid #007bff",
|
127
|
+
borderTop: "2px solid transparent",
|
128
|
+
borderRadius: "50%",
|
129
|
+
animation: "spin 1s linear infinite",
|
130
|
+
zIndex: 3,
|
131
|
+
};
|
132
|
+
var dropAreaStyle = {
|
133
|
+
border: "2px dashed #007bff",
|
134
|
+
borderRadius: "5px",
|
135
|
+
padding: "20px",
|
136
|
+
textAlign: "center",
|
137
|
+
cursor: "pointer",
|
138
|
+
position: "relative",
|
139
|
+
minHeight: "150px",
|
140
|
+
};
|
141
|
+
var previewContainerStyle = {
|
142
|
+
display: "flex",
|
143
|
+
flexWrap: "wrap",
|
144
|
+
gap: "10px",
|
145
|
+
justifyContent: "center",
|
146
|
+
};
|
147
|
+
var previewItemStyle = {
|
148
|
+
position: "relative",
|
149
|
+
width: "100px",
|
150
|
+
height: "100px",
|
151
|
+
border: "1px solid #ccc",
|
152
|
+
overflow: "hidden",
|
153
|
+
};
|
154
|
+
var removeButtonStyle = {
|
155
|
+
position: "absolute",
|
156
|
+
top: "2px",
|
157
|
+
right: "2px",
|
158
|
+
background: "rgba(255,255,255,0.7)",
|
159
|
+
border: "none",
|
160
|
+
cursor: "pointer",
|
161
|
+
borderRadius: "50%",
|
162
|
+
zIndex: 2,
|
163
|
+
};
|
164
|
+
var tickOverlayStyle = {
|
165
|
+
position: "absolute",
|
166
|
+
bottom: "2px",
|
167
|
+
right: "2px",
|
168
|
+
backgroundColor: "rgba(0, 128, 0, 0.7)",
|
169
|
+
color: "white",
|
170
|
+
borderRadius: "50%",
|
171
|
+
width: "24px",
|
172
|
+
height: "24px",
|
173
|
+
display: "flex",
|
174
|
+
justifyContent: "center",
|
175
|
+
alignItems: "center",
|
176
|
+
zIndex: 2,
|
177
|
+
};
|
178
|
+
// Dosya ikonları
|
179
|
+
var fileTypeIcons = {
|
180
|
+
".doc": react_1.default.createElement(fa_1.FaFileWord, null),
|
181
|
+
".docx": react_1.default.createElement(fa_1.FaFileWord, null),
|
182
|
+
".xls": react_1.default.createElement(fa_1.FaFileExcel, null),
|
183
|
+
".xlsx": react_1.default.createElement(fa_1.FaFileExcel, null),
|
184
|
+
".pdf": react_1.default.createElement(fa_1.FaFilePdf, null),
|
185
|
+
".txt": react_1.default.createElement(fa_1.FaFilePdf, null),
|
186
|
+
};
|
187
|
+
var defaultFileIcon = react_1.default.createElement(fa_1.FaFile, null);
|
188
|
+
// İzin verilen dosya uzantıları
|
189
|
+
var allowedFileExtensions = [".pdf", ".doc", ".docx", ".xls", ".xlsx", ".txt"];
|
190
|
+
var allowedImageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
|
191
|
+
var allowedVideoExtensions = [".mp4", ".avi", ".mov", ".mkv", ".webm", ".flv"];
|
192
|
+
// ====================
|
193
|
+
// Yardımcı Fonksiyonlar
|
194
|
+
// ====================
|
195
|
+
var getFileExtension = function (file) {
|
196
|
+
var dotIndex = file.name.lastIndexOf(".");
|
197
|
+
return dotIndex !== -1 ? file.name.substring(dotIndex).toLowerCase() : "";
|
198
|
+
};
|
199
|
+
var isImageFile = function (file) {
|
200
|
+
return allowedImageExtensions.includes(getFileExtension(file));
|
201
|
+
};
|
202
|
+
var isAllowedFileType = function (file, allowedType) {
|
203
|
+
var ext = getFileExtension(file);
|
204
|
+
switch (allowedType) {
|
205
|
+
case AllowedTypes.ALL:
|
206
|
+
return true;
|
207
|
+
case AllowedTypes.PDF:
|
208
|
+
return ext === ".pdf";
|
209
|
+
case AllowedTypes.FILE:
|
210
|
+
return allowedFileExtensions.includes(ext);
|
211
|
+
case AllowedTypes.IMAGE:
|
212
|
+
return allowedImageExtensions.includes(ext);
|
213
|
+
case AllowedTypes.VIDEO:
|
214
|
+
return allowedVideoExtensions.includes(ext);
|
215
|
+
case AllowedTypes.VISUAL:
|
216
|
+
return allowedImageExtensions.includes(ext) || allowedVideoExtensions.includes(ext);
|
217
|
+
default:
|
218
|
+
return false;
|
219
|
+
}
|
220
|
+
};
|
221
|
+
// ====================
|
222
|
+
// CustomFileUploader Bileşeni
|
223
|
+
// ====================
|
224
|
+
var CustomFileUploader = function (props) {
|
225
|
+
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;
|
226
|
+
// Varsayılan çeviri metinlerini, gelen prop ile birleştiriyoruz.
|
227
|
+
var finalTranslations = __assign(__assign({}, exports.defaultTranslations), translations);
|
228
|
+
var _a = (0, react_1.useState)([]), previews = _a[0], setPreviews = _a[1];
|
229
|
+
var fileInputRef = (0, react_1.useRef)(null);
|
230
|
+
// CustomFileUploader.tsx içinde component’in üst kısmına, diğer handler’ların yanına ekleyin:
|
231
|
+
var handleClearAll = function () {
|
232
|
+
previews.forEach(function (item) {
|
233
|
+
if (item.uploaded && item.serverFileName && onRemoveUploaded) {
|
234
|
+
onRemoveUploaded(item.serverFileName);
|
235
|
+
}
|
236
|
+
});
|
237
|
+
setPreviews([]);
|
238
|
+
updatePendingStatus([]);
|
239
|
+
if (fileInputRef.current) {
|
240
|
+
fileInputRef.current.value = "";
|
241
|
+
}
|
242
|
+
};
|
243
|
+
// form submit olduğunda temizlemeyi tetikleyecek listener
|
244
|
+
(0, react_1.useEffect)(function () {
|
245
|
+
// clearTrigger her değiştiğinde uploader’ı temizle
|
246
|
+
if (clearTrigger !== undefined) {
|
247
|
+
handleClearAll();
|
248
|
+
}
|
249
|
+
}, [clearTrigger]);
|
250
|
+
(0, react_1.useEffect)(function () {
|
251
|
+
var style = document.createElement("style");
|
252
|
+
style.innerHTML = "\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n ";
|
253
|
+
document.head.appendChild(style);
|
254
|
+
return function () {
|
255
|
+
document.head.removeChild(style);
|
256
|
+
};
|
257
|
+
}, []);
|
258
|
+
// Pending dosya sayısını parent'a iletecek yardımcı fonksiyon
|
259
|
+
var updatePendingStatus = function (previewsArray) {
|
260
|
+
if (onPendingChange) {
|
261
|
+
var pendingFileCount = previewsArray.filter(function (item) { return !item.uploaded; }).length;
|
262
|
+
onPendingChange(pendingFileCount);
|
263
|
+
}
|
264
|
+
};
|
265
|
+
// Dosyaları ekleme işlemi
|
266
|
+
var handleFiles = function (files) {
|
267
|
+
var filesArray = Array.from(files);
|
268
|
+
var currentCount = multi ? previews.length : (previews.length > 0 ? 1 : 0);
|
269
|
+
var availableSlots = multi ? maxFile - currentCount : (currentCount === 0 ? 1 : 0);
|
270
|
+
if (availableSlots <= 0) {
|
271
|
+
react_toastify_1.toast.warning(finalTranslations.uploadWarningLimit);
|
272
|
+
return;
|
273
|
+
}
|
274
|
+
var filesToAdd = filesArray.slice(0, availableSlots);
|
275
|
+
if (filesArray.length > availableSlots) {
|
276
|
+
react_toastify_1.toast.warning(finalTranslations.uploadWarningExceed + availableSlots);
|
277
|
+
}
|
278
|
+
var newPreviews = [];
|
279
|
+
filesToAdd.forEach(function (file, index) {
|
280
|
+
if (file.size > maxSize) {
|
281
|
+
// Dosya adını eklemek için file.name'i dışarıda ekliyoruz.
|
282
|
+
react_toastify_1.toast.error(file.name + " " + finalTranslations.fileSizeError);
|
283
|
+
return;
|
284
|
+
}
|
285
|
+
if (!isAllowedFileType(file, allowedTypes)) {
|
286
|
+
react_toastify_1.toast.error(file.name + " " + finalTranslations.fileTypeError);
|
287
|
+
return;
|
288
|
+
}
|
289
|
+
var isImg = allowedTypes === AllowedTypes.IMAGE || (allowedTypes === AllowedTypes.VISUAL && isImageFile(file));
|
290
|
+
var previewContent = isImg && isImageFile(file)
|
291
|
+
? URL.createObjectURL(file)
|
292
|
+
: fileTypeIcons[getFileExtension(file)] || defaultFileIcon;
|
293
|
+
newPreviews.push({
|
294
|
+
id: "".concat(file.name, "_").concat(file.lastModified, "_").concat(Date.now(), "_").concat(index),
|
295
|
+
file: file,
|
296
|
+
isImage: isImg,
|
297
|
+
previewContent: previewContent,
|
298
|
+
uploaded: false,
|
299
|
+
});
|
300
|
+
});
|
301
|
+
setPreviews(function (prev) {
|
302
|
+
var updatedPreviews = __spreadArray(__spreadArray([], prev, true), newPreviews, true);
|
303
|
+
updatePendingStatus(updatedPreviews);
|
304
|
+
return updatedPreviews;
|
305
|
+
});
|
306
|
+
};
|
307
|
+
// Dosya input değişiminde
|
308
|
+
var handleFileChange = function (e) {
|
309
|
+
if (e.target.files && e.target.files.length > 0) {
|
310
|
+
handleFiles(e.target.files);
|
311
|
+
}
|
312
|
+
};
|
313
|
+
// Drag & Drop olayları
|
314
|
+
var handleDrop = function (e) {
|
315
|
+
e.preventDefault();
|
316
|
+
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
317
|
+
handleFiles(e.dataTransfer.files);
|
318
|
+
e.dataTransfer.clearData();
|
319
|
+
}
|
320
|
+
};
|
321
|
+
var handleDragOver = function (e) {
|
322
|
+
e.preventDefault();
|
323
|
+
};
|
324
|
+
// Dosya seçim alanına tıklayınca input'u tetikleyin
|
325
|
+
var handleAreaClick = function () {
|
326
|
+
var _a;
|
327
|
+
(_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
328
|
+
};
|
329
|
+
// Dosya kaldırma işlemi
|
330
|
+
var handleRemoveFile = function (previewId) {
|
331
|
+
var updatedPreviews = previews.filter(function (item) { return item.id !== previewId; });
|
332
|
+
setPreviews(updatedPreviews);
|
333
|
+
updatePendingStatus(updatedPreviews);
|
334
|
+
var itemToRemove = previews.find(function (item) { return item.id === previewId; });
|
335
|
+
if (itemToRemove && itemToRemove.uploaded && itemToRemove.serverFileName && onRemoveUploaded) {
|
336
|
+
onRemoveUploaded(itemToRemove.serverFileName);
|
337
|
+
}
|
338
|
+
};
|
339
|
+
// Dosyaları sunucuya yükleme işlemi
|
340
|
+
var handleUpload = function () { return __awaiter(void 0, void 0, void 0, function () {
|
341
|
+
var filesToUpload, formData, response, data, uploadedFileNames_1, errorData, error_1;
|
342
|
+
return __generator(this, function (_a) {
|
343
|
+
switch (_a.label) {
|
344
|
+
case 0:
|
345
|
+
onUploadingChange === null || onUploadingChange === void 0 ? void 0 : onUploadingChange(true);
|
346
|
+
filesToUpload = previews.filter(function (item) { return !item.uploaded; }).map(function (item) { return item.file; });
|
347
|
+
if (filesToUpload.length === 0) {
|
348
|
+
react_toastify_1.toast.warning(finalTranslations.noFileSelectedWarning);
|
349
|
+
return [2 /*return*/];
|
350
|
+
}
|
351
|
+
// Yüklenmeye başlayan dosyaları işaretle
|
352
|
+
setPreviews(function (prev) {
|
353
|
+
return prev.map(function (item) {
|
354
|
+
return !item.uploaded ? __assign(__assign({}, item), { isUploading: true }) : item;
|
355
|
+
});
|
356
|
+
});
|
357
|
+
formData = new FormData();
|
358
|
+
filesToUpload.forEach(function (file) {
|
359
|
+
formData.append("file", file);
|
360
|
+
});
|
361
|
+
_a.label = 1;
|
362
|
+
case 1:
|
363
|
+
_a.trys.push([1, 7, 8, 9]);
|
364
|
+
return [4 /*yield*/, fetch(url, {
|
365
|
+
method: "POST",
|
366
|
+
body: formData,
|
367
|
+
})];
|
368
|
+
case 2:
|
369
|
+
response = _a.sent();
|
370
|
+
if (!response.ok) return [3 /*break*/, 4];
|
371
|
+
return [4 /*yield*/, response.json()];
|
372
|
+
case 3:
|
373
|
+
data = _a.sent();
|
374
|
+
if (data.responseCode === 200 &&
|
375
|
+
data.content &&
|
376
|
+
data.content.fileList &&
|
377
|
+
data.content.fileList.length > 0) {
|
378
|
+
uploadedFileNames_1 = data.content.fileList.map(function (item) { return item.fileName; });
|
379
|
+
if (onUploadComplete) {
|
380
|
+
onUploadComplete(uploadedFileNames_1);
|
381
|
+
}
|
382
|
+
setPreviews(function (prev) {
|
383
|
+
var updatedPreviews = prev.map(function (item, index) {
|
384
|
+
if (!item.uploaded) {
|
385
|
+
return __assign(__assign({}, item), { uploaded: true, isUploading: false, serverFileName: uploadedFileNames_1[index] || item.file.name });
|
386
|
+
}
|
387
|
+
return item;
|
388
|
+
});
|
389
|
+
updatePendingStatus(updatedPreviews);
|
390
|
+
return updatedPreviews;
|
391
|
+
});
|
392
|
+
react_toastify_1.toast.success(finalTranslations.uploadSuccessToast);
|
393
|
+
}
|
394
|
+
else {
|
395
|
+
react_toastify_1.toast.error(finalTranslations.uploadErrorToast);
|
396
|
+
}
|
397
|
+
return [3 /*break*/, 6];
|
398
|
+
case 4: return [4 /*yield*/, response.json()];
|
399
|
+
case 5:
|
400
|
+
errorData = _a.sent();
|
401
|
+
console.error("API Hatası:", errorData);
|
402
|
+
react_toastify_1.toast.error(finalTranslations.uploadErrorToast);
|
403
|
+
_a.label = 6;
|
404
|
+
case 6: return [3 /*break*/, 9];
|
405
|
+
case 7:
|
406
|
+
error_1 = _a.sent();
|
407
|
+
console.error("API çağrısında hata:", error_1);
|
408
|
+
react_toastify_1.toast.error(finalTranslations.uploadErrorToast);
|
409
|
+
return [3 /*break*/, 9];
|
410
|
+
case 8:
|
411
|
+
onUploadingChange === null || onUploadingChange === void 0 ? void 0 : onUploadingChange(false);
|
412
|
+
return [7 /*endfinally*/];
|
413
|
+
case 9: return [2 /*return*/];
|
414
|
+
}
|
415
|
+
});
|
416
|
+
}); };
|
417
|
+
// Dosya seçme alanı için drop area metni: dropAreaText + dosya limiti bilgisi
|
418
|
+
var dropAreaText = multi
|
419
|
+
? finalTranslations.dropAreaText + " (" + finalTranslations.fileLimitMultiText + ": " + maxFile + ") "
|
420
|
+
: finalTranslations.dropAreaText + " " + (finalTranslations.fileLimitSingleText);
|
421
|
+
return (react_1.default.createElement("div", { style: { width: "100%", height: "100%" } },
|
422
|
+
label && (react_1.default.createElement("div", { style: { marginBottom: "10px" } },
|
423
|
+
react_1.default.createElement("label", { style: { fontWeight: "bold" } }, label))),
|
424
|
+
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" } },
|
425
|
+
react_1.default.createElement("div", { style: previewItemStyle },
|
426
|
+
item.isUploading && react_1.default.createElement("div", { style: spinnerStyle }),
|
427
|
+
item.isImage ? (react_1.default.createElement("img", { src: item.previewContent, alt: "\u00D6nizleme ".concat(item.id), style: {
|
428
|
+
width: "100%",
|
429
|
+
height: "100%",
|
430
|
+
objectFit: "cover",
|
431
|
+
opacity: item.isUploading ? 0.5 : 1,
|
432
|
+
} })) : (react_1.default.createElement("div", { style: {
|
433
|
+
width: "100%",
|
434
|
+
height: "100%",
|
435
|
+
display: "flex",
|
436
|
+
justifyContent: "center",
|
437
|
+
alignItems: "center",
|
438
|
+
fontSize: "48px",
|
439
|
+
opacity: item.isUploading ? 0.5 : 1,
|
440
|
+
} }, item.previewContent)),
|
441
|
+
react_1.default.createElement("button", { type: "button", style: removeButtonStyle, onClick: function (e) {
|
442
|
+
e.stopPropagation();
|
443
|
+
handleRemoveFile(item.id);
|
444
|
+
}, title: finalTranslations.removeButtonTitle, disabled: item.isUploading }, "\u00D7"),
|
445
|
+
item.uploaded && react_1.default.createElement("div", { style: tickOverlayStyle }, "\u2713")),
|
446
|
+
react_1.default.createElement("div", { style: {
|
447
|
+
marginTop: "4px",
|
448
|
+
fontSize: "12px",
|
449
|
+
textAlign: "center",
|
450
|
+
maxWidth: "100px",
|
451
|
+
overflow: "hidden",
|
452
|
+
textOverflow: "ellipsis",
|
453
|
+
whiteSpace: "nowrap",
|
454
|
+
}, title: item.file.name }, item.file.name))); })))),
|
455
|
+
react_1.default.createElement("input", { type: "file", multiple: multi, ref: fileInputRef, onChange: handleFileChange, style: { display: "none" } }),
|
456
|
+
react_1.default.createElement("div", { className: "d-flex justify-content-center gap-2 mt-3" },
|
457
|
+
previews.length > 1 && (react_1.default.createElement(CustomButton_1.default, { label: "T\u00FCm\u00FCn\u00FC Sil", className: "btn btn-danger", onClick: handleClearAll })),
|
458
|
+
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 })))));
|
459
|
+
};
|
460
|
+
exports.default = CustomFileUploader;
|