@sydsoft/base 1.47.0 → 1.49.0

package/_dist/tooltip/index.js

@@ -0,0 +1,202 @@
+import React, { memo, useEffect } from "react";
+export const Tooltip = memo(function MemoFunction({ children, title, position = "top", arrow = false, distance = 5, ...other }) {
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return null;
+        const cssCheck = document.getElementsByClassName("stooltip_css")[0];
+        if (!cssCheck) {
+            const head = document.getElementsByTagName('head')[0];
+            const s = document.createElement('style');
+            s.setAttribute('type', 'text/css');
+            s.classList.add("stooltip_css");
+            s.appendChild(document.createTextNode(tooltipCss));
+            head.appendChild(s);
+        }
+        return () => tooltipSil();
+    }, []);
+    const tooltipEkle = (e) => {
+        tooltipSil();
+        const tooltip = document.createElement("div");
+        tooltip.innerHTML = title;
+        tooltip.classList.add("stooltip");
+        document.body.appendChild(tooltip);
+        tooltipPosition({ target: e.currentTarget, position: position });
+    };
+    const tooltipSil = () => {
+        const check = document.body.getElementsByClassName("stooltip")[0];
+        if (check)
+            check.remove();
+    };
+    const tooltipPosition = ({ target, position }) => {
+        const tooltip = document.body.getElementsByClassName("stooltip")[0];
+        if (tooltip) {
+            const arrowMargin = (arrow) ? 5 : 0;
+            const margin = distance + arrowMargin;
+            if (arrow)
+                tooltip.classList.add("arrow");
+            const targetPosition = target.getBoundingClientRect();
+            const tooltipPosition = tooltip.getBoundingClientRect();
+            const style = [];
+            if (position === "top" || position === "bottom") {
+                if (position === "top") {
+                    if ((targetPosition.top - tooltipPosition.height - margin) < 0) {
+                        style.push("top:" + (targetPosition.bottom + margin) + "px");
+                        tooltip.classList.add("bottom");
+                    }
+                    else {
+                        style.push("top:" + (targetPosition.top - tooltipPosition.height - margin) + "px");
+                        tooltip.classList.add("top");
+                    }
+                }
+                if (position === "bottom") {
+                    if ((targetPosition.bottom + tooltipPosition.height + margin) > window.innerHeight) {
+                        style.push("top:" + (targetPosition.top - tooltipPosition.height - margin) + "px");
+                        tooltip.classList.add("top");
+                    }
+                    else {
+                        style.push("top:" + (targetPosition.bottom + margin) + "px");
+                        tooltip.classList.add("bottom");
+                    }
+                }
+                // if ((targetPosition.left - tooltipPosition.width) < 0) {
+                if ((targetPosition.left + (targetPosition.width / 2) - (tooltipPosition.width / 2)) < 0) {
+                    style.push("left:2px");
+                    tooltip.classList.add("start");
+                }
+                else if ((targetPosition.left + (targetPosition.width / 2) + tooltipPosition.width) > window.innerWidth) {
+                    style.push("right:2px");
+                    tooltip.classList.add("end");
+                }
+                else {
+                    style.push("left:" + (targetPosition.left + (targetPosition.width / 2)) + "px");
+                    style.push("transform:translate(-50%,0)");
+                    tooltip.classList.add("center");
+                }
+            }
+            if (position === "left" || position === "right") {
+                if (position === "left") {
+                    if ((targetPosition.left - tooltipPosition.width - margin) < 0) {
+                        style.push("left:" + (targetPosition.right + margin) + "px");
+                        tooltip.classList.add("right");
+                    }
+                    else {
+                        style.push("left:" + (targetPosition.left - tooltipPosition.width - margin) + "px");
+                        tooltip.classList.add("left");
+                    }
+                }
+                if (position === "right") {
+                    if ((targetPosition.left + (targetPosition.width / 2) + tooltipPosition.width + margin) > window.innerWidth) {
+                        style.push("left:" + (targetPosition.left - tooltipPosition.width - margin) + "px");
+                        tooltip.classList.add("left");
+                    }
+                    else {
+                        style.push("left:" + (targetPosition.right + margin) + "px");
+                        tooltip.classList.add("right");
+                    }
+                }
+                if ((targetPosition.top + (targetPosition.height / 2) - (tooltipPosition.height / 2)) < 0) {
+                    style.push("top:2px");
+                    tooltip.classList.add("start");
+                }
+                else if ((targetPosition.top + (targetPosition.height / 2) + (tooltipPosition.height / 2)) > window.innerHeight) {
+                    style.push("bottom:2px");
+                    tooltip.classList.add("end");
+                }
+                else {
+                    style.push("top:" + (targetPosition.top + (targetPosition.height / 2)) + "px");
+                    style.push("transform:translate(0,-50%)");
+                    tooltip.classList.add("center");
+                }
+            }
+            tooltip.setAttribute("style", style.join(";"));
+        }
+    };
+    return React.cloneElement(children, {
+        onMouseEnter: tooltipEkle,
+        onMouseLeave: tooltipSil,
+        onMouseDown: tooltipSil,
+        ...other
+    });
+});
+const tooltipCss = `
+.stooltip {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #1a1a1a;
+    color: rgba(255,255,255,0.9);
+    text-align: center;
+    font-size: 0.9rem;
+    font-weight:400;
+    padding: 5px 10px;
+    border-radius: 8px;
+    z-index: 1000000;
+    opacity: 0.9;
+    pointer-events: none;
+    /*transition: all 0.1s;*/
+    white-space:pre-line;
+    max-width: 300px;
+    animation: stooltip_fadein 0.7s;
+}
+
+.stooltip.arrow:after {
+    content: "";
+    position: absolute;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+}
+
+.stooltip.arrow.top:after {
+    top: 100%;
+    border-color: #1a1a1a transparent transparent transparent;
+}
+
+.stooltip.arrow.top.start:after { left: 15px;}
+
+.stooltip.arrow.top.center:after { left: 50%;}
+
+.stooltip.arrow.top.end:after { right: 15px;}
+
+
+.stooltip.arrow.bottom:after {
+    bottom: 100%;
+    border-color: transparent transparent #1a1a1a transparent;
+}
+
+.stooltip.arrow.bottom.start:after { left: 15px;}
+
+.stooltip.arrow.bottom.center:after { left: 50%;}
+
+.stooltip.bottom.end:after { right: 15px;}
+
+.stooltip.arrow.left:after {
+    margin-left: -1px;
+    left: 100%;
+    border-color: transparent transparent transparent #1a1a1a;
+}
+
+.stooltip.arrow.left.start:after { top: 5px;}
+
+.stooltip.arrow.left.center:after { top: 50%; margin-top: -5px;}
+
+.stooltip.arrow.left.end:after { bottom: 15px;}
+
+.stooltip.arrow.right:after {
+    margin-right: -1px;
+    right: 100%;
+    border-color: transparent #1a1a1a transparent transparent;
+}
+
+.stooltip.arrow.right.start:after { top: 5px;}
+
+.stooltip.arrow.right.center:after { top: 50%; margin-top: -5px;}
+
+.stooltip.arrow.right.end:after { bottom: 15px;}
+
+@keyframes stooltip_fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.85; }
+}
+`;

