@harjs/react-ui 1.0.0

package/dist/components/form/text-editor/index.js

@@ -0,0 +1,300 @@
+"use client";
+import "../../../assets/css/components/form/text-editor/styles.css";
+import { ARIcon } from "../../icons";
+import Button from "../button";
+import React, { useEffect, useRef, useState } from "react";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+import ReactDOM from "react-dom";
+import Tooltip from "../../feedback/tooltip";
+const TextEditor = ({ color = "light", name, value, onChange, dynamicList, placeholder, height, 
+// multilang,
+validation, disabled, }) => {
+    // refs
+    const _container = useRef(null);
+    const _label = useRef(null);
+    const _arIframe = useRef(null);
+    const _onChange = useRef(onChange);
+    const _onChangeTimeOut = useRef(null);
+    // refs -> Alias Panel
+    const _target = useRef(null);
+    const _arAliasPanel = useRef(null);
+    // states
+    const [iframe, setIframe] = useState(null);
+    const [iframeDocument, setIframeDocument] = useState(undefined);
+    // states -> Data
+    const [tagged, setTagged] = useState([]);
+    // states -> Alias Panel
+    const [atRect, setAtRect] = useState(null);
+    const [filtered, setFiltered] = useState(null);
+    // variables
+    const toolbarButtons = [
+        { command: "bold", icon: "Bold", tooltip: `Bold (${Utils.GetOSShortCutIcons()} + B)` },
+        { command: "italic", icon: "Italic", tooltip: `Italic (${Utils.GetOSShortCutIcons()} + I)` },
+        { command: "underline", icon: "Underline", tooltip: `Underline (${Utils.GetOSShortCutIcons()} + U)` },
+        { command: "insertUnorderedList", icon: "BulletList", tooltip: "Bulleted List" },
+        { command: "insertOrderedList", icon: "NumberList", tooltip: "Numbered List" },
+        { command: "justifyLeft", icon: "TextAlingLeft", tooltip: "Align Left" },
+        { command: "justifyCenter", icon: "TextAlingCenter", tooltip: "Align Center" },
+        { command: "justifyRight", icon: "TextAlingRight", tooltip: "Align Right" },
+    ];
+    const _iframeClassName = [];
+    _iframeClassName.push(...Utils.GetClassName("outlined", undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, { radius: "sm" }, undefined, undefined, undefined));
+    // methods
+    const execCommand = (command) => {
+        if (!_arIframe.current)
+            return;
+        const iframeDoc = _arIframe.current.contentDocument || _arIframe.current.contentWindow?.document;
+        if (iframeDoc)
+            iframeDoc.execCommand(command, true, undefined);
+    };
+    const handleFocus = () => _arIframe.current?.classList.add("focused");
+    const handleBlur = () => {
+        _arIframe.current?.classList.remove("focused");
+        // setAtRect(null);
+    };
+    const handleMouseDown = () => {
+        // Resizebar a tıklandığında iframe içerisinde bulunan window'un event listenerı olmadığı için orada resize çalışmayacaktır.
+        // Bu yüzden önüne bir duvar örüyoruz ve mevcut sayfanın window'unda işlem yapmaya devam ediyor.
+        const resizeItem = document.createElement("div");
+        resizeItem.classList.add("ar-text-editor--block-item");
+        _container.current?.appendChild(resizeItem);
+        window.addEventListener("mousemove", handleResize);
+        window.addEventListener("mouseup", () => {
+            resizeItem.remove();
+            window.removeEventListener("mousemove", handleResize);
+        });
+    };
+    const handleResize = (event) => {
+        if (_arIframe.current) {
+            const rect = _arIframe.current.getBoundingClientRect();
+            const height = (rect.height += event.movementY);
+            _arIframe.current.style.height = `${height}px`;
+        }
+    };
+    // methods -> Alias Panel
+    const handleBackSpaceKeydown = (event) => {
+        const key = event.key;
+        if (key === "Backspace" || key === "Delete") {
+            const selection = _arIframe.current?.contentDocument?.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return;
+            const range = selection.getRangeAt(0);
+            // 1. Çoklu seçim varsa: clone edip span'ları bul.
+            const contents = range.cloneContents();
+            const multiSpans = contents.querySelectorAll("span[data-tag]");
+            if (multiSpans.length > 0) {
+                event.preventDefault();
+                const tagsToRemove = [];
+                multiSpans.forEach((span) => {
+                    const tag = span.getAttribute("data-tag");
+                    if (tag)
+                        tagsToRemove.push(tag);
+                });
+                // DOM'dan temizle
+                range.deleteContents();
+                // State'ten temizle
+                setTagged((prev) => prev.filter((x) => tagsToRemove.every((tag) => !JSON.stringify(x).includes(tag))));
+                return;
+            }
+            // 2. Tekli seçim: caret bir span içindeyse sil
+            const node = selection.anchorNode;
+            const container = node?.parentElement;
+            if (container?.tagName === "SPAN" && container.dataset.tag) {
+                event.preventDefault();
+                const tag = container.dataset.tag;
+                // DOM'dan sil
+                container.remove();
+                // State'ten kaldır
+                setTagged((prev) => prev.filter((x) => !JSON.stringify(x).includes(tag ?? "")));
+            }
+        }
+    };
+    // useEffects
+    useEffect(() => {
+        // Iframe Document yüklendikten sonra çalışacaktır.
+        if (!iframeDocument)
+            return;
+        const selection = iframeDocument.getSelection();
+        let range = null;
+        // Eğer bir seçim (caret) varsa, konumunu kaydet
+        if (selection && selection.rangeCount > 0)
+            range = selection.getRangeAt(0);
+        // Eğer içeriği kendimiz değiştirmedikse ve gelen value farklıysa, içeriği güncelle
+        if (iframeDocument.body.innerHTML !== value) {
+            // iframeDocument.body.innerHTML = value || `<p>${placeholder ?? ""}</p>`;
+            iframeDocument.body.innerHTML = value ?? "";
+        }
+        // Cursor (caret) konumunu geri yükle
+        if (range) {
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+        }
+    }, [value, iframeDocument]);
+    useEffect(() => {
+        // onChange değiştiğinde ref'i güncelle
+        _onChange.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        // Iframe yüklendikten sonra çalışacaktır.
+        if (!iframe)
+            return;
+        const _iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
+        if (!_iframeDocument)
+            return;
+        setIframeDocument(_iframeDocument);
+        if (!disabled)
+            _iframeDocument.designMode = "on";
+        // Herhangi bir değişikliği izlemek için MutationObserver kullan
+        const observer = new MutationObserver((mutationsList) => {
+            if (_onChangeTimeOut.current)
+                clearTimeout(_onChangeTimeOut.current);
+            _onChangeTimeOut.current = setTimeout(() => {
+                mutationsList.forEach((record) => {
+                    const target = record.target;
+                    _target.current = record.target;
+                    if (dynamicList) {
+                        if (target.nodeType === Node.TEXT_NODE) {
+                            const text = target.textContent ?? "";
+                            const atIndex = text.lastIndexOf(dynamicList?.triggerKey ?? "@");
+                            if (atIndex !== -1) {
+                                const afterAt = text.slice(atIndex + 1); // @ sonrası metin.
+                                const hasWhitespace = /\s/.test(afterAt);
+                                if (!hasWhitespace) {
+                                    const selection = _iframeDocument?.getSelection();
+                                    if (selection && selection.rangeCount > 0) {
+                                        const range = selection.getRangeAt(0).cloneRange();
+                                        const rect = range.getBoundingClientRect();
+                                        range.collapse(true);
+                                        setAtRect(rect);
+                                        setFiltered(afterAt);
+                                        return;
+                                    }
+                                }
+                            }
+                            // Eğer @ yoksa ya da boşluk varsa paneli kapat.
+                            setAtRect(null);
+                        }
+                    }
+                    _iframeDocument?.body.innerHTML === "<br>"
+                        ? _onChange.current(undefined)
+                        : _onChange.current(_iframeDocument.body.innerHTML);
+                });
+            }, 500);
+        });
+        // Observer'ı body üzerinde başlat
+        observer.observe(_iframeDocument.body, { childList: true, subtree: true, characterData: true, attributes: true });
+        _iframeDocument.body.addEventListener("focus", handleFocus);
+        _iframeDocument.body.addEventListener("blur", handleBlur);
+        if (dynamicList) {
+            _iframeDocument.body.addEventListener("keydown", handleBackSpaceKeydown);
+        }
+        return () => {
+            observer.disconnect();
+            _iframeDocument.body.removeEventListener("focus", handleFocus);
+            _iframeDocument.body.removeEventListener("blur", handleBlur);
+            if (dynamicList) {
+                _iframeDocument.body.removeEventListener("keydown", handleBackSpaceKeydown);
+            }
+        };
+    }, [iframe]);
+    useEffect(() => {
+        dynamicList?.onTagged && dynamicList?.onTagged(tagged);
+    }, [tagged]);
+    useEffect(() => {
+        if (!_arIframe.current)
+            return;
+        setIframe(_arIframe.current);
+        return () => {
+            if (iframeDocument) {
+                iframeDocument.body.removeEventListener("focus", handleFocus);
+                iframeDocument.body.removeEventListener("blur", handleBlur);
+            }
+        };
+    }, []);
+    return (React.createElement("div", { ref: _container, className: "ar-text-editor" },
+        placeholder && (React.createElement("label", { ref: _label, className: value ? "visible" : "hidden", style: { maxWidth: _arIframe.current?.getBoundingClientRect().width } },
+            validation && "* ",
+            placeholder)),
+        React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" "), height: height, ...(value
+                ? {
+                    style: {
+                        clipPath: `polygon(
+                            -15px 0,
+                            10px -5px,
+                            10px 5px,
+                            calc(${_label.current?.getBoundingClientRect().width}px + 7px) 5px,
+                            calc(${_label.current?.getBoundingClientRect().width}px + 7px) -5px,
+                            100% -70px,
+                            calc(100% + 5px) calc(100% + 5px),
+                            -5px calc(100% + 5px)
+                          )`,
+                    },
+                }
+                : {}) }),
+        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }, index) => (React.createElement(Tooltip, { key: `${command}-${index}`, text: tooltip },
+            React.createElement(Button, { key: command, type: "button", variant: "borderless", color: "light", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon }) }, onClick: () => execCommand(command) }))))),
+        React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),
+        validation?.text && React.createElement("span", { className: "validation" }, validation.text),
+        dynamicList &&
+            atRect &&
+            ReactDOM.createPortal(React.createElement("div", { ref: _arAliasPanel, className: "ar-alias-panel", style: {
+                    top: (_arIframe.current?.getBoundingClientRect().top ?? 0) + atRect.top + 20,
+                    left: (_arIframe.current?.getBoundingClientRect().left ?? 0) + atRect.left,
+                }, onClick: () => {
+                    setAtRect(null);
+                } },
+                React.createElement("ul", null, dynamicList &&
+                    dynamicList.render.items
+                        // .filter((fItem) => !tagged.some((t: T) => JSON.stringify(fItem) === JSON.stringify(t)))
+                        .filter((item) => {
+                        const displayText = item[dynamicList.render.display] ?? "";
+                        return displayText.toLowerCase().includes(filtered.toLowerCase());
+                    })
+                        .map((item, index) => (React.createElement("li", { key: index, onClick: (event) => {
+                            event.stopPropagation();
+                            const selection = iframeDocument?.getSelection();
+                            const target = _target.current;
+                            if (selection && selection.rangeCount > 0 && target && target.nodeType === Node.TEXT_NODE) {
+                                const text = target.textContent ?? "";
+                                const atIndex = text.lastIndexOf(dynamicList?.triggerKey ?? "@");
+                                if (atIndex !== -1) {
+                                    const range = selection.getRangeAt(0).cloneRange();
+                                    range.setStart(target, atIndex);
+                                    range.setEnd(target, text.length);
+                                    range.deleteContents();
+                                    const itemText = item[dynamicList.render.display] ?? "";
+                                    const span = iframeDocument?.createElement("span");
+                                    const spaceNode = iframeDocument?.createTextNode(" \u200B");
+                                    if (span && spaceNode && iframeDocument) {
+                                        span.setAttribute("data-tag", `${itemText}`);
+                                        span.style.backgroundColor = "rgba(114, 15, 103, .1)";
+                                        span.style.padding = "0 5px";
+                                        span.style.borderRadius = "2px";
+                                        span.style.color = "#720f67";
+                                        span.style.fontWeight = "bold";
+                                        span.textContent = `@${itemText}`;
+                                        // Yeni bir wrapper fragment oluştur
+                                        const fragment = iframeDocument.createDocumentFragment();
+                                        fragment.appendChild(span);
+                                        fragment.appendChild(spaceNode); // görünmez boş node, ama yazılabilir
+                                        range.insertNode(fragment);
+                                        // Cursor'u spaceNode’un sonuna yerleştir
+                                        const newRange = iframeDocument.createRange();
+                                        newRange.setStart(spaceNode, spaceNode.length);
+                                        newRange.collapse(true);
+                                        selection.removeAllRanges();
+                                        selection.addRange(newRange);
+                                        // Focus zaten varsa sorun olmayacak
+                                        const activeEl = iframeDocument?.activeElement;
+                                        activeEl?.focus();
+                                    }
+                                    setAtRect(null);
+                                    setTagged((prev) => {
+                                        const exists = prev.some((i) => JSON.stringify(i) === JSON.stringify(item));
+                                        return exists ? prev : [...prev, item];
+                                    });
+                                }
+                            }
+                        } }, item[dynamicList.render.display] ?? ""))))), document.body)));
+};
+export default TextEditor;

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

