albinasoft-ui-package 1.0.60 → 1.0.62
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.
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare enum AllowedTypes {
|
|
3
|
+
IMAGE = "image",
|
|
4
|
+
FILE = "file",
|
|
5
|
+
ALL = "all"
|
|
6
|
+
}
|
|
7
|
+
export interface CustomFileUploaderProps {
|
|
8
|
+
/** Sunucuya dosyaların yükleneceği URL */
|
|
9
|
+
url: string;
|
|
10
|
+
/** Çoklu dosya seçimine izin verilsin mi? */
|
|
11
|
+
multi: boolean;
|
|
12
|
+
/** İzin verilen dosya türü */
|
|
13
|
+
allowedTypes: AllowedTypes;
|
|
14
|
+
/** Eğer multi true ise aynı anda seçilebilecek maksimum dosya sayısı */
|
|
15
|
+
maxFile: number;
|
|
16
|
+
/** Her bir dosya için maksimum boyut (byte cinsinden) */
|
|
17
|
+
maxSize: number;
|
|
18
|
+
/**
|
|
19
|
+
* Opsiyonel: Yükleme tamamlandığında dönen dosya isimlerini almak için callback.
|
|
20
|
+
*/
|
|
21
|
+
onUploadComplete?: (uploadedFileNames: string[]) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Opsiyonel: Yüklenmiş bir dosya kaldırıldığında, dosya adı bilgisini parent bileşene bildirmek için callback.
|
|
24
|
+
*/
|
|
25
|
+
onRemoveUploaded?: (fileName: string) => void;
|
|
26
|
+
/** Opsiyonel: Yükleyici için gösterilecek label */
|
|
27
|
+
label?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Opsiyonel: Pending (henüz yüklenmemiş) dosya sayısını parent'a iletecek callback.
|
|
30
|
+
*/
|
|
31
|
+
onPendingChange?: (pendingFileCount: number) => void;
|
|
32
|
+
}
|
|
33
|
+
declare const CustomFileUploader: React.FC<CustomFileUploaderProps>;
|
|
34
|
+
export default CustomFileUploader;
|
|
@@ -0,0 +1,367 @@
|
|
|
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
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
82
|
+
exports.AllowedTypes = void 0;
|
|
83
|
+
// CustomFileUploader.tsx
|
|
84
|
+
var react_1 = __importStar(require("react"));
|
|
85
|
+
var react_toastify_1 = require("react-toastify");
|
|
86
|
+
var fa_1 = require("react-icons/fa");
|
|
87
|
+
// ====================
|
|
88
|
+
// Tip Tanımlamaları
|
|
89
|
+
// ====================
|
|
90
|
+
var AllowedTypes;
|
|
91
|
+
(function (AllowedTypes) {
|
|
92
|
+
AllowedTypes["IMAGE"] = "image";
|
|
93
|
+
AllowedTypes["FILE"] = "file";
|
|
94
|
+
AllowedTypes["ALL"] = "all";
|
|
95
|
+
})(AllowedTypes = exports.AllowedTypes || (exports.AllowedTypes = {}));
|
|
96
|
+
// ====================
|
|
97
|
+
// Stil Ayarları
|
|
98
|
+
// ====================
|
|
99
|
+
var dropAreaStyle = {
|
|
100
|
+
border: "2px dashed #007bff",
|
|
101
|
+
borderRadius: "5px",
|
|
102
|
+
padding: "20px",
|
|
103
|
+
textAlign: "center",
|
|
104
|
+
cursor: "pointer",
|
|
105
|
+
position: "relative",
|
|
106
|
+
minHeight: "150px",
|
|
107
|
+
};
|
|
108
|
+
var previewContainerStyle = {
|
|
109
|
+
display: "flex",
|
|
110
|
+
flexWrap: "wrap",
|
|
111
|
+
gap: "10px",
|
|
112
|
+
justifyContent: "center",
|
|
113
|
+
};
|
|
114
|
+
var previewItemStyle = {
|
|
115
|
+
position: "relative",
|
|
116
|
+
width: "100px",
|
|
117
|
+
height: "100px",
|
|
118
|
+
border: "1px solid #ccc",
|
|
119
|
+
overflow: "hidden",
|
|
120
|
+
};
|
|
121
|
+
var removeButtonStyle = {
|
|
122
|
+
position: "absolute",
|
|
123
|
+
top: "2px",
|
|
124
|
+
right: "2px",
|
|
125
|
+
background: "rgba(255,255,255,0.7)",
|
|
126
|
+
border: "none",
|
|
127
|
+
cursor: "pointer",
|
|
128
|
+
borderRadius: "50%",
|
|
129
|
+
zIndex: 2,
|
|
130
|
+
};
|
|
131
|
+
var tickOverlayStyle = {
|
|
132
|
+
position: "absolute",
|
|
133
|
+
bottom: "2px",
|
|
134
|
+
right: "2px",
|
|
135
|
+
backgroundColor: "rgba(0, 128, 0, 0.7)",
|
|
136
|
+
color: "white",
|
|
137
|
+
borderRadius: "50%",
|
|
138
|
+
width: "24px",
|
|
139
|
+
height: "24px",
|
|
140
|
+
display: "flex",
|
|
141
|
+
justifyContent: "center",
|
|
142
|
+
alignItems: "center",
|
|
143
|
+
zIndex: 2,
|
|
144
|
+
};
|
|
145
|
+
// Dosya ikonları
|
|
146
|
+
var fileTypeIcons = {
|
|
147
|
+
".doc": react_1.default.createElement(fa_1.FaFileWord, null),
|
|
148
|
+
".docx": react_1.default.createElement(fa_1.FaFileWord, null),
|
|
149
|
+
".xls": react_1.default.createElement(fa_1.FaFileExcel, null),
|
|
150
|
+
".xlsx": react_1.default.createElement(fa_1.FaFileExcel, null),
|
|
151
|
+
".pdf": react_1.default.createElement(fa_1.FaFilePdf, null),
|
|
152
|
+
".txt": react_1.default.createElement(fa_1.FaFilePdf, null),
|
|
153
|
+
};
|
|
154
|
+
var defaultFileIcon = react_1.default.createElement(fa_1.FaFile, null);
|
|
155
|
+
// İzin verilen resim uzantıları
|
|
156
|
+
var allowedImageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
|
|
157
|
+
// ====================
|
|
158
|
+
// Yardımcı Fonksiyonlar
|
|
159
|
+
// ====================
|
|
160
|
+
var getFileExtension = function (file) {
|
|
161
|
+
var dotIndex = file.name.lastIndexOf(".");
|
|
162
|
+
return dotIndex !== -1 ? file.name.substring(dotIndex).toLowerCase() : "";
|
|
163
|
+
};
|
|
164
|
+
var isImageFile = function (file) {
|
|
165
|
+
return allowedImageExtensions.includes(getFileExtension(file));
|
|
166
|
+
};
|
|
167
|
+
var isAllowedFileType = function (file, allowedTypes) {
|
|
168
|
+
if (allowedTypes === AllowedTypes.ALL)
|
|
169
|
+
return true;
|
|
170
|
+
if (allowedTypes === AllowedTypes.IMAGE)
|
|
171
|
+
return isImageFile(file);
|
|
172
|
+
if (allowedTypes === AllowedTypes.FILE)
|
|
173
|
+
return !isImageFile(file);
|
|
174
|
+
return false;
|
|
175
|
+
};
|
|
176
|
+
// ====================
|
|
177
|
+
// CustomFileUploader Bileşeni
|
|
178
|
+
// ====================
|
|
179
|
+
var CustomFileUploader = function (_a) {
|
|
180
|
+
var url = _a.url, multi = _a.multi, allowedTypes = _a.allowedTypes, maxFile = _a.maxFile, maxSize = _a.maxSize, onUploadComplete = _a.onUploadComplete, onRemoveUploaded = _a.onRemoveUploaded, label = _a.label, onPendingChange = _a.onPendingChange;
|
|
181
|
+
var _b = (0, react_1.useState)([]), previews = _b[0], setPreviews = _b[1];
|
|
182
|
+
var fileInputRef = (0, react_1.useRef)(null);
|
|
183
|
+
// Pending dosya sayısını parent'a iletecek yardımcı fonksiyon
|
|
184
|
+
var updatePendingStatus = function (previewsArray) {
|
|
185
|
+
if (onPendingChange) {
|
|
186
|
+
var pendingFileCount = previewsArray.filter(function (item) { return !item.uploaded; }).length;
|
|
187
|
+
onPendingChange(pendingFileCount);
|
|
188
|
+
}
|
|
189
|
+
};
|
|
190
|
+
// Dosyaları ekleme işlemi
|
|
191
|
+
var handleFiles = function (files) {
|
|
192
|
+
var filesArray = Array.from(files);
|
|
193
|
+
var currentCount = multi ? previews.length : (previews.length > 0 ? 1 : 0);
|
|
194
|
+
var availableSlots = multi ? maxFile - currentCount : (currentCount === 0 ? 1 : 0);
|
|
195
|
+
if (availableSlots <= 0) {
|
|
196
|
+
react_toastify_1.toast.warning("Dosya yükleme limitini doldurdunuz. Yeni dosya ekleyebilmek için mevcut dosyaları kaldırın.");
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
199
|
+
var filesToAdd = filesArray.slice(0, availableSlots);
|
|
200
|
+
if (filesArray.length > availableSlots) {
|
|
201
|
+
react_toastify_1.toast.warning("Se\u00E7ilen dosya say\u0131s\u0131 limiti a\u015Ft\u0131. Sadece ilk ".concat(availableSlots, " dosya eklenecektir."));
|
|
202
|
+
}
|
|
203
|
+
var newPreviews = [];
|
|
204
|
+
filesToAdd.forEach(function (file, index) {
|
|
205
|
+
if (file.size > maxSize) {
|
|
206
|
+
react_toastify_1.toast.error("\"".concat(file.name, "\" dosyas\u0131 boyut limiti (").concat(maxSize, " byte) a\u015F\u0131yor."));
|
|
207
|
+
return;
|
|
208
|
+
}
|
|
209
|
+
if (!isAllowedFileType(file, allowedTypes)) {
|
|
210
|
+
react_toastify_1.toast.error("\"".concat(file.name, "\" dosyas\u0131 se\u00E7ilen dosya t\u00FCr\u00FCne uygun de\u011Fil."));
|
|
211
|
+
return;
|
|
212
|
+
}
|
|
213
|
+
var isImg = isImageFile(file);
|
|
214
|
+
var previewContent = isImg
|
|
215
|
+
? URL.createObjectURL(file)
|
|
216
|
+
: fileTypeIcons[getFileExtension(file)] || defaultFileIcon;
|
|
217
|
+
newPreviews.push({
|
|
218
|
+
id: "".concat(file.name, "_").concat(file.lastModified, "_").concat(Date.now(), "_").concat(index),
|
|
219
|
+
file: file,
|
|
220
|
+
isImage: isImg,
|
|
221
|
+
previewContent: previewContent,
|
|
222
|
+
uploaded: false,
|
|
223
|
+
});
|
|
224
|
+
});
|
|
225
|
+
setPreviews(function (prev) {
|
|
226
|
+
var updatedPreviews = __spreadArray(__spreadArray([], prev, true), newPreviews, true);
|
|
227
|
+
updatePendingStatus(updatedPreviews);
|
|
228
|
+
return updatedPreviews;
|
|
229
|
+
});
|
|
230
|
+
};
|
|
231
|
+
// Dosya input değişiminde
|
|
232
|
+
var handleFileChange = function (e) {
|
|
233
|
+
if (e.target.files && e.target.files.length > 0) {
|
|
234
|
+
handleFiles(e.target.files);
|
|
235
|
+
}
|
|
236
|
+
};
|
|
237
|
+
// Drag & Drop olayları
|
|
238
|
+
var handleDrop = function (e) {
|
|
239
|
+
e.preventDefault();
|
|
240
|
+
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
|
241
|
+
handleFiles(e.dataTransfer.files);
|
|
242
|
+
e.dataTransfer.clearData();
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
|
+
var handleDragOver = function (e) {
|
|
246
|
+
e.preventDefault();
|
|
247
|
+
};
|
|
248
|
+
// Dosya seçim alanına tıklayınca input'u tetikleyin
|
|
249
|
+
var handleAreaClick = function () {
|
|
250
|
+
var _a;
|
|
251
|
+
(_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
252
|
+
};
|
|
253
|
+
// Dosya kaldırma işlemi
|
|
254
|
+
var handleRemoveFile = function (previewId) {
|
|
255
|
+
var updatedPreviews = previews.filter(function (item) { return item.id !== previewId; });
|
|
256
|
+
setPreviews(updatedPreviews);
|
|
257
|
+
updatePendingStatus(updatedPreviews);
|
|
258
|
+
var itemToRemove = previews.find(function (item) { return item.id === previewId; });
|
|
259
|
+
if (itemToRemove && itemToRemove.uploaded && itemToRemove.serverFileName && onRemoveUploaded) {
|
|
260
|
+
onRemoveUploaded(itemToRemove.serverFileName);
|
|
261
|
+
}
|
|
262
|
+
};
|
|
263
|
+
// Dosyaları sunucuya yükleme işlemi
|
|
264
|
+
var handleUpload = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
265
|
+
var filesToUpload, formData, response, data, uploadedFileNames_1, errorData, error_1;
|
|
266
|
+
return __generator(this, function (_a) {
|
|
267
|
+
switch (_a.label) {
|
|
268
|
+
case 0:
|
|
269
|
+
filesToUpload = previews.filter(function (item) { return !item.uploaded; }).map(function (item) { return item.file; });
|
|
270
|
+
if (filesToUpload.length === 0) {
|
|
271
|
+
react_toastify_1.toast.warning("Önce en az bir dosya seçiniz.");
|
|
272
|
+
return [2 /*return*/];
|
|
273
|
+
}
|
|
274
|
+
formData = new FormData();
|
|
275
|
+
filesToUpload.forEach(function (file) {
|
|
276
|
+
formData.append("file", file);
|
|
277
|
+
});
|
|
278
|
+
_a.label = 1;
|
|
279
|
+
case 1:
|
|
280
|
+
_a.trys.push([1, 7, , 8]);
|
|
281
|
+
return [4 /*yield*/, fetch(url, {
|
|
282
|
+
method: "POST",
|
|
283
|
+
body: formData,
|
|
284
|
+
})];
|
|
285
|
+
case 2:
|
|
286
|
+
response = _a.sent();
|
|
287
|
+
if (!response.ok) return [3 /*break*/, 4];
|
|
288
|
+
return [4 /*yield*/, response.json()];
|
|
289
|
+
case 3:
|
|
290
|
+
data = _a.sent();
|
|
291
|
+
if (data.responseCode === 200 &&
|
|
292
|
+
data.content &&
|
|
293
|
+
data.content.fileList &&
|
|
294
|
+
data.content.fileList.length > 0) {
|
|
295
|
+
uploadedFileNames_1 = data.content.fileList.map(function (item) { return item.fileName; });
|
|
296
|
+
if (onUploadComplete) {
|
|
297
|
+
onUploadComplete(uploadedFileNames_1);
|
|
298
|
+
}
|
|
299
|
+
setPreviews(function (prev) {
|
|
300
|
+
var updatedPreviews = prev.map(function (item, index) {
|
|
301
|
+
if (!item.uploaded) {
|
|
302
|
+
return __assign(__assign({}, item), { uploaded: true, serverFileName: uploadedFileNames_1[index] || item.file.name });
|
|
303
|
+
}
|
|
304
|
+
return item;
|
|
305
|
+
});
|
|
306
|
+
updatePendingStatus(updatedPreviews);
|
|
307
|
+
return updatedPreviews;
|
|
308
|
+
});
|
|
309
|
+
react_toastify_1.toast.success("Dosyalar başarıyla yüklendi.");
|
|
310
|
+
}
|
|
311
|
+
else {
|
|
312
|
+
react_toastify_1.toast.error("Dosyalar yüklenirken bir hata oluştu.");
|
|
313
|
+
}
|
|
314
|
+
return [3 /*break*/, 6];
|
|
315
|
+
case 4: return [4 /*yield*/, response.json()];
|
|
316
|
+
case 5:
|
|
317
|
+
errorData = _a.sent();
|
|
318
|
+
console.error("API Hatası:", errorData);
|
|
319
|
+
react_toastify_1.toast.error("Dosyalar yüklenirken bir hata oluştu.");
|
|
320
|
+
_a.label = 6;
|
|
321
|
+
case 6: return [3 /*break*/, 8];
|
|
322
|
+
case 7:
|
|
323
|
+
error_1 = _a.sent();
|
|
324
|
+
console.error("API çağrısında hata:", error_1);
|
|
325
|
+
react_toastify_1.toast.error("Dosyalar yüklenirken bir hata oluştu.");
|
|
326
|
+
return [3 /*break*/, 8];
|
|
327
|
+
case 8: return [2 /*return*/];
|
|
328
|
+
}
|
|
329
|
+
});
|
|
330
|
+
}); };
|
|
331
|
+
return (react_1.default.createElement("div", { style: { width: "100%", height: "100%" } },
|
|
332
|
+
label && (react_1.default.createElement("div", { style: { marginBottom: "10px" } },
|
|
333
|
+
react_1.default.createElement("label", { style: { fontWeight: "bold" } }, label))),
|
|
334
|
+
react_1.default.createElement("div", { style: dropAreaStyle, onDrop: handleDrop, onDragOver: handleDragOver, onClick: handleAreaClick }, previews.length === 0 ? (react_1.default.createElement("div", null,
|
|
335
|
+
"Dosyalar\u0131 buraya s\u00FCr\u00FCkleyip b\u0131rak\u0131n veya t\u0131klayarak dosya se\u00E7in.",
|
|
336
|
+
multi
|
|
337
|
+
? " (Maksimum ".concat(maxFile, " dosya se\u00E7ilebilir.)")
|
|
338
|
+
: " (Tek dosya seçilebilir.)")) : (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" } },
|
|
339
|
+
react_1.default.createElement("div", { style: previewItemStyle },
|
|
340
|
+
item.isImage ? (react_1.default.createElement("img", { src: item.previewContent, alt: "\u00D6nizleme ".concat(item.id), style: { width: "100%", height: "100%", objectFit: "cover" } })) : (react_1.default.createElement("div", { style: {
|
|
341
|
+
width: "100%",
|
|
342
|
+
height: "100%",
|
|
343
|
+
display: "flex",
|
|
344
|
+
justifyContent: "center",
|
|
345
|
+
alignItems: "center",
|
|
346
|
+
fontSize: "48px",
|
|
347
|
+
} }, item.previewContent)),
|
|
348
|
+
react_1.default.createElement("button", { type: "button" // Form submit'ini tetiklememek için
|
|
349
|
+
, style: removeButtonStyle, onClick: function (e) {
|
|
350
|
+
e.stopPropagation();
|
|
351
|
+
handleRemoveFile(item.id);
|
|
352
|
+
}, title: "Kald\u0131r" }, "\u00D7"),
|
|
353
|
+
item.uploaded && react_1.default.createElement("div", { style: tickOverlayStyle }, "\u2713")),
|
|
354
|
+
react_1.default.createElement("div", { style: {
|
|
355
|
+
marginTop: "4px",
|
|
356
|
+
fontSize: "12px",
|
|
357
|
+
textAlign: "center",
|
|
358
|
+
maxWidth: "100px",
|
|
359
|
+
overflow: "hidden",
|
|
360
|
+
textOverflow: "ellipsis",
|
|
361
|
+
whiteSpace: "nowrap",
|
|
362
|
+
}, title: item.file.name }, item.file.name))); })))),
|
|
363
|
+
react_1.default.createElement("input", { type: "file", multiple: multi, ref: fileInputRef, onChange: handleFileChange, style: { display: "none" } }),
|
|
364
|
+
previews.filter(function (item) { return !item.uploaded; }).length > 0 && (react_1.default.createElement("div", { style: { marginTop: "10px", textAlign: "center" } },
|
|
365
|
+
react_1.default.createElement("button", { type: "button", className: "btn btn-primary", onClick: handleUpload }, "Y\u00FCkle")))));
|
|
366
|
+
};
|
|
367
|
+
exports.default = CustomFileUploader;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TreeNode } from "./CustomTreeView";
|
|
3
|
+
import { AllowedTypes } from "./CustomFileUploader";
|
|
3
4
|
declare enum ElementType {
|
|
4
5
|
INPUT = "input",
|
|
5
6
|
TEXTAREA = "textarea",
|
|
@@ -12,7 +13,8 @@ declare enum ElementType {
|
|
|
12
13
|
RICHTEXTBOX = "richtextbox",
|
|
13
14
|
TREEVIEW = "treeview",
|
|
14
15
|
BUTTON = "button",
|
|
15
|
-
AUTOCOMPLETEINPUT = "autocompleteinput"
|
|
16
|
+
AUTOCOMPLETEINPUT = "autocompleteinput",
|
|
17
|
+
FILEUPLOADER = "fileuploader"
|
|
16
18
|
}
|
|
17
19
|
interface InputElement {
|
|
18
20
|
id?: string;
|
|
@@ -157,7 +159,24 @@ interface AutoCompleteInputElement {
|
|
|
157
159
|
fetchOptions: (query: string) => string[];
|
|
158
160
|
onSelect: (value: string) => void;
|
|
159
161
|
}
|
|
160
|
-
|
|
162
|
+
interface FileUploaderElement {
|
|
163
|
+
id: string;
|
|
164
|
+
type: ElementType.FILEUPLOADER;
|
|
165
|
+
label?: string;
|
|
166
|
+
url: string;
|
|
167
|
+
multi: boolean;
|
|
168
|
+
allowedTypes: AllowedTypes;
|
|
169
|
+
maxFile: number;
|
|
170
|
+
maxSize: number;
|
|
171
|
+
onUploadComplete: (uploadedFileNames: string[]) => void;
|
|
172
|
+
onRemoveUploaded: (fileName: string) => void;
|
|
173
|
+
onPendingChange: (pendingFileCount: number) => void;
|
|
174
|
+
rowId?: number;
|
|
175
|
+
colId?: number;
|
|
176
|
+
innerRowId?: number;
|
|
177
|
+
colClass?: string;
|
|
178
|
+
}
|
|
179
|
+
type FormElement = InputElement | TextareaElement | CheckboxElement | RadioButtonElement | SelectElement | DateTimePickerElement | TextElement | DividerElement | RichTextboxElement | TreeViewElement | ButtonElement | AutoCompleteInputElement | FileUploaderElement;
|
|
161
180
|
interface CustomFormProps {
|
|
162
181
|
elements: FormElement[];
|
|
163
182
|
innerRowCustomClass?: string;
|
|
@@ -88,6 +88,7 @@ var CustomDivider_1 = __importDefault(require("./CustomDivider"));
|
|
|
88
88
|
var CustomRichTextbox_1 = __importDefault(require("./CustomRichTextbox"));
|
|
89
89
|
var CustomTreeView_1 = __importDefault(require("./CustomTreeView"));
|
|
90
90
|
var CustomAutocompleteInput_1 = __importDefault(require("./CustomAutocompleteInput"));
|
|
91
|
+
var CustomFileUploader_1 = __importDefault(require("./CustomFileUploader"));
|
|
91
92
|
var ElementType;
|
|
92
93
|
(function (ElementType) {
|
|
93
94
|
ElementType["INPUT"] = "input";
|
|
@@ -102,6 +103,7 @@ var ElementType;
|
|
|
102
103
|
ElementType["TREEVIEW"] = "treeview";
|
|
103
104
|
ElementType["BUTTON"] = "button";
|
|
104
105
|
ElementType["AUTOCOMPLETEINPUT"] = "autocompleteinput";
|
|
106
|
+
ElementType["FILEUPLOADER"] = "fileuploader";
|
|
105
107
|
})(ElementType || (ElementType = {}));
|
|
106
108
|
exports.ElementType = ElementType;
|
|
107
109
|
var CustomForm = function (_a) {
|
|
@@ -207,7 +209,10 @@ var CustomForm = function (_a) {
|
|
|
207
209
|
var colId = _a[0], innerRows = _a[1];
|
|
208
210
|
return (react_1.default.createElement("div", { className: "col", key: "col-".concat(rowId, "-").concat(colId) }, Object.entries(innerRows).map(function (_a) {
|
|
209
211
|
var innerRowId = _a[0], elements = _a[1];
|
|
210
|
-
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))) : element.type === ElementType.DATETIMEPICKER ? (react_1.default.createElement(CustomDateTimePicker_1.default, __assign({}, element))) : 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))) :
|
|
212
|
+
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))) : element.type === ElementType.DATETIMEPICKER ? (react_1.default.createElement(CustomDateTimePicker_1.default, __assign({}, element))) : 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.FILEUPLOADER ? (
|
|
213
|
+
// FILEUPLOADER elemanı için CustomFileUploader'ı render ediyoruz
|
|
214
|
+
react_1.default.createElement(react_1.default.Fragment, null,
|
|
215
|
+
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, label: element.label }))) : null)); })));
|
|
211
216
|
})));
|
|
212
217
|
})));
|
|
213
218
|
}),
|