ar-design 0.4.54 → 0.4.55

package/dist/assets/css/components/navigation/menu/styles.css

@@ -13,7 +13,7 @@
 
     li {
       list-style: none;
-      height: auto; /* DÜZELTİLMEDİ: Sabit 2rem kaldırıldı, li'nin alt menüyle büyümesi sağlandı */
+      height: auto;
 
       > ul.submenu {
         display: grid;

package/dist/components/form/upload/Dropzone.js

@@ -29,11 +29,11 @@ const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, ha
     // useEffects
     useEffect(() => {
         (async () => {
-            const newMap = {};
-            for (const file of selectedFiles) {
-                const base64 = await handleFileToBase64(file);
-                newMap[file.name] = base64;
-            }
+            const base64s = await Promise.all(selectedFiles.map((f) => handleFileToBase64(f)));
+            const newMap = selectedFiles.reduce((acc, file, index) => {
+                acc[file.name] = base64s[index];
+                return acc;
+            }, {});
             setFileBase64Map(newMap);
             setSelectedFile(selectedFiles[0]);
             setSelectedFileBase64(newMap[selectedFiles[0]?.name]);

package/dist/components/form/upload/List.js

@@ -5,7 +5,7 @@ import Buttons from "./Buttons";
 const List = ({ type, direction = "row", selectedFiles, validationErrors = [], handleFileToBase64, handleFileRemove, }) => {
     return (React.createElement("ul", { className: `${type} ${direction}` }, selectedFiles.map((selectedFile) => {
         const message = validationErrors.find((v) => v.fileName === selectedFile.name)?.message;
-        return (React.createElement("li", null,
+        return (React.createElement("li", { key: selectedFile.name },
             message && (React.createElement("div", { className: "error" },
                 React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)" }),
                 React.createElement("span", null, message))),

package/dist/components/form/upload/index.js

@@ -21,24 +21,22 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
     const handleFileChange = useCallback((files) => {
         const _files = Array.from(files ?? []);
         setSelectedFiles((prev) => {
+            if (!multiple)
+                return _files;
             const previousFileNames = prev.map((f) => f.name);
             const newFiles = _files.filter((f) => !previousFileNames.includes(f.name)) ?? [];
             return [...prev, ...newFiles];
         });
-    }, []);
+    }, [multiple]);
     const handleFileRemove = useCallback((fileToRemove) => {
-        const dataTransfer = new DataTransfer();
         setSelectedFiles((prev) => {
             const newList = prev.filter((x) => x.name !== fileToRemove.name);
-            newList.forEach((file) => dataTransfer.items.add(file));
-            if (_input.current)
-                _input.current.files = dataTransfer.files;
             if (newList.length === 0)
                 setClassName((prev) => prev.filter((c) => c !== "has-file"));
             return newList;
         });
     }, []);
-    const handleValidationFile = useCallback((file) => {
+    const validateFile = useCallback((file) => {
         const newErrors = [];
         if (allowedTypes) {
             if (!allowedTypes.includes(file.type)) {
@@ -54,7 +52,7 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
             }
         }
         setValidationErrors((prev) => [...prev, ...newErrors]);
-    }, []);
+    }, [allowedTypes, maxSize]);
     const handleFileToBase64 = useCallback((file) => {
         return new Promise((resolve, reject) => {
             const reader = new FileReader();
@@ -90,9 +88,9 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
         e.stopPropagation();
         const files = e.dataTransfer.files;
         if (files && files.length > 0)
-            setSelectedFiles(Array.from(files));
+            handleFileChange(files);
         setClassName((prev) => prev.filter((c) => c !== "dragging"));
-    }, []);
+    }, [handleFileChange]);
     const renderUploadFile = (params) => {
         return (React.createElement("div", { ref: _arUplaod, className: "ar-upload" },
             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
     };
     // useEffects
     useEffect(() => {
+        let isMounted = true;
         (async () => {
             const dataTransfer = new DataTransfer();
             const fileFormData = new FormData();
@@ -113,7 +112,7 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
                     return;
                 }
                 // Seçilmiş olan dosyalar validasyona gönderiliyor.
-                selectedFiles.forEach((f) => handleValidationFile(f));
+                selectedFiles.forEach((f) => validateFile(f));
                 const inValidFiles = Array.from(new Set(_validationErrors.current));
                 // Input içerisine dosyalar aktarılıyor.
                 selectedFiles.forEach((f) => dataTransfer.items.add(f));
@@ -123,7 +122,9 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
                 validFiles.forEach((f) => fileFormData.append("file", f));
                 // Geçerli olan dosyalar base64'e dönüştürülüyor...
                 const base64Array = await Promise.all(validFiles.map((validFile) => handleFileToBase64(validFile)));
-                onChange(fileFormData, validFiles, base64Array, _validationErrors.current.length === 0);
+                if (isMounted) {
+                    onChange(fileFormData, validFiles, base64Array, _validationErrors.current.length === 0);
+                }
                 // Eğer dosya varsa.
                 setClassName((prev) => {
                     const index = prev.findIndex((c) => c === "has-file");
@@ -133,6 +134,9 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
                 });
             }
         })();
+        return () => {
+            isMounted = false;
+        };
     }, [selectedFiles]);
     useEffect(() => {
         if (Utils.DeepEqual(files, selectedFiles))
@@ -142,7 +146,7 @@ const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", d
     useEffect(() => {
         if (type === "dropzone")
             setClassName((prev) => [...prev, "dropzone"]);
-    }, []);
+    }, [type]);
     switch (type) {
         case "list":
         case "grid":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.4.54",
+  "version": "0.4.55",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",