ar-design 0.4.54 → 0.4.56
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.
|
@@ -29,11 +29,11 @@ const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, ha
|
|
|
29
29
|
// useEffects
|
|
30
30
|
useEffect(() => {
|
|
31
31
|
(async () => {
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
32
|
+
const base64s = await Promise.all(selectedFiles.map((f) => handleFileToBase64(f)));
|
|
33
|
+
const newMap = selectedFiles.reduce((acc, file, index) => {
|
|
34
|
+
acc[file.name] = base64s[index];
|
|
35
|
+
return acc;
|
|
36
|
+
}, {});
|
|
37
37
|
setFileBase64Map(newMap);
|
|
38
38
|
setSelectedFile(selectedFiles[0]);
|
|
39
39
|
setSelectedFileBase64(newMap[selectedFiles[0]?.name]);
|
|
@@ -5,7 +5,7 @@ import Buttons from "./Buttons";
|
|
|
5
5
|
const List = ({ type, direction = "row", selectedFiles, validationErrors = [], handleFileToBase64, handleFileRemove, }) => {
|
|
6
6
|
return (React.createElement("ul", { className: `${type} ${direction}` }, selectedFiles.map((selectedFile) => {
|
|
7
7
|
const message = validationErrors.find((v) => v.fileName === selectedFile.name)?.message;
|
|
8
|
-
return (React.createElement("li",
|
|
8
|
+
return (React.createElement("li", { key: selectedFile.name },
|
|
9
9
|
message && (React.createElement("div", { className: "error" },
|
|
10
10
|
React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)" }),
|
|
11
11
|
React.createElement("span", null, message))),
|
|
@@ -21,24 +21,22 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
|
|
|
21
21
|
const handleFileChange = useCallback((files) => {
|
|
22
22
|
const _files = Array.from(files ?? []);
|
|
23
23
|
setSelectedFiles((prev) => {
|
|
24
|
+
if (!multiple)
|
|
25
|
+
return _files;
|
|
24
26
|
const previousFileNames = prev.map((f) => f.name);
|
|
25
27
|
const newFiles = _files.filter((f) => !previousFileNames.includes(f.name)) ?? [];
|
|
26
28
|
return [...prev, ...newFiles];
|
|
27
29
|
});
|
|
28
|
-
}, []);
|
|
30
|
+
}, [multiple]);
|
|
29
31
|
const handleFileRemove = useCallback((fileToRemove) => {
|
|
30
|
-
const dataTransfer = new DataTransfer();
|
|
31
32
|
setSelectedFiles((prev) => {
|
|
32
33
|
const newList = prev.filter((x) => x.name !== fileToRemove.name);
|
|
33
|
-
newList.forEach((file) => dataTransfer.items.add(file));
|
|
34
|
-
if (_input.current)
|
|
35
|
-
_input.current.files = dataTransfer.files;
|
|
36
34
|
if (newList.length === 0)
|
|
37
35
|
setClassName((prev) => prev.filter((c) => c !== "has-file"));
|
|
38
36
|
return newList;
|
|
39
37
|
});
|
|
40
38
|
}, []);
|
|
41
|
-
const
|
|
39
|
+
const validateFile = useCallback((file) => {
|
|
42
40
|
const newErrors = [];
|
|
43
41
|
if (allowedTypes) {
|
|
44
42
|
if (!allowedTypes.includes(file.type)) {
|
|
@@ -54,7 +52,7 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
|
|
|
54
52
|
}
|
|
55
53
|
}
|
|
56
54
|
setValidationErrors((prev) => [...prev, ...newErrors]);
|
|
57
|
-
}, []);
|
|
55
|
+
}, [allowedTypes, maxSize]);
|
|
58
56
|
const handleFileToBase64 = useCallback((file) => {
|
|
59
57
|
return new Promise((resolve, reject) => {
|
|
60
58
|
const reader = new FileReader();
|
|
@@ -90,9 +88,9 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
|
|
|
90
88
|
e.stopPropagation();
|
|
91
89
|
const files = e.dataTransfer.files;
|
|
92
90
|
if (files && files.length > 0)
|
|
93
|
-
|
|
91
|
+
handleFileChange(files);
|
|
94
92
|
setClassName((prev) => prev.filter((c) => c !== "dragging"));
|
|
95
|
-
}, []);
|
|
93
|
+
}, [handleFileChange]);
|
|
96
94
|
const renderUploadFile = (params) => {
|
|
97
95
|
return (React.createElement("div", { ref: _arUplaod, className: "ar-upload" },
|
|
98
96
|
React.createElement("input", { ref: _input, type: "file", onChange: (event) => handleFileChange(event.target.files), multiple: multiple }),
|
|
@@ -100,6 +98,7 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
|
|
|
100
98
|
};
|
|
101
99
|
// useEffects
|
|
102
100
|
useEffect(() => {
|
|
101
|
+
let isMounted = true;
|
|
103
102
|
(async () => {
|
|
104
103
|
const dataTransfer = new DataTransfer();
|
|
105
104
|
const fileFormData = new FormData();
|
|
@@ -113,7 +112,7 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
|
|
|
113
112
|
return;
|
|
114
113
|
}
|
|
115
114
|
// Seçilmiş olan dosyalar validasyona gönderiliyor.
|
|
116
|
-
selectedFiles.forEach((f) =>
|
|
115
|
+
selectedFiles.forEach((f) => validateFile(f));
|
|
117
116
|
const inValidFiles = Array.from(new Set(_validationErrors.current));
|
|
118
117
|
// Input içerisine dosyalar aktarılıyor.
|
|
119
118
|
selectedFiles.forEach((f) => dataTransfer.items.add(f));
|
|
@@ -123,7 +122,9 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
|
|
|
123
122
|
validFiles.forEach((f) => fileFormData.append("file", f));
|
|
124
123
|
// Geçerli olan dosyalar base64'e dönüştürülüyor...
|
|
125
124
|
const base64Array = await Promise.all(validFiles.map((validFile) => handleFileToBase64(validFile)));
|
|
126
|
-
|
|
125
|
+
if (isMounted) {
|
|
126
|
+
onChange(fileFormData, validFiles, base64Array, _validationErrors.current.length === 0);
|
|
127
|
+
}
|
|
127
128
|
// Eğer dosya varsa.
|
|
128
129
|
setClassName((prev) => {
|
|
129
130
|
const index = prev.findIndex((c) => c === "has-file");
|
|
@@ -133,6 +134,9 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
|
|
|
133
134
|
});
|
|
134
135
|
}
|
|
135
136
|
})();
|
|
137
|
+
return () => {
|
|
138
|
+
isMounted = false;
|
|
139
|
+
};
|
|
136
140
|
}, [selectedFiles]);
|
|
137
141
|
useEffect(() => {
|
|
138
142
|
if (Utils.DeepEqual(files, selectedFiles))
|
|
@@ -142,7 +146,7 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
|
|
|
142
146
|
useEffect(() => {
|
|
143
147
|
if (type === "dropzone")
|
|
144
148
|
setClassName((prev) => [...prev, "dropzone"]);
|
|
145
|
-
}, []);
|
|
149
|
+
}, [type]);
|
|
146
150
|
switch (type) {
|
|
147
151
|
case "list":
|
|
148
152
|
case "grid":
|
|
@@ -82,13 +82,20 @@ class Api {
|
|
|
82
82
|
async CustomFetch(input, init = {}) {
|
|
83
83
|
try {
|
|
84
84
|
const config = getApiConfig();
|
|
85
|
-
|
|
85
|
+
const mergedHeaders = {
|
|
86
|
+
...config.headers,
|
|
87
|
+
...init.headers,
|
|
88
|
+
};
|
|
89
|
+
// Eğer gönderilen body bir FormData ise (Dosya yükleniyorsa),
|
|
90
|
+
// birleşen tüm headers içinden Content-Type'ı tamamen kazıyoruz.
|
|
91
|
+
// Böylece tarayıcı kendi boundary şifresini basabilir.
|
|
92
|
+
if (init.body instanceof FormData) {
|
|
93
|
+
delete mergedHeaders["Content-Type"];
|
|
94
|
+
delete mergedHeaders["content-type"];
|
|
95
|
+
}
|
|
86
96
|
let requestInit = {
|
|
87
97
|
...init,
|
|
88
|
-
headers:
|
|
89
|
-
...config.headers,
|
|
90
|
-
...init.headers,
|
|
91
|
-
},
|
|
98
|
+
headers: mergedHeaders,
|
|
92
99
|
};
|
|
93
100
|
// Request interceptor (runtime'da eklenmiş olabilir.)
|
|
94
101
|
if (config.requestInterceptor)
|
|
@@ -98,7 +105,7 @@ class Api {
|
|
|
98
105
|
// Response interceptor.
|
|
99
106
|
if (config.responseInterceptor)
|
|
100
107
|
return await config.responseInterceptor(response);
|
|
101
|
-
// Error handling
|
|
108
|
+
// Error handling.
|
|
102
109
|
if (!response.ok)
|
|
103
110
|
console.error(`HTTP Error ${response.status}: ${response.statusText}`);
|
|
104
111
|
return response;
|