ar-design 0.3.4 → 0.3.6

package/dist/assets/css/components/form/upload/dropzone.css

@@ -103,6 +103,7 @@
   background-color: rgba(var(--black-rgb), 0.75);
   padding: 0.5rem;
   transition: visibility 250ms, opacity 250ms ease-in-out;
+  font-family: var(--system);
 }
 .ar-upload-button > .button.dropzone > .preview > .informations > .file-name {
   color: var(--white);

package/dist/components/data-display/table/Editable.js

@@ -28,12 +28,12 @@ const Editable = function ({ c, item, onEditable }) {
                     onEditable({ ...item, [key]: value });
                 } }));
         case "single-select":
-            return (React.createElement(Select, { variant: "borderless", value: selectionItem, options: c.editable.options, onChange: (option) => {
+            return (React.createElement(Select, { variant: "borderless", value: selectionItem, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (option) => {
                     setSelectionItem(option);
                     onEditable({ ...item, [key]: option?.value });
                 } }));
         case "multiple-select":
-            return (React.createElement(Select, { variant: "borderless", value: selectionItems, options: c.editable.options, onChange: (options) => {
+            return (React.createElement(Select, { variant: "borderless", value: selectionItems, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (options) => {
                     setSelectionItems(options);
                     onEditable({ ...item, [key]: options.map((option) => option.value) });
                 }, multiple: true }));

package/dist/components/data-display/table/index.js

@@ -500,10 +500,10 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             React.createElement("div", { className: "actions" }, actions && (React.createElement(React.Fragment, null,
                 actions.import && (React.createElement(Popover, { title: "\u0130\u00E7eri Aktar", message: "Se\u00E7ti\u011Finiz dosyalar\u0131 uygulamaya y\u00FCkleyebilirsiniz. Bu i\u015Flem, dosyalardaki verileri sistemimize aktar\u0131r ve verilerle i\u015Flem yapman\u0131za olanak tan\u0131r.", content: React.createElement(React.Fragment, null,
                         actions.import.prefixItem,
-                        React.createElement(Upload, { text: "Belge Y\u00FCkleyin", allowedTypes: actions.import.allowedTypes, file: files, onChange: (formData, files) => {
+                        React.createElement(Upload, { text: "Belge Y\u00FCkleyin", allowedTypes: actions.import.allowedTypes, files: files, onChange: (formData, files) => {
                                 setFormData(formData);
                                 setFiles(files);
-                            }, multiple: true }),
+                            } }),
                         actions.import.suffixItem), onConfirm: (confirm) => {
                         if (!confirm) {
                             setFiles([]);

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

@@ -28,8 +28,6 @@ const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, ha
     };
     // useEffects
     useEffect(() => {
-        if (selectedFiles.length === 0)
-            return;
         (async () => {
             const newMap = {};
             for (const file of selectedFiles) {
@@ -38,12 +36,13 @@ const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, ha
             }
             setFileBase64Map(newMap);
             setSelectedFile(selectedFiles[0]);
-            setSelectedFileBase64(newMap[selectedFiles[0].name]);
+            setSelectedFileBase64(newMap[selectedFiles[0]?.name]);
         })();
     }, [selectedFiles]);
     return selectedFile ? (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "preview" },
             selectedFile.type.includes("image") ? (React.createElement("img", { src: selectedFileBase64, className: "selected-image" })) : ("Önizleme Yok."),
+            React.createElement(Buttons, { selectedFile: selectedFile, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
             React.createElement("div", { className: "informations" },
                 React.createElement("span", { className: "file-name" }, selectedFile.name),
                 React.createElement("div", null,

package/dist/components/form/upload/Props.d.ts

@@ -14,7 +14,7 @@ interface IMultiple {
      * />
      * ```
      */
-    file: File[];
+    files: File[];
     /**
      * Dosya seçimi veya değişikliğinde tetiklenen fonksiyon.
      *
@@ -33,50 +33,6 @@ interface IMultiple {
      * ```
      */
     onChange: (formData: FormData, files: File[], base64: string[], isInvalidFileExist: boolean) => void;
-    /**
-     * Çoklu dosya seçiminin aktif olduğunu belirtir.
-     *
-     * Örneğin;
-     * ```jsx
-     * <Upload multiple={true} />
-     * ```
-     */
-    multiple: true;
-}
-interface ISingle {
-    /**
-     * Yüklenen tek dosya veya undefined.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Upload file={selectedFile} />
-     * ```
-     */
-    file: File | undefined;
-    /**
-     * Dosya seçimi veya değişikliğinde tetiklenen fonksiyon.
-     *
-     * @param formData - Dosyayla oluşturulmuş FormData nesnesi veya undefined.
-     * @param files - Seçilen dosya veya null.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Upload onChange={(formData, file) => console.log(file)} />
-     * ```
-     */
-    onChange: (formData: FormData | undefined, files: File | null, base64: string) => void;
-    /**
-     * Çoklu dosya seçiminin devre dışı olduğunu belirtir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Upload multiple={false} />
-     * ```
-     */
-    multiple?: false;
 }
 type Props = {
     /**
@@ -109,5 +65,6 @@ type Props = {
      */
     maxSize?: number;
     type?: "list" | "dropzone";
-} & (IMultiple | ISingle) & IValidation & IDisabled;
+    multiple?: boolean;
+} & IMultiple & IValidation & IDisabled;
 export default Props;

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

@@ -5,7 +5,7 @@ import { ARIcon } from "../../icons";
 import Dropzone from "./Dropzone";
 import Button from "../button";
 import List from "./List";
-const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", multiple }) => {
+const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", multiple }) => {
     // refs
     const _firstLoad = useRef(false);
     const _input = useRef(null);
@@ -15,45 +15,28 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", mu
     // variables
     const [className, setClassName] = useState(["button"]);
     // states
-    const [selectedFile, setSelectedFile] = useState(undefined);
     const [selectedFiles, setSelectedFiles] = useState([]);
     const [validationErrors, setValidationErrors] = useState([]);
     // methods
     const handleFileChange = useCallback((files) => {
         const _files = Array.from(files ?? []);
-        if (_files.length > 0) {
-            if (multiple) {
-                setSelectedFiles((prev) => {
-                    const previousFileNames = prev.map((f) => f.name);
-                    const newFiles = _files.filter((f) => !previousFileNames.includes(f.name)) ?? [];
-                    return [...prev, ...newFiles];
-                });
-            }
-            else {
-                setSelectedFile(_files[0]);
-            }
-        }
-        else {
-            multiple ? setSelectedFiles(file) : setSelectedFile(file);
-        }
+        setSelectedFiles((prev) => {
+            const previousFileNames = prev.map((f) => f.name);
+            const newFiles = _files.filter((f) => !previousFileNames.includes(f.name)) ?? [];
+            return [...prev, ...newFiles];
+        });
     }, []);
     const handleFileRemove = useCallback((fileToRemove) => {
-        if (multiple) {
-            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;
-            });
-        }
-        else {
-            setSelectedFile(undefined);
-            setClassName((prev) => prev.filter((c) => c !== "has-file"));
-        }
+        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 newErrors = [];
@@ -106,15 +89,8 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", mu
         e.preventDefault();
         e.stopPropagation();
         const files = e.dataTransfer.files;
-        if (files && files.length > 0) {
-            if (multiple) {
-                setSelectedFiles(Array.from(files));
-            }
-            else {
-                setSelectedFile(files[files.length - 1]);
-                _firstLoad.current = true;
-            }
-        }
+        if (files && files.length > 0)
+            setSelectedFiles(Array.from(files));
         setClassName((prev) => prev.filter((c) => c !== "dragging"));
     }, []);
     const renderUploadFile = (params) => {
@@ -130,65 +106,38 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", mu
             setValidationErrors([]);
             _validationErrors.current = [];
             if (_input.current) {
-                if (multiple) {
-                    if (selectedFiles.length === 0) {
-                        onChange(fileFormData, [], [], false);
-                        return;
-                    }
-                    // Seçilmiş olan dosyalar validasyona gönderiliyor.
-                    selectedFiles.forEach((f) => handleValidationFile(f));
-                    const inValidFiles = Array.from(new Set(_validationErrors.current));
-                    // Input içerisine dosyalar aktarılıyor.
-                    selectedFiles.forEach((f) => dataTransfer.items.add(f));
-                    _input.current.files = dataTransfer.files;
-                    // Geçerli olan dosyalar alındı...
-                    const validFiles = [...selectedFiles.filter((x) => !inValidFiles.includes(x.name))];
-                    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);
-                    // Eğer dosya varsa.
-                    setClassName((prev) => {
-                        const index = prev.findIndex((c) => c === "has-file");
-                        if (index === -1)
-                            return [...prev, "has-file"];
-                        return prev;
-                    });
-                }
-                else {
-                    if (selectedFile) {
-                        handleValidationFile(selectedFile);
-                        fileFormData.append("file", selectedFile);
-                        onChange(fileFormData, selectedFile, await handleFileToBase64(selectedFile));
-                        // Input içerisine dosyalar aktarılıyor.
-                        dataTransfer.items.add(selectedFile);
-                        _input.current.files = dataTransfer.files;
-                    }
-                    else {
-                        onChange(undefined, null, "");
-                    }
+                if (selectedFiles.length === 0) {
+                    onChange(fileFormData, [], [], false);
+                    return;
                 }
+                // Seçilmiş olan dosyalar validasyona gönderiliyor.
+                selectedFiles.forEach((f) => handleValidationFile(f));
+                const inValidFiles = Array.from(new Set(_validationErrors.current));
+                // Input içerisine dosyalar aktarılıyor.
+                selectedFiles.forEach((f) => dataTransfer.items.add(f));
+                _input.current.files = dataTransfer.files;
+                // Geçerli olan dosyalar alındı...
+                const validFiles = [...selectedFiles.filter((x) => !inValidFiles.includes(x.name))];
+                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);
+                // Eğer dosya varsa.
+                setClassName((prev) => {
+                    const index = prev.findIndex((c) => c === "has-file");
+                    if (index === -1)
+                        return [...prev, "has-file"];
+                    return prev;
+                });
             }
         })();
-    }, [selectedFiles, selectedFile]);
+    }, [selectedFiles]);
     useEffect(() => {
-        if (_firstLoad.current) {
-            // if (multiple && file.length === 0) {
-            //   setSelectedFiles([]);
-            // } else {
-            //   if (!file) setSelectedFile(undefined);
-            // }
+        if (_firstLoad.current)
             return;
-        }
-        if (multiple) {
-            setSelectedFiles(file);
-            _firstLoad.current = true;
-        }
-        else {
-            setSelectedFile(file);
-            _firstLoad.current = true;
-        }
-    }, [file]);
+        setSelectedFiles(files);
+        _firstLoad.current = true;
+    }, [files]);
     useEffect(() => {
         if (type === "dropzone")
             setClassName((prev) => [...prev, "dropzone"]);
@@ -201,7 +150,7 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", mu
                             if (_input.current)
                                 _input.current.click();
                         } }, text && React.createElement("span", null, text)),
-                    React.createElement(List, { selectedFiles: selectedFiles.length === 0 && selectedFile ? [selectedFile] : selectedFiles, validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }))),
+                    React.createElement(List, { selectedFiles: selectedFiles ?? [], validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }))),
             });
         case "dropzone":
             return renderUploadFile({
@@ -210,8 +159,8 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", mu
                             if (_input.current)
                                 _input.current.click();
                         } },
-                        React.createElement(Dropzone, { selectedFiles: selectedFiles.length === 0 && selectedFile ? [selectedFile] : selectedFiles, validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
-                        !selectedFile && selectedFiles.length === 0 && (React.createElement(React.Fragment, null,
+                        React.createElement(Dropzone, { selectedFiles: selectedFiles ?? [], validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
+                        selectedFiles && selectedFiles.length === 0 && (React.createElement(React.Fragment, null,
                             React.createElement("div", { className: "upload" },
                                 React.createElement(ARIcon, { icon: "CloudUpload-Fill", size: 32 }),
                                 React.createElement("div", { className: "properies" },

package/dist/libs/types/index.d.ts

@@ -35,6 +35,7 @@ export type TableColumnType<T> = {
     editable?: {
         type: "string" | "number" | "date-picker" | "single-select" | "multiple-select";
         options?: Option[];
+        method?: () => void | Promise<void>;
     };
     config?: {
         width?: number;

package/package.json

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