@sydsoft/base 1.3.0 → 1.5.0

package/dist/esm/form/SearchableInput.js

@@ -0,0 +1,313 @@
+import { __assign, __rest, __spreadArray } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "./Input";
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Button } from "./Button";
+import { Icon } from "../icon";
+import { isDev } from "../_lib/baseFunctions";
+import styles from "./styles/SearchableInput.module.css";
+var Component = function (_a, forwardedRef) {
+    var _b = _a.api, api = _b === void 0 ? false : _b, onText = _a.onText, onSelect = _a.onSelect, onLoad = _a.onLoad, _c = _a.newCreate, newCreate = _c === void 0 ? false : _c, name = _a.name, value = _a.value, _d = _a.autoCompleteList, autoCompleteList = _d === void 0 ? [] : _d, itemComponent = _a.itemComponent, onChange = _a.onChange, inputRef = _a.inputRef, _e = _a.valueKey, valueKey = _e === void 0 ? "value" : _e, _f = _a.labelKey, labelKey = _f === void 0 ? "label" : _f, placeholder = _a.placeholder, endAdornment = _a.endAdornment, refModal = _a.refModal, style = _a.style, disabled = _a.disabled, parentInputValue = _a.parentInputValue, listPositionRelative = _a.listPositionRelative, other = __rest(_a, ["api", "onText", "onSelect", "onLoad", "newCreate", "name", "value", "autoCompleteList", "itemComponent", "onChange", "inputRef", "valueKey", "labelKey", "placeholder", "endAdornment", "refModal", "style", "disabled", "parentInputValue", "listPositionRelative"]);
+    var refMain = useRef(null);
+    var refInput = useRef(null);
+    useEffect(function () {
+        if (inputRef)
+            inputRef.current = refInput.current;
+    }, [refInput.current]);
+    var refComponentInput = useRef();
+    var refList = useRef();
+    var _g = useState(autoCompleteList), data = _g[0], setData = _g[1];
+    var _h = useState(""), text = _h[0], setText = _h[1]; //Inputta görünen
+    var _j = useState(""), filter = _j[0], setFilter = _j[1]; // Filtrelemeye tabi tutulan
+    var _k = useState(false), open = _k[0], setOpen = _k[1];
+    var _l = useState(api), loading = _l[0], setLoading = _l[1];
+    useEffect(function () {
+        if (onLoad)
+            onLoad(value !== null && value !== void 0 ? value : "");
+    }, []);
+    useImperativeHandle(forwardedRef, function () { return ({
+        open: function () { return setOpen(true); },
+        close: function () { return setOpen(false); },
+        checkByValue: function (value, openList) {
+            if (openList === void 0) { openList = false; }
+            return checkByValue(value, openList);
+        },
+        setLoading: function (value) { return setLoading(value); },
+        setAutoCompleteList: function (list, value) {
+            if (value === void 0) { value = null; }
+            setData(list);
+            if (value)
+                checkByValue(value, false, list);
+            setLoading(false);
+        },
+        clear: function (openList, focusInput) {
+            if (openList === void 0) { openList = false; }
+            if (focusInput === void 0) { focusInput = false; }
+            return clear(openList, focusInput);
+        }
+    }); });
+    useEffect(function () {
+        if (parentInputValue) {
+            clear(false);
+        }
+    }, [parentInputValue]);
+    useEffect(function () {
+        if (!api && Object.keys(data).length > 0)
+            checkByValue(value, open);
+        // if (Object.keys(data).length > 0) checkByValue(value, open);
+        isDev && console.log("useDeepCompareEffect =>", name, "data");
+    }, [data]);
+    useEffect(function () {
+        if (Object.keys(data).length > 0) {
+            if (value && value.toString().length > 0) {
+                checkByValue(value, open);
+            }
+            else {
+                if (!api)
+                    clear(false);
+            }
+        }
+        isDev && console.log("useEffect-value =>", name, value);
+    }, [value]);
+    useEffect(function () {
+        var checkHideBackDrop = function (e) {
+            if (open && refMain.current && !refMain.current.contains(e.target)) {
+                checkByInput();
+            }
+        };
+        var checkESC = function (e) {
+            if (e.keyCode === 27 || e.key === "Escape" || e.code === "Escape")
+                checkByInput();
+        };
+        window.addEventListener("mousedown", checkHideBackDrop);
+        if (refMain.current)
+            refMain.current.addEventListener("keydown", checkESC);
+        return function () {
+            window.removeEventListener("mousedown", checkHideBackDrop);
+            if (refMain.current)
+                refMain.current.removeEventListener("keydown", checkESC);
+        };
+    }, [data, open]);
+    useEffect(function () {
+        if (refModal && refModal.current) {
+            if (open) {
+                refModal.current.style.overflow = "visible";
+            }
+            else {
+                refModal.current.style.overflow = "auto overlay";
+            }
+        }
+        if (open) {
+            setScrollPosition();
+            if (refModal && refModal.current && refMain && refMain.current) {
+                refModal.current.scrollTop = refMain.current.offsetTop + 300;
+            }
+        }
+    }, [open]);
+    var cevirTumuKucuk = function (text) {
+        if (text === void 0) { text = ""; }
+        return text.toString().toLocaleLowerCase("tr-TR");
+    };
+    var convertForSearch = function (value) {
+        var data = cevirTumuKucuk(value);
+        data = data.replace(/ö/g, "o");
+        data = data.replace(/ç/g, "c");
+        data = data.replace(/ş/g, "s");
+        data = data.replace(/ı/g, "i");
+        data = data.replace(/ğ/g, "g");
+        data = data.replace(/ü/g, "u");
+        data = data.replace(/[^a-z\d]/g, ""); // %_- are allowed
+        data = data.replace(/^\s+|\s+$/g, "");
+        return data;
+    };
+    var filteredData = useMemo(function () {
+        var _a;
+        var list;
+        if (filter.length > 0) {
+            list = Object.values(data).filter(function (item) {
+                return convertForSearch(item[labelKey]).includes(convertForSearch(filter)) || item[labelKey] == filter;
+            });
+        }
+        else {
+            list = data;
+        }
+        if (newCreate && text.length > 0) {
+            var filterText = Object.values(data).find(function (item) { return item[labelKey].toString().toLowerCase() === text.toString().toLowerCase(); });
+            if (!filterText) {
+                list = __spreadArray([(_a = {}, _a[labelKey] = text, _a[valueKey] = text, _a.create = true, _a)], list, true);
+            }
+        }
+        return list;
+    }, [data, filter]);
+    var Change = function (e) {
+        setValue(false, true);
+        setText(e.target.value);
+        setFilter(e.target.value);
+        setOpen(true);
+        if (onText)
+            onText(e.target.value);
+    };
+    var setValue = function (result, openList) {
+        setOpen(openList);
+        var newValue = result && result[valueKey] ? result[valueKey] : "";
+        if (result) {
+            var newLabel = result && result[labelKey] ? result[labelKey] : "";
+            setText(newLabel);
+        }
+        setFilter("");
+        if (onChange && newValue != value) {
+            isDev && console.log("onChange =>", name, "yeni:" + newValue, "eski:" + value);
+            onChange({
+                target: {
+                    name: name,
+                    value: newValue
+                }
+            });
+        }
+        if (onSelect)
+            onSelect(result);
+    };
+    var checkByValue = function (value, openList, list) {
+        if (openList === void 0) { openList = false; }
+        if (list === void 0) { list = []; }
+        var targetList = list.length > 0 ? list : data;
+        var find = Object.values(targetList).find(function (item) { return cevirTumuKucuk(item[valueKey]) === cevirTumuKucuk(value); });
+        setValue(find, openList);
+    };
+    var checkByInput = function () {
+        isDev && console.log("checkByInput =>", name, refInput.current.value, data);
+        var findByLabel = Object.values(data).find(function (item) { return cevirTumuKucuk(item[labelKey]) === cevirTumuKucuk(refInput.current.value); });
+        if (findByLabel && value == findByLabel[valueKey]) {
+            setOpen(false);
+            isDev && console.log("findByLabel - Zaten Aynı =>", name, findByLabel);
+            return;
+        }
+        setValue(findByLabel, false);
+        if (!findByLabel)
+            setText("");
+        if (api && !findByLabel && Object.keys(data).length === 0) {
+            if (onText)
+                onText("");
+        }
+    };
+    var clear = function (openList, focusInput) {
+        var _a;
+        if (openList === void 0) { openList = true; }
+        if (focusInput === void 0) { focusInput = false; }
+        setFilter("");
+        setText("");
+        setValue(false, openList);
+        if (onText)
+            onText("");
+        if (focusInput)
+            (_a = refInput === null || refInput === void 0 ? void 0 : refInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+        isDev && console.log("clear");
+    };
+    function setScrollPosition() {
+        if (refList.current) {
+            var position = 0;
+            var text_1 = refList.current.querySelector("li.item.selected");
+            if (text_1) {
+                position = text_1.offsetTop - 35;
+            }
+            else if (refList.current.querySelector("li.item.active")) {
+                position = refList.current.querySelector("li.item.active").offsetTop - 35;
+            }
+            refList.current.scrollTop = position;
+        }
+    }
+    var onKeyDown = function (e) {
+        if (!open)
+            return null;
+        function selectEnter() {
+            var text = refList.current.querySelector("li.item.selected");
+            if (text) {
+                checkByValue(text.dataset.value);
+            }
+            else if (refList.current.querySelectorAll("li.item").length > 0) {
+                checkByValue(refList.current.querySelectorAll("li.item")[0].dataset.value);
+            }
+            else {
+                clear(true, true);
+            }
+        }
+        function selectFirst() {
+            var showList = refList.current.querySelectorAll("li.item");
+            if (showList.length > 0) {
+                showList[0].classList.add("selected");
+            }
+        }
+        function selectLast() {
+            var showList = refList.current.querySelectorAll("li.item");
+            if (showList.length > 0) {
+                showList[showList.length - 1].classList.add("selected");
+            }
+        }
+        function selectNext(element) {
+            element.classList.remove("selected");
+            var next = element.nextElementSibling;
+            if (next && next.nodeType !== -1) {
+                if (next.classList.contains("item")) {
+                    next.classList.add("selected");
+                }
+                else {
+                    selectNext(next);
+                }
+            }
+            else {
+                selectFirst();
+            }
+        }
+        function selectPrev(element) {
+            element.classList.remove("selected");
+            var next = element.previousElementSibling;
+            if (next && next.nodeType !== -1) {
+                if (next.classList.contains("item")) {
+                    next.classList.add("selected");
+                }
+                else {
+                    selectPrev(next);
+                }
+            }
+            else {
+                selectLast();
+            }
+        }
+        var selected = refList.current.querySelector("li.item.selected");
+        if (e.which == 40) {
+            if (selected) {
+                selectNext(selected);
+            }
+            else {
+                selectFirst();
+            }
+        }
+        else if (e.which == 38) {
+            if (selected) {
+                selectPrev(selected);
+            }
+            else {
+                selectLast();
+            }
+        }
+        else if (e.which == 35) {
+            selectLast();
+        }
+        else if (e.which == 36) {
+            selectFirst();
+        }
+        else if (e.which == 13) {
+            selectEnter();
+        }
+        else if (e.which == 9) {
+            checkByInput();
+        }
+        setScrollPosition();
+    };
+    return (_jsxs("div", { ref: refMain, className: styles.component, onKeyDown: onKeyDown, style: style, children: [_jsx(Input, __assign({}, other, { name: name, value: text, inputRef: refInput, componentRef: refComponentInput, onFocus: function () { return setOpen(true); }, onChange: Change, endAdornment: !disabled && (_jsxs("div", { style: { marginRight: 5 }, tabIndex: -1, children: [_jsx(Button, { title: "Temizle", tabIndex: -1, hidden: !(text && text.length > 0), onClick: function () { return clear(true, true); }, onlyIcon: _jsx(Icon, { iconMui: "clear", style: { color: "#444" } }) }), endAdornment, _jsx(Button, { tabIndex: -1, hidden: !(Object.keys(data).length > 0), onClick: function () { return setOpen(!open); }, onlyIcon: _jsx(Icon, { iconMui: open ? "keyboard_arrow_up" : "keyboard_arrow_down", style: { color: "#444" } }) })] })), placeholder: loading ? "Lütfen bekleyiniz..." : placeholder, loading: loading, disabled: disabled, propsInput: __assign(__assign({}, other === null || other === void 0 ? void 0 : other.propsInput), { autoComplete: "off" }) })), _jsx("div", { className: styles.listDiv, "data-relative": listPositionRelative, children: _jsxs("ul", { ref: refList, className: "".concat(styles.list, " ").concat(open ? styles.open : ""), children: [(Object.keys(filteredData).length === 0 || loading) && (_jsx("div", { className: "".concat(styles.message, " ").concat(loading ? styles.loading : ""), children: loading ? "Lütfen bekleyiniz..." : "Kayıt bulunamadı..." })), Object.values(filteredData).map(function (item, key) {
+                            var itemValue = item[valueKey];
+                            var itemLabel = item[labelKey];
+                            return (_jsxs("li", { className: "".concat(styles.listItem, " ").concat(itemValue === value ? styles.active : ""), "data-value": itemValue, "data-label": itemLabel, onClick: function () { return setValue(item, false); }, children: [item.create && _jsx("span", { className: styles.newCreate, children: "Yeni Olu\u015Ftur: " }), itemComponent ? itemComponent(item) : itemLabel] }, key));
+                        })] }) })] }));
+};
+export var SearchableInput = React.forwardRef(Component);

package/dist/esm/form/UploadBase.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2024
+ *  @author: izzetseydaoglu
+ *  @last-modified: 11.06.2024 02:39
+ */
+import React from "react";
+interface Props {
+    children?: React.ReactNode;
+    refUploadInput?: any;
+    className?: string;
+    required?: boolean;
+    multiple?: boolean;
+    ext_ok?: string[];
+    maxSize?: number;
+    maxFile?: number;
+    style?: React.CSSProperties;
+    onChange?: Function;
+    targetForm?: Function;
+    name?: string;
+    label?: string;
+    component?: any;
+}
+export declare const UploadBase: ({ component, children, targetForm, onChange, name, required, multiple, maxSize, maxFile, ext_ok, style, className, refUploadInput, label }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const uploadBase_CreateForm: (formData: any) => any;
+export {};

package/dist/esm/form/UploadBase.js

@@ -0,0 +1,86 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) 2024
+ *  @author: izzetseydaoglu
+ *  @last-modified: 11.06.2024 02:39
+ */
+import { useEffect, useRef } from "react";
+import { alert_add } from "../alert";
+var upload_ext_ok = ["pdf", "doc", "docx", "xls", "xlsx", "jpg", "jpeg", "png", "bmp", "tiff", "tif", "udf", "txt", "rtf", "csv", "xml", "zip", "rar"];
+var upload_maxsize = 30;
+var upload_maxfile = 50;
+export var UploadBase = function (_a) {
+    var _b = _a.component, component = _b === void 0 ? "div" : _b, children = _a.children, targetForm = _a.targetForm, onChange = _a.onChange, _c = _a.name, name = _c === void 0 ? "file__" : _c, _d = _a.required, required = _d === void 0 ? true : _d, _e = _a.multiple, multiple = _e === void 0 ? false : _e, _f = _a.maxSize, maxSize = _f === void 0 ? upload_maxsize : _f, _g = _a.maxFile, maxFile = _g === void 0 ? upload_maxfile : _g, _h = _a.ext_ok, ext_ok = _h === void 0 ? upload_ext_ok : _h, style = _a.style, className = _a.className, _j = _a.refUploadInput, refUploadInput = _j === void 0 ? null : _j, label = _a.label;
+    var ref = useRef(null);
+    useEffect(function () {
+        if (refUploadInput)
+            refUploadInput.current = ref.current;
+    }, [ref.current]);
+    var fileSelected = function (e) {
+        if (!(e.target.files.length > 0)) {
+            e.target.value = null;
+            return null;
+        }
+        if (e.target.files.length > maxFile) {
+            alert_add({ type: "error", message: "En fazla " + maxFile + " dosya seçebilirsiniz." });
+            e.target.value = null;
+            return null;
+        }
+        var fileList = [];
+        Object.values(e.target.files).map(function (file) {
+            var size = file.size;
+            var ext = file.name.replace(/^.*\./, "").toLowerCase();
+            if (ext_ok.indexOf(ext) === -1) {
+                alert_add({ type: "error", message: "Yüklemeye çalıştığınız dosya türü desteklenmiyor. Desteklenen dosya türleri: " + ext_ok.join(", ") });
+            }
+            else if (size > maxSize * 1000000) {
+                alert_add({ type: "error", message: "En fazla " + maxSize + "MB büyüklüğündeki dosyaları seçebilirsiniz." });
+            }
+            else {
+                fileList.push(file);
+            }
+        });
+        if (onChange)
+            onChange(fileList);
+        if (targetForm) {
+            var nameList_1 = [];
+            var newform_1 = {};
+            var uniqueID_1 = new Date().getTime();
+            fileList.map(function (file) {
+                var _a;
+                uniqueID_1 = uniqueID_1 + 1;
+                newform_1 = __assign(__assign({}, newform_1), (_a = {}, _a[name + uniqueID_1] = file, _a));
+                nameList_1.push(file.name);
+            });
+            targetForm(function (prev) { return (__assign(__assign({}, prev), { uploadBaseList: __assign({}, newform_1), uploadBaseListName: nameList_1.join(", ") })); });
+        }
+    };
+    var defaultStyle = {
+        position: "relative",
+        cursor: "pointer"
+    };
+    var Component = component.toLowerCase();
+    return (_jsxs(Component, { className: className, style: __assign(__assign({}, defaultStyle), style), "data-label": label !== null && label !== void 0 ? label : "", children: [children, _jsx("input", { ref: ref, type: "file", required: required, onChange: fileSelected, multiple: multiple, accept: ext_ok.map(function (i) { return "." + i; }).join(","), style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    opacity: 0,
+                    width: "100%",
+                    height: "100%",
+                    cursor: "pointer",
+                    zIndex: 1
+                } })] }));
+};
+export var uploadBase_CreateForm = function (formData) {
+    var _a;
+    var newform = __assign({}, formData);
+    var list = (_a = formData["uploadBaseList"]) !== null && _a !== void 0 ? _a : {};
+    Object.keys(list).map(function (fileKey) {
+        var _a;
+        return (newform = __assign(__assign({}, newform), (_a = {}, _a[fileKey] = list[fileKey], _a)));
+    });
+    delete newform["uploadBaseList"];
+    delete newform["uploadBaseListName"];
+    return newform;
+};