package/_lib/baseFunctions.ts

@@ -0,0 +1,94 @@
+export const isDev = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
+export const isServerReq = (context: any) => !context?.req?.url?.startsWith('/_next');
+export const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const padNumber = (num: number, padLength = 2, padString = '0') => String(num).padStart(padLength, padString);
+
+export function inputTumuBuyukCevir(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e?.target && e?.target?.setSelectionRange) {
+        const start = e.target.selectionStart;
+        const end = e.target.selectionEnd;
+        e.target.value = e.target.value.toString().toLocaleUpperCase('tr-TR');
+        e.target.setSelectionRange(start, end);
+    }
+}
+
+export function inputTumuKucukCevir(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e?.target && e?.target?.setSelectionRange) {
+        const start = e.target.selectionStart;
+        const end = e.target.selectionEnd;
+        e.target.value = e.target.value.toString().toLocaleLowerCase('tr-TR');
+        e.target.setSelectionRange(start, end);
+    }
+}
+
+export const convertLowerCase = (text: any = '') => text.toString().toLocaleLowerCase('tr-TR');
+
+export const convertForSearch = (value: string) => {
+    let data = value?.toString().toLocaleLowerCase('tr-TR');
+    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;
+};
+
+export function convertForSEO(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e?.target && e?.target?.setSelectionRange) {
+        const start = e.target.selectionStart;
+        const end = e.target.selectionEnd;
+        let string = e.target.value.toString().toLocaleLowerCase('tr');
+        const turkce = [' ', '-', 'ş', 'Ş', 'ı', 'ü', 'Ü', 'ö', 'Ö', 'ç', 'Ç', 'ş', 'Ş', 'ı', 'ğ', 'Ğ', 'İ', 'ö', 'Ö', 'Ç', 'ç', 'ü', 'Ü', 'â', 'ê', 'Â', '“', '”'];
+        const duzgun = ['-', '-', 's', 'S', 'i', 'u', 'U', 'o', 'O', 'c', 'C', 's', 'S', 'i', 'g', 'G', 'I', 'o', 'O', 'C', 'c', 'u', 'U', 'a', 'ê', 'a', '', ''];
+        for (let i = 0; i < turkce.length; i++) {
+            string = string.split(turkce[i]).join(duzgun[i]);
+        }
+        string = string.replace(/[^a-z0-9\-_şıüğçİŞĞÜÇ]+/gi, '_');
+        string = string.replace(/_+/g, '_');
+        string = string.replace(/^-/, '_');
+        string = string.replace(/-$/, '_');
+
+        e.target.value = string;
+        e.target.setSelectionRange(start, end);
+    }
+}
+
+export function getDomain(context: any = null) {
+    let url = '';
+    if (context) {
+        url = context.req.headers.host;
+    } else if (typeof window !== 'undefined') {
+        url = window.location.hostname;
+    }
+
+    if (url.length) {
+        const parts = url.split('.').reverse();
+        const cnt = parts.length;
+        if (cnt >= 3) {
+            // see if the second level domain is a common SLD.
+            if (parts[1].match(/^(com|edu|gov|net|mil|org|nom|co|name|info|biz)$/i)) {
+                const domain = parts[2] + '.' + parts[1] + '.' + parts[0];
+                return domain.split(':')[0];
+            }
+        }
+        const domain = parts[1] + '.' + parts[0];
+        return domain.split(':')[0];
+    }
+    return url;
+}
+
+export const uniqueID = (key = '', length = 16) => {
+    return (
+        key +
+        parseInt(
+            Math.ceil(Math.random() * Date.now())
+                .toPrecision(length)
+                .toString()
+                .replace('.', '')
+        )
+    );
+};

