@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.68 kB
JavaScript
"use client";
import{jsxs as t,Fragment as o,jsx as e}from"react/jsx-runtime";import{useRef as r,useState as n,cloneElement as i,useEffect as s}from"react";import{createPortal as l}from"react-dom";import p from"classnames";import u from"./styles.module.scss.js";import m from"./TooltipDialogue.js";import c from"../../hooks/useMounted.js";import{getTooltipPosition as a}from"./Tooltip.helper.js";import{TOOLTIP_DEFAULT_PROPS as f,TOOLTIP_DEFAULT_OPEN_STATE as h,TOOLTIP_DEFAULT_STYLE as d,TOOLTIP_ANIMATION_DURATION as g,TOOLTIP_ANIMATION_DELAY as w}from"./Tooltip.constant.js";const j=j=>{const{children:T,className:M,content:y,noArrow:L,position:O=f.position,ref:S,style:v,...x}=j,A=r(null),B=S||A,C=r(null),D=r(null),E=c(),[H,N]=n(h),[R,W]=n(d),{isOpen:b,isShow:k}=H,$=p(u.legion_tooltip,M,{[u.open]:b}),_=i(T,{...T.props,ref:C,onMouseEnter:t=>{T.props.onMouseEnter?.(t),N(t=>({...t,isShow:!0}))},onMouseLeave:t=>{T.props.onMouseLeave?.(t),N(t=>({...t,isOpen:!1}))}});return s(()=>{if(k){const t=C?.current.getBoundingClientRect(),o=B?.current.getBoundingClientRect(),{top:e,left:r}=a({position:O,targetHeight:t?.height||0,targetWidth:t?.width||0,targetTop:t?.top||0,targetLeft:t?.left||0,tooltipHeight:o?.height||0,tooltipWidth:o?.width||0});W(t=>({...t,top:e,left:r})),N(t=>({...t,isOpen:!0}))}},[C,B,O,k]),s(()=>(b||(D.current=window.setTimeout(()=>{N(t=>({...t,isShow:!1})),D.current=null},g+w)),()=>{null!==D.current&&(clearTimeout(D.current),D.current=null)}),[b]),t(o,{children:[E&&l(k&&e(m,{ref:B,className:$,position:O,noArrow:L,style:{...v,...R,transitionDuration:`${g}ms`},...x,children:y}),document.body),_]})};export{j as default};
//# sourceMappingURL=Tooltip.js.map