@sydsoft/base 1.48.0 → 1.49.0

package/{dist/esm → _dist}/icon/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { iconMap } from './icons';
 import { MaterialIconName } from './mui';
-export declare const iconList: ("search" | "close" | "edit" | "keyboard_arrow_down" | "keyboard_arrow_up")[];
+export declare const iconList: IconName[];
 export type IconName = keyof typeof iconMap;
 interface BaseProps {
     color?: string;

package/_dist/menu/index.module.css

@@ -0,0 +1,92 @@
+.ul {
+    position: relative;
+    width: 100%;
+    max-height: calc(100vh - 94px);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background: #fff;
+    letter-spacing: 0.2px;
+    outline: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    box-shadow: 0 2px 6px 2px rgba(60, 64, 67, 0.15);
+    overflow-y: auto;
+    user-select: none;
+}
+
+.ul > li {
+    cursor: pointer;
+    padding: 2px 6px;
+    min-height: 25px;
+}
+.ul > li,
+.ul > li a {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+}
+.ul > li a,
+.ul > li a:visited {
+    color: inherit;
+    text-decoration: none;
+}
+
+.ul > li:first-child {
+    margin-top: 5px;
+}
+
+.ul > li:last-child {
+    margin-bottom: 5px;
+}
+
+.ul > li:hover {
+    background: #f0f2f5;
+}
+
+.ul > li:global(.spopover_active) {
+    background: #e8f0fe;
+}
+
+.menuicon {
+    display: inline-flex;
+    overflow: hidden;
+    width: 30px;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    color: #606060;
+}
+
+.menutitle {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 0 10px;
+}
+
+.rightmenu {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    color: #909090;
+    font-size: 12px;
+    width: 50px;
+}
+.rightmenu span {
+    user-select: none;
+}
+
+.seperator {
+    cursor: default !important;
+    background: #00000014 !important;
+    border: 0;
+    height: 1px;
+    min-height: 1px !important;
+    margin: 4px 0;
+    padding: 0 !important;
+    display: block !important;
+}

package/_dist/modal/index.module.css

@@ -0,0 +1,77 @@
+.backdrop {
+    position: fixed;
+    z-index: 1300;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.23);
+    width: 100%;
+    height: 100%;
+    outline: none;
+}
+.backdrop_open {
+    display: flex !important;
+}
+
+.modal {
+    position: relative;
+    min-width: 200px;
+    max-width: 90%;
+    max-height: calc(100% - 64px);
+    overflow-x: hidden;
+    border-radius: 8px;
+    background: transparent;
+    box-shadow:
+        rgb(0 0 0 / 32%) 0 4px 8px,
+        rgb(0 0 0 / 40%) 0 8px 40px;
+    margin: 15px;
+    padding: 0;
+    z-index: 1;
+    outline: none;
+}
+.fullscreen {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100vh;
+    max-height: 100vh;
+    border-radius: 0;
+    margin: 0;
+}
+.close_fixed {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 1000;
+    text-align: right;
+    border-radius: inherit;
+}
+
+.close {
+    position: fixed;
+    background: linear-gradient(0deg, transparent, #00000026, transparent);
+    padding: 8px 10px;
+    font-size: 11px;
+    transform: scale(1) translateX(-100%);
+    border-radius: none;
+    cursor: pointer;
+    font-weight: bold;
+    text-shadow: 1px 0px 0px #000000;
+    transition: all 0.3s ease-in-out;
+}
+.close:hover {
+    transform: scale(1.3) translateX(-85%);
+    background: linear-gradient(180deg, transparent, #0000003a, transparent);
+}
+
+.sbox_header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.sbox_footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+}

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: '/'
+    };
+};