@sydsoft/base 1.47.0 → 1.49.0

package/form/Input.tsx

@@ -0,0 +1,364 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-01-21 21:35:48
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { convertForSEO, inputTumuBuyukCevir, inputTumuKucukCevir } from '../_lib/baseFunctions';
+
+import { applyInputMask } from '../_lib/inputMask';
+import { alert_add } from '../alert';
+import { Dialog } from './Dialog';
+import styles from './styles/Input.module.css';
+
+type maskSettingsTranslation = {
+    [key: string]: {
+        pattern: any;
+        transform?: (value: string) => string;
+        optional?: boolean;
+        recursive?: boolean;
+    };
+};
+
+type maskSettings = {
+    clearIfNotMatch?: boolean;
+    reverse?: boolean;
+    translation?: maskSettingsTranslation;
+    selectOnFocus?: boolean;
+    onChange?: (maskedValue: string, cleanValue: string, targetInput: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export interface PropsInput {
+    componentRef?: any;
+    inputRef?: any;
+    className?: string;
+    id?: string;
+    name?: string;
+    value?: any;
+    label?: string;
+    loading?: boolean;
+    autoFocus?: boolean | undefined;
+    disabled?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    type?: 'text' | 'number' | 'email' | 'color' | 'date' | 'time' | 'datetime-local' | 'hidden' | 'file' | 'password' | 'tel' | 'search';
+
+    // - Select
+    select?: any[];
+    ilkSec?: boolean;
+    valueKey?: string;
+    labelKey?: string;
+
+    // - Textarea
+    multiline?: boolean;
+    rows?: number | undefined;
+
+    //--Fonk Props
+    onChange?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onClick?: (e: any) => void;
+    onKeyPress?: (e: any) => void;
+    onKeyUp?: (e: any) => void;
+    onKeyDown?: (e: any) => void;
+
+    //--Ozel Props
+    propsComponent?: object | any;
+    propsInput?: object;
+    startAdornment?: any;
+    endAdornment?: any;
+
+    //--Ozel Fonksiyonlar
+    sadeceYazi?: boolean;
+    sadeceSayi?: boolean;
+    tumuBuyuk?: boolean;
+    tumuKucuk?: boolean;
+    seoCevir?: boolean;
+    dosyaNoGiris?: boolean;
+    fileNameGiris?: boolean;
+    dateGecmisKontrol?: boolean;
+    autoSelectText?: boolean;
+
+    //--Mask
+    mask?: string;
+    maskSettings?: maskSettings;
+}
+
+export const Input: React.FC<PropsInput> = ({
+    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<any>(null);
+    const refInput = useRef<any>(null);
+    const refLabel = useRef<any>(null);
+
+    const [inputFilled, setInputFilled] = useState<boolean>(value && value.toString().length > 0);
+    const [focus, setFocus] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (inputRef) inputRef.current = refInput.current;
+        if (componentRef) componentRef.current = refMain.current;
+    }, [componentRef, inputRef]);
+
+    useEffect(() => {
+        autoSelectText && !select && refInput?.current && refInput.current.select();
+    }, [autoSelectText, select]);
+
+    useEffect(() => {
+        const filled = String(value) && value.toString().length > 0 ? true : false;
+        setInputFilled(filled);
+        filled && refMain?.current?.classList?.remove(styles.error);
+    }, [value]);
+
+    useEffect(() => {
+        // if (type === "number") sadeceSayi = true; //TODO: sadeceSayi burada değiştirelemez ki!!!
+        if (select && ilkSec && (value === '' || value === null || value === undefined)) {
+            if (select.length) {
+                const ilkItem = select[0][valueKey] ? select[0][valueKey] : '';
+                onChange && onChange({ target: { name, value: ilkItem } });
+            }
+        }
+    }, [select]);
+
+    useEffect(() => {
+        if (typeof window !== 'undefined' && mask?.length > 0 && refInput?.current) {
+            refInput.current?.setAttribute('autocomplete', 'off');
+        }
+        if (mask?.length > 0 && refInput?.current) {
+            const maskInstance = applyInputMask(refInput.current, mask, {
+                ...maskSettings,
+                onChange: (masked: string, clean: string, e: any) => {
+                    if (onChange) {
+                        onChange({ target: { name, value: masked } });
+                    }
+                    if (maskSettings && maskSettings.onChange) {
+                        maskSettings.onChange(masked, clean, e);
+                    }
+                }
+            });
+            maskInstance?.setValue(value ? value : null);
+            return () => maskInstance?.destroy();
+        }
+    }, [mask]);
+
+    const Change = useCallback(
+        (e: any) => {
+            if (tumuBuyuk) inputTumuBuyukCevir(e);
+            if (tumuKucuk) inputTumuKucukCevir(e);
+            if (seoCevir) convertForSEO(e);
+            setInputFilled(e.target.value.length > 0);
+            onChange ? onChange(e) : null;
+        },
+        [onChange, seoCevir, tumuBuyuk, tumuKucuk]
+    );
+
+    const Focus = useCallback(
+        (e: any) => {
+            onFocus ? onFocus(e) : null;
+            setFocus(true);
+            refMain?.current?.classList?.remove(styles.error);
+        },
+        [onFocus]
+    );
+
+    const Blur = useCallback(
+        (e: any) => {
+            if (fileNameGiris && e.target.value !== '' && /[/\\?%*:|"'<>]/g.test(e.target.value)) {
+                e.target.value = e.target.value.replace(/[/\\?%*:|"'<>]/g, '-');
+                if (onChange) onChange(e);
+                alert_add({ type: 'warning', message: 'Lütfen dosya adındaki özel karakter değiştirildi.' });
+            }
+            if (dosyaNoGiris && e.target.value !== '' && !/^[1-2]\d{3}\/\d/.test(e.target.value)) {
+                e.target.value = '';
+                if (onChange) onChange(e);
+                alert_add({ type: 'error', message: 'Lütfen doğru bir dosya numarası giriniz. Örn: 2022/123' });
+            }
+
+            if (dateGecmisKontrol && e.target.value !== '') {
+                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((r) => {
+                        if (!r) {
+                            e.target.value = '';
+                            if (onChange) onChange(e);
+                            e.target.focus();
+                        }
+                    });
+                }
+            }
+
+            if (required) {
+                if (e.target.value === '') {
+                    refMain?.current?.classList?.add(styles.error);
+                } else {
+                    refMain?.current?.classList?.remove(styles.error);
+                }
+            }
+
+            if (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]
+    );
+
+    const Click = useCallback((e: any) => (onClick ? onClick(e) : null), [onClick]);
+
+    const KeyPress = useCallback(
+        (e: any) => {
+            if (sadeceYazi) {
+                const turkishLetters = /[ğüşıöçĞÜŞİÖÇ]/;
+                if (!(/[A-Za-z\s.]/.test(e.key) || turkishLetters.test(e.key))) {
+                    e.preventDefault();
+                    return;
+                }
+            }
+            if ((sadeceSayi || dosyaNoGiris) && (e.which < 48 || e.which > 57)) e.preventDefault();
+            if (dosyaNoGiris && e.which !== 8 && e.target.value.length === 4 && e.target.value.search('/') === -1) {
+                e.target.value = e.target.value + '/';
+            }
+            onKeyPress ? onKeyPress(e) : null;
+        },
+        [sadeceYazi, sadeceSayi, dosyaNoGiris, onKeyPress]
+    );
+
+    const KeyUp = useCallback((e: any) => (onKeyUp ? onKeyUp(e) : null), [onKeyUp]);
+
+    const KeyDown = useCallback(
+        (e: any) => {
+            onKeyDown ? onKeyDown(e) : null;
+        },
+        [onKeyDown]
+    );
+
+    const ortakProps = {
+        ref: refInput,
+        id,
+        name,
+        value,
+        autoFocus,
+        disabled,
+        required,
+        placeholder,
+        onChange: Change,
+        onFocus: Focus,
+        onBlur: Blur,
+        onClick: Click,
+        onKeyPress: KeyPress,
+        onKeyUp: KeyUp,
+        onKeyDown: KeyDown
+    };
+
+    let component;
+    if (select) {
+        component = (
+            <select className={`${styles.input} ${styles.select}`} {...ortakProps} {...propsInput}>
+                {ilkSec === false && <option value={''} />}
+                {select.map((item: any) => {
+                    const value = item[valueKey];
+                    const label = item[labelKey];
+                    return (
+                        <option key={value} value={value}>
+                            {label ? label : value}
+                        </option>
+                    );
+                })}
+            </select>
+        );
+    } else if (multiline) {
+        component = <textarea className={`${styles.input} ${styles.textarea}`} rows={rows} {...ortakProps} {...propsInput} />;
+    } else {
+        component = <input className={`${styles.input}`} type={type} {...ortakProps} {...propsInput} />;
+    }
+
+    const classList = () => {
+        const list = ['sInputComponent', styles.component];
+        if (className) list.push(className);
+        if (label) {
+            list.push(styles.hidePlaceHolder);
+        }
+        // if (props.required && (value.length === 0 || !value)) list.push("error");
+        return list.join(' ');
+    };
+
+    useEffect(() => {
+        if (propsComponent && propsComponent.hasOwnProperty('style')) {
+            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 (
+        <div ref={refMain} className={classList()} data-disabled={disabled} {...propsComponent}>
+            {startAdornment && <div className={`adornment_start ${styles.adornment} ${styles.start}`}>{startAdornment}</div>}
+
+            <div className={`${styles.inputBase} ${inputFilled || focus || type == 'date' ? styles.open : ''}`}>
+                {component}
+                {label && (
+                    <div ref={refLabel} className={`label ${styles.label}`}>
+                        {label}
+                        {required && <span className={styles.required}>*</span>}
+                    </div>
+                )}
+            </div>
+
+            {(endAdornment || loading) && (
+                <div className={`adornment_end ${styles.adornment} ${styles.end}`}>
+                    {endAdornment}
+                    {loading && <div className={styles.loading} />}
+                </div>
+            )}
+        </div>
+    );
+};

package/form/Label.tsx

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+
+import { Tooltip } from '../tooltip';
+import styles from './styles/Label.module.css';
+
+interface Props {
+    children: React.ReactNode;
+    required?: boolean;
+}
+
+export const Label: React.FC<Props> = memo(function FMemo({ required = false, children, ...other }) {
+    return (
+        <label className={styles.label} {...other}>
+            {children}
+            <Tooltip title={'Zorunlu Alan'}>
+                <span className={styles.required}>{required && '*'}</span>
+            </Tooltip>
+        </label>
+    );
+});