@sydsoft/base 1.51.0 → 1.52.0

package/_dist/modal/index.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * Copyright (c) 2023
- *  @author: izzetseydaoglu
- *  @last-modified: 9.02.2024 06:07
- */
-const react_1 = require("react");
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const index_module_css_1 = tslib_1.__importDefault(require("./index.module.css"));
-exports.Modal = (0, react_1.memo)(function MemoFunction({ refModal = null, children, open = false, close, keepMounted = false, fullScreen = false, hideBackdrop = true, hideEsc = false, hideCloseButton = false, modalStyle, backdropStyle, vertialAlign = "center", horizontalAlign = "center" }) {
-    const [modalDiv, setModalDiv] = (0, react_1.useState)(null);
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (refModal)
-            refModal.current = ref.current;
-    }, [ref.current]);
-    const onClose = () => {
-        if (close)
-            close();
-    };
-    const checkHideBackDrop = (e) => {
-        if (open && ref.current && !ref.current.contains(e.target))
-            onClose();
-    };
-    const checkESC = (e) => {
-        if (e.keyCode === 27 || e.key === "Escape" || e.code === "Escape")
-            onClose();
-    };
-    (0, react_1.useEffect)(() => {
-        if (open) {
-            if (hideBackdrop)
-                window.addEventListener("mousedown", checkHideBackDrop);
-            if (hideEsc)
-                window.addEventListener("keydown", checkESC);
-        }
-        return () => {
-            if (hideBackdrop)
-                window.removeEventListener("mousedown", checkHideBackDrop);
-            if (hideEsc)
-                window.removeEventListener("keydown", checkESC);
-        };
-    });
-    (0, react_1.useEffect)(() => {
-        if (!modalDiv) {
-            const modalDivCheck = document.getElementById("smodal");
-            if (modalDivCheck) {
-                setModalDiv(modalDivCheck);
-            }
-            else {
-                const div = document.createElement("div");
-                div.setAttribute("id", "smodal");
-                document.body.appendChild(div);
-                setModalDiv(div);
-            }
-        }
-        return () => {
-            onClose();
-        };
-    }, []);
-    if ((!keepMounted && !open) || typeof window === "undefined")
-        return null;
-    const Component = ((0, jsx_runtime_1.jsx)("div", { className: `${index_module_css_1.default.backdrop} ${open ? index_module_css_1.default.backdrop_open : ""}`, style: { alignItems: vertialAlign, justifyContent: horizontalAlign, ...backdropStyle }, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, className: `smodal ${index_module_css_1.default.modal} ${fullScreen ? index_module_css_1.default.fullscreen : ""}`, style: modalStyle, children: [!hideCloseButton && ((0, jsx_runtime_1.jsx)("div", { className: `close ${index_module_css_1.default.close_fixed}`, children: (0, jsx_runtime_1.jsx)("div", { className: index_module_css_1.default.close, onClick: onClose, children: "\u2715" }) })), children] }) }));
-    return modalDiv ? react_dom_1.default.createPortal(Component, modalDiv) : null;
-});

package/_dist/tooltip/index.js

@@ -1,206 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-exports.Tooltip = (0, react_1.memo)(function MemoFunction({ children, title, position = "top", arrow = false, distance = 5, ...other }) {
-    (0, react_1.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_1.default.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; }
-}
-`;