@sydsoft/base 1.4.0 → 1.6.0

package/dist/esm/tooltip/index.js

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

package/package.json

@@ -1,18 +1,19 @@
 {
     "name": "@sydsoft/base",
     "private": false,
-    "version": "1.4.0",
+    "version": "1.6.0",
     "description": "",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
     "types": "./dist/esm/index.d.ts",
     "files": [
-        "./dist/"
+        "./dist/",
+        "README.md"
     ],
     "scripts": {
         "test": "npm run build && npm pack",
-        "copyCSS": "copyfiles -u 2 \"../@base/**/*.css\" dist/esm",
-        "build": "rm -rf ./dist && tsc && npm run copyCSS",
+        "copyFiles": "copyfiles -u 2 \"../@base/**/*.css\" dist/esm",
+        "build": "rm -rf ./dist && tsc && npm run copyFiles",
         "publishNPM": "npm run build && npm version patch && npm version minor && npm publish --dry-run && npm publish --access public"
     },
     "publishConfig": {