@sydsoft/base 1.49.0 → 1.50.0

package/_lib/useInterval.ts

@@ -1,30 +0,0 @@
-/**
- * Copyright (c) 2023
- *  @author: izzetseydaoglu
- *  @last-modified: 29.01.2024 04:09
- */
-
-// source: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
-
-import { useEffect, useRef } from "react";
-
-export function useInterval(callback: any, delay: any) {
-  const savedCallback = useRef<any>(null);
-
-  // Remember the latest callback.
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  // Set up the interval.
-  useEffect(() => {
-    function tick() {
-      savedCallback && savedCallback.current && savedCallback.current();
-    }
-
-    if (delay !== null) {
-      const id = setInterval(tick, delay);
-      return () => clearInterval(id);
-    }
-  }, [delay]);
-}

package/alert/index.module.css

@@ -1,119 +0,0 @@
-.message {
-  flex: 1;
-}
-
-.close {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 17px;
-  height: 17px;
-  border-radius: 50%;
-  padding: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 9px;
-  letter-spacing: 0;
-  transform: translate(-50%, -50%) scale(0);
-  transition: ease-in-out 0.2s;
-  border: 1px #97979740 solid;
-  box-shadow: 1px 1px 4px 0 #000000a6;
-  cursor: pointer;
-  background: inherit;
-}
-.close:hover {
-  zoom: 1.1;
-}
-.salert:hover .close {
-  transform: translate(-50%, -50%) scale(1);
-}
-.salert {
-  position: relative;
-  min-width: 50px;
-  width: fit-content;
-  margin: 6px 0 6px auto;
-  padding: 10px 15px;
-  border-radius: 5px;
-  cursor: default;
-  background: #1f1f1f;
-  color: rgba(255, 255, 255, 0.93);
-  border: 1px #97979740 solid;
-  box-shadow: 1px 1px 4px 0 #000000a6;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-  animation: show 0.3s;
-  font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.error {
-  background: rgb(211, 47, 47);
-  background: linear-gradient(
-    135deg,
-    rgba(211, 47, 47, 1) 0%,
-    rgba(211, 47, 47, 0.8) 70%
-  );
-  color: rgba(255, 255, 255, 0.93);
-}
-
-.success {
-  background: rgb(67, 160, 71);
-  background: linear-gradient(
-    135deg,
-    rgba(67, 160, 71, 1) 0%,
-    rgba(67, 160, 71, 0.8) 70%
-  );
-  color: rgba(255, 255, 255, 0.93);
-}
-
-.info {
-  background: rgb(13, 141, 189);
-  background: linear-gradient(
-    135deg,
-    rgba(13, 141, 189, 1) 0%,
-    rgba(13, 141, 189, 0.8) 70%
-  );
-  color: rgba(255, 255, 255, 0.93);
-}
-
-.warning {
-  background: rgb(217, 142, 4);
-  background: linear-gradient(
-    135deg,
-    rgba(217, 142, 4, 1) 0%,
-    rgba(217, 142, 4, 0.8) 70%
-  );
-  color: rgba(255, 255, 255, 0.93);
-}
-
-.loading {
-  background: linear-gradient(
-    60deg,
-    rgb(15 33 34) 0%,
-    rgba(0, 172, 193, 1) 100%
-  );
-  color: rgba(255, 255, 255, 0.93);
-  animation: waves 50s infinite linear;
-}
-
-@keyframes show {
-  from {
-    transform: translateX(200%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes waves {
-  from {
-    background-position: 0;
-  }
-  to {
-    background-position: 100vw 0;
-  }
-}

package/alert/index.tsx

@@ -1,131 +0,0 @@
-import React, { useEffect } from "react";
-
-import { createRoot } from "react-dom/client";
-import styles from "./index.module.css";
-
-const sAlertTimeout: any[] = [];
-
-export type typeAlert = {
-    defaultTimer?: string;
-    defaultErrorTimer?: string;
-    defaultSuccessTimer?: string;
-};
-
-export const Alert = ({ defaultTimer = "5000", defaultErrorTimer = "10000", defaultSuccessTimer = "5000" }: typeAlert) => {
-    useEffect(() => {
-        if (typeof window === "undefined") return;
-        const divCheck = document.getElementById("salert");
-        if (!divCheck) {
-            // let div = document.createElement('div') as HTMLDivElement
-            const div = document.createElement("div");
-            div.setAttribute("id", "salert");
-            div.setAttribute("defaultTimer", defaultTimer);
-            div.setAttribute("defaultErrorTimer", defaultErrorTimer);
-            div.setAttribute("defaultSuccessTimer", defaultSuccessTimer);
-            const alertStyle = [
-                "position: fixed",
-                "bottom: 0",
-                "right: 0",
-                "max-width: 300px",
-                "max-height: 600px",
-                "overflow-x: hidden",
-                "padding: 15px",
-                "display: flex",
-                "flex-direction: column",
-                "z-index: 9999999"
-            ];
-            div.setAttribute("style", alertStyle.join(";"));
-            document.body.appendChild(div);
-        }
-    }, []);
-
-    return null;
-};
-
-type typeAddAlert = {
-    type: "error" | "success" | "warning" | "info" | "loading";
-    message: string;
-    timer?: number | boolean;
-    style?: React.CSSProperties;
-};
-
-export const alert_add = ({ type, message, style, timer }: typeAddAlert) => {
-    if (typeof window === "undefined") return false;
-    const mainDiv = document.getElementById("salert");
-    if (mainDiv) {
-        const alert = document.createElement("div");
-        mainDiv.prepend(alert);
-
-        const onClose = () => {
-            if (mainDiv && alert && mainDiv.contains(alert)) mainDiv.removeChild(alert);
-        };
-        const root = createRoot(alert!);
-        const Component = (
-            <div className={`${styles.salert} ${styles[type]}`} style={style}>
-                <div className={styles.message} dangerouslySetInnerHTML={{ __html: message }} />
-                <div className={styles.close} onClick={onClose}>
-                    ✕
-                </div>
-            </div>
-        );
-        root.render(Component);
-
-        const defaultTimer = mainDiv.getAttribute("defaulttimer") ?? "5000";
-        const defaultErrorTimer = mainDiv.getAttribute("defaulterrortimer") ?? "10000";
-        const defaultSuccessTimer = mainDiv.getAttribute("defaultsuccesstimer") ?? "5000";
-
-        const timerFilled = typeof timer === "number" && timer > 0;
-
-        let newTimer = timerFilled ? timer : defaultTimer;
-
-        switch (type) {
-            case "error":
-                newTimer = timerFilled ? timer : defaultErrorTimer;
-                break;
-            case "success":
-                newTimer = timerFilled ? timer : defaultSuccessTimer;
-                break;
-            default:
-                break;
-        }
-        newTimer = newTimer as number;
-
-        if (typeof timer !== "boolean") {
-            // False gelmişse sabit kalsın
-            if (newTimer > 0) {
-                const timeout = setTimeout(() => onClose(), newTimer);
-                sAlertTimeout.push(timeout);
-            }
-        }
-
-        return alert;
-    }
-    return null;
-};
-
-export const alert_remove = (alert: any): void => {
-    if (typeof window === "undefined" || !alert) return;
-    const mainDiv = document.getElementById("salert");
-    if (mainDiv && alert && mainDiv.contains(alert)) mainDiv.removeChild(alert);
-    return;
-};
-
-export const alert_clear = () => {
-    if (typeof window === "undefined") return false;
-    sAlertTimeout.map((id) => clearTimeout(id));
-    const mainDiv = document.getElementById("salert");
-    if (mainDiv) mainDiv.innerHTML = "";
-    return true;
-};
-
-export function alertCheck(response: any) {
-    if (response.data && response.data["alert"]) {
-        response.data["alert"].map(function (alert: any) {
-            alert_add({
-                type: alert.type,
-                message: alert.message,
-                timer: alert.timer
-            });
-        });
-    }
-}

package/box/Box.module.css

@@ -1,153 +0,0 @@
-.sbox {
-    position: relative;
-    max-width: 100%;
-    background-color: #fff;
-    box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
-    border-radius: 8px;
-    overflow-y: auto;
-}
-
-.sbox h1,
-.sbox h2,
-.sbox h3,
-.sbox h4,
-.sbox h5,
-.sbox h6 {
-    margin: 0;
-    padding: 0;
-}
-
-.content {
-    padding: 20px;
-    box-sizing: border-box;
-    overflow: auto;
-}
-
-.header,
-.footer {
-    z-index: 1;
-    position: sticky;
-    padding: 12px 16px;
-    background: inherit;
-}
-.header {
-    top: 0;
-    border-bottom: 1px solid #00000020;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 10px;
-    /* margin: 10px 0 5px 0; */
-}
-.footer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 10px;
-    bottom: 0;
-    border-top: 1px solid #00000020;
-    background-color: #f7f7f7;
-}
-
-.icon {
-    display: inline-flex;
-    align-items: center;
-    flex: 0 0 auto;
-    text-align: center;
-    
-}
-
-.title {
-    flex: 1;
-    font-size: 1.1rem;
-    font-weight: 500;
-    line-height: 1.5;
-}
-
-.menu {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-}
-.menu > * {
-    margin: 0 3px;
-}
-
-.loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #f4f7faa6;
-    overflow: hidden;
-    border-radius: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
-}
-
-.loading::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: translateX(-100%);
-    background: linear-gradient(90deg, rgb(183 190 199 / 2%) 0, rgb(182 190 198 / 19%) 20%, rgb(183 190 199 / 2%) 60%, rgb(184 192 200 / 1%));
-    animation: shimmer 2s infinite;
-    content: "";
-}
-
-.loading_spinner {
-    position: relative;
-    margin: 6px;
-    width: 24px;
-    height: 24px;
-}
-.loading_spinner:before {
-    position: absolute;
-    display: block;
-    content: "";
-    z-index: 12;
-    top: 3px;
-    left: 3px;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background-color: #fff;
-}
-
-.loading_spinner:after {
-    position: absolute;
-    display: block;
-    content: "";
-    z-index: 11;
-    width: 18px;
-    height: 18px;
-    border-radius: 200px 0 0;
-    background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0, rgba(69, 154, 215, 1) 50%, rgba(69, 154, 215, 1) 100%);
-    animation: loading_spinner 0.5s linear infinite;
-}
-
-@keyframes shimmer {
-    100% {
-        transform: translateX(100%);
-    }
-}
-@keyframes loading_spinner {
-    0% {
-        transform-origin: 100% 100%;
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform-origin: 100% 100%;
-        transform: rotate(360deg);
-    }
-}