@@ -0,0 +1,8 @@
+import React from "react";
+interface IProps {
+    selectedFile: File;
+    handleFileToBase64: (file: File) => Promise<string>;
+    handleFileRemove: (fileToRemove: File) => void;
+}
+declare const _default: React.MemoExoticComponent<({ selectedFile, handleFileToBase64, handleFileRemove }: IProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,27 @@
+import React, { memo } from "react";
+import { ARIcon } from "../../icons";
+import Button from "../button";
+const Buttons = ({ selectedFile, handleFileToBase64, handleFileRemove }) => {
+    return (React.createElement("div", { className: "buttons" },
+        React.createElement("div", null,
+            React.createElement(Button, { variant: "borderless", color: "purple", type: "button", icon: { element: React.createElement(ARIcon, { icon: "Download", fill: "currentColor" }) }, onClick: (e) => {
+                    e.stopPropagation();
+                    const url = window.URL.createObjectURL(selectedFile);
+                    const a = document.createElement("a");
+                    a.href = url;
+                    a.download = selectedFile.name;
+                    a.click();
+                    window.URL.revokeObjectURL(url);
+                } }),
+            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, { icon: "Trash-Fill", fill: "currentColor" }) }, onClick: (e) => {
+                    e.stopPropagation();
+                    handleFileRemove(selectedFile);
+                } }))));
+};
+export default memo(Buttons);

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { ValidationError } from ".";
+interface IProps {
+    selectedFiles: File[];
+    validationErrors?: ValidationError[];
+    handleFileToBase64: (file: File) => Promise<string>;
+    handleFileRemove: (fileToRemove: File) => void;
+}
+declare const _default: React.MemoExoticComponent<({ selectedFiles, validationErrors, handleFileToBase64, handleFileRemove }: IProps) => React.JSX.Element | null>;
+export default _default;

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

