UNPKG

@legion-ui-kit/react-core

Version:

To install the package into your project:

4 lines (3 loc) 2.08 kB
"use client"; "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),i=require("./DropdownDialogue.cjs"),o=require("../../hooks/useMounted.cjs"),n=require("./Dropdown.helper.cjs"),s=require("./Dropdown.constant.cjs");exports.default=c=>{const{children:u,className:l,position:d=s.DROPDOWN_DEFAULT_PROPS.position,ref:p,style:D,trigger:O,...h}=c,a=t.useRef(null),g=p||a,f=t.useRef(null),N=o.default(),[_,m]=t.useState(s.DROPDOWN_DEFAULT_OPEN_STATE),[E,P]=t.useState(s.DROPDOWN_DEFAULT_STYLE),{isOpen:A,isShow:R}=_,{height:T,left:w,top:I}=E,L=A?T:0,S=A?s.DROPDOWN_PADDING_OPEN:s.DROPDOWN_PADDING_CLOSE,W=t.useMemo(()=>t.cloneElement(O,{...O.props,ref:f,onClick:e=>{O.props.onClick?.(e),m(A?{..._,isOpen:!1}:e=>({...e,isShow:!0}))},style:{...O.props.style,cursor:"pointer"}}),[_.isOpen]);return t.useEffect(()=>{m({isOpen:!1,isShow:!1})},[]),t.useEffect(()=>{if(f&&f?.current&&g&&g?.current){const e=f?.current.getBoundingClientRect(),t=g?.current.getBoundingClientRect();if(0!==t.height&&0!==t.width){const{top:r,left:i}=n.getDropdownPosition({position:d,triggerHeight:e.height||0,triggerWidth:e.width||0,triggerTop:e.top||0,triggerLeft:e.left||0,dropdownHeight:t.height||0,dropdownWidth:t.width||0});P({top:r,left:i,height:t.height})}}},[d]),t.useEffect(()=>{const e=e=>{const t=e.target;f?.current&&!f?.current.contains(t)&&g?.current&&!g?.current.contains(t)&&m({..._,isOpen:!1})},t=setTimeout(()=>{m(e=>({...e,isShow:!1}))},s.DROPDOWN_ANIMATION_DURATION+s.DROPDOWN_ANIMATION_DELAY);return A?(clearTimeout(t),document.addEventListener("click",e)):document.removeEventListener("click",e),()=>{clearTimeout(t),document.removeEventListener("click",e)}},[A]),t.useEffect(()=>{R&&m(e=>({...e,isOpen:!0}))},[R]),e.jsxs(e.Fragment,{children:[N&&r.createPortal(R&&e.jsx(i.default,{ref:g,className:l,style:{...D,height:L,left:w,padding:S,position:"absolute",top:I,transitionDuration:`${s.DROPDOWN_ANIMATION_DURATION}ms`},...h,children:u}),document.body),W]})}; //# sourceMappingURL=Dropdown.cjs.map