package/box/Box.tsx

@@ -1,33 +0,0 @@
-import React, { memo, useEffect, useRef, useState } from "react";
-
-import styles from "./Box.module.css";
-
-type Props = {
-    children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    loading?: boolean;
-};
-
-export const Box = memo(function MemoFunction({ children, className, style, loading = false }: Props) {
-    const boxRef = useRef<HTMLDivElement>(null);
-
-    const [hasContent, setHasContent] = useState(false);
-    useEffect(() => {
-        if (!boxRef.current) return;
-        const found = boxRef.current.querySelector(".sbox_content");
-        setHasContent(!!found);
-    }, [children]);
-
-    return (
-        <div ref={boxRef} className={`sbox ${styles.sbox} ${className || ""}`} style={style}>
-            {(hasContent && children) || <div className={styles.content}>{children}</div>}
-
-            {loading && (
-                <div className={styles.loading}>
-                    <div className={styles.loading_spinner} />
-                </div>
-            )}
-        </div>
-    );
-});

package/box/BoxContent.tsx

@@ -1,18 +0,0 @@
-import React, { ReactNode } from "react";
-
-import styles from "./Box.module.css";
-
-interface Props {
-    className?: string;
-    style?: React.CSSProperties;
-    padding?: number;
-    children?: ReactNode;
-}
-
-export const BoxContent = ({ className, style, padding, children }: Props) => {
-    return (
-        <div className={`${styles.content} sbox_content ${className || ""}`} style={{ ...style, padding }}>
-            {children}
-        </div>
-    );
-};

