se-design 0.0.126 → 0.0.127
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7,7 +7,7 @@ export interface TooltipProps {
|
|
|
7
7
|
/**
|
|
8
8
|
* Tooltip position
|
|
9
9
|
*/
|
|
10
|
-
position?:
|
|
10
|
+
position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
|
|
11
11
|
/**
|
|
12
12
|
* Display tooltip on Hover, Click or Always
|
|
13
13
|
*/
|
package/dist/index14.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import r, { useState as
|
|
1
|
+
import r, { useState as p, useRef as d, useEffect as a } from "react";
|
|
2
2
|
const u = ({
|
|
3
3
|
content: l,
|
|
4
4
|
tooltipSrc: c,
|
|
5
5
|
position: t = "bottom-center",
|
|
6
6
|
displayOn: o = "hover"
|
|
7
7
|
}) => {
|
|
8
|
-
const [i, f] =
|
|
8
|
+
const [i, f] = p(o === "always-on"), s = d(null);
|
|
9
9
|
a(() => {
|
|
10
10
|
const e = s.current;
|
|
11
11
|
e && (t == "bottom-center" ? (e.setAttribute("style", "left: 50%;transform: translateX(-50%);"), e.classList.add("before:left-[calc(50%-7px)]"), e.classList.add("before:top-[-7px]")) : t == "bottom-left" ? (e.classList.add("before:left-[calc(10%-7px)]"), e.classList.add("before:top-[-7px]")) : t == "bottom-right" ? (e.setAttribute("style", "right: 0;"), e.classList.add("before:right-[calc(10%+7px)]"), e.classList.add("before:top-[-7px]")) : t == "left" ? (e.setAttribute("style", "right: calc(100% + 10px);top:0;"), e.classList.add("before:right-[-6px]"), e.classList.add("before:top-0px")) : t == "right" && (e.setAttribute("style", "left: calc(100% + 10px);top:0;"), e.classList.add("before:left-[-6px]"), e.classList.add("before:top-0px")), o == "hover" && e.classList.add("group-hover:visible"));
|
|
@@ -13,19 +13,19 @@ const u = ({
|
|
|
13
13
|
const e = s.current;
|
|
14
14
|
e && (i ? e.classList.remove("invisible") : e.classList.add("invisible"));
|
|
15
15
|
}, [i]);
|
|
16
|
-
const
|
|
16
|
+
const b = () => {
|
|
17
17
|
o == "click" && f((e) => !e);
|
|
18
18
|
};
|
|
19
19
|
return /* @__PURE__ */ r.createElement("div", {
|
|
20
20
|
className: "se-design-tooltip group relative",
|
|
21
|
-
onClick:
|
|
21
|
+
onClick: b
|
|
22
22
|
}, /* @__PURE__ */ r.createElement("div", {
|
|
23
23
|
className: "cursor-pointer",
|
|
24
24
|
id: "tooltip-trigger"
|
|
25
25
|
}, c), /* @__PURE__ */ r.createElement("div", {
|
|
26
26
|
ref: s,
|
|
27
27
|
id: "tooltip-content",
|
|
28
|
-
className: "flex justify-center px-3 py-2 min-w-24 max-w-60 absolute top-[calc(100%+8px)] w-max bg-[var(--color-gray-800)] text-[var(--color-white)] text-
|
|
28
|
+
className: "flex justify-center px-3 py-2 min-w-24 max-w-60 absolute top-[calc(100%+8px)] w-max bg-[var(--color-gray-800)] text-[var(--color-white)] text-base rounded-[3px] before:content-[' '] before:w-3.5 before:h-3.5 before:bg-[var(--color-gray-800)] before:inline-block before:absolute before:rounded-tl-sm before:rotate-45"
|
|
29
29
|
}, l));
|
|
30
30
|
};
|
|
31
31
|
export {
|
package/dist/index14.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index14.js","sources":["../src/components/Tooltip/index.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from
|
|
1
|
+
{"version":3,"file":"index14.js","sources":["../src/components/Tooltip/index.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nexport interface TooltipProps {\n /**\n * Tooltip contents\n */\n content: string;\n /**\n * Tooltip position\n */\n position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left' | 'right';\n /**\n * Display tooltip on Hover, Click or Always\n */\n displayOn?: 'hover' | 'click' | 'always-on';\n /**\n * Tooltip trigger contents\n */\n tooltipSrc?: React.ReactNode;\n}\n\nexport const Tooltip = ({ content, tooltipSrc, position = 'bottom-center', displayOn = 'hover' }: TooltipProps) => {\n const [displayTooltip, setDisplayTooltip] = useState(displayOn === 'always-on');\n const tooltipContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const tooltipContent = tooltipContentRef.current;\n\n if (!tooltipContent) {\n return;\n }\n\n if (position == 'bottom-center') {\n tooltipContent.setAttribute('style', `left: 50%;transform: translateX(-50%);`);\n tooltipContent.classList.add(`before:left-[calc(50%-7px)]`);\n tooltipContent.classList.add(`before:top-[-7px]`);\n } else if (position == 'bottom-left') {\n tooltipContent.classList.add(`before:left-[calc(10%-7px)]`);\n tooltipContent.classList.add(`before:top-[-7px]`);\n } else if (position == 'bottom-right') {\n tooltipContent.setAttribute('style', `right: 0;`);\n tooltipContent.classList.add(`before:right-[calc(10%+7px)]`);\n tooltipContent.classList.add(`before:top-[-7px]`);\n } else if (position == 'left') {\n tooltipContent.setAttribute('style', `right: calc(100% + 10px);top:0;`);\n tooltipContent.classList.add(`before:right-[-6px]`);\n tooltipContent.classList.add(`before:top-0px`);\n } else if (position == 'right') {\n tooltipContent.setAttribute('style', `left: calc(100% + 10px);top:0;`);\n tooltipContent.classList.add(`before:left-[-6px]`);\n tooltipContent.classList.add(`before:top-0px`);\n }\n\n if (displayOn == 'hover') {\n tooltipContent.classList.add(`group-hover:visible`);\n }\n }, [content]);\n\n useEffect(() => {\n const tooltipContent = tooltipContentRef.current;\n\n if (!tooltipContent) {\n return;\n }\n if (displayTooltip) {\n tooltipContent.classList.remove(`invisible`);\n } else {\n tooltipContent.classList.add(`invisible`);\n }\n }, [displayTooltip]);\n\n const onTooltipSrcClick = () => {\n if (displayOn == 'click') {\n setDisplayTooltip((displayTooltip) => !displayTooltip);\n }\n };\n\n return (\n <div className=\"se-design-tooltip group relative\" onClick={onTooltipSrcClick}>\n <div className=\"cursor-pointer\" id=\"tooltip-trigger\">\n {tooltipSrc}\n </div>\n <div\n ref={tooltipContentRef}\n id=\"tooltip-content\"\n className=\"flex justify-center px-3 py-2 min-w-24 max-w-60\n absolute top-[calc(100%+8px)] w-max bg-[var(--color-gray-800)] text-[var(--color-white)] text-base rounded-[3px]\n before:content-[' '] before:w-3.5 before:h-3.5 before:bg-[var(--color-gray-800)] before:inline-block\n before:absolute before:rounded-tl-sm before:rotate-45\"\n >\n {content}\n </div>\n </div>\n );\n};\n"],"names":["Tooltip","content","tooltipSrc","position","displayOn","displayTooltip","setDisplayTooltip","useState","tooltipContentRef","useRef","useEffect","tooltipContent","current","setAttribute","classList","add","remove","onTooltipSrcClick","React","createElement","className","onClick","id","ref"],"mappings":";AAqBO,MAAMA,IAAUA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,YAAAA;AAAAA,EAAYC,UAAAA,IAAW;AAAA,EAAiBC,WAAAA,IAAY;AAAsB,MAAM;AACjH,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAASH,MAAc,WAAW,GACxEI,IAAoBC,EAAuB,IAAI;AAErDC,EAAAA,EAAU,MAAM;AACd,UAAMC,IAAiBH,EAAkBI;AAEzC,IAAKD,MAIDR,KAAY,mBACCU,EAAAA,aAAa,SAAS,wCAAwC,GAC9DC,EAAAA,UAAUC,IAAI,6BAA6B,GAC3CD,EAAAA,UAAUC,IAAI,mBAAmB,KACvCZ,KAAY,iBACNW,EAAAA,UAAUC,IAAI,6BAA6B,GAC3CD,EAAAA,UAAUC,IAAI,mBAAmB,KACvCZ,KAAY,kBACNU,EAAAA,aAAa,SAAS,WAAW,GACjCC,EAAAA,UAAUC,IAAI,8BAA8B,GAC5CD,EAAAA,UAAUC,IAAI,mBAAmB,KACvCZ,KAAY,UACNU,EAAAA,aAAa,SAAS,iCAAiC,GACvDC,EAAAA,UAAUC,IAAI,qBAAqB,GACnCD,EAAAA,UAAUC,IAAI,gBAAgB,KACpCZ,KAAY,YACNU,EAAAA,aAAa,SAAS,gCAAgC,GACtDC,EAAAA,UAAUC,IAAI,oBAAoB,GAClCD,EAAAA,UAAUC,IAAI,gBAAgB,IAG3CX,KAAa,WACAU,EAAAA,UAAUC,IAAI,qBAAqB;AAAA,EACpD,GACC,CAACd,CAAO,CAAC,GAEZS,EAAU,MAAM;AACd,UAAMC,IAAiBH,EAAkBI;AAEzC,IAAKD,MAGDN,IACaS,EAAAA,UAAUE,OAAO,WAAW,IAE5BF,EAAAA,UAAUC,IAAI,WAAW;AAAA,EAC1C,GACC,CAACV,CAAc,CAAC;AAEnB,QAAMY,IAAoBA,MAAM;AAC9B,IAAIb,KAAa,WACIC,EAAAA,CAAAA,MAAmB,CAACA,CAAc;AAAA,EAEzD;AAGEa,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAmCC,SAASJ;AAAAA,EAAAA,GACzDE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAiBE,IAAG;AAAA,EAChCpB,GAAAA,CACE,GACLgB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEI,KAAKf;AAAAA,IACLc,IAAG;AAAA,IACHF,WAAU;AAAA,EAG8C,GAEvDnB,CACE,CACF;AAET;"}
|