package/_lib/inputMask.ts

@@ -0,0 +1,257 @@
+import { isDev } from "./baseFunctions";
+
+// Mask işleme core fonksiyonları
+const createMaskCore = () => {
+    const defaultTranslation: any = {
+        "0": { pattern: /\d/ },
+        "9": { pattern: /\d/, optional: true },
+        "#": { pattern: /\d/, recursive: true },
+        A: { pattern: /[a-zA-Z0-9]/ },
+        S: { pattern: /[a-zA-Z]/ },
+        U: { pattern: /[a-zA-Z]/, transform: (char: any) => char.toUpperCase() },
+        L: { pattern: /[a-zA-Z]/, transform: (char: any) => char.toLowerCase() },
+        X: { pattern: /[0-9a-fA-F]/ }
+    };
+
+    const parseMask = (maskString: string, translation = defaultTranslation) => {
+        const tokens = [];
+        let i = 0;
+
+        while (i < maskString.length) {
+            const char = maskString[i];
+
+            if (translation[char]) {
+                tokens.push({
+                    type: "input",
+                    pattern: translation[char].pattern,
+                    optional: translation[char].optional,
+                    recursive: translation[char].recursive,
+                    transform: translation[char].transform
+                });
+            } else {
+                tokens.push({
+                    type: "literal",
+                    char: char
+                });
+            }
+            i++;
+        }
+
+        return tokens;
+    };
+
+    const applyMask = (inputValue: string, maskTokens: any, reverse = false) => {
+        if (!maskTokens.length) return inputValue;
+
+        const normalizedValue = inputValue == null ? "" : String(inputValue);
+        const cleanValue = normalizedValue.replace(/[^\w\s]/g, "");
+
+        if (reverse) {
+            return applyReverseMask(cleanValue, maskTokens);
+        }
+
+        let result = "";
+        let valueIndex = 0;
+        let maskIndex = 0;
+
+        while (maskIndex < maskTokens.length && valueIndex < cleanValue.length) {
+            const token = maskTokens[maskIndex];
+
+            if (token.type === "literal") {
+                result += token.char;
+                maskIndex++;
+            } else {
+                const char = cleanValue[valueIndex];
+
+                if (token.pattern.test(char)) {
+                    const transformedChar = token.transform ? token.transform(char) : char;
+                    result += transformedChar;
+                    valueIndex++;
+                    maskIndex++;
+                } else if (token.optional) {
+                    maskIndex++;
+                } else {
+                    valueIndex++;
+                }
+            }
+        }
+
+        while (maskIndex < maskTokens.length) {
+            const token = maskTokens[maskIndex];
+            if (token.type === "literal") {
+                result += token.char;
+            } else if (!token.optional) {
+                break;
+            }
+            maskIndex++;
+        }
+
+        return result;
+    };
+
+    const applyReverseMask = (inputValue: string, maskTokens: any) => {
+        const reversedMask = maskTokens.slice().reverse();
+        const reversedValue = inputValue.split("").reverse().join("");
+        let result = "";
+        let valueIndex = 0;
+        let maskIndex = 0;
+
+        while (maskIndex < reversedMask.length && valueIndex < reversedValue.length) {
+            const token = reversedMask[maskIndex];
+
+            if (token.type === "literal") {
+                result = token.char + result;
+                maskIndex++;
+            } else {
+                const char = reversedValue[valueIndex];
+
+                if (token.pattern.test(char)) {
+                    const transformedChar = token.transform ? token.transform(char) : char;
+                    result = transformedChar + result;
+                    valueIndex++;
+                    maskIndex++;
+                } else if (token.optional) {
+                    maskIndex++;
+                } else {
+                    valueIndex++;
+                }
+            }
+        }
+
+        return result;
+    };
+
+    const getCleanValue = (maskedValue: string, maskTokens: any) => {
+        if (!maskTokens.length) return maskedValue;
+
+        let clean = "";
+        let valueIndex = 0;
+        let maskIndex = 0;
+
+        while (maskIndex < maskTokens.length && valueIndex < maskedValue.length) {
+            const token = maskTokens[maskIndex];
+
+            if (token.type === "literal") {
+                if (maskedValue[valueIndex] === token.char) {
+                    valueIndex++;
+                }
+                maskIndex++;
+            } else {
+                clean += maskedValue[valueIndex];
+                valueIndex++;
+                maskIndex++;
+            }
+        }
+
+        return clean;
+    };
+
+    return {
+        parseMask,
+        applyMask,
+        getCleanValue
+    };
+};
+
+// Fonksiyonel yaklaşım - herhangi bir input elementine mask uygula
+export const applyInputMask = (inputElement: any, mask: string, options: any = {}) => {
+    if (!inputElement || !mask) return null;
+
+    isDev && console.log("Input mask applied:", { inputElement, mask, options });
+
+    const { translation, reverse = false, clearIfNotMatch = true, selectOnFocus = false, onChange } = options;
+
+    const maskCore = createMaskCore();
+    const maskTokens = maskCore.parseMask(mask, translation);
+
+    const applyMaskToValue = (inputValue: any) => maskCore.applyMask(inputValue, maskTokens, reverse);
+
+    const getCleanValue = (maskedValue: any) => maskCore.getCleanValue(maskedValue, maskTokens);
+
+    const handleInputChange = (e: any) => {
+        const inputValue = e.target.value;
+        const maskedValue = applyMaskToValue(inputValue);
+        const cleanValue = getCleanValue(maskedValue);
+
+        e.target.value = maskedValue;
+        onChange?.(maskedValue, cleanValue, e);
+    };
+
+    const handleKeyDown = (e: any) => {
+        const { key, target } = e;
+        const cursorStart = target.selectionStart;
+        const cursorEnd = target.selectionEnd;
+
+        if (key === "Backspace" || key === "Delete") {
+            e.preventDefault();
+
+            let newValue = target.value;
+
+            if (cursorStart !== cursorEnd) {
+                newValue = newValue.substring(0, cursorStart) + newValue.substring(cursorEnd);
+            } else if (key === "Backspace" && cursorStart > 0) {
+                newValue = newValue.substring(0, cursorStart - 1) + newValue.substring(cursorStart);
+            } else if (key === "Delete" && cursorStart < newValue.length) {
+                newValue = newValue.substring(0, cursorStart) + newValue.substring(cursorStart + 1);
+            }
+
+            const maskedValue = applyMaskToValue(newValue);
+            target.value = maskedValue;
+
+            const cleanValue = getCleanValue(maskedValue);
+            onChange?.(maskedValue, cleanValue, e);
+
+            setTimeout(() => {
+                const newPos = key === "Backspace" ? Math.max(0, cursorStart - 1) : cursorStart;
+                target.setSelectionRange(newPos, newPos);
+            }, 0);
+        }
+    };
+
+    const handleFocus = (e: any) => {
+        if (selectOnFocus) {
+            setTimeout(() => {
+                e.target.select();
+            }, 0);
+        }
+    };
+
+    const handleBlur = (e: any) => {
+        if (clearIfNotMatch) {
+            const cleanValue = getCleanValue(e.target.value);
+            const expectedLength = maskTokens.filter((t) => t.type === "input" && !t.optional).length;
+
+            if (cleanValue.length < expectedLength) {
+                e.target.value = "";
+                onChange?.("", "", e);
+            }
+        }
+    };
+
+    // Event listener'ları ekle
+    inputElement.addEventListener("input", handleInputChange);
+    inputElement.addEventListener("keydown", handleKeyDown);
+    inputElement.addEventListener("focus", handleFocus);
+    inputElement.addEventListener("blur", handleBlur);
+
+    // Cleanup fonksiyonu
+    const destroy = () => {
+        inputElement.removeEventListener("input", handleInputChange);
+        inputElement.removeEventListener("keydown", handleKeyDown);
+        inputElement.removeEventListener("focus", handleFocus);
+        inputElement.removeEventListener("blur", handleBlur);
+    };
+
+    // Utility fonksiyonları
+    return {
+        destroy,
+        setValue: (value: any) => {
+            if (!value) return;
+            const maskedValue = applyMaskToValue(value || "");
+            inputElement.value = maskedValue;
+        },
+        getValue: () => inputElement.value,
+        getCleanValue: () => getCleanValue(inputElement.value),
+        applyMask: applyMaskToValue
+    };
+};