package/box/BoxFooter.tsx

@@ -1,25 +0,0 @@
-import React, { memo } from "react";
-
-import styles from "./Box.module.css";
-
-interface Props {
-    children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    marginTop?: number;
-    align?: "flex-start" | "center" | "flex-end" | "stretch";
-}
-
-export const BoxFooter = memo(function FunctionMemo({ children, className, style, align, marginTop }: Props) {
-    return (
-        <div
-            className={`sbox_footer ${styles.footer} ${className || ""}`}
-            style={{
-                marginTop,
-                justifyContent: align,
-                ...style
-            }}>
-            {children}
-        </div>
-    );
-});

package/box/BoxHeader.tsx

@@ -1,46 +0,0 @@
-import React, { ReactNode, memo } from 'react';
-
-import styles from './Box.module.css';
-
-interface Props {
-    children?: ReactNode;
-    className?: string;
-    title?: string | ReactNode;
-    icon?: ReactNode;
-    menu?: ReactNode;
-    mainStyle?: React.CSSProperties;
-    iconStyle?: React.CSSProperties;
-    titleStyle?: React.CSSProperties;
-    menuStyle?: React.CSSProperties;
-    component?: any;
-    marginBottom?: number;
-}
-
-export const BoxHeader = memo(function FunctionMemo({ children, className, title, icon, menu, mainStyle, iconStyle, titleStyle, menuStyle, marginBottom, component = 'div' }: Props) {
-    const Comp = component;
-    return (
-        <div
-            className={`sbox_header ${styles.header} ${className || ''}`}
-            style={{
-                marginBottom,
-                ...mainStyle
-            }}
-        >
-            {icon && (
-                <div className={styles.icon} style={iconStyle}>
-                    {icon}
-                </div>
-            )}
-
-            <Comp className={`sbox_title ${styles.title}`} style={titleStyle}>
-                {children || title}
-            </Comp>
-
-            {menu && (
-                <div className={styles.menu} style={menuStyle}>
-                    {menu}
-                </div>
-            )}
-        </div>
-    );
-});

