@liberfi.io/ui-scaffold 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var react=require('react'),reactDom=require('react-dom'),hooks=require('@liberfi.io/hooks'),i18n=require('@liberfi.io/i18n'),ui=require('@liberfi.io/ui'),utils=require('@liberfi.io/utils'),jsxRuntime=require('react/jsx-runtime');var se=ui.atomFamily(e=>ui.atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Le=ui.atomFamily(e=>ui.atomWithStorage(`panelWidth.${e??"default"}`,596,void 0,{getOnInit:true})),Ce=ui.atomFamily(e=>ui.atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),Te=ui.atomFamily(e=>ui.atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),pt=ui.atomFamily(e=>ui.atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),He=ui.atomFamily(e=>ui.atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),ke=ui.atomFamily(e=>ui.atomWithStorage(`modalSize.${e??"default"}`,{width:596,height:312},void 0,{getOnInit:true})),Xe=ui.atomFamily(e=>ui.atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:596,height:312},void 0,{getOnInit:true})),_e=ui.atomFamily(e=>ui.atomWithStorage(`modalPosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-596)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-312)/2):0},void 0,{getOnInit:true})),$e=ui.atomFamily(e=>ui.atomWithStorage(`modalRestorePosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-596)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-312)/2):0},void 0,{getOnInit:true})),Ae=ui.atomFamily(e=>ui.atomWithStorage(`modalMinimized.${e??"default"}`,false,void 0,{getOnInit:true})),Ye=ui.atomFamily(e=>ui.atomWithStorage(`modalMinWidth.${e??"default"}`,200,void 0,{getOnInit:true})),Be=ui.atomFamily(e=>ui.atomWithStorage(`modalMaxWidth.${e??"default"}`,typeof window<"u"?window.innerWidth-40:0,void 0,{getOnInit:true})),he=ui.atomFamily(e=>ui.atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),Ve=ui.atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function ge(e){let[o,l]=ui.useAtom(pt(e)),[x,r]=ui.useAtom(Ae(e)),z=ui.useAtomValue(Xe(e)),w=ui.useAtomValue($e(e)),t=ui.useSetAtom(ke(e)),i=ui.useSetAtom(_e(e)),R=ui.useSetAtom(He(e)),O=ui.useSetAtom(he(e)),D=react.useCallback((H={})=>{let{shouldStartDragging:K,position:Q,size:le}=H;Q&&i(_=>({..._,...Q})),le&&t(_=>({..._,...le})),R(K??false),l(true),O("modal");},[l,i,t,R]),S=react.useCallback(()=>{l(false),x&&(t({...z}),i({...w}),r(false));},[x,z,w,r,l,t,i]);return react.useMemo(()=>({isOpen:o,onOpen:D,onClose:S}),[o,D,S])}function fe(e){let[o,l]=ui.useAtom(se(e)),x=ui.useSetAtom(Le(e)),r=ui.useSetAtom(he(e)),z=ui.useSetAtom(Ve),w=react.useCallback((O={})=>{let D=O.position??"left";x(O.width??320),l(D),r(D),z(({left:S,right:H})=>D==="left"?{left:{...S,[e]:Date.now()},right:H}:{left:S,right:{...H,[e]:Date.now()}});},[e,l,x]),t=react.useCallback(()=>{l("none");},[l]),i=react.useMemo(()=>o!=="none",[o]),R=react.useMemo(()=>o!=="none"?o:void 0,[o]);return react.useMemo(()=>({isOpen:i,position:R,onOpen:w,onClose:t}),[i,w,t])}var sn={width:200,height:48},Ne={width:typeof window<"u"?window.innerWidth-40:0,height:typeof window<"u"?window.innerHeight-40:0},an={x:20,y:20},zt=react.memo(function({id:o,title:l,minWidth:x=504,maxWidth:r=Ne.width,minHeight:z=200,maxHeight:w=Ne.height,leftSidebar:t,leftSidebarWidth:i=200,rightSidebar:R,rightSidebarWidth:O=200,aspectRatio:D,showHeader:S=true,header:H,headerHeight:K=44,children:Q}){let{t:le}=i18n.useTranslation(),{isOpen:_,onClose:Ie}=ge(o),{onOpen:Je}=fe(o),[C,$]=ui.useAtom(Ae(o)),[d,qe]=ui.useAtom(_e(o)),[u,Ge]=ui.useAtom(ke(o)),[de,ue]=ui.useAtom(Xe(o)),[ee,te]=ui.useAtom($e(o)),[Me,ve]=ui.useAtom(He(o)),[W,ne]=react.useState(Me),[ze,c]=react.useState(false),[P,Z]=react.useState(null),[oe,j]=react.useState(null),[ie,N]=react.useState(null),[ce,J]=react.useState(null),A=react.useRef(null),Nt=ui.useAtomValue(Ce(o)),It=ui.useAtomValue(Te(o)),Y=hooks.useValueRef(d),h=hooks.useCallbackRef(qe),re=hooks.useValueRef(u),I=hooks.useCallbackRef(Ge),Et=hooks.useValueRef(i),Ft=hooks.useValueRef(!!t),Lt=hooks.useValueRef(O),Ct=hooks.useValueRef(!!R),k=hooks.useValueRef(D),B=hooks.useValueRef(K),Re=hooks.useValueRef(x),De=hooks.useValueRef(r),We=hooks.useValueRef(z),Pe=hooks.useValueRef(w),Tt=hooks.useValueRef(W),lt=hooks.useValueRef(oe),Ke=hooks.useValueRef(ce),Ht=hooks.useCallbackRef(Ie),kt=hooks.useCallbackRef(Je),Xt=hooks.useValueRef(Nt),_t=hooks.useValueRef(It),Oe=react.useMemo(()=>u.width===Ne.width&&u.height===Ne.height,[u.width,u.height]);react.useEffect(()=>{(d.x<0||d.y<0)&&h({x:Math.max(0,d.x),y:Math.max(0,d.y)});let n=d.x+u.width,E=d.y+u.height;(n>window.innerWidth||E>window.innerHeight)&&h({x:Math.min(d.x,Math.max(0,window.innerWidth-u.width)),y:Math.min(d.y,Math.max(0,window.innerHeight-u.height))});},[o]),react.useEffect(()=>{if(_&&Me){ne(true);let n=q=>{h({x:q.clientX-u.width/2,y:q.clientY-20});},E=()=>{ne(false),ve(false),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",E);};return document.addEventListener("mousemove",n),document.addEventListener("mouseup",E),document.body.style.cursor="grabbing",()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",E),document.body.style.cursor="";}}},[_,Me,ve,u.width]);let X=(n,E,q)=>{ve(false),ne(false),c(false),Z(null),E==="drag"?ne(true):E==="resize"&&(Z(q||null),c(true));let dt=n.clientX,ut=n.clientY,F=re.current.width,T=re.current.height,L={...Y.current},ct=()=>{document.removeEventListener("mousemove",mt),document.removeEventListener("mouseup",ht),document.body.style.cursor="",ne(false),c(false),Z(null),j(null),A.current&&(clearTimeout(A.current),A.current=null),J(null),N(null);},mt=Ee=>{if(E==="drag"){let V=Ee.clientX-dt,U=Ee.clientY-ut,g=L.x+V,a=L.y+U,me=Ft.current?Et.current:0,Se=12+me,y=Ct.current?Lt.current:0,f=window.innerWidth-12-F-y,Fe=window.innerHeight-12-44,p=g<=Se?"left":g>=f?"right":null;p!==lt.current&&j(p),A.current&&p&&N(p),A.current&&(Ke.current==="left"&&(g>Se||p!=="left")||Ke.current==="right"&&(g<f||p!=="right"))&&(clearTimeout(A.current),A.current=null,J(null),N(null)),!A.current&&p&&Ke.current!==p&&(J(p),N(p),A.current=setTimeout(()=>{Tt.current&<.current===p?(ct(),Ht(),kt({position:p,width:Math.min(Math.max(re.current.width,Xt.current),_t.current)})):J(null);},350)),g=Math.min(Math.max(g,12+me),f),a=Math.min(Math.max(a,12),Fe),h({x:g,y:a});}else if(E==="resize"&&q){let V=Ee.clientX-dt,U=Ee.clientY-ut,g=(a,me,Se)=>{let y=Math.min(Math.max(a,Re.current),De.current),f=Math.min(Math.max(me,We.current),Pe.current);if(k.current){if(Se==="width")f=Math.min(Math.max(a/k.current+B.current,We.current),Pe.current),y=(f-B.current)*k.current;else if(Se==="height")y=Math.min(Math.max((me-B.current)*k.current,Re.current),De.current),f=y/k.current+B.current;else {let Fe=a/k.current+B.current,p=(me-B.current)*k.current,gt=Math.abs(V),ft=Math.abs(U);if(gt>1.1*ft)f=Math.min(Math.max(Fe,We.current),Pe.current),y=(f-B.current)*k.current;else if(ft>1.1*gt)y=Math.min(Math.max(p,Re.current),De.current),f=y/k.current+B.current;else {let Yt=(f+Fe)/2;y=Math.min(Math.max((y+p)/2,Re.current),De.current),f=Math.min(Math.max(Yt,We.current),Pe.current),y=(f-B.current)*k.current;}}y=Math.min(Math.max(y,Re.current),De.current),f=Math.min(Math.max(f,We.current),Pe.current);}return {width:y,height:f}};switch(q){case "topLeft":{let a=g(F-V,T-U,"both");I(a),h({x:L.x+(F-a.width),y:L.y+(T-a.height)});break}case "topRight":{let a=g(F+V,T-U,"both");I(a),h({x:L.x,y:L.y+(T-a.height)});break}case "bottomLeft":{let a=g(F-V,T+U,"both");I(a),h({x:L.x+(F-a.width),y:L.y});break}case "bottomRight":{I(g(F+V,T+U,"both"));break}case "top":{let a=g(F,T-U,"height");I(a),h({x:L.x,y:L.y+(T-a.height)});break}case "bottom":{I(g(F,T+U,"height"));break}case "left":{let a=g(F-V,T,"width");I(a),h({x:L.x+(F-a.width),y:L.y});break}case "right":{I(g(F+V,T,"width"));break}}}},ht=()=>{(d.x<0||d.y<0)&&h({x:Math.max(0,d.x),y:Math.max(0,d.y)}),ct();};document.addEventListener("mousemove",mt),document.addEventListener("mouseup",ht);},$t=react.useCallback(()=>{C?(I({...de}),h({...ee}),$(false)):(Oe?h({...ee}):(ue({...u}),te({...d})),I({...sn}),$(true));},[C,Oe,u,d,de,ee,$,ue,te]),At=react.useCallback(()=>{Oe?(I({...de}),h({...ee})):(C?$(false):(ue({...u}),te({...d})),I({...Ne}),h({...an}));},[Oe,C,u,d,de,ee,$,ue,te]);return react.useEffect(()=>{let n=utils.throttle(()=>{(Y.current.x<0||Y.current.y<0)&&h({x:Math.max(0,Y.current.x),y:Math.max(0,Y.current.y)});let E=Y.current.x+re.current.width,q=Y.current.y+re.current.height;(E>window.innerWidth||q>window.innerHeight)&&h({x:Math.min(Y.current.x,Math.max(0,window.innerWidth-re.current.width)),y:Math.min(Y.current.y,Math.max(0,window.innerHeight-re.current.height))});},100);return window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n);}},[]),_?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[(W||ze)&&reactDom.createPortal(jsxRuntime.jsx("div",{className:ui.clsx("max-lg:hidden fixed inset-0 z-9999 bg-transparent w-full h-full select-none",W&&(ce?"cursor-grabbing":"cursor-move"),!W&&{"cursor-ns-resize":P==="top"||P==="bottom","cursor-ew-resize":P==="left"||P==="right","cursor-nwse-resize":P==="topLeft"||P==="bottomRight","cursor-nesw-resize":P==="topRight"||P==="bottomLeft","cursor-auto":P===null})}),document.body),jsxRuntime.jsx("div",{className:ui.clsx("max-lg:hidden fixed z-50 left-0 top-0",W?"will-change-transform":"will-change-auto",ze||W?"transition-none":"transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"),style:{transform:`translate(${Math.round(d.x-(t?i:0))}px, ${Math.round(d.y)}px)`},children:jsxRuntime.jsxs("div",{className:"flex relative z-50",children:[t&&jsxRuntime.jsx("div",{className:ui.clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",W?"opacity-40 translate-x-4":"opacity-100 translate-x-0"),style:{width:i,height:C?40:u.height-8},children:t}),jsxRuntime.jsx("div",{className:ui.clsx("z-50 relative bg-content2 border border-border rounded-lg overflow-hidden",W?"opacity-80 shadow-md scale-102 blur-[0.5px]":"opacity-100 shadow-lg scale-100 blur-none"),style:{width:u.width,height:u.height,transition:ze||W?"none":"transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-full",ie&&"animate-modal-shrink",ie==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!C&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:n=>X(n,"resize","topLeft")}),jsxRuntime.jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:n=>X(n,"resize","topRight")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:n=>X(n,"resize","bottomLeft")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:n=>X(n,"resize","bottomRight")}),jsxRuntime.jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:n=>X(n,"resize","top")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:n=>X(n,"resize","bottom")}),jsxRuntime.jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:n=>X(n,"resize","left")}),jsxRuntime.jsx("div",{className:"absolute right-0 top-3 bottom-3 w-1.5 cursor-e-resize z-20",onMouseDown:n=>X(n,"resize","right")})]}),S&&jsxRuntime.jsxs("div",{className:"relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:n=>X(n,"drag"),style:{height:K},children:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:le("scaffold.draggableModal.snapToEdge"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),H||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:n=>n.stopPropagation(),children:l}),jsxRuntime.jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:n=>n.stopPropagation(),children:[jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:$t,children:C?jsxRuntime.jsx(ui.RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui.MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:At,children:Oe?jsxRuntime.jsx(ui.UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui.MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Ie,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!C&&jsxRuntime.jsx("div",{className:S?"h-[calc(100%-44px)] overflow-hidden":"h-full overflow-hidden cursor-move",onMouseDown:S?void 0:n=>X(n,"drag"),children:Q})]})}),R&&jsxRuntime.jsx("div",{className:ui.clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",W?"opacity-40 -translate-x-4":"opacity-100 translate-x-0"),style:{width:O,height:C?40:u.height-8},children:R})]})})]}):null});function st({id:e,title:o,maxWidth:l=440,minWidth:x=320,position:r,showHeader:z=true,header:w,headerHeight:t=44,children:i}){let{t:R}=i18n.useTranslation(),O=ui.useAtomValue(se(e)),[D,S]=react.useState(false),[H,K]=react.useState(false),[Q,le]=ui.useAtom(Le(e)),{onOpen:_}=ge(e),{onClose:Ie}=fe(e),Je=ui.useAtomValue(Ye(e)),C=ui.useAtomValue(Be(e)),$=hooks.useValueRef(Q),d=hooks.useValueRef(l),qe=hooks.useValueRef(x),u=hooks.useValueRef(r),Ge=hooks.useValueRef(D),de=hooks.useValueRef(H),ue=hooks.useCallbackRef(le),ee=hooks.useCallbackRef(_),te=hooks.useCallbackRef(Ie),Me=hooks.useValueRef(Je),ve=hooks.useValueRef(C),W=c=>{c.preventDefault(),c.stopPropagation(),S(true),document.body.style.cursor="ew-resize",document.body.style.userSelect="none",document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.height="100%";let P=c.clientX,Z=$.current,oe=ie=>{if(!Ge.current)return;let N=ie.clientX-P,ce=u.current==="right"?Z-N:Z+N,J=Math.min(Math.max(ce,qe.current),d.current);ue(J);},j=()=>{S(false),document.body.style.cursor="",document.body.style.userSelect="",document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.height="",document.removeEventListener("mousemove",oe),document.removeEventListener("mouseup",j);};document.addEventListener("mousemove",oe),document.addEventListener("mouseup",j);},ne=c=>{if(c.target instanceof HTMLElement&&c.target.closest("button"))return;c.preventDefault(),K(true);let P=c.clientX,Z=c.clientY,oe=()=>{document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",ie),K(false);},j=N=>{if(!de.current)return;let ce=Math.abs(N.clientX-P),J=Math.abs(N.clientY-Z);(ce>10||J>10)&&(oe(),te(),ee({shouldStartDragging:true,position:{x:N.clientX-$.current/2+20,y:N.clientY-20},size:{width:Math.min(Math.max($.current,Me.current),ve.current)}}));},ie=()=>{oe();};document.addEventListener("mousemove",j),document.addEventListener("mouseup",ie);},ze=()=>{te();};return O!==r?null:jsxRuntime.jsxs("div",{className:"max-lg:hidden flex-none flex flex-row overflow-hidden",children:[r==="right"&&jsxRuntime.jsx(Dt,{isResizing:D,handleResizeStart:W}),jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col min-h-0 overflow-hidden bg-content2",H?"opacity-80 scale-98 blur-[1px]":"opacity-100 scale-100 blur-none"),style:{width:`${Q}px`,transition:D||H?"none":"transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:[z&&jsxRuntime.jsxs("div",{className:"flex-none relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:ne,style:{height:t},children:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:R("scaffold.draggablePanel.snapToModal"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),w||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:c=>c.stopPropagation(),children:o}),jsxRuntime.jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:c=>c.stopPropagation(),children:jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:ze,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsxRuntime.jsx("div",{className:"flex-auto min-h-0",children:i})]}),r==="left"&&jsxRuntime.jsx(Dt,{isResizing:D,handleResizeStart:W})]})}function Dt({isResizing:e,handleResizeStart:o}){return jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.jsxs("div",{className:"relative w-1 h-full cursor-ew-resize bg-content3/80 hover:bg-content3 transition-colors duration-150 ease-in-out group flex flex-col items-center justify-center gap-1",children:[jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("div",{className:"absolute inset-0 -left-1.5 -right-1.5 cursor-ew-resize",onMouseDown:o})]}),e&&jsxRuntime.jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function ro({contents:e=[],className:o,classNames:l,children:x}){let r=ui.useAtomValue(Ve);react.useEffect(()=>{let t=ui.getDefaultStore();e.forEach(i=>{t.set(Ce(i.id),i.panelMinWidth??320),t.set(Te(i.id),i.panelMaxWidth??440),t.set(Ye(i.id),i.modalMinWidth??504),t.set(Be(i.id),i.modalMaxWidth??window.innerWidth-40);});},[e]);let z=react.useMemo(()=>e.filter(t=>{let i=ui.getDefaultStore();return r.left[t.id]?i.get(se(t.id))==="left":false}).sort((t,i)=>r.left[i.id]-r.left[t.id]),[e,r.left]),w=react.useMemo(()=>e.filter(t=>{let i=ui.getDefaultStore();return r.right[t.id]?i.get(se(t.id))==="right":false}).sort((t,i)=>(r.right[t.id]??0)-(r.right[i.id]??0)),[e,r.right]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-full flex flex-row overflow-hidden",o,l?.root),children:[jsxRuntime.jsx("div",{className:ui.clsx("flex-none h-full flex flex-row",l?.left),children:z.map(t=>jsxRuntime.jsx(st,{...t,position:"left",minWidth:t.panelMinWidth??320,maxWidth:t.panelMaxWidth??440},`left-${t.id}`))}),jsxRuntime.jsx("div",{className:ui.clsx("flex-auto min-w-0 h-full",l?.content),children:x}),jsxRuntime.jsx("div",{className:ui.clsx("flex-none h-full flex flex-row",l?.right),children:w.map(t=>jsxRuntime.jsx(st,{...t,position:"right",minWidth:t.panelMinWidth??320,maxWidth:t.panelMaxWidth??440},`right-${t.id}`))})]}),e.map(t=>jsxRuntime.jsx(zt,{...t,minWidth:t.modalMinWidth??504,maxWidth:t.modalMaxWidth??window.innerWidth-40},`modal-${t.id}`))]})}function go(e){let{isOpen:o,onOpen:l,onClose:x}=ge(e),{isOpen:r,onOpen:z,onClose:w}=fe(e),t=ui.useAtomValue(he(e)),i=react.useCallback(()=>{o||r||(t==="modal"?l():z({position:t}));},[o,r,t,l,z]),R=react.useCallback(()=>{o?x():r&&w();},[o,r,x,w]),O=react.useMemo(()=>o||r,[o,r]);return react.useMemo(()=>({isOpen:O,onOpen:i,onClose:R}),[O,i,R])}typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-scaffold"]="0.1.0");var yn="0.1.0";exports.DraggableModal=zt;exports.DraggablePanel=st;exports.DraggablePanelProvider=ro;exports.useDraggableDisclosure=go;exports.useDraggableModalDisclosure=ge;exports.useDraggablePanelDisclosure=fe;exports.version=yn;//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';var react=require('react'),reactDom=require('react-dom'),hooks=require('@liberfi.io/hooks'),i18n=require('@liberfi.io/i18n'),ui=require('@liberfi.io/ui'),utils=require('@liberfi.io/utils'),jsxRuntime=require('react/jsx-runtime');var se=ui.atomFamily(e=>ui.atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Le=ui.atomFamily(e=>ui.atomWithStorage(`panelWidth.${e??"default"}`,596,void 0,{getOnInit:true})),Ce=ui.atomFamily(e=>ui.atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),Te=ui.atomFamily(e=>ui.atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),pt=ui.atomFamily(e=>ui.atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),He=ui.atomFamily(e=>ui.atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),ke=ui.atomFamily(e=>ui.atomWithStorage(`modalSize.${e??"default"}`,{width:596,height:312},void 0,{getOnInit:true})),Xe=ui.atomFamily(e=>ui.atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:596,height:312},void 0,{getOnInit:true})),_e=ui.atomFamily(e=>ui.atomWithStorage(`modalPosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-596)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-312)/2):0},void 0,{getOnInit:true})),$e=ui.atomFamily(e=>ui.atomWithStorage(`modalRestorePosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-596)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-312)/2):0},void 0,{getOnInit:true})),Ae=ui.atomFamily(e=>ui.atomWithStorage(`modalMinimized.${e??"default"}`,false,void 0,{getOnInit:true})),Ye=ui.atomFamily(e=>ui.atomWithStorage(`modalMinWidth.${e??"default"}`,200,void 0,{getOnInit:true})),Be=ui.atomFamily(e=>ui.atomWithStorage(`modalMaxWidth.${e??"default"}`,typeof window<"u"?window.innerWidth-40:0,void 0,{getOnInit:true})),he=ui.atomFamily(e=>ui.atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),Ve=ui.atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function ge(e){let[o,l]=ui.useAtom(pt(e)),[x,r]=ui.useAtom(Ae(e)),z=ui.useAtomValue(Xe(e)),w=ui.useAtomValue($e(e)),t=ui.useSetAtom(ke(e)),i=ui.useSetAtom(_e(e)),R=ui.useSetAtom(He(e)),O=ui.useSetAtom(he(e)),D=react.useCallback((H={})=>{let{shouldStartDragging:K,position:Q,size:le}=H;Q&&i(_=>({..._,...Q})),le&&t(_=>({..._,...le})),R(K??false),l(true),O("modal");},[l,i,t,R]),S=react.useCallback(()=>{l(false),x&&(t({...z}),i({...w}),r(false));},[x,z,w,r,l,t,i]);return react.useMemo(()=>({isOpen:o,onOpen:D,onClose:S}),[o,D,S])}function fe(e){let[o,l]=ui.useAtom(se(e)),x=ui.useSetAtom(Le(e)),r=ui.useSetAtom(he(e)),z=ui.useSetAtom(Ve),w=react.useCallback((O={})=>{let D=O.position??"left";x(O.width??320),l(D),r(D),z(({left:S,right:H})=>D==="left"?{left:{...S,[e]:Date.now()},right:H}:{left:S,right:{...H,[e]:Date.now()}});},[e,l,x]),t=react.useCallback(()=>{l("none");},[l]),i=react.useMemo(()=>o!=="none",[o]),R=react.useMemo(()=>o!=="none"?o:void 0,[o]);return react.useMemo(()=>({isOpen:i,position:R,onOpen:w,onClose:t}),[i,w,t])}var sn={width:200,height:48},Ne={width:typeof window<"u"?window.innerWidth-40:0,height:typeof window<"u"?window.innerHeight-40:0},an={x:20,y:20},zt=react.memo(function({id:o,title:l,minWidth:x=504,maxWidth:r=Ne.width,minHeight:z=200,maxHeight:w=Ne.height,leftSidebar:t,leftSidebarWidth:i=200,rightSidebar:R,rightSidebarWidth:O=200,aspectRatio:D,showHeader:S=true,header:H,headerHeight:K=44,children:Q}){let{t:le}=i18n.useTranslation(),{isOpen:_,onClose:Ie}=ge(o),{onOpen:Je}=fe(o),[C,$]=ui.useAtom(Ae(o)),[d,qe]=ui.useAtom(_e(o)),[u,Ge]=ui.useAtom(ke(o)),[de,ue]=ui.useAtom(Xe(o)),[ee,te]=ui.useAtom($e(o)),[Me,ve]=ui.useAtom(He(o)),[W,ne]=react.useState(Me),[ze,c]=react.useState(false),[P,Z]=react.useState(null),[oe,j]=react.useState(null),[ie,N]=react.useState(null),[ce,J]=react.useState(null),A=react.useRef(null),Nt=ui.useAtomValue(Ce(o)),It=ui.useAtomValue(Te(o)),Y=hooks.useValueRef(d),h=hooks.useCallbackRef(qe),re=hooks.useValueRef(u),I=hooks.useCallbackRef(Ge),Et=hooks.useValueRef(i),Ft=hooks.useValueRef(!!t),Lt=hooks.useValueRef(O),Ct=hooks.useValueRef(!!R),k=hooks.useValueRef(D),B=hooks.useValueRef(K),Re=hooks.useValueRef(x),De=hooks.useValueRef(r),We=hooks.useValueRef(z),Pe=hooks.useValueRef(w),Tt=hooks.useValueRef(W),lt=hooks.useValueRef(oe),Ke=hooks.useValueRef(ce),Ht=hooks.useCallbackRef(Ie),kt=hooks.useCallbackRef(Je),Xt=hooks.useValueRef(Nt),_t=hooks.useValueRef(It),Oe=react.useMemo(()=>u.width===Ne.width&&u.height===Ne.height,[u.width,u.height]);react.useEffect(()=>{(d.x<0||d.y<0)&&h({x:Math.max(0,d.x),y:Math.max(0,d.y)});let n=d.x+u.width,E=d.y+u.height;(n>window.innerWidth||E>window.innerHeight)&&h({x:Math.min(d.x,Math.max(0,window.innerWidth-u.width)),y:Math.min(d.y,Math.max(0,window.innerHeight-u.height))});},[o]),react.useEffect(()=>{if(_&&Me){ne(true);let n=q=>{h({x:q.clientX-u.width/2,y:q.clientY-20});},E=()=>{ne(false),ve(false),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",E);};return document.addEventListener("mousemove",n),document.addEventListener("mouseup",E),document.body.style.cursor="grabbing",()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",E),document.body.style.cursor="";}}},[_,Me,ve,u.width]);let X=(n,E,q)=>{ve(false),ne(false),c(false),Z(null),E==="drag"?ne(true):E==="resize"&&(Z(q||null),c(true));let dt=n.clientX,ut=n.clientY,F=re.current.width,T=re.current.height,L={...Y.current},ct=()=>{document.removeEventListener("mousemove",mt),document.removeEventListener("mouseup",ht),document.body.style.cursor="",ne(false),c(false),Z(null),j(null),A.current&&(clearTimeout(A.current),A.current=null),J(null),N(null);},mt=Ee=>{if(E==="drag"){let V=Ee.clientX-dt,U=Ee.clientY-ut,g=L.x+V,a=L.y+U,me=Ft.current?Et.current:0,Se=12+me,y=Ct.current?Lt.current:0,f=window.innerWidth-12-F-y,Fe=window.innerHeight-12-44,p=g<=Se?"left":g>=f?"right":null;p!==lt.current&&j(p),A.current&&p&&N(p),A.current&&(Ke.current==="left"&&(g>Se||p!=="left")||Ke.current==="right"&&(g<f||p!=="right"))&&(clearTimeout(A.current),A.current=null,J(null),N(null)),!A.current&&p&&Ke.current!==p&&(J(p),N(p),A.current=setTimeout(()=>{Tt.current&<.current===p?(ct(),Ht(),kt({position:p,width:Math.min(Math.max(re.current.width,Xt.current),_t.current)})):J(null);},350)),g=Math.min(Math.max(g,12+me),f),a=Math.min(Math.max(a,12),Fe),h({x:g,y:a});}else if(E==="resize"&&q){let V=Ee.clientX-dt,U=Ee.clientY-ut,g=(a,me,Se)=>{let y=Math.min(Math.max(a,Re.current),De.current),f=Math.min(Math.max(me,We.current),Pe.current);if(k.current){if(Se==="width")f=Math.min(Math.max(a/k.current+B.current,We.current),Pe.current),y=(f-B.current)*k.current;else if(Se==="height")y=Math.min(Math.max((me-B.current)*k.current,Re.current),De.current),f=y/k.current+B.current;else {let Fe=a/k.current+B.current,p=(me-B.current)*k.current,gt=Math.abs(V),ft=Math.abs(U);if(gt>1.1*ft)f=Math.min(Math.max(Fe,We.current),Pe.current),y=(f-B.current)*k.current;else if(ft>1.1*gt)y=Math.min(Math.max(p,Re.current),De.current),f=y/k.current+B.current;else {let Yt=(f+Fe)/2;y=Math.min(Math.max((y+p)/2,Re.current),De.current),f=Math.min(Math.max(Yt,We.current),Pe.current),y=(f-B.current)*k.current;}}y=Math.min(Math.max(y,Re.current),De.current),f=Math.min(Math.max(f,We.current),Pe.current);}return {width:y,height:f}};switch(q){case "topLeft":{let a=g(F-V,T-U,"both");I(a),h({x:L.x+(F-a.width),y:L.y+(T-a.height)});break}case "topRight":{let a=g(F+V,T-U,"both");I(a),h({x:L.x,y:L.y+(T-a.height)});break}case "bottomLeft":{let a=g(F-V,T+U,"both");I(a),h({x:L.x+(F-a.width),y:L.y});break}case "bottomRight":{I(g(F+V,T+U,"both"));break}case "top":{let a=g(F,T-U,"height");I(a),h({x:L.x,y:L.y+(T-a.height)});break}case "bottom":{I(g(F,T+U,"height"));break}case "left":{let a=g(F-V,T,"width");I(a),h({x:L.x+(F-a.width),y:L.y});break}case "right":{I(g(F+V,T,"width"));break}}}},ht=()=>{(d.x<0||d.y<0)&&h({x:Math.max(0,d.x),y:Math.max(0,d.y)}),ct();};document.addEventListener("mousemove",mt),document.addEventListener("mouseup",ht);},$t=react.useCallback(()=>{C?(I({...de}),h({...ee}),$(false)):(Oe?h({...ee}):(ue({...u}),te({...d})),I({...sn}),$(true));},[C,Oe,u,d,de,ee,$,ue,te]),At=react.useCallback(()=>{Oe?(I({...de}),h({...ee})):(C?$(false):(ue({...u}),te({...d})),I({...Ne}),h({...an}));},[Oe,C,u,d,de,ee,$,ue,te]);return react.useEffect(()=>{let n=utils.throttle(()=>{(Y.current.x<0||Y.current.y<0)&&h({x:Math.max(0,Y.current.x),y:Math.max(0,Y.current.y)});let E=Y.current.x+re.current.width,q=Y.current.y+re.current.height;(E>window.innerWidth||q>window.innerHeight)&&h({x:Math.min(Y.current.x,Math.max(0,window.innerWidth-re.current.width)),y:Math.min(Y.current.y,Math.max(0,window.innerHeight-re.current.height))});},100);return window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n);}},[]),_?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[(W||ze)&&reactDom.createPortal(jsxRuntime.jsx("div",{className:ui.clsx("max-lg:hidden fixed inset-0 z-9999 bg-transparent w-full h-full select-none",W&&(ce?"cursor-grabbing":"cursor-move"),!W&&{"cursor-ns-resize":P==="top"||P==="bottom","cursor-ew-resize":P==="left"||P==="right","cursor-nwse-resize":P==="topLeft"||P==="bottomRight","cursor-nesw-resize":P==="topRight"||P==="bottomLeft","cursor-auto":P===null})}),document.body),jsxRuntime.jsx("div",{className:ui.clsx("max-lg:hidden fixed z-50 left-0 top-0",W?"will-change-transform":"will-change-auto",ze||W?"transition-none":"transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"),style:{transform:`translate(${Math.round(d.x-(t?i:0))}px, ${Math.round(d.y)}px)`},children:jsxRuntime.jsxs("div",{className:"flex relative z-50",children:[t&&jsxRuntime.jsx("div",{className:ui.clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",W?"opacity-40 translate-x-4":"opacity-100 translate-x-0"),style:{width:i,height:C?40:u.height-8},children:t}),jsxRuntime.jsx("div",{className:ui.clsx("z-50 relative bg-content1 border border-border rounded-lg overflow-hidden",W?"opacity-80 shadow-md scale-102 blur-[0.5px]":"opacity-100 shadow-lg scale-100 blur-none"),style:{width:u.width,height:u.height,transition:ze||W?"none":"transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-full",ie&&"animate-modal-shrink",ie==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!C&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:n=>X(n,"resize","topLeft")}),jsxRuntime.jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:n=>X(n,"resize","topRight")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:n=>X(n,"resize","bottomLeft")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:n=>X(n,"resize","bottomRight")}),jsxRuntime.jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:n=>X(n,"resize","top")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:n=>X(n,"resize","bottom")}),jsxRuntime.jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:n=>X(n,"resize","left")}),jsxRuntime.jsx("div",{className:"absolute right-0 top-3 bottom-3 w-1.5 cursor-e-resize z-20",onMouseDown:n=>X(n,"resize","right")})]}),S&&jsxRuntime.jsxs("div",{className:"relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:n=>X(n,"drag"),style:{height:K},children:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:le("scaffold.draggableModal.snapToEdge"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),H||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:n=>n.stopPropagation(),children:l}),jsxRuntime.jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:n=>n.stopPropagation(),children:[jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:$t,children:C?jsxRuntime.jsx(ui.RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui.MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:At,children:Oe?jsxRuntime.jsx(ui.UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui.MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Ie,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!C&&jsxRuntime.jsx("div",{className:S?"h-[calc(100%-44px)] overflow-hidden":"h-full overflow-hidden cursor-move",onMouseDown:S?void 0:n=>X(n,"drag"),children:Q})]})}),R&&jsxRuntime.jsx("div",{className:ui.clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",W?"opacity-40 -translate-x-4":"opacity-100 translate-x-0"),style:{width:O,height:C?40:u.height-8},children:R})]})})]}):null});function st({id:e,title:o,maxWidth:l=440,minWidth:x=320,position:r,showHeader:z=true,header:w,headerHeight:t=44,children:i}){let{t:R}=i18n.useTranslation(),O=ui.useAtomValue(se(e)),[D,S]=react.useState(false),[H,K]=react.useState(false),[Q,le]=ui.useAtom(Le(e)),{onOpen:_}=ge(e),{onClose:Ie}=fe(e),Je=ui.useAtomValue(Ye(e)),C=ui.useAtomValue(Be(e)),$=hooks.useValueRef(Q),d=hooks.useValueRef(l),qe=hooks.useValueRef(x),u=hooks.useValueRef(r),Ge=hooks.useValueRef(D),de=hooks.useValueRef(H),ue=hooks.useCallbackRef(le),ee=hooks.useCallbackRef(_),te=hooks.useCallbackRef(Ie),Me=hooks.useValueRef(Je),ve=hooks.useValueRef(C),W=c=>{c.preventDefault(),c.stopPropagation(),S(true),document.body.style.cursor="ew-resize",document.body.style.userSelect="none",document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.height="100%";let P=c.clientX,Z=$.current,oe=ie=>{if(!Ge.current)return;let N=ie.clientX-P,ce=u.current==="right"?Z-N:Z+N,J=Math.min(Math.max(ce,qe.current),d.current);ue(J);},j=()=>{S(false),document.body.style.cursor="",document.body.style.userSelect="",document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.height="",document.removeEventListener("mousemove",oe),document.removeEventListener("mouseup",j);};document.addEventListener("mousemove",oe),document.addEventListener("mouseup",j);},ne=c=>{if(c.target instanceof HTMLElement&&c.target.closest("button"))return;c.preventDefault(),K(true);let P=c.clientX,Z=c.clientY,oe=()=>{document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",ie),K(false);},j=N=>{if(!de.current)return;let ce=Math.abs(N.clientX-P),J=Math.abs(N.clientY-Z);(ce>10||J>10)&&(oe(),te(),ee({shouldStartDragging:true,position:{x:N.clientX-$.current/2+20,y:N.clientY-20},size:{width:Math.min(Math.max($.current,Me.current),ve.current)}}));},ie=()=>{oe();};document.addEventListener("mousemove",j),document.addEventListener("mouseup",ie);},ze=()=>{te();};return O!==r?null:jsxRuntime.jsxs("div",{className:"max-lg:hidden flex-none flex flex-row overflow-hidden",children:[r==="right"&&jsxRuntime.jsx(Dt,{isResizing:D,handleResizeStart:W}),jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col min-h-0 overflow-hidden bg-content1",H?"opacity-80 scale-98 blur-[1px]":"opacity-100 scale-100 blur-none"),style:{width:`${Q}px`,transition:D||H?"none":"transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:[z&&jsxRuntime.jsxs("div",{className:"flex-none relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:ne,style:{height:t},children:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:R("scaffold.draggablePanel.snapToModal"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),w||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:c=>c.stopPropagation(),children:o}),jsxRuntime.jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:c=>c.stopPropagation(),children:jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:ze,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsxRuntime.jsx("div",{className:"flex-auto min-h-0",children:i})]}),r==="left"&&jsxRuntime.jsx(Dt,{isResizing:D,handleResizeStart:W})]})}function Dt({isResizing:e,handleResizeStart:o}){return jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.jsxs("div",{className:"relative w-1 h-full cursor-ew-resize bg-content3/80 hover:bg-content3 transition-colors duration-150 ease-in-out group flex flex-col items-center justify-center gap-1",children:[jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("div",{className:"absolute inset-0 -left-1.5 -right-1.5 cursor-ew-resize",onMouseDown:o})]}),e&&jsxRuntime.jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function ro({contents:e=[],className:o,classNames:l,children:x}){let r=ui.useAtomValue(Ve);react.useEffect(()=>{let t=ui.getDefaultStore();e.forEach(i=>{t.set(Ce(i.id),i.panelMinWidth??320),t.set(Te(i.id),i.panelMaxWidth??440),t.set(Ye(i.id),i.modalMinWidth??504),t.set(Be(i.id),i.modalMaxWidth??window.innerWidth-40);});},[e]);let z=react.useMemo(()=>e.filter(t=>{let i=ui.getDefaultStore();return r.left[t.id]?i.get(se(t.id))==="left":false}).sort((t,i)=>r.left[i.id]-r.left[t.id]),[e,r.left]),w=react.useMemo(()=>e.filter(t=>{let i=ui.getDefaultStore();return r.right[t.id]?i.get(se(t.id))==="right":false}).sort((t,i)=>(r.right[t.id]??0)-(r.right[i.id]??0)),[e,r.right]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-full flex flex-row overflow-hidden",o,l?.root),children:[jsxRuntime.jsx("div",{className:ui.clsx("flex-none h-full flex flex-row",l?.left),children:z.map(t=>jsxRuntime.jsx(st,{...t,position:"left",minWidth:t.panelMinWidth??320,maxWidth:t.panelMaxWidth??440},`left-${t.id}`))}),jsxRuntime.jsx("div",{className:ui.clsx("flex-auto min-w-0 h-full",l?.content),children:x}),jsxRuntime.jsx("div",{className:ui.clsx("flex-none h-full flex flex-row",l?.right),children:w.map(t=>jsxRuntime.jsx(st,{...t,position:"right",minWidth:t.panelMinWidth??320,maxWidth:t.panelMaxWidth??440},`right-${t.id}`))})]}),e.map(t=>jsxRuntime.jsx(zt,{...t,minWidth:t.modalMinWidth??504,maxWidth:t.modalMaxWidth??window.innerWidth-40},`modal-${t.id}`))]})}function go(e){let{isOpen:o,onOpen:l,onClose:x}=ge(e),{isOpen:r,onOpen:z,onClose:w}=fe(e),t=ui.useAtomValue(he(e)),i=react.useCallback(()=>{o||r||(t==="modal"?l():z({position:t}));},[o,r,t,l,z]),R=react.useCallback(()=>{o?x():r&&w();},[o,r,x,w]),O=react.useMemo(()=>o||r,[o,r]);return react.useMemo(()=>({isOpen:O,onOpen:i,onClose:R}),[O,i,R])}typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-scaffold"]="0.1.0");var yn="0.1.0";exports.DraggableModal=zt;exports.DraggablePanel=st;exports.DraggablePanelProvider=ro;exports.useDraggableDisclosure=go;exports.useDraggableModalDisclosure=ge;exports.useDraggablePanelDisclosure=fe;exports.version=yn;//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|