package/_lib/listFunctions.ts

@@ -0,0 +1,106 @@
+export const onKeyboardSelection = ({ e, targetElement, itemClass = `item`, selectedClass = "selected", checkByValue, checkByInput, clear }: any) => {
+  if (!targetElement.current) return null;
+
+  const config = {
+    e: e,
+    itemClass: itemClass,
+    selectedClass: selectedClass,
+  };
+
+  function selectEnter() {
+    if (!targetElement.current) return null;
+    const text: any = targetElement.current.querySelector(`${config.itemClass}.${config.selectedClass}`);
+    if (text) {
+      checkByValue(text.dataset.value);
+    } else if (targetElement.current.querySelectorAll(`${config.itemClass}`).length > 0) {
+      const target: any = targetElement.current.querySelectorAll(`${config.itemClass}.${config.selectedClass}`)[0];
+      checkByValue(target.dataset.value);
+    } else {
+      clear(true, true);
+    }
+  }
+
+  function selectFirst() {
+    if (!targetElement.current) return null;
+    const showList = targetElement.current.querySelectorAll(`${config.itemClass}`);
+    if (showList.length > 0) {
+      showList[0].classList.add(config.selectedClass);
+    }
+  }
+
+  function selectLast() {
+    if (!targetElement.current) return null;
+    const showList = targetElement.current.querySelectorAll(`${config.itemClass}`);
+    if (showList.length > 0) {
+      showList[showList.length - 1].classList.add(config.selectedClass);
+    }
+  }
+
+  function selectNext(element: any) {
+    element.classList.remove(config.selectedClass);
+    const next = element.nextElementSibling;
+    if (next && next.nodeType !== -1) {
+      if (next.classList.contains("item")) {
+        next.classList.add(config.selectedClass);
+      } else {
+        selectNext(next);
+      }
+    } else {
+      selectFirst();
+    }
+  }
+
+  function selectPrev(element: any) {
+    element.classList.remove(config.selectedClass);
+    const next = element.previousElementSibling;
+    if (next && next.nodeType !== -1) {
+      if (next.classList.contains("item")) {
+        next.classList.add(config.selectedClass);
+      } else {
+        selectPrev(next);
+      }
+    } else {
+      selectLast();
+    }
+  }
+
+  const selected = targetElement.current.querySelector(`${config.itemClass}.${config.selectedClass}`);
+  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();
+  }
+
+  setScrollListPosition(targetElement);
+};
+
+export function setScrollListPosition(targetElement: any) {
+  if (targetElement.current) {
+    let position = 0;
+    const text = targetElement.current.querySelector(".selected");
+    if (text) {
+      position = text.offsetTop - 35;
+    } else if (targetElement.current.querySelector(".active")) {
+      position = targetElement.current.querySelector(".active").offsetTop - 35;
+    }
+    targetElement.current.scrollTop = position;
+  }
+}
+
+

