@liberfi.io/ui-scaffold 0.1.7 → 0.1.9
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.d.mts +80 -3
- package/dist/index.d.ts +80 -3
- 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 +6 -6
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { PropsWithChildren, ReactNode } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
type DraggableModalProps = PropsWithChildren<{
|
|
@@ -145,6 +145,83 @@ type UseDraggablePanelDisclosureReturnType = {
|
|
|
145
145
|
};
|
|
146
146
|
declare function useDraggablePanelDisclosure(id: string): UseDraggablePanelDisclosureReturnType;
|
|
147
147
|
|
|
148
|
+
type HeaderProps = PropsWithChildren<{
|
|
149
|
+
className?: string;
|
|
150
|
+
}>;
|
|
151
|
+
declare function Header({ children, className }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
152
|
+
|
|
153
|
+
type MobileHeaderProps = PropsWithChildren<{
|
|
154
|
+
className?: string;
|
|
155
|
+
}>;
|
|
156
|
+
declare function MobileHeader({ children, className }: MobileHeaderProps): react_jsx_runtime.JSX.Element;
|
|
157
|
+
|
|
158
|
+
type FooterProps = PropsWithChildren<{
|
|
159
|
+
className?: string;
|
|
160
|
+
}>;
|
|
161
|
+
declare function Footer({ children, className }: FooterProps): react_jsx_runtime.JSX.Element;
|
|
162
|
+
|
|
163
|
+
type PageProps = PropsWithChildren<{
|
|
164
|
+
className?: string;
|
|
165
|
+
}>;
|
|
166
|
+
declare function Page({ children, className }: PageProps): react_jsx_runtime.JSX.Element;
|
|
167
|
+
|
|
168
|
+
type PageContentProps = PropsWithChildren<{
|
|
169
|
+
className?: string;
|
|
170
|
+
}>;
|
|
171
|
+
declare function PageContent({ className, children }: PageContentProps): react_jsx_runtime.JSX.Element;
|
|
172
|
+
|
|
173
|
+
type LogoProps = {
|
|
174
|
+
/** icon for desktop */
|
|
175
|
+
icon: React.ReactNode;
|
|
176
|
+
/** icon for mobile & desktop */
|
|
177
|
+
miniIcon?: React.ReactNode;
|
|
178
|
+
/** url when clicking the logo image */
|
|
179
|
+
href?: string;
|
|
180
|
+
/** custom styles */
|
|
181
|
+
className?: string;
|
|
182
|
+
};
|
|
183
|
+
declare function Logo({ href, icon, miniIcon, className }: LogoProps): react_jsx_runtime.JSX.Element;
|
|
184
|
+
|
|
185
|
+
type HeaderNavigationProps = PropsWithChildren<{
|
|
186
|
+
href: string;
|
|
187
|
+
title: string;
|
|
188
|
+
active?: boolean;
|
|
189
|
+
className?: string;
|
|
190
|
+
}>;
|
|
191
|
+
declare function HeaderNavigation({ href, title, active, className, }: HeaderNavigationProps): react_jsx_runtime.JSX.Element;
|
|
192
|
+
|
|
193
|
+
type RenderAsyncModalProps<P = any, R = any> = {
|
|
194
|
+
/** custom parameters for the modal */
|
|
195
|
+
params?: P;
|
|
196
|
+
/** whether the modal is open */
|
|
197
|
+
isOpen: boolean;
|
|
198
|
+
/** close the modal */
|
|
199
|
+
onClose: () => void;
|
|
200
|
+
/** change the open state of the modal */
|
|
201
|
+
onOpenChange: (isOpen: boolean) => void;
|
|
202
|
+
/** callback when the modal is closed with the result */
|
|
203
|
+
onResult?: (result: R) => void;
|
|
204
|
+
};
|
|
205
|
+
type AsyncModalProps<P = any, R = any> = {
|
|
206
|
+
/** unique identifier for the modal */
|
|
207
|
+
id: string;
|
|
208
|
+
/** render the modal content */
|
|
209
|
+
children: (props: RenderAsyncModalProps<P, R>) => ReactNode;
|
|
210
|
+
};
|
|
211
|
+
type OpenAsyncModalOptions<P = any, R = any> = {
|
|
212
|
+
/** custom parameters for the modal */
|
|
213
|
+
params?: P;
|
|
214
|
+
/** callback when the modal is closed with the result */
|
|
215
|
+
onResult?: (result: R) => void;
|
|
216
|
+
};
|
|
217
|
+
declare function AsyncModal<P = any, R = any>({ id, children, }: AsyncModalProps<P, R>): ReactNode;
|
|
218
|
+
|
|
219
|
+
type UseAsyncModalReturnType<P = any, R = any> = {
|
|
220
|
+
onOpen: (options?: OpenAsyncModalOptions<P, R>) => void;
|
|
221
|
+
onClose: () => void;
|
|
222
|
+
};
|
|
223
|
+
declare function useAsyncModal<P = any, R = any>(id: string): UseAsyncModalReturnType<P, R>;
|
|
224
|
+
|
|
148
225
|
declare global {
|
|
149
226
|
interface Window {
|
|
150
227
|
__LIBERFI_VERSION__?: {
|
|
@@ -152,6 +229,6 @@ declare global {
|
|
|
152
229
|
};
|
|
153
230
|
}
|
|
154
231
|
}
|
|
155
|
-
declare const _default: "0.1.
|
|
232
|
+
declare const _default: "0.1.8";
|
|
156
233
|
|
|
157
|
-
export { type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, _default as version };
|
|
234
|
+
export { AsyncModal, type AsyncModalProps, type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, Footer, type FooterProps, Header, HeaderNavigation, type HeaderNavigationProps, type HeaderProps, Logo, type LogoProps, MobileHeader, type MobileHeaderProps, type OpenAsyncModalOptions, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, Page, PageContent, type PageContentProps, type PageProps, type RenderAsyncModalProps, type UseAsyncModalReturnType, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useAsyncModal, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, _default as version };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { PropsWithChildren, ReactNode } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
type DraggableModalProps = PropsWithChildren<{
|
|
@@ -145,6 +145,83 @@ type UseDraggablePanelDisclosureReturnType = {
|
|
|
145
145
|
};
|
|
146
146
|
declare function useDraggablePanelDisclosure(id: string): UseDraggablePanelDisclosureReturnType;
|
|
147
147
|
|
|
148
|
+
type HeaderProps = PropsWithChildren<{
|
|
149
|
+
className?: string;
|
|
150
|
+
}>;
|
|
151
|
+
declare function Header({ children, className }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
152
|
+
|
|
153
|
+
type MobileHeaderProps = PropsWithChildren<{
|
|
154
|
+
className?: string;
|
|
155
|
+
}>;
|
|
156
|
+
declare function MobileHeader({ children, className }: MobileHeaderProps): react_jsx_runtime.JSX.Element;
|
|
157
|
+
|
|
158
|
+
type FooterProps = PropsWithChildren<{
|
|
159
|
+
className?: string;
|
|
160
|
+
}>;
|
|
161
|
+
declare function Footer({ children, className }: FooterProps): react_jsx_runtime.JSX.Element;
|
|
162
|
+
|
|
163
|
+
type PageProps = PropsWithChildren<{
|
|
164
|
+
className?: string;
|
|
165
|
+
}>;
|
|
166
|
+
declare function Page({ children, className }: PageProps): react_jsx_runtime.JSX.Element;
|
|
167
|
+
|
|
168
|
+
type PageContentProps = PropsWithChildren<{
|
|
169
|
+
className?: string;
|
|
170
|
+
}>;
|
|
171
|
+
declare function PageContent({ className, children }: PageContentProps): react_jsx_runtime.JSX.Element;
|
|
172
|
+
|
|
173
|
+
type LogoProps = {
|
|
174
|
+
/** icon for desktop */
|
|
175
|
+
icon: React.ReactNode;
|
|
176
|
+
/** icon for mobile & desktop */
|
|
177
|
+
miniIcon?: React.ReactNode;
|
|
178
|
+
/** url when clicking the logo image */
|
|
179
|
+
href?: string;
|
|
180
|
+
/** custom styles */
|
|
181
|
+
className?: string;
|
|
182
|
+
};
|
|
183
|
+
declare function Logo({ href, icon, miniIcon, className }: LogoProps): react_jsx_runtime.JSX.Element;
|
|
184
|
+
|
|
185
|
+
type HeaderNavigationProps = PropsWithChildren<{
|
|
186
|
+
href: string;
|
|
187
|
+
title: string;
|
|
188
|
+
active?: boolean;
|
|
189
|
+
className?: string;
|
|
190
|
+
}>;
|
|
191
|
+
declare function HeaderNavigation({ href, title, active, className, }: HeaderNavigationProps): react_jsx_runtime.JSX.Element;
|
|
192
|
+
|
|
193
|
+
type RenderAsyncModalProps<P = any, R = any> = {
|
|
194
|
+
/** custom parameters for the modal */
|
|
195
|
+
params?: P;
|
|
196
|
+
/** whether the modal is open */
|
|
197
|
+
isOpen: boolean;
|
|
198
|
+
/** close the modal */
|
|
199
|
+
onClose: () => void;
|
|
200
|
+
/** change the open state of the modal */
|
|
201
|
+
onOpenChange: (isOpen: boolean) => void;
|
|
202
|
+
/** callback when the modal is closed with the result */
|
|
203
|
+
onResult?: (result: R) => void;
|
|
204
|
+
};
|
|
205
|
+
type AsyncModalProps<P = any, R = any> = {
|
|
206
|
+
/** unique identifier for the modal */
|
|
207
|
+
id: string;
|
|
208
|
+
/** render the modal content */
|
|
209
|
+
children: (props: RenderAsyncModalProps<P, R>) => ReactNode;
|
|
210
|
+
};
|
|
211
|
+
type OpenAsyncModalOptions<P = any, R = any> = {
|
|
212
|
+
/** custom parameters for the modal */
|
|
213
|
+
params?: P;
|
|
214
|
+
/** callback when the modal is closed with the result */
|
|
215
|
+
onResult?: (result: R) => void;
|
|
216
|
+
};
|
|
217
|
+
declare function AsyncModal<P = any, R = any>({ id, children, }: AsyncModalProps<P, R>): ReactNode;
|
|
218
|
+
|
|
219
|
+
type UseAsyncModalReturnType<P = any, R = any> = {
|
|
220
|
+
onOpen: (options?: OpenAsyncModalOptions<P, R>) => void;
|
|
221
|
+
onClose: () => void;
|
|
222
|
+
};
|
|
223
|
+
declare function useAsyncModal<P = any, R = any>(id: string): UseAsyncModalReturnType<P, R>;
|
|
224
|
+
|
|
148
225
|
declare global {
|
|
149
226
|
interface Window {
|
|
150
227
|
__LIBERFI_VERSION__?: {
|
|
@@ -152,6 +229,6 @@ declare global {
|
|
|
152
229
|
};
|
|
153
230
|
}
|
|
154
231
|
}
|
|
155
|
-
declare const _default: "0.1.
|
|
232
|
+
declare const _default: "0.1.8";
|
|
156
233
|
|
|
157
|
-
export { type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, _default as version };
|
|
234
|
+
export { AsyncModal, type AsyncModalProps, type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, Footer, type FooterProps, Header, HeaderNavigation, type HeaderNavigationProps, type HeaderProps, Logo, type LogoProps, MobileHeader, type MobileHeaderProps, type OpenAsyncModalOptions, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, Page, PageContent, type PageContentProps, type PageProps, type RenderAsyncModalProps, type UseAsyncModalReturnType, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useAsyncModal, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, _default as version };
|
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"}`,350,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:350,height:580},void 0,{getOnInit:true})),Xe=ui.atomFamily(e=>ui.atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),_e=ui.atomFamily(e=>ui.atomWithStorage(`modalPosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),$e=ui.atomFamily(e=>ui.atomWithStorage(`modalRestorePosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/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-x-hidden overflow-y-auto":"h-full overflow-x-hidden overflow-y-auto 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 overflow-y-auto",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$1=require('@liberfi.io/ui'),utils=require('@liberfi.io/utils'),jsxRuntime=require('react/jsx-runtime');var se=ui$1.atomFamily(e=>ui$1.atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Fe=ui$1.atomFamily(e=>ui$1.atomWithStorage(`panelWidth.${e??"default"}`,350,void 0,{getOnInit:true})),Le=ui$1.atomFamily(e=>ui$1.atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),He=ui$1.atomFamily(e=>ui$1.atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),gt=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),ke=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),Te=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),Ae=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),_e=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalPosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),$e=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalRestorePosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),Xe=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalMinimized.${e??"default"}`,false,void 0,{getOnInit:true})),Ye=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalMinWidth.${e??"default"}`,200,void 0,{getOnInit:true})),Be=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalMaxWidth.${e??"default"}`,typeof window<"u"?window.innerWidth-40:0,void 0,{getOnInit:true})),he=ui$1.atomFamily(e=>ui$1.atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),Ue=ui$1.atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function fe(e){let[t,o]=ui$1.useAtom(gt(e)),[d,s]=ui$1.useAtom(Xe(e)),h=ui$1.useAtomValue(Ae(e)),g=ui$1.useAtomValue($e(e)),n=ui$1.useSetAtom(Te(e)),i=ui$1.useSetAtom(_e(e)),w=ui$1.useSetAtom(ke(e)),R=ui$1.useSetAtom(he(e)),m=react.useCallback((S={})=>{let{shouldStartDragging:K,position:Q,size:le}=S;Q&&i(_=>({..._,...Q})),le&&n(_=>({..._,...le})),w(K??false),o(true),R("modal");},[o,i,n,w]),P=react.useCallback(()=>{o(false),d&&(n({...h}),i({...g}),s(false));},[d,h,g,s,o,n,i]);return react.useMemo(()=>({isOpen:t,onOpen:m,onClose:P}),[t,m,P])}function pe(e){let[t,o]=ui$1.useAtom(se(e)),d=ui$1.useSetAtom(Fe(e)),s=ui$1.useSetAtom(he(e)),h=ui$1.useSetAtom(Ue),g=react.useCallback((R={})=>{let m=R.position??"left";d(R.width??320),o(m),s(m),h(({left:P,right:S})=>m==="left"?{left:{...P,[e]:Date.now()},right:S}:{left:P,right:{...S,[e]:Date.now()}});},[e,o,d]),n=react.useCallback(()=>{o("none");},[o]),i=react.useMemo(()=>t!=="none",[t]),w=react.useMemo(()=>t!=="none"?t:void 0,[t]);return react.useMemo(()=>({isOpen:i,position:w,onOpen:g,onClose:n}),[i,g,n])}var cn={width:200,height:48},Se={width:typeof window<"u"?window.innerWidth-40:0,height:typeof window<"u"?window.innerHeight-40:0},mn={x:20,y:20},Rt=react.memo(function({id:t,title:o,minWidth:d=504,maxWidth:s=Se.width,minHeight:h=200,maxHeight:g=Se.height,leftSidebar:n,leftSidebarWidth:i=200,rightSidebar:w,rightSidebarWidth:R=200,aspectRatio:m,showHeader:P=true,header:S,headerHeight:K=44,children:Q}){let{t:le}=i18n.useTranslation(),{isOpen:_,onClose:Ee}=fe(t),{onOpen:Je}=pe(t),[H,$]=ui$1.useAtom(Xe(t)),[u,qe]=ui$1.useAtom(_e(t)),[c,Ge]=ui$1.useAtom(Te(t)),[de,ue]=ui$1.useAtom(Ae(t)),[ee,te]=ui$1.useAtom($e(t)),[Me,ve]=ui$1.useAtom(ke(t)),[O,ne]=react.useState(Me),[Re,f]=react.useState(false),[N,Z]=react.useState(null),[oe,j]=react.useState(null),[ie,E]=react.useState(null),[ce,J]=react.useState(null),X=react.useRef(null),Lt=ui$1.useAtomValue(Le(t)),Ht=ui$1.useAtomValue(He(t)),Y=hooks.useValueRef(u),x=hooks.useCallbackRef(qe),re=hooks.useValueRef(c),I=hooks.useCallbackRef(Ge),kt=hooks.useValueRef(i),Tt=hooks.useValueRef(!!n),At=hooks.useValueRef(R),_t=hooks.useValueRef(!!w),T=hooks.useValueRef(m),B=hooks.useValueRef(K),Pe=hooks.useValueRef(d),ze=hooks.useValueRef(s),De=hooks.useValueRef(h),We=hooks.useValueRef(g),$t=hooks.useValueRef(O),lt=hooks.useValueRef(oe),Ke=hooks.useValueRef(ce),Xt=hooks.useCallbackRef(Ee),Yt=hooks.useCallbackRef(Je),Bt=hooks.useValueRef(Lt),Ut=hooks.useValueRef(Ht),Oe=react.useMemo(()=>c.width===Se.width&&c.height===Se.height,[c.width,c.height]);react.useEffect(()=>{(u.x<0||u.y<0)&&x({x:Math.max(0,u.x),y:Math.max(0,u.y)});let r=u.x+c.width,C=u.y+c.height;(r>window.innerWidth||C>window.innerHeight)&&x({x:Math.min(u.x,Math.max(0,window.innerWidth-c.width)),y:Math.min(u.y,Math.max(0,window.innerHeight-c.height))});},[t]),react.useEffect(()=>{if(_&&Me){ne(true);let r=q=>{x({x:q.clientX-c.width/2,y:q.clientY-20});},C=()=>{ne(false),ve(false),document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",C);};return document.addEventListener("mousemove",r),document.addEventListener("mouseup",C),document.body.style.cursor="grabbing",()=>{document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",C),document.body.style.cursor="";}}},[_,Me,ve,c.width]);let A=(r,C,q)=>{ve(false),ne(false),f(false),Z(null),C==="drag"?ne(true):C==="resize"&&(Z(q||null),f(true));let dt=r.clientX,ut=r.clientY,F=re.current.width,k=re.current.height,L={...Y.current},ct=()=>{document.removeEventListener("mousemove",mt),document.removeEventListener("mouseup",ht),document.body.style.cursor="",ne(false),f(false),Z(null),j(null),X.current&&(clearTimeout(X.current),X.current=null),J(null),E(null);},mt=Ie=>{if(C==="drag"){let U=Ie.clientX-dt,V=Ie.clientY-ut,b=L.x+U,l=L.y+V,me=Tt.current?kt.current:0,Ne=12+me,z=_t.current?At.current:0,y=window.innerWidth-12-F-z,Ce=window.innerHeight-12-44,M=b<=Ne?"left":b>=y?"right":null;M!==lt.current&&j(M),X.current&&M&&E(M),X.current&&(Ke.current==="left"&&(b>Ne||M!=="left")||Ke.current==="right"&&(b<y||M!=="right"))&&(clearTimeout(X.current),X.current=null,J(null),E(null)),!X.current&&M&&Ke.current!==M&&(J(M),E(M),X.current=setTimeout(()=>{$t.current&<.current===M?(ct(),Xt(),Yt({position:M,width:Math.min(Math.max(re.current.width,Bt.current),Ut.current)})):J(null);},350)),b=Math.min(Math.max(b,12+me),y),l=Math.min(Math.max(l,12),Ce),x({x:b,y:l});}else if(C==="resize"&&q){let U=Ie.clientX-dt,V=Ie.clientY-ut,b=(l,me,Ne)=>{let z=Math.min(Math.max(l,Pe.current),ze.current),y=Math.min(Math.max(me,De.current),We.current);if(T.current){if(Ne==="width")y=Math.min(Math.max(l/T.current+B.current,De.current),We.current),z=(y-B.current)*T.current;else if(Ne==="height")z=Math.min(Math.max((me-B.current)*T.current,Pe.current),ze.current),y=z/T.current+B.current;else {let Ce=l/T.current+B.current,M=(me-B.current)*T.current,ft=Math.abs(U),pt=Math.abs(V);if(ft>1.1*pt)y=Math.min(Math.max(Ce,De.current),We.current),z=(y-B.current)*T.current;else if(pt>1.1*ft)z=Math.min(Math.max(M,Pe.current),ze.current),y=z/T.current+B.current;else {let jt=(y+Ce)/2;z=Math.min(Math.max((z+M)/2,Pe.current),ze.current),y=Math.min(Math.max(jt,De.current),We.current),z=(y-B.current)*T.current;}}z=Math.min(Math.max(z,Pe.current),ze.current),y=Math.min(Math.max(y,De.current),We.current);}return {width:z,height:y}};switch(q){case "topLeft":{let l=b(F-U,k-V,"both");I(l),x({x:L.x+(F-l.width),y:L.y+(k-l.height)});break}case "topRight":{let l=b(F+U,k-V,"both");I(l),x({x:L.x,y:L.y+(k-l.height)});break}case "bottomLeft":{let l=b(F-U,k+V,"both");I(l),x({x:L.x+(F-l.width),y:L.y});break}case "bottomRight":{I(b(F+U,k+V,"both"));break}case "top":{let l=b(F,k-V,"height");I(l),x({x:L.x,y:L.y+(k-l.height)});break}case "bottom":{I(b(F,k+V,"height"));break}case "left":{let l=b(F-U,k,"width");I(l),x({x:L.x+(F-l.width),y:L.y});break}case "right":{I(b(F+U,k,"width"));break}}}},ht=()=>{(u.x<0||u.y<0)&&x({x:Math.max(0,u.x),y:Math.max(0,u.y)}),ct();};document.addEventListener("mousemove",mt),document.addEventListener("mouseup",ht);},Vt=react.useCallback(()=>{H?(I({...de}),x({...ee}),$(false)):(Oe?x({...ee}):(ue({...c}),te({...u})),I({...cn}),$(true));},[H,Oe,c,u,de,ee,$,ue,te]),Zt=react.useCallback(()=>{Oe?(I({...de}),x({...ee})):(H?$(false):(ue({...c}),te({...u})),I({...Se}),x({...mn}));},[Oe,H,c,u,de,ee,$,ue,te]);return react.useEffect(()=>{let r=utils.throttle(()=>{(Y.current.x<0||Y.current.y<0)&&x({x:Math.max(0,Y.current.x),y:Math.max(0,Y.current.y)});let C=Y.current.x+re.current.width,q=Y.current.y+re.current.height;(C>window.innerWidth||q>window.innerHeight)&&x({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",r),()=>{window.removeEventListener("resize",r);}},[]),_?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[(O||Re)&&reactDom.createPortal(jsxRuntime.jsx("div",{className:ui$1.clsx("max-sm:hidden fixed inset-0 z-9999 bg-transparent w-full h-full select-none",O&&(ce?"cursor-grabbing":"cursor-move"),!O&&{"cursor-ns-resize":N==="top"||N==="bottom","cursor-ew-resize":N==="left"||N==="right","cursor-nwse-resize":N==="topLeft"||N==="bottomRight","cursor-nesw-resize":N==="topRight"||N==="bottomLeft","cursor-auto":N===null})}),document.body),jsxRuntime.jsx("div",{className:ui$1.clsx("max-sm:hidden fixed z-50 left-0 top-0",O?"will-change-transform":"will-change-auto",Re||O?"transition-none":"transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"),style:{transform:`translate(${Math.round(u.x-(n?i:0))}px, ${Math.round(u.y)}px)`},children:jsxRuntime.jsxs("div",{className:"flex relative z-50",children:[n&&jsxRuntime.jsx("div",{className:ui$1.clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",O?"opacity-40 translate-x-4":"opacity-100 translate-x-0"),style:{width:i,height:H?40:c.height-8},children:n}),jsxRuntime.jsx("div",{className:ui$1.clsx("z-50 relative bg-content1 border border-border rounded-lg overflow-hidden",O?"opacity-80 shadow-md scale-102 blur-[0.5px]":"opacity-100 shadow-lg scale-100 blur-none"),style:{width:c.width,height:c.height,transition:Re||O?"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$1.clsx("w-full h-full",ie&&"animate-modal-shrink",ie==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!H&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:r=>A(r,"resize","topLeft")}),jsxRuntime.jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:r=>A(r,"resize","topRight")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:r=>A(r,"resize","bottomLeft")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:r=>A(r,"resize","bottomRight")}),jsxRuntime.jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:r=>A(r,"resize","top")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:r=>A(r,"resize","bottom")}),jsxRuntime.jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:r=>A(r,"resize","left")}),jsxRuntime.jsx("div",{className:"absolute right-0 top-3 bottom-3 w-1.5 cursor-e-resize z-20",onMouseDown:r=>A(r,"resize","right")})]}),P&&jsxRuntime.jsxs("div",{className:"relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:r=>A(r,"drag"),style:{height:K},children:[jsxRuntime.jsx(ui$1.StyledTooltip,{placement:"top",closeDelay:0,content:le("scaffold.draggableModal.snapToEdge"),children:jsxRuntime.jsx(ui$1.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),S||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:r=>r.stopPropagation(),children:o}),jsxRuntime.jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:r=>r.stopPropagation(),children:[jsxRuntime.jsx(ui$1.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Vt,children:H?jsxRuntime.jsx(ui$1.RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui$1.MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui$1.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Zt,children:Oe?jsxRuntime.jsx(ui$1.UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui$1.MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui$1.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Ee,children:jsxRuntime.jsx(ui$1.XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!H&&jsxRuntime.jsx("div",{className:P?"h-[calc(100%-44px)] overflow-x-hidden overflow-y-auto":"h-full overflow-x-hidden overflow-y-auto cursor-move",onMouseDown:P?void 0:r=>A(r,"drag"),children:Q})]})}),w&&jsxRuntime.jsx("div",{className:ui$1.clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",O?"opacity-40 -translate-x-4":"opacity-100 translate-x-0"),style:{width:R,height:H?40:c.height-8},children:w})]})})]}):null});function st({id:e,title:t,maxWidth:o=440,minWidth:d=320,position:s,showHeader:h=true,header:g,headerHeight:n=44,children:i}){let{t:w}=i18n.useTranslation(),R=ui$1.useAtomValue(se(e)),[m,P]=react.useState(false),[S,K]=react.useState(false),[Q,le]=ui$1.useAtom(Fe(e)),{onOpen:_}=fe(e),{onClose:Ee}=pe(e),Je=ui$1.useAtomValue(Ye(e)),H=ui$1.useAtomValue(Be(e)),$=hooks.useValueRef(Q),u=hooks.useValueRef(o),qe=hooks.useValueRef(d),c=hooks.useValueRef(s),Ge=hooks.useValueRef(m),de=hooks.useValueRef(S),ue=hooks.useCallbackRef(le),ee=hooks.useCallbackRef(_),te=hooks.useCallbackRef(Ee),Me=hooks.useValueRef(Je),ve=hooks.useValueRef(H),O=f=>{f.preventDefault(),f.stopPropagation(),P(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 N=f.clientX,Z=$.current,oe=ie=>{if(!Ge.current)return;let E=ie.clientX-N,ce=c.current==="right"?Z-E:Z+E,J=Math.min(Math.max(ce,qe.current),u.current);ue(J);},j=()=>{P(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=f=>{if(f.target instanceof HTMLElement&&f.target.closest("button"))return;f.preventDefault(),K(true);let N=f.clientX,Z=f.clientY,oe=()=>{document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",ie),K(false);},j=E=>{if(!de.current)return;let ce=Math.abs(E.clientX-N),J=Math.abs(E.clientY-Z);(ce>10||J>10)&&(oe(),te(),ee({shouldStartDragging:true,position:{x:E.clientX-$.current/2+20,y:E.clientY-20},size:{width:Math.min(Math.max($.current,Me.current),ve.current)}}));},ie=()=>{oe();};document.addEventListener("mousemove",j),document.addEventListener("mouseup",ie);},Re=()=>{te();};return R!==s?null:jsxRuntime.jsxs("div",{className:"max-sm:hidden flex-none flex flex-row overflow-hidden",children:[s==="right"&&jsxRuntime.jsx(zt,{isResizing:m,handleResizeStart:O}),jsxRuntime.jsxs("div",{className:ui$1.clsx("flex flex-col min-h-0 overflow-hidden bg-content1",S?"opacity-80 scale-98 blur-[1px]":"opacity-100 scale-100 blur-none"),style:{width:`${Q}px`,transition:m||S?"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:[h&&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:n},children:[jsxRuntime.jsx(ui$1.StyledTooltip,{placement:"top",closeDelay:0,content:w("scaffold.draggablePanel.snapToModal"),children:jsxRuntime.jsx(ui$1.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),g||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:f=>f.stopPropagation(),children:t}),jsxRuntime.jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:f=>f.stopPropagation(),children:jsxRuntime.jsx(ui$1.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Re,children:jsxRuntime.jsx(ui$1.XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsxRuntime.jsx("div",{className:"flex-auto min-h-0 overflow-y-auto",children:i})]}),s==="left"&&jsxRuntime.jsx(zt,{isResizing:m,handleResizeStart:O})]})}function zt({isResizing:e,handleResizeStart:t}){return jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.jsxs("div",{className:"relative w-1 h-full cursor-ew-resize bg-border/80 hover:bg-border 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:t})]}),e&&jsxRuntime.jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function So({contents:e=[],className:t,classNames:o,children:d}){let s=ui$1.useAtomValue(Ue);react.useEffect(()=>{let n=ui$1.getDefaultStore();e.forEach(i=>{n.set(Le(i.id),i.panelMinWidth??320),n.set(He(i.id),i.panelMaxWidth??440),n.set(Ye(i.id),i.modalMinWidth??504),n.set(Be(i.id),i.modalMaxWidth??window.innerWidth-40);});},[e]);let h=react.useMemo(()=>e.filter(n=>{let i=ui$1.getDefaultStore();return s.left[n.id]?i.get(se(n.id))==="left":false}).sort((n,i)=>s.left[i.id]-s.left[n.id]),[e,s.left]),g=react.useMemo(()=>e.filter(n=>{let i=ui$1.getDefaultStore();return s.right[n.id]?i.get(se(n.id))==="right":false}).sort((n,i)=>(s.right[n.id]??0)-(s.right[i.id]??0)),[e,s.right]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:ui$1.clsx("w-full h-full flex flex-row overflow-hidden",t,o?.root),children:[jsxRuntime.jsx("div",{className:ui$1.clsx("flex-none h-full flex flex-row",o?.left),children:h.map(n=>jsxRuntime.jsx(st,{...n,position:"left",minWidth:n.panelMinWidth??320,maxWidth:n.panelMaxWidth??440},`left-${n.id}`))}),jsxRuntime.jsx("div",{className:ui$1.clsx("flex-auto min-w-0 h-full",o?.content),children:d}),jsxRuntime.jsx("div",{className:ui$1.clsx("flex-none h-full flex flex-row",o?.right),children:g.map(n=>jsxRuntime.jsx(st,{...n,position:"right",minWidth:n.panelMinWidth??320,maxWidth:n.panelMaxWidth??440},`right-${n.id}`))})]}),e.map(n=>jsxRuntime.jsx(Rt,{...n,minWidth:n.modalMinWidth??504,maxWidth:n.modalMaxWidth??window.innerWidth-40},`modal-${n.id}`))]})}function To(e){let{isOpen:t,onOpen:o,onClose:d}=fe(e),{isOpen:s,onOpen:h,onClose:g}=pe(e),n=ui$1.useAtomValue(he(e)),i=react.useCallback(()=>{t||s||(n==="modal"?o():h({position:n}));},[t,s,n,o,h]),w=react.useCallback(()=>{t?d():s&&g();},[t,s,d,g]),R=react.useMemo(()=>t||s,[t,s]);return react.useMemo(()=>({isOpen:R,onOpen:i,onClose:w}),[R,i,w])}function jo({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui$1.clsx("max-sm:hidden flex-none w-full h-15 px-6 max-lg:px-4 gap-6 max-lg:gap-4 flex justify-between items-center border-b border-border bg-background",t),children:e})}function Ko({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui$1.clsx("sm:hidden flex-none w-full h-11 px-2 flex justify-between items-center border-b border-border bg-background",t),children:e})}function ni({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui$1.clsx("sm:hidden flex-none w-full h-14 flex justify-evenly items-center border-t border-border bg-background",t),children:e})}function si({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui$1.clsx("flex flex-col w-full h-screen max-sm:h-dvh overflow-hidden bg-background",t),children:e})}function ui({className:e,children:t}){return jsxRuntime.jsx("div",{className:ui$1.clsx("flex-auto w-full min-h-0",e),children:t})}function pi({href:e="/",icon:t,miniIcon:o,className:d}){let{t:s}=i18n.useTranslation();return jsxRuntime.jsxs(ui$1.Link,{href:e,className:ui$1.clsx("flex-none flex justify-center items-center",d),"aria-label":s("scaffold.home"),children:[jsxRuntime.jsx("div",{className:ui$1.clsx("flex justify-center items-center",!!o&&"max-xl:hidden"),children:t}),o&&jsxRuntime.jsx("div",{className:"flex justify-center items-center xl:hidden",children:o})]})}function yi({href:e,title:t,active:o=false,className:d}){return jsxRuntime.jsx(ui$1.Link,{"data-active":o,href:e,className:ui$1.clsx("h-8 text-sm font-medium px-2 xl:px-3 data-[active=true]:text-primary hover:text-primary text-foreground hover:bg-primary-50 rounded-sm",d),"aria-label":t,children:t})}function Fi({id:e,children:t}){let o=hooks.useEventEmitter(),{isOpen:d,onOpen:s,onClose:h,onOpenChange:g}=ui$1.useDisclosure(),[n,i]=react.useState(void 0),[w,R]=react.useState(void 0);return react.useEffect(()=>{let m=({params:P,onResult:S})=>{i(P),R(S),s();};return o.on(`open_modal:${e}`,m),()=>{o.off(`open_modal:${e}`,m);}},[e,s,o]),react.useEffect(()=>{let m=()=>{h();};return o.on(`close_modal:${e}`,m),()=>{o.off(`close_modal:${e}`,m);}},[e,h,o]),t({params:n,isOpen:d,onClose:h,onOpenChange:g,onResult:w})}function Ti(e){let t=hooks.useEventEmitter(),o=react.useCallback(s=>{t.emit(`open_modal:${e}`,s);},[e,t]),d=react.useCallback(()=>{t.emit(`close_modal:${e}`);},[e,t]);return {onOpen:o,onClose:d}}typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-scaffold"]="0.1.8");var Bn="0.1.8";exports.AsyncModal=Fi;exports.DraggableModal=Rt;exports.DraggablePanel=st;exports.DraggablePanelProvider=So;exports.Footer=ni;exports.Header=jo;exports.HeaderNavigation=yi;exports.Logo=pi;exports.MobileHeader=Ko;exports.Page=si;exports.PageContent=ui;exports.useAsyncModal=Ti;exports.useDraggableDisclosure=To;exports.useDraggableModalDisclosure=fe;exports.useDraggablePanelDisclosure=pe;exports.version=Bn;//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|