@sydsoft/base 1.47.0 → 1.49.0

package/form/SearchableInput.tsx

@@ -0,0 +1,406 @@
+import { Button, Input, PropsInput } 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';
+
+type typeList = {
+    value?: string;
+    label?: string;
+    [key: string]: any;
+};
+
+type typeValue = string | number | undefined;
+
+interface Props extends PropsInput {
+    autoCompleteList?: typeList[];
+    isDataFromApi: boolean;
+    value: typeValue;
+    valueKey?: string;
+    labelKey?: string;
+    itemComponent?: (option: typeList) => React.ReactNode;
+    parentInputValue?: typeValue; // Eğer bu input bir başka inputa bağlı ise, o inputun value'sunu gönderin. (örneğin; şehir - ilçe)
+    onChange?: (e: any) => void;
+    onText?: (text: string) => void; // Text değiştiğinde tetiklenir.
+    onSelect?: (item: any) => void; // Bir item seçildiğinde tetiklenir.
+    onLoad?: (value: typeValue) => void; // Component hazır olduğunda tetiklenir.
+    ilkSec?: boolean;
+    newCreate?: boolean; // Yeni bir item oluşturulabilir.
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    listPositionRelative?: boolean; // Liste pozisyonu relative olacaksa true gönderin. (Varsayılan absolute)
+    loadingMessage?: string;
+    notFoundMessage?: string;
+}
+
+export interface SearchableInputRef {
+    setAutoCompleteList: (list: typeList[], value?: typeValue, callback?: () => void) => void;
+    clear: (openList?: boolean, focusInput?: boolean) => void;
+    open: () => void;
+    close: () => void;
+    checkByValue: (value: typeValue, openList?: boolean) => void;
+    setLoading: (loading: boolean) => void;
+}
+
+export const SearchableInput = forwardRef<SearchableInputRef, Props>(
+    (
+        {
+            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<HTMLDivElement>(null);
+        const refInput = useRef<HTMLInputElement>(null);
+        const refList = useRef<HTMLUListElement>(null);
+
+        const [data, setData] = useState<typeList[]>(autoCompleteList ?? []);
+        const [selectedValue, setSelectedValue] = useState<typeValue>(value ?? undefined);
+        const [parentValue, setParentValue] = useState<typeValue>(parentInputValue ?? undefined);
+        const [text, setText] = useState<string>(''); //Inputta görünen
+        const [filter, setFilter] = useState<string>(''); // Filtrelemeye tabi tutulan
+        const [newItemCreate, setNewItemCreate] = useState<typeList>({ created: false });
+        const [open, setOpen] = useState<boolean>(false);
+        const [loading, setLoading] = useState<boolean>(isDataFromApi && (!autoCompleteList || autoCompleteList?.length == 0));
+
+        useImperativeHandle(
+            ref,
+            () => ({
+                setAutoCompleteList: (list: typeList[], value: typeValue = undefined, callback?: () => void) => {
+                    if (autoCompleteList && 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: boolean = false, focusInput: boolean = false) => clear(openList, focusInput),
+                open: () => {
+                    setOpen(true);
+                    refInput.current && refInput.current.focus();
+                },
+                close: () => setOpen(false),
+                checkByValue: (value: typeValue, openList: boolean = 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?.toString() != 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: any) => {
+                if (open && refMain.current && !refMain.current.contains(e.target)) {
+                    checkByInput();
+                }
+            };
+            const checkESC = (e: any) => {
+                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: typeList | undefined, openList: boolean) => {
+                const newValue = item?.[valueKey] ?? '';
+                const newLabel = item?.[labelKey] ?? '';
+                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: any) => {
+                setSelectedValue(undefined);
+                setText(e.target.value);
+                setFilter(e.target.value.trim());
+                setOpen(true);
+                onText && onText(e.target.value);
+            },
+            [setValue, onText]
+        );
+
+        const checkByValue = useCallback(
+            (value: typeValue, openList: boolean = false, list: typeList[] = []) => {
+                const targetList = list.length > 0 ? list : data;
+                let find = Object.values(targetList).find((item: any) => 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: any = data.find((item: any) => convertLowerCase(item[labelKey]) === convertLowerCase(refInput.current?.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: boolean = true, focusInput: boolean = false) => {
+                setFilter('');
+                setText('');
+                setValue(undefined, openList);
+                onText && onText('');
+                focusInput && refInput?.current?.focus();
+            },
+            [setValue, onText]
+        );
+        const sendChange = useCallback(
+            (value: typeValue) => {
+                // isDev && console.log(name, "sendChange", value, "selectedValue", selectedValue);
+                if (onChange && value !== selectedValue) {
+                    onChange({ target: { name, value } });
+                }
+            },
+            [onChange, name]
+        );
+
+        const filteredData = useMemo(() => {
+            let list: any[];
+            if (filter.length > 0) {
+                list = data.filter((item: any) => convertForSearch(item[labelKey]).includes(convertForSearch(filter)) || item[labelKey] == filter);
+            } else {
+                list = data;
+            }
+
+            if (newCreate && text.length > 0) {
+                const filterText = data.find((item: any) => 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: any) => {
+            if (!open || !refList.current) return null;
+            onKeyboardSelection({
+                e,
+                targetElement: refList,
+                checkByInput,
+                checkByValue,
+                clear,
+                itemClass: 'li.item',
+                selectedClass: 'selected'
+            });
+        };
+
+        return (
+            <div ref={refMain} className={styles.searchableInputComponent} onKeyDown={onKeyDown} style={style}>
+                <Input
+                    {...other}
+                    inputRef={refInput}
+                    name={name}
+                    value={text}
+                    onFocus={() => !disabled && setOpen(true)}
+                    onChange={textInputOnChange}
+                    endAdornment={
+                        !disabled && (
+                            <div style={{ marginRight: 5 }} tabIndex={-1}>
+                                <Button
+                                    title={'Temizle'}
+                                    tabIndex={-1}
+                                    hidden={!(text && text.length > 0)}
+                                    onClick={() => clear(true, true)}
+                                    onlyIcon={<Icon name={'close'} style={{ color: '#444' }} />}
+                                />
+                                {endAdornment}
+                                <Button
+                                    tabIndex={-1}
+                                    hidden={!data || !(data.length > 0)}
+                                    onClick={() => !disabled && setOpen(!open)}
+                                    onlyIcon={<Icon name={open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} style={{ color: '#444' }} />}
+                                />
+                            </div>
+                        )
+                    }
+                    placeholder={loading ? 'Lütfen bekleyiniz...' : placeholder}
+                    loading={loading}
+                    disabled={disabled}
+                    propsInput={{
+                        ...other?.propsInput,
+                        autoComplete: 'off'
+                    }}
+                />
+                {open && (
+                    <div className={'listDiv'} data-relative={listPositionRelative}>
+                        <ul ref={refList} className={`list ${open ? 'open' : ''}`}>
+                            {(filteredData.length === 0 || loading) && <div className={`message ${loading ? 'loading' : ''}`}>{loading ? loadingMessage : notFoundMessage}</div>}
+                            {filteredData.map((item: any, key: number) => {
+                                const itemValue = item[valueKey];
+                                const itemLabel = item[labelKey];
+                                return (
+                                    <li key={key} className={`item ${itemValue === selectedValue ? 'active' : ''}`} data-value={itemValue} data-label={itemLabel} onClick={() => setValue(item, false)}>
+                                        {item.create && <span className={'newCreate'}>Yeni Oluştur: </span>}
+                                        {itemComponent ? itemComponent(item) : itemLabel}
+                                    </li>
+                                );
+                            })}
+                        </ul>
+                    </div>
+                )}
+            </div>
+        );
+    }
+);
+
+const setFixedPosition = (refMain: any) => {
+    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/form/UploadBase.tsx

@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) 2024
+ *  @author: izzetseydaoglu
+ *  @last-modified: 11.06.2024 02:39
+ */
+
+import React, { useEffect, useRef } from "react";
+
+import { alert_add } from "../alert";
+
+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;
+}
+
+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
+}: Props) => {
+    const ref = useRef<HTMLInputElement | null>(null);
+    useEffect(() => {
+        if (refUploadInput) refUploadInput.current = ref.current;
+    }, [ref.current]);
+
+    const fileSelected = (e: any) => {
+        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: any = [];
+        Object.values(e.target.files).map((file: any) => {
+            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: string[] = [];
+            let newform = {};
+            let uniqueID = new Date().getTime();
+            fileList.map((file: any) => {
+                uniqueID = uniqueID + 1;
+                newform = { ...newform, [name + uniqueID]: file };
+                nameList.push(file.name);
+            });
+            targetForm((prev: any) => ({
+                ...prev,
+                uploadBaseList: { ...newform },
+                uploadBaseListName: nameList.join(", ")
+            }));
+        }
+    };
+
+    const defaultStyle = {
+        position: "relative",
+        cursor: "pointer"
+    };
+    const Component = component.toLowerCase();
+    return (
+        <Component className={className} style={{ ...defaultStyle, ...style }} data-label={label ?? ""}>
+            {children}
+            <input
+                ref={ref}
+                type={"file"}
+                required={required}
+                onChange={fileSelected}
+                multiple={multiple}
+                accept={ext_ok.map((i: any) => "." + i).join(",")}
+                style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    opacity: 0,
+                    width: "100%",
+                    height: "100%",
+                    cursor: "pointer",
+                    zIndex: 1
+                }}
+            />
+        </Component>
+    );
+};
+
+export const uploadBase_CreateForm = (formData: any) => {
+    let newform = { ...formData };
+    const list = formData["uploadBaseList"] ?? {};
+    Object.keys(list).map((fileKey: any) => (newform = { ...newform, [fileKey]: list[fileKey] }));
+    delete newform["uploadBaseList"];
+    delete newform["uploadBaseListName"];
+    return newform;
+};

package/form/index.ts

@@ -0,0 +1,10 @@
+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/form/styles/Button.module.css

@@ -0,0 +1,145 @@
+.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;
+    font-weight: 500;
+    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.875rem;
+    padding: 4px 10px;
+    min-width: 64px;
+    height: 32px;
+}
+
+.button[data-button-size="medium"] {
+    font-size: 1rem;
+    padding: 6px 12px;
+    min-width: 72px;
+    height: 36px;
+}
+
+.button[data-button-size="large"] {
+    font-size: 1.2rem;
+    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;
+    }
+}