@@ -0,0 +1,55 @@
+"use client";
+import React, { memo, useEffect, useState } from "react";
+import { ARIcon } from "../../icons";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+import Buttons from "./Buttons";
+const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, handleFileRemove }) => {
+    const [selectedFile, setSelectedFile] = useState(undefined);
+    const [selectedFileBase64, setSelectedFileBase64] = useState(undefined);
+    const [fileBase64Map, setFileBase64Map] = useState({});
+    // methods
+    const handleSelectFile = async (file) => {
+        setSelectedFile(file);
+        setSelectedFileBase64(fileBase64Map[file.name]);
+    };
+    const renderFileCard = (file) => {
+        const fileInfo = Utils.GetFileTypeInformation(file.type);
+        const message = validationErrors.find((v) => v.fileName === file.name)?.message;
+        const base64 = fileBase64Map[file.name];
+        return (React.createElement("div", { key: file.name, className: "item", style: { backgroundColor: fileInfo.color }, onMouseEnter: (e) => {
+                e.stopPropagation();
+                handleSelectFile(file);
+            } },
+            message && (React.createElement("div", { className: "error" },
+                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(() => {
+        (async () => {
+            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]);
+        })();
+    }, [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,
+                    React.createElement("span", { className: "file-size" },
+                        (selectedFile.size / 1024).toFixed(3),
+                        React.createElement("span", { className: "size-type" }, "KB")),
+                    React.createElement("span", { className: "file-type" }, Utils.GetFileTypeInformation(selectedFile.type).readableType)))),
+        selectedFiles.length > 1 && React.createElement("div", { className: "items" }, selectedFiles.map((file) => renderFileCard(file))))) : null;
+};
+export default memo(Dropzone);

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { ValidationError } from ".";
+interface IProps {
+    type: "list" | "grid";
+    direction?: "row" | "column";
+    selectedFiles: File[];
+    validationErrors?: ValidationError[];
+    handleFileToBase64: (file: File) => Promise<string>;
+    handleFileRemove: (fileToRemove: File) => void;
+}
+declare const _default: React.MemoExoticComponent<({ type, direction, selectedFiles, validationErrors, handleFileToBase64, handleFileRemove, }: IProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,21 @@
+import React, { memo } from "react";
+import { ARIcon } from "../../icons";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+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", { key: selectedFile.name },
+            message && (React.createElement("div", { className: "error" },
+                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),
+            React.createElement("div", null,
+                React.createElement("span", { className: "file-size" },
+                    (selectedFile.size / 1024).toFixed(3),
+                    React.createElement("span", { className: "size-type" }, "KB")),
+                React.createElement("span", { className: "file-type" }, Utils.GetFileTypeInformation(selectedFile.type).readableType))));
+    })));
+};
+export default memo(List);

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

