@sydsoft/base 1.47.0 → 1.49.0

package/{dist/esm → _dist}/form/Input.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @author    : izzetseydaoglu
@@ -11,60 +10,62 @@ import { applyInputMask } from '../_lib/inputMask';
 import { alert_add } from '../alert';
 import { Dialog } from './Dialog';
 import styles from './styles/Input.module.css';
-export var Input = function (_a) {
-    var componentRef = _a.componentRef, inputRef = _a.inputRef, className = _a.className, propsComponent = _a.propsComponent, propsInput = _a.propsInput, id = _a.id, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, type = _a.type, label = _a.label, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, placeholder = _a.placeholder, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyPress = _a.onKeyPress, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, select = _a.select, _g = _a.valueKey, valueKey = _g === void 0 ? 'value' : _g, _h = _a.labelKey, labelKey = _h === void 0 ? 'label' : _h, _j = _a.ilkSec, ilkSec = _j === void 0 ? false : _j, _k = _a.multiline, multiline = _k === void 0 ? false : _k, _l = _a.rows, rows = _l === void 0 ? 2 : _l, sadeceYazi = _a.sadeceYazi, sadeceSayi = _a.sadeceSayi, tumuBuyuk = _a.tumuBuyuk, tumuKucuk = _a.tumuKucuk, seoCevir = _a.seoCevir, dosyaNoGiris = _a.dosyaNoGiris, fileNameGiris = _a.fileNameGiris, dateGecmisKontrol = _a.dateGecmisKontrol, autoSelectText = _a.autoSelectText, _m = _a.mask, mask = _m === void 0 ? '' : _m, _o = _a.maskSettings, maskSettings = _o === void 0 ? {
-        clearIfNotMatch: true,
-        reverse: false, //Tersten doldurmaya başla, fiyatlar için geçerli
-        selectOnFocus: false
-    } : _o;
-    var refMain = useRef(null);
-    var refInput = useRef(null);
-    var refLabel = useRef(null);
-    var _p = useState(value && value.toString().length > 0), inputFilled = _p[0], setInputFilled = _p[1];
-    var _q = useState(false), focus = _q[0], setFocus = _q[1];
-    useEffect(function () {
+export const Input = ({ componentRef, inputRef, className, propsComponent, propsInput, id, name, value = '', type, label, startAdornment, endAdornment, placeholder, onChange, onFocus, onBlur, onClick, onKeyPress, onKeyUp, onKeyDown, disabled = false, required = false, loading = false, autoFocus = false, select, valueKey = 'value', labelKey = 'label', ilkSec = false, multiline = false, rows = 2, sadeceYazi, sadeceSayi, tumuBuyuk, tumuKucuk, seoCevir, dosyaNoGiris, fileNameGiris, dateGecmisKontrol, autoSelectText, mask = '', maskSettings = {
+    clearIfNotMatch: true,
+    reverse: false, //Tersten doldurmaya başla, fiyatlar için geçerli
+    selectOnFocus: false
+} }) => {
+    const refMain = useRef(null);
+    const refInput = useRef(null);
+    const refLabel = useRef(null);
+    const [inputFilled, setInputFilled] = useState(value && value.toString().length > 0);
+    const [focus, setFocus] = useState(false);
+    useEffect(() => {
         if (inputRef)
             inputRef.current = refInput.current;
         if (componentRef)
             componentRef.current = refMain.current;
     }, [componentRef, inputRef]);
-    useEffect(function () {
+    useEffect(() => {
         autoSelectText && !select && (refInput === null || refInput === void 0 ? void 0 : refInput.current) && refInput.current.select();
     }, [autoSelectText, select]);
-    useEffect(function () {
+    useEffect(() => {
         var _a, _b;
-        var filled = String(value) && value.toString().length > 0 ? true : false;
+        const filled = String(value) && value.toString().length > 0 ? true : false;
         setInputFilled(filled);
         filled && ((_b = (_a = refMain === null || refMain === void 0 ? void 0 : refMain.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(styles.error));
     }, [value]);
-    useEffect(function () {
+    useEffect(() => {
         // if (type === "number") sadeceSayi = true; //TODO: sadeceSayi burada değiştirelemez ki!!!
         if (select && ilkSec && (value === '' || value === null || value === undefined)) {
             if (select.length) {
-                var ilkItem = select[0][valueKey] ? select[0][valueKey] : '';
-                onChange && onChange({ target: { name: name, value: ilkItem } });
+                const ilkItem = select[0][valueKey] ? select[0][valueKey] : '';
+                onChange && onChange({ target: { name, value: ilkItem } });
             }
         }
     }, [select]);
-    useEffect(function () {
+    useEffect(() => {
         var _a;
         if (typeof window !== 'undefined' && (mask === null || mask === void 0 ? void 0 : mask.length) > 0 && (refInput === null || refInput === void 0 ? void 0 : refInput.current)) {
             (_a = refInput.current) === null || _a === void 0 ? void 0 : _a.setAttribute('autocomplete', 'off');
         }
         if ((mask === null || mask === void 0 ? void 0 : mask.length) > 0 && (refInput === null || refInput === void 0 ? void 0 : refInput.current)) {
-            var maskInstance_1 = applyInputMask(refInput.current, mask, __assign(__assign({}, maskSettings), { onChange: function (masked, clean, e) {
+            const maskInstance = applyInputMask(refInput.current, mask, {
+                ...maskSettings,
+                onChange: (masked, clean, e) => {
                     if (onChange) {
-                        onChange({ target: { name: name, value: masked } });
+                        onChange({ target: { name, value: masked } });
                     }
                     if (maskSettings && maskSettings.onChange) {
                         maskSettings.onChange(masked, clean, e);
                     }
-                } }));
-            maskInstance_1 === null || maskInstance_1 === void 0 ? void 0 : maskInstance_1.setValue(value ? value : null);
-            return function () { return maskInstance_1 === null || maskInstance_1 === void 0 ? void 0 : maskInstance_1.destroy(); };
+                }
+            });
+            maskInstance === null || maskInstance === void 0 ? void 0 : maskInstance.setValue(value ? value : null);
+            return () => maskInstance === null || maskInstance === void 0 ? void 0 : maskInstance.destroy();
         }
     }, [mask]);
-    var Change = useCallback(function (e) {
+    const Change = useCallback((e) => {
         if (tumuBuyuk)
             inputTumuBuyukCevir(e);
         if (tumuKucuk)
@@ -74,13 +75,13 @@ export var Input = function (_a) {
         setInputFilled(e.target.value.length > 0);
         onChange ? onChange(e) : null;
     }, [onChange, seoCevir, tumuBuyuk, tumuKucuk]);
-    var Focus = useCallback(function (e) {
+    const Focus = useCallback((e) => {
         var _a, _b;
         onFocus ? onFocus(e) : null;
         setFocus(true);
         (_b = (_a = refMain === null || refMain === void 0 ? void 0 : refMain.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(styles.error);
     }, [onFocus]);
-    var Blur = useCallback(function (e) {
+    const Blur = useCallback((e) => {
         var _a, _b, _c, _d;
         if (fileNameGiris && e.target.value !== '' && /[/\\?%*:|"'<>]/g.test(e.target.value)) {
             e.target.value = e.target.value.replace(/[/\\?%*:|"'<>]/g, '-');
@@ -95,11 +96,11 @@ export var Input = function (_a) {
             alert_add({ type: 'error', message: 'Lütfen doğru bir dosya numarası giriniz. Örn: 2022/123' });
         }
         if (dateGecmisKontrol && e.target.value !== '') {
-            var today = new Date().toISOString().slice(0, 10);
+            const today = new Date().toISOString().slice(0, 10);
             if (e.target.value < today) {
                 Dialog({
                     message: 'Geçmiş bir tarihi seçtiniz. Devam etmek istiyor musunuz?'
-                }).then(function (r) {
+                }).then((r) => {
                     if (!r) {
                         e.target.value = '';
                         if (onChange)
@@ -118,15 +119,15 @@ export var Input = function (_a) {
             }
         }
         if (value !== e.target.value) {
-            onChange && onChange({ target: { name: name, value: e.target.value } });
+            onChange && onChange({ target: { name, value: e.target.value } });
         }
         onBlur ? onBlur(e) : null;
         setFocus(false);
     }, [fileNameGiris, dosyaNoGiris, dateGecmisKontrol, required, value, onBlur, onChange, name]);
-    var Click = useCallback(function (e) { return (onClick ? onClick(e) : null); }, [onClick]);
-    var KeyPress = useCallback(function (e) {
+    const Click = useCallback((e) => (onClick ? onClick(e) : null), [onClick]);
+    const KeyPress = useCallback((e) => {
         if (sadeceYazi) {
-            var turkishLetters = /[ğüşıöçĞÜŞİÖÇ]/;
+            const turkishLetters = /[ğüşıöçĞÜŞİÖÇ]/;
             if (!(/[A-Za-z\s.]/.test(e.key) || turkishLetters.test(e.key))) {
                 e.preventDefault();
                 return;
@@ -139,19 +140,19 @@ export var Input = function (_a) {
         }
         onKeyPress ? onKeyPress(e) : null;
     }, [sadeceYazi, sadeceSayi, dosyaNoGiris, onKeyPress]);
-    var KeyUp = useCallback(function (e) { return (onKeyUp ? onKeyUp(e) : null); }, [onKeyUp]);
-    var KeyDown = useCallback(function (e) {
+    const KeyUp = useCallback((e) => (onKeyUp ? onKeyUp(e) : null), [onKeyUp]);
+    const KeyDown = useCallback((e) => {
         onKeyDown ? onKeyDown(e) : null;
     }, [onKeyDown]);
-    var ortakProps = {
+    const ortakProps = {
         ref: refInput,
-        id: id,
-        name: name,
-        value: value,
-        autoFocus: autoFocus,
-        disabled: disabled,
-        required: required,
-        placeholder: placeholder,
+        id,
+        name,
+        value,
+        autoFocus,
+        disabled,
+        required,
+        placeholder,
         onChange: Change,
         onFocus: Focus,
         onBlur: Blur,
@@ -160,22 +161,22 @@ export var Input = function (_a) {
         onKeyUp: KeyUp,
         onKeyDown: KeyDown
     };
-    var component;
+    let component;
     if (select) {
-        component = (_jsxs("select", __assign({ className: "".concat(styles.input, " ").concat(styles.select) }, ortakProps, propsInput, { children: [ilkSec === false && _jsx("option", { value: '' }), select.map(function (item) {
-                    var value = item[valueKey];
-                    var label = item[labelKey];
+        component = (_jsxs("select", { className: `${styles.input} ${styles.select}`, ...ortakProps, ...propsInput, children: [ilkSec === false && _jsx("option", { value: '' }), select.map((item) => {
+                    const value = item[valueKey];
+                    const label = item[labelKey];
                     return (_jsx("option", { value: value, children: label ? label : value }, value));
-                })] })));
+                })] }));
     }
     else if (multiline) {
-        component = _jsx("textarea", __assign({ className: "".concat(styles.input, " ").concat(styles.textarea), rows: rows }, ortakProps, propsInput));
+        component = _jsx("textarea", { className: `${styles.input} ${styles.textarea}`, rows: rows, ...ortakProps, ...propsInput });
     }
     else {
-        component = _jsx("input", __assign({ className: "".concat(styles.input), type: type }, ortakProps, propsInput));
+        component = _jsx("input", { className: `${styles.input}`, type: type, ...ortakProps, ...propsInput });
     }
-    var classList = function () {
-        var list = ['sInputComponent', styles.component];
+    const classList = () => {
+        const list = ['sInputComponent', styles.component];
         if (className)
             list.push(className);
         if (label) {
@@ -184,13 +185,13 @@ export var Input = function (_a) {
         // if (props.required && (value.length === 0 || !value)) list.push("error");
         return list.join(' ');
     };
-    useEffect(function () {
+    useEffect(() => {
         if (propsComponent && propsComponent.hasOwnProperty('style')) {
-            var background = propsComponent.style.background ? propsComponent.style.background : propsComponent.style.backgroundColor ? propsComponent.style.backgroundColor : null;
+            const background = propsComponent.style.background ? propsComponent.style.background : propsComponent.style.backgroundColor ? propsComponent.style.backgroundColor : null;
             if (background && refLabel.current) {
                 refLabel.current.style.setProperty('--label-bg', background);
             }
         }
     }, [propsComponent]);
-    return (_jsxs("div", __assign({ ref: refMain, className: classList(), "data-disabled": disabled }, propsComponent, { children: [startAdornment && _jsx("div", { className: "adornment_start ".concat(styles.adornment, " ").concat(styles.start), children: startAdornment }), _jsxs("div", { className: "".concat(styles.inputBase, " ").concat(inputFilled || focus || type == 'date' ? styles.open : ''), children: [component, label && (_jsxs("div", { ref: refLabel, className: "label ".concat(styles.label), children: [label, required && _jsx("span", { className: styles.required, children: "*" })] }))] }), (endAdornment || loading) && (_jsxs("div", { className: "adornment_end ".concat(styles.adornment, " ").concat(styles.end), children: [endAdornment, loading && _jsx("div", { className: styles.loading })] }))] })));
+    return (_jsxs("div", { ref: refMain, className: classList(), "data-disabled": disabled, ...propsComponent, children: [startAdornment && _jsx("div", { className: `adornment_start ${styles.adornment} ${styles.start}`, children: startAdornment }), _jsxs("div", { className: `${styles.inputBase} ${inputFilled || focus || type == 'date' ? styles.open : ''}`, children: [component, label && (_jsxs("div", { ref: refLabel, className: `label ${styles.label}`, children: [label, required && _jsx("span", { className: styles.required, children: "*" })] }))] }), (endAdornment || loading) && (_jsxs("div", { className: `adornment_end ${styles.adornment} ${styles.end}`, children: [endAdornment, loading && _jsx("div", { className: styles.loading })] }))] }));
 };

package/_dist/form/Label.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Tooltip } from '../tooltip';
+import styles from './styles/Label.module.css';
+export const Label = memo(function FMemo({ required = false, children, ...other }) {
+    return (_jsxs("label", { className: styles.label, ...other, children: [children, _jsx(Tooltip, { title: 'Zorunlu Alan', children: _jsx("span", { className: styles.required, children: required && '*' }) })] }));
+});

package/{dist/esm → _dist}/form/SearchableInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PropsInput } from './index';
 type typeList = {
     value?: string;

package/_dist/form/SearchableInput.js

@@ -0,0 +1,260 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input } from './index';
+import { convertForSearch, convertLowerCase } from '../_lib/baseFunctions';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { onKeyboardSelection, setScrollListPosition } from '../_lib/listFunctions';
+import { Icon } from '../icon';
+import styles from './styles/SearchableInput.module.css';
+export const SearchableInput = forwardRef(({ autoCompleteList = [], isDataFromApi, name, value, parentInputValue, disabled, itemComponent, valueKey = 'value', labelKey = 'label', onSelect, onChange, onText, onLoad, style, listPositionRelative = false, loadingMessage = 'Lütfen bekleyiniz...', notFoundMessage = 'Kayıt bulunamadı...', placeholder, endAdornment, ilkSec = false, newCreate = false, inputRef, ...other }, ref) => {
+    const refMain = useRef(null);
+    const refInput = useRef(null);
+    const refList = useRef(null);
+    const [data, setData] = useState(autoCompleteList !== null && autoCompleteList !== void 0 ? autoCompleteList : []);
+    const [selectedValue, setSelectedValue] = useState(value !== null && value !== void 0 ? value : undefined);
+    const [parentValue, setParentValue] = useState(parentInputValue !== null && parentInputValue !== void 0 ? parentInputValue : undefined);
+    const [text, setText] = useState(''); //Inputta görünen
+    const [filter, setFilter] = useState(''); // Filtrelemeye tabi tutulan
+    const [newItemCreate, setNewItemCreate] = useState({ created: false });
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(isDataFromApi && (!autoCompleteList || (autoCompleteList === null || autoCompleteList === void 0 ? void 0 : autoCompleteList.length) == 0));
+    useImperativeHandle(ref, () => ({
+        setAutoCompleteList: (list, value = undefined, callback) => {
+            if (autoCompleteList && (autoCompleteList === null || autoCompleteList === void 0 ? void 0 : autoCompleteList.length) > 0) {
+                alert('AutoCompleteList zaten tanımlı olduğundan dışardan data seti değiştirilemez.');
+                return;
+            }
+            setData(list);
+            value && sendChange(value);
+            setLoading(false);
+            if (!Array.isArray(list) || list.length == 0) {
+                clear(false);
+            }
+            callback && callback();
+            //   isDev && console.log("setAutoCompleteList =>", name, value, list);
+        },
+        clear: (openList = false, focusInput = false) => clear(openList, focusInput),
+        open: () => {
+            setOpen(true);
+            refInput.current && refInput.current.focus();
+        },
+        close: () => setOpen(false),
+        checkByValue: (value, openList = false) => checkByValue(value, openList),
+        setLoading: (value) => setLoading(value)
+    }), [autoCompleteList, data, value]);
+    useEffect(() => {
+        if (inputRef)
+            inputRef.current = refInput.current;
+    }, [refInput.current]);
+    useEffect(() => onLoad && onLoad(value), []);
+    useEffect(() => {
+        if (autoCompleteList && Array.isArray(autoCompleteList)) {
+            if (autoCompleteList.length > 0) {
+                // Sadece gerçekten farklıysa set et
+                if (JSON.stringify(autoCompleteList) !== JSON.stringify(data)) {
+                    setData(autoCompleteList);
+                    // isDev && console.log("autoCompleteList dolu =>", name, autoCompleteList);
+                }
+            }
+            else {
+                // Boş array geldi VE data zaten boş değilse
+                if (data.length > 0) {
+                    setData([]);
+                    // isDev && console.log("autoCompleteList boşaltıldı =>", name);
+                }
+            }
+        }
+    }, [autoCompleteList]);
+    useEffect(() => {
+        // isDev && console.log('data =>', name, data, 'selectedValue =>', selectedValue, 'value =>', value);
+        if (!Array.isArray(data)) {
+            setData([]);
+        }
+        if (data.length > 0) {
+            setLoading(false);
+            checkByValue(selectedValue, open);
+            if (!value && ilkSec) {
+                checkByValue(data[0][valueKey], false);
+            }
+        }
+        else {
+            !isDataFromApi && clear(false);
+        }
+    }, [data]);
+    // Seçim değişikliğinde parent'ı bilgilendir
+    useEffect(() => {
+        // isDev && console.log('selectedValue =>', name, selectedValue, 'value =>', value);
+        if ((value === null || value === void 0 ? void 0 : value.toString()) != (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.toString())) {
+            checkByValue(value, open);
+            // isDev && console.log('value Kontrol ediliyor', value, selectedValue);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (parentInputValue !== parentValue) {
+            setParentValue(parentInputValue);
+            clear(false);
+            // isDev && console.log(name, "parentInputValueDeğişti =>", parentInputValue);
+        }
+    }, [parentInputValue]);
+    useEffect(() => {
+        const checkHideBackDrop = (e) => {
+            if (open && refMain.current && !refMain.current.contains(e.target)) {
+                checkByInput();
+            }
+        };
+        const checkESC = (e) => {
+            if (e.keyCode === 27 || e.key === 'Escape' || e.code === 'Escape')
+                checkByInput();
+        };
+        window.addEventListener('mousedown', checkHideBackDrop);
+        if (refMain.current)
+            refMain.current.addEventListener('keydown', checkESC);
+        if (open) {
+            setScrollListPosition(refList);
+            if (!listPositionRelative) {
+                window.addEventListener('scroll', handleUpdatePosition, true);
+                window.addEventListener('resize', handleUpdatePosition);
+            }
+        }
+        return () => {
+            window.removeEventListener('mousedown', checkHideBackDrop);
+            if (refMain.current)
+                refMain.current.removeEventListener('keydown', checkESC);
+            window.removeEventListener('scroll', handleUpdatePosition, true);
+            window.removeEventListener('resize', handleUpdatePosition);
+        };
+    }, [open]);
+    useLayoutEffect(() => handleUpdatePosition(), [open]);
+    const setValue = useCallback((item, openList) => {
+        var _a, _b;
+        const newValue = (_a = item === null || item === void 0 ? void 0 : item[valueKey]) !== null && _a !== void 0 ? _a : '';
+        const newLabel = (_b = item === null || item === void 0 ? void 0 : item[labelKey]) !== null && _b !== void 0 ? _b : '';
+        setOpen(openList);
+        setText(newLabel);
+        // isDev && console.log(name, "setValue", newValue, "item", item, "value", value);
+        if (newValue === selectedValue)
+            return;
+        setFilter('');
+        setSelectedValue(newValue);
+        onChange && sendChange(newValue);
+        onSelect && onSelect(item);
+    }, [onChange, onSelect, name, selectedValue, valueKey, labelKey]);
+    const textInputOnChange = useCallback((e) => {
+        setSelectedValue(undefined);
+        setText(e.target.value);
+        setFilter(e.target.value.trim());
+        setOpen(true);
+        onText && onText(e.target.value);
+    }, [setValue, onText]);
+    const checkByValue = useCallback((value, openList = false, list = []) => {
+        const targetList = list.length > 0 ? list : data;
+        let find = Object.values(targetList).find((item) => convertLowerCase(item[valueKey]) === convertLowerCase(value));
+        if (!find && newCreate && newItemCreate.create) {
+            find = newItemCreate;
+        }
+        // isDev && console.log('find', find, 'value', value, data);
+        setValue(find, openList);
+    }, [data, valueKey, newCreate, newItemCreate, setValue]);
+    const checkByInput = useCallback(() => {
+        const findByLabel = data.find((item) => { var _a; return convertLowerCase(item[labelKey]) === convertLowerCase((_a = refInput.current) === null || _a === void 0 ? void 0 : _a.value); });
+        if (findByLabel && value == findByLabel[valueKey]) {
+            setOpen(false);
+            return;
+        }
+        setValue(findByLabel, false);
+        if (!findByLabel)
+            setText('');
+        if (isDataFromApi && !findByLabel && data.length === 0) {
+            if (onText)
+                onText('');
+        }
+    }, [data, labelKey, value, valueKey, isDataFromApi, onText, setValue, refInput.current]);
+    const clear = useCallback((openList = true, focusInput = false) => {
+        var _a;
+        setFilter('');
+        setText('');
+        setValue(undefined, openList);
+        onText && onText('');
+        focusInput && ((_a = refInput === null || refInput === void 0 ? void 0 : refInput.current) === null || _a === void 0 ? void 0 : _a.focus());
+    }, [setValue, onText]);
+    const sendChange = useCallback((value) => {
+        // isDev && console.log(name, "sendChange", value, "selectedValue", selectedValue);
+        if (onChange && value !== selectedValue) {
+            onChange({ target: { name, value } });
+        }
+    }, [onChange, name]);
+    const filteredData = useMemo(() => {
+        let list;
+        if (filter.length > 0) {
+            list = data.filter((item) => convertForSearch(item[labelKey]).includes(convertForSearch(filter)) || item[labelKey] == filter);
+        }
+        else {
+            list = data;
+        }
+        if (newCreate && text.length > 0) {
+            const filterText = data.find((item) => item[labelKey].toString().toLowerCase() === text.toString().toLowerCase());
+            if (!filterText) {
+                const newItem = { [labelKey]: text, [valueKey]: text, create: true };
+                list = [newItem, ...list];
+                setNewItemCreate(newItem);
+            }
+            else {
+                if (newItemCreate.create)
+                    setNewItemCreate({ create: false });
+            }
+        }
+        return list;
+    }, [data, filter, newCreate, text, valueKey, labelKey]);
+    const handleUpdatePosition = () => {
+        if (open && !listPositionRelative && refMain) {
+            setFixedPosition(refMain);
+        }
+    };
+    const onKeyDown = (e) => {
+        if (!open || !refList.current)
+            return null;
+        onKeyboardSelection({
+            e,
+            targetElement: refList,
+            checkByInput,
+            checkByValue,
+            clear,
+            itemClass: 'li.item',
+            selectedClass: 'selected'
+        });
+    };
+    return (_jsxs("div", { ref: refMain, className: styles.searchableInputComponent, onKeyDown: onKeyDown, style: style, children: [_jsx(Input, { ...other, inputRef: refInput, name: name, value: text, onFocus: () => !disabled && setOpen(true), onChange: textInputOnChange, endAdornment: !disabled && (_jsxs("div", { style: { marginRight: 5 }, tabIndex: -1, children: [_jsx(Button, { title: 'Temizle', tabIndex: -1, hidden: !(text && text.length > 0), onClick: () => clear(true, true), onlyIcon: _jsx(Icon, { name: 'close', style: { color: '#444' } }) }), endAdornment, _jsx(Button, { tabIndex: -1, hidden: !data || !(data.length > 0), onClick: () => !disabled && setOpen(!open), onlyIcon: _jsx(Icon, { name: open ? 'keyboard_arrow_up' : 'keyboard_arrow_down', style: { color: '#444' } }) })] })), placeholder: loading ? 'Lütfen bekleyiniz...' : placeholder, loading: loading, disabled: disabled, propsInput: {
+                    ...other === null || other === void 0 ? void 0 : other.propsInput,
+                    autoComplete: 'off'
+                } }), open && (_jsx("div", { className: 'listDiv', "data-relative": listPositionRelative, children: _jsxs("ul", { ref: refList, className: `list ${open ? 'open' : ''}`, children: [(filteredData.length === 0 || loading) && _jsx("div", { className: `message ${loading ? 'loading' : ''}`, children: loading ? loadingMessage : notFoundMessage }), filteredData.map((item, key) => {
+                            const itemValue = item[valueKey];
+                            const itemLabel = item[labelKey];
+                            return (_jsxs("li", { className: `item ${itemValue === selectedValue ? 'active' : ''}`, "data-value": itemValue, "data-label": itemLabel, onClick: () => setValue(item, false), children: [item.create && _jsx("span", { className: 'newCreate', children: "Yeni Olu\u015Ftur: " }), itemComponent ? itemComponent(item) : itemLabel] }, key));
+                        })] }) }))] }));
+});
+const setFixedPosition = (refMain) => {
+    if (!refMain.current)
+        return;
+    const target = refMain.current;
+    const targetPosition = target.getBoundingClientRect();
+    const listDiv = target.querySelector('.listDiv');
+    if (listDiv) {
+        const listDivUL = target.querySelector('ul');
+        if (!listDiv)
+            return;
+        const listHeight = listDivUL.getBoundingClientRect().height;
+        const style = [];
+        style.push(`position:fixed`);
+        style.push(`z-index:111111111111 !important`);
+        style.push(`width:${targetPosition.width}px`);
+        const spaceBelow = window.innerHeight - (targetPosition.top + targetPosition.height);
+        const spaceAbove = targetPosition.top;
+        if (spaceBelow < listHeight && spaceAbove > listHeight) {
+            style.push(`top:${targetPosition.top - listHeight}px`);
+            style.push(`margin-top:-1px`);
+        }
+        else {
+            style.push(`top:${targetPosition.top + targetPosition.height}px`);
+        }
+        listDiv.setAttribute('style', style.join(';'));
+    }
+};

package/_dist/form/UploadBase.js

@@ -0,0 +1,84 @@
+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";
+const upload_ext_ok = ["pdf", "doc", "docx", "xls", "xlsx", "jpg", "jpeg", "png", "bmp", "tiff", "tif", "udf", "txt", "rtf", "csv", "xml", "zip", "rar"];
+const upload_maxsize = 30;
+const upload_maxfile = 50;
+export const UploadBase = ({ component = "div", children, targetForm, onChange, name = "file__", required = true, multiple = false, maxSize = upload_maxsize, maxFile = upload_maxfile, ext_ok = upload_ext_ok, style, className, refUploadInput = null, label }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (refUploadInput)
+            refUploadInput.current = ref.current;
+    }, [ref.current]);
+    const fileSelected = (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;
+        }
+        const fileList = [];
+        Object.values(e.target.files).map((file) => {
+            const size = file.size;
+            const 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) {
+            const nameList = [];
+            let newform = {};
+            let uniqueID = new Date().getTime();
+            fileList.map((file) => {
+                uniqueID = uniqueID + 1;
+                newform = { ...newform, [name + uniqueID]: file };
+                nameList.push(file.name);
+            });
+            targetForm((prev) => ({
+                ...prev,
+                uploadBaseList: { ...newform },
+                uploadBaseListName: nameList.join(", ")
+            }));
+        }
+    };
+    const defaultStyle = {
+        position: "relative",
+        cursor: "pointer"
+    };
+    const Component = component.toLowerCase();
+    return (_jsxs(Component, { className: className, style: { ...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((i) => "." + i).join(","), style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    opacity: 0,
+                    width: "100%",
+                    height: "100%",
+                    cursor: "pointer",
+                    zIndex: 1
+                } })] }));
+};
+export const uploadBase_CreateForm = (formData) => {
+    var _a;
+    let newform = { ...formData };
+    const list = (_a = formData["uploadBaseList"]) !== null && _a !== void 0 ? _a : {};
+    Object.keys(list).map((fileKey) => (newform = { ...newform, [fileKey]: list[fileKey] }));
+    delete newform["uploadBaseList"];
+    delete newform["uploadBaseListName"];
+    return newform;
+};