package/_lib/storage/cookies.ts

@@ -0,0 +1,39 @@
+import nookies, { destroyCookie, parseCookies, setCookie } from 'nookies';
+
+import { getDomain } from '../baseFunctions';
+
+export const cerezOku = (context: any | null = null, key: string) => {
+    const cookies = context ? nookies.get(context) : parseCookies();
+    return cookies[key] || false;
+};
+
+export const cerezKaydet = (context: any | null = null, key: string, value: string, time: number = 0) => {
+    const newConfig = checkDomain(context);
+    setCookie(context, key, value, {
+        maxAge: time > 0 ? time : null,
+        ...newConfig
+    });
+};
+
+export const cerezSil = (context: any | null = null, key: string) => {
+    const newConfig = checkDomain(context);
+    destroyCookie(context, key, newConfig);
+};
+
+export const cerezTumuSil = (context: any | null = null) => {
+    const cookies = parseCookies(context);
+    if (cookies) {
+        Object.keys(cookies).forEach((key) => {
+            destroyCookie(context, key);
+        });
+    }
+};
+
+const checkDomain = (context: any | null = null, config: any = {}) => {
+    let cookieDomain = getDomain(context);
+    return {
+        ...config,
+        domain: '.' + cookieDomain,
+        path: '/'
+    };
+};