@@ -0,0 +1,16 @@
+import { MimeTypes } from "../../../libs/infrastructure/types";
+import { IDisabledProps, ISizeProps, IValidationProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IMultiple {
+    files: File[];
+    onChange: (formData: FormData, files: File[], base64: string[], isInvalidFileExist: boolean) => void;
+}
+type Props = {
+    text: string;
+    allowedTypes?: MimeTypes[];
+    maxSize?: number;
+    type?: "list" | "grid" | "dropzone";
+    direction?: "row" | "column";
+    fullWidth?: boolean;
+    multiple?: boolean;
+} & IMultiple & ISizeProps & IValidationProps & IDisabledProps;
+export default Props;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import React from "react";
+import Props from "./Props";
+import "../../../assets/css/components/form/upload/styles.css";
+export type ValidationError = {
+    fileName: string;
+    message: string;
+};
+declare const Upload: React.FC<Props>;
+export default Upload;

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

@@ -0,0 +1,184 @@
+"use client";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/form/upload/styles.css";
+import { ARIcon } from "../../icons";
+import Dropzone from "./Dropzone";
+import Button from "../button";
+import List from "./List";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+const Upload = ({ text, files, onChange, allowedTypes, maxSize, type = "list", direction = "column", size, fullWidth, multiple, }) => {
+    // refs
+    const _input = useRef(null);
+    const _arUplaod = useRef(null);
+    // refs -> File Data
+    const _validationErrors = useRef([]);
+    // variables
+    const [className, setClassName] = useState(["button"]);
+    // states
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [validationErrors, setValidationErrors] = useState([]);
+    // methods
+    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) => {
+        setSelectedFiles((prev) => {
+            const newList = prev.filter((x) => x.name !== fileToRemove.name);
+            if (newList.length === 0)
+                setClassName((prev) => prev.filter((c) => c !== "has-file"));
+            return newList;
+        });
+    }, []);
+    const validateFile = useCallback((file) => {
+        const newErrors = [];
+        if (allowedTypes) {
+            if (!allowedTypes.includes(file.type)) {
+                newErrors.push({ fileName: file.name, message: "Geçersiz dosya türü." });
+                _validationErrors.current.push(file.name);
+            }
+        }
+        if (maxSize) {
+            const _maxSize = maxSize * 1024 * 1024; // MB
+            if (file.size > _maxSize) {
+                newErrors.push({ fileName: file.name, message: "Dosya boyutu çok büyük." });
+                _validationErrors.current.push(file.name);
+            }
+        }
+        setValidationErrors((prev) => [...prev, ...newErrors]);
+    }, [allowedTypes, maxSize]);
+    const handleFileToBase64 = useCallback((file) => {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                if (reader.result && typeof reader.result === "string") {
+                    resolve(reader.result);
+                }
+                else {
+                    reject(new Error("Failed to read the file"));
+                }
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+    }, []);
+    const handleDrag = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.type === "dragenter" || e.type === "dragover") {
+            setClassName((prev) => {
+                const index = prev.findIndex((c) => c === "dragging");
+                if (index === -1)
+                    return [...prev, "dragging"];
+                return prev;
+            });
+        }
+        else {
+            setClassName((prev) => prev.filter((c) => c !== "dragging"));
+        }
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const files = e.dataTransfer.files;
+        if (files && files.length > 0)
+            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 }),
+            params.children));
+    };
+    // useEffects
+    useEffect(() => {
+        let isMounted = true;
+        (async () => {
+            const dataTransfer = new DataTransfer();
+            const fileFormData = new FormData();
+            setValidationErrors([]);
+            _validationErrors.current = [];
+            if (_input.current) {
+                if (selectedFiles.length === 0) {
+                    if (_input.current)
+                        _input.current.files = dataTransfer.files;
+                    onChange(fileFormData, [], [], false);
+                    return;
+                }
+                // Seçilmiş olan dosyalar validasyona gönderiliyor.
+                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));
+                _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)));
+                if (isMounted) {
+                    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;
+                });
+            }
+        })();
+        return () => {
+            isMounted = false;
+        };
+    }, [selectedFiles]);
+    useEffect(() => {
+        if (Utils.DeepEqual(files, selectedFiles))
+            return;
+        setSelectedFiles(files);
+    }, [files]);
+    useEffect(() => {
+        if (type === "dropzone")
+            setClassName((prev) => [...prev, "dropzone"]);
+    }, [type]);
+    switch (type) {
+        case "list":
+        case "grid":
+            return renderUploadFile({
+                children: (React.createElement(React.Fragment, null,
+                    React.createElement(Button, { type: "button", variant: "outlined", color: "gray", icon: { element: React.createElement(ARIcon, { icon: "CloudUpload-Fill" }) }, onClick: () => {
+                            if (_input.current)
+                                _input.current.click();
+                        }, fullWidth: fullWidth, size: size }, text && React.createElement("span", null, text)),
+                    React.createElement(List, { type: type, direction: direction, selectedFiles: selectedFiles ?? [], validationErrors: validationErrors, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }))),
+            });
+        case "dropzone":
+            return renderUploadFile({
+                children: (React.createElement("div", { className: "ar-upload-button" },
+                    React.createElement("div", { className: className.map((c) => c).join(" "), onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, onClick: () => {
+                            if (_input.current)
+                                _input.current.click();
+                        } },
+                        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" },
+                                    allowedTypes && (React.createElement("div", { className: "allow-types" }, allowedTypes?.map((allowedType) => allowedType.split("/")[1].toLocaleUpperCase()).join(", "))),
+                                    maxSize && React.createElement("div", { className: "max-size" },
+                                        "up to ",
+                                        maxSize,
+                                        "MB"))),
+                            text && React.createElement("span", null, text)))))),
+            });
+        default:
+            return null;
+    }
+};
+export default Upload;