package/dist/esm/form/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./Dialog";
+export * from "./Form";
+export * from "./FormOlustur";
+export * from "./Input";
+export * from "./Label";
+export * from "./SearchableInput";
+export * from "./UploadBase";

package/dist/esm/form/index.js

@@ -0,0 +1,9 @@
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./Dialog";
+export * from "./Form";
+export * from "./FormOlustur";
+export * from "./Input";
+export * from "./Label";
+export * from "./SearchableInput";
+export * from "./UploadBase";

package/dist/esm/form/styles/Button.module.css

@@ -0,0 +1,144 @@
+.button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    appearance: none;
+    user-select: none;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-decoration: none;
+    letter-spacing: 0.03em;
+    text-transform: none;
+    border-radius: 6px;
+    color: rgba(0, 0, 0, 0.87);
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+    background-color: #e0e0e0;
+    padding: 4px 10px;
+    outline: 0;
+    border: 0;
+    cursor: pointer;
+    white-space: nowrap;
+}
+.button.fullwidth {
+    width: 100%;
+}
+.button[data-button-size="small"] {
+    font-size: 0.8125rem;
+    padding: 4px 10px;
+    min-width: 64px;
+    height: 32px;
+}
+
+.button[data-button-size="medium"] {
+    font-size: 0.875rem;
+    padding: 6px 12px;
+    min-width: 72px;
+    height: 36px;
+}
+
+.button[data-button-size="large"] {
+    font-size: 1rem;
+    padding: 8px 16px;
+    min-width: 80px;
+    height: 40px;
+}
+
+.button[hidden] {
+    display: none;
+}
+
+.button[disabled] {
+    opacity: 0.7;
+    box-shadow: inset 0 0 20px #000000ad;
+    cursor: not-allowed;
+}
+.button:focus,
+.button:hover {
+    opacity: 0.9;
+}
+
+.button.primary {
+    color: #fff;
+    background-color: #3772c4;
+    border-color: #1877f2;
+}
+
+.button.secondary {
+    color: #fff;
+    background-color: #6c7573;
+    border-color: #6c757d;
+}
+
+.button.success {
+    color: #fff;
+    background-color: #198754;
+    border-color: #198754;
+}
+
+.button.danger {
+    color: #fff;
+    background-color: #dc3545;
+    border-color: #dc3545;
+}
+
+.button.warning {
+    color: #000;
+    background-color: #ffc107;
+    border-color: #ffc107;
+}
+
+.button.info {
+    color: #000;
+    background-color: #0dcaf0;
+    border-color: #0dcaf0;
+}
+
+.button.light {
+    color: #000;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa;
+}
+
+.button.dark {
+    color: #fff;
+    background-color: #212529;
+    border-color: #212529;
+}
+
+.button.link {
+    box-shadow: none;
+    background-color: transparent;
+    color: inherit;
+}
+
+.iconbutton {
+    padding: 8px;
+    border-radius: 50%;
+    background-color: transparent;
+    box-shadow: none;
+    color: #707274;
+    /* overflow: unset; */
+}
+.iconbutton:focus,
+.iconbutton:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+.ripple {
+    content: "";
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 900ms linear;
+    background-color: rgba(255, 255, 255, 0.7);
+}
+@keyframes ripple {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}