UNPKG

@legion-ui-kit/react-core

Version:

<div align="center"> <img height="108" width="116" src="https://legion.digitaltelkom.id/favicon.svg?v=4643a71fb65fa61a5f2b266b769ea7b1" /> <h1 align="center">Legion UI Kit - React Core</h1> </div>

4 lines (3 loc) 1.83 kB
"use client"; "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("react-dom"),r=require("classnames"),n=require("./styles.module.scss.cjs"),s=require("./TooltipDialogue.cjs"),i=require("../../hooks/useMounted.cjs"),u=require("./Tooltip.helper.cjs"),l=require("./Tooltip.constant.cjs");function c(e){return e&&e.__esModule?e:{default:e}}var a=c(r);exports.default=r=>{const{children:c,className:T,content:p,noArrow:d,position:f=l.TOOLTIP_DEFAULT_PROPS.position,ref:O,style:h,..._}=r,g=t.useRef(null),A=O||g,I=t.useRef(null),L=t.useRef(null),m=i.default(),[E,P]=t.useState(l.TOOLTIP_DEFAULT_OPEN_STATE),[N,M]=t.useState(l.TOOLTIP_DEFAULT_STYLE),{isOpen:j,isShow:q}=E,w=a.default(n.default.legion_tooltip,T,{[n.default.open]:j}),D=t.cloneElement(c,{...c.props,ref:I,onMouseEnter:e=>{c.props.onMouseEnter?.(e),P(e=>({...e,isShow:!0}))},onMouseLeave:e=>{c.props.onMouseLeave?.(e),P(e=>({...e,isOpen:!1}))}});return t.useEffect(()=>{if(q){const e=I?.current.getBoundingClientRect(),t=A?.current.getBoundingClientRect(),{top:o,left:r}=u.getTooltipPosition({position:f,targetHeight:e?.height||0,targetWidth:e?.width||0,targetTop:e?.top||0,targetLeft:e?.left||0,tooltipHeight:t?.height||0,tooltipWidth:t?.width||0});M(e=>({...e,top:o,left:r})),P(e=>({...e,isOpen:!0}))}},[I,A,f,q]),t.useEffect(()=>(j||(L.current=window.setTimeout(()=>{P(e=>({...e,isShow:!1})),L.current=null},l.TOOLTIP_ANIMATION_DURATION+l.TOOLTIP_ANIMATION_DELAY)),()=>{null!==L.current&&(clearTimeout(L.current),L.current=null)}),[j]),e.jsxs(e.Fragment,{children:[m&&o.createPortal(q&&e.jsx(s.default,{ref:A,className:w,position:f,noArrow:d,style:{...h,...N,transitionDuration:`${l.TOOLTIP_ANIMATION_DURATION}ms`},..._,children:p}),document.body),D]})}; //# sourceMappingURL=Tooltip.cjs.map