UNPKG

amotify

Version:

UI Component for React,NextJS,esbuild

2 lines (1 loc) 5.3 kB
import{b as d,c as m,d as v}from"../chunk-C5N2D3ZX.js";import{jsx as h,jsxs as P}from"react/jsx-runtime";import{useState as R,useEffect as S}from"react";import a,{UUID as H}from"jmini";import{$$fromRoot as c,Config as A,pageRouter as T}from"../@utils";import{Box as C,Flex as x,Column as V}from"../atoms";import{Button as E}from"./Button";import{LayoutClasses as y}from"../@styles/componentClasses";const t={Base:o=>{let g=o,{topNavigation:i,sideNavigation:e,footerNavigation:r,children:l,className:s}=g,f=v(g,["topNavigation","sideNavigation","footerNavigation","children","className"]);S(()=>{t.fn.updateCSSProperty.reset(),setTimeout(()=>{t.fn.updateCSSProperty.reset()},100);let n="ResizeCB",p="RemovePageEventCB";return a(window).onEvent("resize",()=>{A.get().screen.isPhonepoint()||a.interval.once(()=>{t.fn.updateCSSProperty.reset()},300,"__RVC_calcHeights")},{eventID:n}),()=>{a(window).removeEvent(p),a(window).removeEvent(n)}},[]);let u=l;return P(V,m(d({className:[s,y("RootViewController")].join(" "),backgroundColor:"layer.1",gap:0,minHeight:"viewHeight"},f),{children:[i,P(x,{className:y("Body"),flexWrap:!1,position:"relative",flexSizing:0,children:[e,h(C,{className:y("Content"),position:"relative",flexSizing:0,width:0,children:u})]}),r]}))},TopNavigation:o=>{let s=o,{className:i,children:e}=s,r=v(s,["className","children"]),[l]=R(H());return S(()=>{t.fn.updateCSSProperty.topNav()},[]),h(x,m(d({"data-id":l,flexSizing:"none",flexType:"col",position:"sticky",top:0,backgroundColor:"layer.1"},r),{id:"__RVC_TopNavigation",className:[i,y("TopNav")].join(" "),children:e}),l)},SideNavigation:o=>{let r=o,{className:i=""}=r,e=v(r,["className"]);return S(()=>{t.fn.updateCSSProperty.sideNav()},[]),h(C,m(d({className:[i,y("SideNav")].join(" "),flexSizing:"none",minHeight:"sideNavigationHeight"},e),{id:"__RVC_SideNavigation"}))},FooterNavigation:o=>{let s=o,{className:i="",baseStyles:e}=s,r=v(s,["className","baseStyles"]),[l]=R(H());return S(()=>{t.fn.updateCSSProperty.footer()},[]),h(x,m(d({"data-id":l,borderTop:!0,position:"sticky",bottom:0,overflow:"auto",backgroundColor:"layer.1",paddingBottom:"safeAreaBottom"},e),{id:"__RVC_FooterNavigation",className:[y("FooterNav"),i].join(" "),children:h(x,d({gap:1,flexWrap:!1,padding:"2/3",margin:"auto",width:1},r))}))},Comps:{Button:o=>{let g=o,{isActive:i,path:e,pathGroup:r,currentPath:l}=g,s=v(g,["isActive","path","pathGroup","currentPath"]),f=a.Arrayify(r),u=l||location.pathname;{let n=!1;a.scope(()=>{a.isString(e)&&(a.isNullish(e)||(n=u.replace(/^\//,"").replace(/\/$/,"")==e.replace(/^\//,"").replace(/\/$/,"")))}),a.scope(()=>{if(!n&&f.length)for(let p of f){if(n)break;a.isNullish(p)||(a.isString(p)&&(p=String(p).escapeRegExChar()),u.match(new RegExp(p))&&(n=!0))}}),i=i!=null?i:n}return h(E.Clear,d({isActive:i,isActiveStyles:{fontColor:"theme",backgroundColor:"cloud"},onClick:n=>{a.isExist(e)&&a.isString(e)&&T.push(e,n.ctrlKey||n.metaKey)},color:"cloud",padding:["3/4",1],display:"flex",gap:"1/2",fontColor:"inherit",flexSizing:"none",flexWrap:!1,ssEffectsOnActive:"ripple.cloud",verticalAlign:"center",textAlign:"left",isSemiBoldFont:!0},s))},Bar:o=>h(C,d({flexSizing:"none",backgroundColor:"layer.4.opa.middle",unitHeight:"1/3",margin:["2/3",1],isRounded:!0},o)),Title:o=>h(C,d({fontSize:"3.paragraph",isSemiBoldFont:!0,padding:[0,1]},o))},fn:{updateCSSProperty:{topNav:()=>{let o=a(document.body),i=c("#__RVC_TopNavigation"),e=i.position().height||0,r=e;i.getStyleProperty("position")!="sticky"&&(r=0),t.fn.topNavHeight=e,t.fn.topBase=r,o.setStyleProperty("--topNavHeight",e+"px").setStyleProperty("--topBase",r+"px")},footer:()=>{let o=a(document.body),e=c("#__RVC_FooterNavigation").position().height||0;t.fn.footerNavHeight=e,o.setStyleProperty("--footerNavHeight",e+"px")},sideNav:()=>{let o=a(document.body),e=c("#__RVC_SideNavigation").position().width||0;t.fn.sideNavHeight=e,o.setStyleProperty("--sideNavWidth",e+"px")},reset:()=>{let o=a(document.body),i=c("#__RVC_TopNavigation"),e=c("#__RVC_FooterNavigation"),r=c("#__RVC_SideNavigation"),l=i.position().height||0,s=l,f=e.position().height||0,u=r.position().width||0;i.getStyleProperty("position")!="sticky"&&(s=0);let g=window.innerHeight,n=window.innerWidth,p=g-l-f,B=n-u;t.fn.viewHeight=g,t.fn.viewWidth=n,t.fn.contentHeight=p,t.fn.contentWidth=B,t.fn.topBase=s,t.fn.sideNavHeight=u,t.fn.topNavHeight=l,t.fn.footerNavHeight=f;{let N=getComputedStyle(document.documentElement),w=N.getPropertyValue("--safe-area-top"),_=N.getPropertyValue("--safe-area-bottom"),b=N.getPropertyValue("--safe-area-left"),F=N.getPropertyValue("--safe-area-right");t.fn.safeAreaTop=parseInt(w,10)||0,t.fn.safeAreaBottom=parseInt(_,10)||0,t.fn.safeAreaLeft=parseInt(b,10)||0,t.fn.safeAreaRight=parseInt(F,10)||0}o.setStyleProperty("--viewHeight",g+"px").setStyleProperty("--viewWidth",n+"px").setStyleProperty("--contentHeight",p+"px").setStyleProperty("--contentWidth",B+"px").setStyleProperty("--topBase",s+"px").setStyleProperty("--topNavHeight",l+"px").setStyleProperty("--footerNavHeight",f+"px").setStyleProperty("--sideNavHeight",p+"px")}},viewHeight:0,viewWidth:0,contentHeight:0,contentWidth:0,topBase:0,sideNavHeight:0,topNavHeight:0,footerNavHeight:0,safeAreaTop:0,safeAreaBottom:0,safeAreaLeft:0,safeAreaRight:0}};export{t as RootViewController,t as default};