md-editor-rt
Version:
Markdown editor for react, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
2 lines (1 loc) • 1.93 kB
JavaScript
;const u=require("react/jsx-runtime"),r=require("react"),E=require("./config.cjs"),x=`${E.prefix}-dropdown-hidden`,T=s=>{const{relative:f="html",onChange:c,disabled:n}=s,[H,v]=r.useState({overlayClass:x,overlayStyle:{}}),o=r.useRef({triggerHover:!1,overlayHover:!1}),a=r.useRef(null),d=r.useRef(null),g=r.useCallback(()=>{if(n)return!1;o.current.triggerHover=!0;const e=a.current,t=d.current;if(!e||!t)return;const C=e.getBoundingClientRect(),p=e.offsetTop,W=e.offsetLeft,k=C.height,q=C.width,w=e.getRootNode(),h=w.querySelector(f)?.scrollLeft||0,S=w.querySelector(f)?.clientWidth||0;let i=W-t.offsetWidth/2+q/2-h;i+t.offsetWidth>h+S&&(i=h+S-t.offsetWidth),i<0&&(i=0),v(N=>({...N,overlayStyle:{insetBlockStart:p+k+"px",insetInlineStart:i+"px"}})),c(!0)},[n,c,f]),y=r.useCallback(()=>{if(n)return!1;o.current.overlayHover=!0},[n]),L=r.useRef(-1),l=r.useCallback(e=>{if(n)return!1;a.current?.contains(e.target)?o.current.triggerHover=!1:o.current.overlayHover=!1,clearTimeout(L.current),L.current=window.setTimeout(()=>{!o.current.overlayHover&&!o.current.triggerHover&&c(!1)},10)},[n,c]),R=s.children,m=s.overlay,D=r.cloneElement(R,{ref:a,key:"cloned-dropdown-trigger"});r.useEffect(()=>{s.visible?v(e=>({...e,overlayClass:""})):v(e=>({...e,overlayClass:x}))},[s.visible]),r.useEffect(()=>{const e=a.current,t=d.current;return e?.addEventListener("mouseenter",g),e?.addEventListener("mouseleave",l),t?.addEventListener("mouseenter",y),t?.addEventListener("mouseleave",l),()=>{e?.removeEventListener("mouseenter",g),e?.removeEventListener("mouseleave",l),t?.removeEventListener("mouseenter",y),t?.removeEventListener("mouseleave",l)}},[l,y,g]);const b=u.jsx("div",{className:`${E.prefix}-dropdown ${H.overlayClass}`,style:H.overlayStyle,ref:d,children:u.jsx("div",{className:`${E.prefix}-dropdown-overlay`,children:m instanceof Array?m[0]:m})});return u.jsxs(u.Fragment,{children:[D,b]})},j=r.memo(T);exports.Dropdown=j;