albinasoft-ui-package 1.0.59 → 1.0.61
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,30 @@
|
|
|
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 isimleri (server tarafından belirlenen) bilgisini 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
|
+
declare const CustomFileUploader: React.FC<CustomFileUploaderProps>;
|
|
30
|
+
export default CustomFileUploader;
|
|
@@ -0,0 +1,360 @@
|
|
|
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;
|
|
181
|
+
var _b = (0, react_1.useState)([]), previews = _b[0], setPreviews = _b[1];
|
|
182
|
+
var fileInputRef = (0, react_1.useRef)(null);
|
|
183
|
+
// Seçilen dosyaları işleme
|
|
184
|
+
var handleFiles = function (files) {
|
|
185
|
+
var filesArray = Array.from(files);
|
|
186
|
+
// Eğer multi false ise sadece bir dosya seçilebilir
|
|
187
|
+
var currentCount = multi ? previews.length : (previews.length > 0 ? 1 : 0);
|
|
188
|
+
var availableSlots = multi ? maxFile - currentCount : (currentCount === 0 ? 1 : 0);
|
|
189
|
+
if (availableSlots <= 0) {
|
|
190
|
+
react_toastify_1.toast.warning("Dosya yükleme limitini doldurdunuz. Yeni dosya ekleyebilmek için mevcut dosyaları kaldırın.");
|
|
191
|
+
return;
|
|
192
|
+
}
|
|
193
|
+
var filesToAdd = filesArray.slice(0, availableSlots);
|
|
194
|
+
if (filesArray.length > availableSlots) {
|
|
195
|
+
react_toastify_1.toast.warning("Se\u00E7ilen dosya say\u0131s\u0131 limiti a\u015Ft\u0131. Sadece ilk ".concat(availableSlots, " dosya eklenecektir."));
|
|
196
|
+
}
|
|
197
|
+
var newPreviews = [];
|
|
198
|
+
filesToAdd.forEach(function (file, index) {
|
|
199
|
+
// Boyut kontrolü
|
|
200
|
+
if (file.size > maxSize) {
|
|
201
|
+
react_toastify_1.toast.error("\"".concat(file.name, "\" dosyas\u0131 boyut limiti (").concat(maxSize, " byte) a\u015F\u0131yor."));
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
// Tür kontrolü
|
|
205
|
+
if (!isAllowedFileType(file, allowedTypes)) {
|
|
206
|
+
react_toastify_1.toast.error("\"".concat(file.name, "\" dosyas\u0131 se\u00E7ilen dosya t\u00FCr\u00FCne uygun de\u011Fil."));
|
|
207
|
+
return;
|
|
208
|
+
}
|
|
209
|
+
var isImg = isImageFile(file);
|
|
210
|
+
var previewContent = isImg
|
|
211
|
+
? URL.createObjectURL(file)
|
|
212
|
+
: fileTypeIcons[getFileExtension(file)] || defaultFileIcon;
|
|
213
|
+
newPreviews.push({
|
|
214
|
+
id: "".concat(file.name, "_").concat(file.lastModified, "_").concat(Date.now(), "_").concat(index),
|
|
215
|
+
file: file,
|
|
216
|
+
isImage: isImg,
|
|
217
|
+
previewContent: previewContent,
|
|
218
|
+
uploaded: false,
|
|
219
|
+
});
|
|
220
|
+
});
|
|
221
|
+
setPreviews(function (prev) { return __spreadArray(__spreadArray([], prev, true), newPreviews, true); });
|
|
222
|
+
};
|
|
223
|
+
// Dosya input değişiminde
|
|
224
|
+
var handleFileChange = function (e) {
|
|
225
|
+
if (e.target.files && e.target.files.length > 0) {
|
|
226
|
+
handleFiles(e.target.files);
|
|
227
|
+
}
|
|
228
|
+
};
|
|
229
|
+
// Drag & Drop olayları
|
|
230
|
+
var handleDrop = function (e) {
|
|
231
|
+
e.preventDefault();
|
|
232
|
+
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
|
233
|
+
handleFiles(e.dataTransfer.files);
|
|
234
|
+
e.dataTransfer.clearData();
|
|
235
|
+
}
|
|
236
|
+
};
|
|
237
|
+
var handleDragOver = function (e) {
|
|
238
|
+
e.preventDefault();
|
|
239
|
+
};
|
|
240
|
+
// Dosya seçim alanına tıklanınca
|
|
241
|
+
var handleAreaClick = function () {
|
|
242
|
+
var _a;
|
|
243
|
+
(_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
244
|
+
};
|
|
245
|
+
// Dosya kaldırma
|
|
246
|
+
var handleRemoveFile = function (previewId) {
|
|
247
|
+
var itemToRemove = previews.find(function (item) { return item.id === previewId; });
|
|
248
|
+
if (!itemToRemove)
|
|
249
|
+
return;
|
|
250
|
+
setPreviews(function (prev) { return prev.filter(function (item) { return item.id !== previewId; }); });
|
|
251
|
+
// Eğer dosya sunucuya yüklenmişse, onRemoveUploaded callback'ini tetikleyin.
|
|
252
|
+
if (itemToRemove.uploaded && itemToRemove.serverFileName && onRemoveUploaded) {
|
|
253
|
+
onRemoveUploaded(itemToRemove.serverFileName);
|
|
254
|
+
}
|
|
255
|
+
};
|
|
256
|
+
// Dosyaları sunucuya yükle
|
|
257
|
+
var handleUpload = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
258
|
+
var filesToUpload, formData, response, data, uploadedFileNames_1, errorData, error_1;
|
|
259
|
+
return __generator(this, function (_a) {
|
|
260
|
+
switch (_a.label) {
|
|
261
|
+
case 0:
|
|
262
|
+
filesToUpload = previews.filter(function (item) { return !item.uploaded; }).map(function (item) { return item.file; });
|
|
263
|
+
if (filesToUpload.length === 0) {
|
|
264
|
+
react_toastify_1.toast.warning("Önce en az bir dosya seçiniz.");
|
|
265
|
+
return [2 /*return*/];
|
|
266
|
+
}
|
|
267
|
+
formData = new FormData();
|
|
268
|
+
filesToUpload.forEach(function (file) {
|
|
269
|
+
formData.append("file", file);
|
|
270
|
+
});
|
|
271
|
+
_a.label = 1;
|
|
272
|
+
case 1:
|
|
273
|
+
_a.trys.push([1, 7, , 8]);
|
|
274
|
+
return [4 /*yield*/, fetch(url, {
|
|
275
|
+
method: "POST",
|
|
276
|
+
body: formData,
|
|
277
|
+
})];
|
|
278
|
+
case 2:
|
|
279
|
+
response = _a.sent();
|
|
280
|
+
if (!response.ok) return [3 /*break*/, 4];
|
|
281
|
+
return [4 /*yield*/, response.json()];
|
|
282
|
+
case 3:
|
|
283
|
+
data = _a.sent();
|
|
284
|
+
if (data.responseCode === 200 &&
|
|
285
|
+
data.content &&
|
|
286
|
+
data.content.fileList &&
|
|
287
|
+
data.content.fileList.length > 0) {
|
|
288
|
+
uploadedFileNames_1 = data.content.fileList.map(function (item) { return item.fileName; });
|
|
289
|
+
// Opsiyonel callback çağrısı
|
|
290
|
+
if (onUploadComplete) {
|
|
291
|
+
onUploadComplete(uploadedFileNames_1);
|
|
292
|
+
}
|
|
293
|
+
// Yüklenen dosyaların durumunu güncelle
|
|
294
|
+
setPreviews(function (prev) {
|
|
295
|
+
return prev.map(function (item, index) {
|
|
296
|
+
if (!item.uploaded) {
|
|
297
|
+
return __assign(__assign({}, item), { uploaded: true, serverFileName: uploadedFileNames_1[index] || item.file.name });
|
|
298
|
+
}
|
|
299
|
+
return item;
|
|
300
|
+
});
|
|
301
|
+
});
|
|
302
|
+
react_toastify_1.toast.success("Dosyalar başarıyla yüklendi.");
|
|
303
|
+
}
|
|
304
|
+
else {
|
|
305
|
+
react_toastify_1.toast.error("Dosyalar yüklenirken bir hata oluştu.");
|
|
306
|
+
}
|
|
307
|
+
return [3 /*break*/, 6];
|
|
308
|
+
case 4: return [4 /*yield*/, response.json()];
|
|
309
|
+
case 5:
|
|
310
|
+
errorData = _a.sent();
|
|
311
|
+
console.error("API Hatası:", errorData);
|
|
312
|
+
react_toastify_1.toast.error("Dosyalar yüklenirken bir hata oluştu.");
|
|
313
|
+
_a.label = 6;
|
|
314
|
+
case 6: return [3 /*break*/, 8];
|
|
315
|
+
case 7:
|
|
316
|
+
error_1 = _a.sent();
|
|
317
|
+
console.error("API çağrısında hata:", error_1);
|
|
318
|
+
react_toastify_1.toast.error("Dosyalar yüklenirken bir hata oluştu.");
|
|
319
|
+
return [3 /*break*/, 8];
|
|
320
|
+
case 8: return [2 /*return*/];
|
|
321
|
+
}
|
|
322
|
+
});
|
|
323
|
+
}); };
|
|
324
|
+
return (react_1.default.createElement("div", { style: { width: "100%", height: "100%" } },
|
|
325
|
+
label && (react_1.default.createElement("div", { style: { marginBottom: "10px" } },
|
|
326
|
+
react_1.default.createElement("label", { style: { fontWeight: "bold" } }, label))),
|
|
327
|
+
react_1.default.createElement("div", { style: dropAreaStyle, onDrop: handleDrop, onDragOver: handleDragOver, onClick: handleAreaClick }, previews.length === 0 ? (react_1.default.createElement("div", null,
|
|
328
|
+
"Dosyalar\u0131 buraya s\u00FCr\u00FCkleyip b\u0131rak\u0131n veya t\u0131klayarak dosya se\u00E7in.",
|
|
329
|
+
multi
|
|
330
|
+
? " (Maksimum ".concat(maxFile, " dosya se\u00E7ilebilir.)")
|
|
331
|
+
: " (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" } },
|
|
332
|
+
react_1.default.createElement("div", { style: previewItemStyle },
|
|
333
|
+
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: {
|
|
334
|
+
width: "100%",
|
|
335
|
+
height: "100%",
|
|
336
|
+
display: "flex",
|
|
337
|
+
justifyContent: "center",
|
|
338
|
+
alignItems: "center",
|
|
339
|
+
fontSize: "48px",
|
|
340
|
+
} }, item.previewContent)),
|
|
341
|
+
react_1.default.createElement("button", { type: "button" // Burada type="button" ekleyerek form submit'ini engelliyoruz.
|
|
342
|
+
, style: removeButtonStyle, onClick: function (e) {
|
|
343
|
+
e.stopPropagation();
|
|
344
|
+
handleRemoveFile(item.id);
|
|
345
|
+
}, title: "Kald\u0131r" }, "\u00D7"),
|
|
346
|
+
item.uploaded && react_1.default.createElement("div", { style: tickOverlayStyle }, "\u2713")),
|
|
347
|
+
react_1.default.createElement("div", { style: {
|
|
348
|
+
marginTop: "4px",
|
|
349
|
+
fontSize: "12px",
|
|
350
|
+
textAlign: "center",
|
|
351
|
+
maxWidth: "100px",
|
|
352
|
+
overflow: "hidden",
|
|
353
|
+
textOverflow: "ellipsis",
|
|
354
|
+
whiteSpace: "nowrap",
|
|
355
|
+
}, title: item.file.name }, item.file.name))); })))),
|
|
356
|
+
react_1.default.createElement("input", { type: "file", multiple: multi, ref: fileInputRef, onChange: handleFileChange, style: { display: "none" } }),
|
|
357
|
+
previews.filter(function (item) { return !item.uploaded; }).length > 0 && (react_1.default.createElement("div", { style: { marginTop: "10px", textAlign: "center" } },
|
|
358
|
+
react_1.default.createElement("button", { type: "button", className: "btn btn-primary", onClick: handleUpload }, "Y\u00FCkle")))));
|
|
359
|
+
};
|
|
360
|
+
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,23 @@ 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
|
+
rowId?: number;
|
|
174
|
+
colId?: number;
|
|
175
|
+
innerRowId?: number;
|
|
176
|
+
colClass?: string;
|
|
177
|
+
}
|
|
178
|
+
type FormElement = InputElement | TextareaElement | CheckboxElement | RadioButtonElement | SelectElement | DateTimePickerElement | TextElement | DividerElement | RichTextboxElement | TreeViewElement | ButtonElement | AutoCompleteInputElement | FileUploaderElement;
|
|
161
179
|
interface CustomFormProps {
|
|
162
180
|
elements: FormElement[];
|
|
163
181
|
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, label: element.label }))) : null)); })));
|
|
211
216
|
})));
|
|
212
217
|
})));
|
|
213
218
|
}),
|
package/dist/index.d.ts
CHANGED
|
@@ -14,4 +14,5 @@ import CustomTextarea from './components/CustomTextarea';
|
|
|
14
14
|
import CustomTreeView from './components/CustomTreeView';
|
|
15
15
|
import CustomAutocompleteInput from './components/CustomAutocompleteInput';
|
|
16
16
|
import CustomProgressBar from './components/CustomProgressBar';
|
|
17
|
-
|
|
17
|
+
import CustomTimeline from './components/CustomTimeline';
|
|
18
|
+
export { CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, CustomAutocompleteInput, CustomProgressBar, CustomTimeline, };
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.CustomProgressBar = exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = void 0;
|
|
6
|
+
exports.CustomTimeline = exports.CustomProgressBar = exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = void 0;
|
|
7
7
|
var CustomButton_1 = __importDefault(require("./components/CustomButton"));
|
|
8
8
|
exports.CustomButton = CustomButton_1.default;
|
|
9
9
|
var CustomCheckbox_1 = __importDefault(require("./components/CustomCheckbox"));
|
|
@@ -36,3 +36,5 @@ var CustomAutocompleteInput_1 = __importDefault(require("./components/CustomAuto
|
|
|
36
36
|
exports.CustomAutocompleteInput = CustomAutocompleteInput_1.default;
|
|
37
37
|
var CustomProgressBar_1 = __importDefault(require("./components/CustomProgressBar"));
|
|
38
38
|
exports.CustomProgressBar = CustomProgressBar_1.default;
|
|
39
|
+
var CustomTimeline_1 = __importDefault(require("./components/CustomTimeline"));
|
|
40
|
+
exports.CustomTimeline = CustomTimeline_1.default;
|