@legion-ui-kit/react-core
Version:
To install the package into your project:
4 lines (3 loc) • 2.01 kB
JavaScript
"use client";
import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useRef as r,useState as i,useMemo as n,cloneElement as s,useEffect as c}from"react";import{createPortal as p}from"react-dom";import l from"./DropdownDialogue.js";import h from"../../hooks/useMounted.js";import{getDropdownPosition as d}from"./Dropdown.helper.js";import{DROPDOWN_DEFAULT_PROPS as u,DROPDOWN_DEFAULT_OPEN_STATE as m,DROPDOWN_DEFAULT_STYLE as g,DROPDOWN_ANIMATION_DURATION as a,DROPDOWN_ANIMATION_DELAY as f,DROPDOWN_PADDING_OPEN as w,DROPDOWN_PADDING_CLOSE as k}from"./Dropdown.constant.js";const O=O=>{const{children:j,className:v,position:y=u.position,ref:D,style:C,trigger:L,...S}=O,T=r(null),E=D||T,b=r(null),x=h(),[B,H]=i(m),[N,R]=i(g),{isOpen:W,isShow:M}=B,{height:$,left:q,top:z}=N,A=W?$:0,F=W?w:k,G=n(()=>s(L,{...L.props,ref:b,onClick:t=>{L.props.onClick?.(t),H(W?{...B,isOpen:!1}:t=>({...t,isShow:!0}))},style:{...L.props.style,cursor:"pointer"}}),[B.isOpen]);return c(()=>{H({isOpen:!1,isShow:!1})},[]),c(()=>{if(b&&b?.current&&E&&E?.current){const t=b?.current.getBoundingClientRect(),e=E?.current.getBoundingClientRect();if(0!==e.height&&0!==e.width){const{top:o,left:r}=d({position:y,triggerHeight:t.height||0,triggerWidth:t.width||0,triggerTop:t.top||0,triggerLeft:t.left||0,dropdownHeight:e.height||0,dropdownWidth:e.width||0});R({top:o,left:r,height:e.height})}}},[y]),c(()=>{const t=t=>{const e=t.target;b?.current&&!b?.current.contains(e)&&E?.current&&!E?.current.contains(e)&&H({...B,isOpen:!1})},e=setTimeout(()=>{H(t=>({...t,isShow:!1}))},a+f);return W?(clearTimeout(e),document.addEventListener("click",t)):document.removeEventListener("click",t),()=>{clearTimeout(e),document.removeEventListener("click",t)}},[W]),c(()=>{M&&H(t=>({...t,isOpen:!0}))},[M]),t(e,{children:[x&&p(M&&o(l,{ref:E,className:v,style:{...C,height:A,left:q,padding:F,position:"absolute",top:z,transitionDuration:`${a}ms`},...S,children:j}),document.body),G]})};export{O as default};
//# sourceMappingURL=Dropdown.js.map