ar-design 0.3.3 → 0.3.5

package/dist/components/form/date-picker/index.js

@@ -21,7 +21,7 @@ const months = [
     { value: 10, text: "Kasım" },
     { value: 11, text: "Aralık" },
 ];
-const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
+const DatePicker = ({ variant, color, onChange, isClock, validation, ...attributes }) => {
     // refs
     const _arCalendar = useRef(null);
     const _arClock = useRef(null);
@@ -249,7 +249,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
         attributes.placeholder && attributes.placeholder.length > 0 && (React.createElement("label", null,
             validation ? "* " : "",
             attributes.placeholder)),
-        React.createElement(Input, { ref: _beginDate, ...attributes, value: DATE.ParseValue(String(attributes.value), isClock), type: isClock ? "datetime-local" : "date", onKeyDown: (event) => {
+        React.createElement(Input, { ref: _beginDate, variant: variant, color: color, ...attributes, value: DATE.ParseValue(String(attributes.value), isClock), type: isClock ? "datetime-local" : "date", onKeyDown: (event) => {
                 if (event.code === "Space")
                     event.preventDefault();
                 else if (event.code === "Enter")

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

@@ -13,13 +13,13 @@ const Buttons = ({ selectedFile, handleFileToBase64, handleFileRemove }) => {
                     a.click();
                     window.URL.revokeObjectURL(url);
                 } }),
-            selectedFile.type.includes("image") && (React.createElement(Button, { variant: "borderless", color: "blue", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Eye", fill: "currentColor" }) }, onClick: async (e) => {
+            selectedFile.type.includes("image") && (React.createElement(Button, { variant: "borderless", color: "blue", type: "button", icon: { element: React.createElement(ARIcon, { icon: "Eye-Fill", fill: "currentColor" }) }, onClick: async (e) => {
                     e.stopPropagation();
                     const base64 = await handleFileToBase64(selectedFile);
                     const newTab = window.open();
                     newTab?.document.write(`<img src="${base64}" title="${selectedFile.name}" alt="${selectedFile.name}" />`);
                 } })),
-            React.createElement(Button, { variant: "borderless", color: "red", type: "button", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "Trash", fill: "currentColor" }) }, onClick: (e) => {
+            React.createElement(Button, { variant: "borderless", color: "red", type: "button", icon: { element: React.createElement(ARIcon, { icon: "Trash-Fill", fill: "currentColor" }) }, onClick: (e) => {
                     e.stopPropagation();
                     handleFileRemove(selectedFile);
                 } }))));

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

@@ -21,15 +21,13 @@ const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, ha
                 handleSelectFile(file);
             } },
             message && (React.createElement("div", { className: "error" },
-                React.createElement(ARIcon, { variant: "fill", icon: "ExclamationDiamond", fill: "var(--white)" }),
+                React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)" }),
                 React.createElement("span", null, message))),
             React.createElement(Buttons, { selectedFile: file, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
             file.type.includes("image") ? (React.createElement("img", { src: base64 })) : (React.createElement(ARIcon, { icon: fileInfo.icon ?? "Document", fill: "var(--white)", size: 32 }))));
     };
     // 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/List.js

@@ -8,7 +8,7 @@ const List = ({ selectedFiles, validationErrors = [], handleFileToBase64, handle
             const message = validationErrors.find((v) => v.fileName === selectedFile.name)?.message;
             return (React.createElement("li", null,
                 message && (React.createElement("div", { className: "error" },
-                    React.createElement(ARIcon, { variant: "fill", icon: "ExclamationDiamond", fill: "var(--white)" }),
+                    React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)" }),
                     React.createElement("span", null, message))),
                 React.createElement(Buttons, { selectedFile: selectedFile, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
                 React.createElement("span", { className: "file-name" }, selectedFile.name),

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"]);
@@ -197,11 +146,11 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", mu
         case "list":
             return renderUploadFile({
                 children: (React.createElement(React.Fragment, null,
-                    React.createElement(Button, { variant: "outlined", color: "gray", icon: { element: React.createElement(ARIcon, { variant: "fill", icon: "CloudUpload" }) }, onClick: () => {
+                    React.createElement(Button, { variant: "outlined", color: "gray", icon: { element: React.createElement(ARIcon, { icon: "CloudUpload-Fill" }) }, onClick: () => {
                             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,10 +159,10 @@ 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, { variant: "fill", icon: "CloudUpload", size: 32 }),
+                                React.createElement(ARIcon, { icon: "CloudUpload-Fill", size: 32 }),
                                 React.createElement("div", { className: "properies" },
                                     allowedTypes && (React.createElement("div", { className: "allow-types" }, allowedTypes?.map((allowedType) => allowedType.split("/")[1].toLocaleUpperCase()).join(", "))),
                                     maxSize && React.createElement("div", { className: "max-size" },

package/dist/components/icons/Compiler.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { Icons, IconVariants } from "../../libs/types";
+import { Icons } from "../../libs/types";
 declare class Icon {
     private _stroke?;
     private _strokeWidth?;
     constructor(stroke?: string, strokeWidth?: number);
-    Compiler: (variant: IconVariants, icon: Icons) => React.JSX.Element | null;
+    Compiler: (icon: Icons) => React.JSX.Element | null;
 }
 export default Icon;