package/box/index.ts

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2023
- *  @author: izzetseydaoglu
- *  @last-modified: 29.01.2024 02:41
- */
-
-export * from "./Box";
-export * from './BoxContent';
-export * from './BoxFooter';
-export * from './BoxHeader';

package/countDown/index.tsx

@@ -1,116 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import React from 'react';
-import { useInterval } from '../_lib/useInterval';
-
-type Props = {
-    targetTime: number | string; // 30 | "2022-01-20 22:35" | veya direkt microtime ;
-    timerType?: 'countdown' | 'datetime';
-    speed?: number;
-    countType?: 'seconds' | 'minutes:seconds' | 'hours:minutes:seconds' | 'days:hours:minutes:seconds';
-    hide?: boolean;
-    onComplete?: () => void;
-    getStatus?: ({ days, hours, minutes, seconds, timer }: any) => void;
-    autoStart?: boolean;
-};
-
-export const useCountDown = ({ autoStart = false, onComplete, getStatus, targetTime, timerType = 'countdown', countType = 'seconds', speed = 1000, hide }: Props) => {
-    const refCountDownRender = useRef<any>(null);
-    const [enabled, setEnabled] = useState(timerType === 'datetime' || autoStart);
-    const [timer, setTimer] = useState<any>(0);
-    const [timerSpeed, setTimerSpeed] = useState<number>(typeof speed === 'number' && speed > 0 ? speed : 1000);
-
-    useEffect(() => prepareTimer(targetTime), [targetTime]);
-
-    useEffect(() => {
-        if (!hide) render();
-    }, [timer]);
-
-    useInterval(
-        () => {
-            if (enabled) {
-                if (timer <= 1) {
-                    stopCountDown();
-                } else {
-                    setTimer(timer - 1);
-                }
-            }
-        },
-        enabled ? timerSpeed : null
-    );
-
-    const prepareTimer = (timeORstring: string | number) => {
-        if (timerType === 'datetime') {
-            setTimer(Math.floor((new Date(timeORstring).getTime() - new Date().getTime()) / 1000));
-            setEnabled(true);
-        } else {
-            setTimer(timeORstring);
-        }
-    };
-
-    const stopCountDown = () => {
-        setTimer(0);
-        setEnabled(false);
-        if ((enabled && onComplete) || (timerType === 'datetime' && onComplete)) {
-            onComplete();
-        }
-    };
-
-    const padNumber = (num: number, padLength = 2, padString = '0') => (typeof targetTime === 'number' && targetTime < 10 ? num : String(num).padStart(padLength, padString));
-
-    const render = () => {
-        let days = 0,
-            hours = 0,
-            minutes = 0,
-            seconds = timer;
-        if (countType === 'minutes:seconds') {
-            minutes = Math.floor(seconds / 60);
-            seconds -= minutes * 60;
-        } else if (countType === 'hours:minutes:seconds') {
-            hours = Math.floor(seconds / (60 * 60));
-            seconds -= hours * 60 * 60;
-            minutes = Math.floor(seconds / 60);
-            seconds -= minutes * 60;
-        } else if (countType === 'days:hours:minutes:seconds') {
-            days = Math.floor(seconds / (60 * 60 * 24));
-            seconds -= days * 60 * 60 * 24;
-            hours = Math.floor(seconds / (60 * 60));
-            seconds -= hours * 60 * 60;
-            minutes = Math.floor(seconds / 60);
-            seconds -= minutes * 60;
-        }
-
-        seconds = Math.floor(seconds);
-
-        if (getStatus && timer > 0) getStatus({ days, hours, minutes, seconds, timer });
-
-        if (refCountDownRender.current) {
-            const getPadValues = (div: any) => {
-                const length = div.dataset.padlength || 2;
-                const string = div.dataset.padstring || '0';
-                return { length, string };
-            };
-
-            const divGun = refCountDownRender.current.querySelector("[data-name='days']");
-            if (divGun) divGun.innerHTML = padNumber(days, getPadValues(divGun).length, getPadValues(divGun).string).toString();
-
-            const divSaat = refCountDownRender.current.querySelector("[data-name='hours']");
-            if (divSaat) divSaat.innerHTML = padNumber(hours, getPadValues(divSaat).length, getPadValues(divSaat).string).toString();
-
-            const divDakika = refCountDownRender.current.querySelector("[data-name='minutes']");
-            if (divDakika) divDakika.innerHTML = padNumber(minutes, getPadValues(divDakika).length, getPadValues(divDakika).string).toString();
-
-            const divSaniye = refCountDownRender.current.querySelector("[data-name='seconds']");
-            if (divSaniye) divSaniye.innerHTML = padNumber(seconds, getPadValues(divSaniye).length, getPadValues(divSaniye).string).toString();
-        }
-    };
-
-    return {
-        ComponentCountDown: (children: any) => (hide ? null : React.cloneElement(children, { ref: refCountDownRender })),
-        startCountDown: () => setEnabled(true),
-        stopCountDown: () => setEnabled(false),
-        setTargetTime: (targetTime: number | string) => prepareTimer(targetTime),
-        setTimerSpeed: (timerSpeed: number) => setTimerSpeed(timerSpeed),
-        getChildrenRef: () => refCountDownRender.current || null
-    };
-};