amotify
Version:
UI Component for React,NextJS,esbuild
2 lines (1 loc) • 15.7 kB
JavaScript
import{b as d,c as I,d as H}from"../chunk-C5N2D3ZX.js";import{Fragment as le,jsx as a,jsxs as L}from"react/jsx-runtime";import c,{UUID as $,Time as pe,useStore as P}from"jmini";import{useState as X,useEffect as U,useRef as ue}from"react";import{$$fromRoot as Y,Config as j}from"../@utils";import{Box as B,Flex as ce,Img as he,FAI as q,Column as J,Grid as me,CacheRender as de}from"../atoms";import{Literal as fe,Row as ee}from"../mols";import{Button as te}from"./Button";import{SheetClasses as f}from"../@styles/componentClasses";import ge from"./Plate";const y={currentIndex:0,openQueue:{},getSessionStates:()=>{let t=P.get("sessionStates-"+j.get().sessionUID);return t||null},getnew_sheetstates:t=>{var i;let e=I(d({sheetGroups:t.sheetGroups||[],backgroundEffect:!0,overwrap:t.type=="custom",hold_state:!1,closeAtPageTransit:!0,closeAtEscapeKeyDown:!0,closeAtAroundClick:t.type=="custom",transition:"middle"},t),{sheetID:t.sheetID||$(),isOpen:!0,created_at:pe()});return e.type=="custom"&&(e.parent=e.parent||((i=e.event)==null?void 0:i.currentTarget)),e},Wrapper:()=>{let[t,e]=X([]),i={val_sheets:t,set_sheets:e},h="sessionStates-"+j.get().sessionUID;P.set({[h]:i}),U(()=>{let r="Sheet-"+j.get().sessionUID;P.set({[r]:{add:(n,o)=>{let p=P.get(r);if(!p)return;let l=y.getnew_sheetstates(n);if(y.openQueue[l.sheetID])return;if(y.openQueue[l.sheetID]=!0,o!="inherit"&&(l.isOpen=o!=null?o:!0),!!p.find(l.sheetID)){e(b=>{let A=[...b],R=A.findIndex(M=>M.sheetID==l.sheetID);return R==-1||(A[R]=l),A}),delete y.openQueue[l.sheetID];return}e(b=>[l,...b])},find:n=>{let o=y.getSessionStates();if(!o)return null;let{val_sheets:p}=o;return p.find(l=>l.sheetID==n)}}}),c(j.get().appRoot).removeEvent(["SheetEvent.keyUp","SheetEvent.Click"]).onEvent("keyup",function(n){let{key:o,metaKey:p}=n;if(o=="Escape"||o==","&&p){let l=y.getSessionStates();if(!l)return;let{val_sheets:x}=l,b=x.filter(R=>R.isOpen);if(!b.length)return;let A=b.reduce((R,M)=>R.created_at.value>M.created_at.value?R:M);v.close(A.sheetID,o)}},{eventID:"SheetEvent.keyUp"}).onEvent("click",function(n){let o=y.getSessionStates();if(!o)return;let{val_sheets:p}=o,l=n.target;if(!l||l!=null&&l.closest("."+f("CustomSheet")))return;let x=p.filter(b=>b.type=="custom");x.length&&x.forEach(b=>{let{parent:A}=b;if(!b.closeAtAroundClick)return;let R=Y(A)[0];A!==l&&R!==l&&(c(R).find(l).length||v.close(b.sheetID))})},{eventID:"SheetEvent.Click"})},[]);let S=t.some(r=>r.type!="custom"&&!r.overwrap&&r.isOpen);return L(le,{children:[t.map(r=>a(de,{params:r,forceRender:(n,o)=>n.isOpen!=o.isOpen||n.size!=o.size||!c.isEqual(c.SortifyObject(n.props||""),c.SortifyObject(o.props||"")),children:a(y.Core,I(d({},i),{val_sheet:r,patch_sheet:n=>{e(o=>{let p=[...o],l=p.findIndex(x=>x.sheetID==r.sheetID);return l!=-1&&(p[l]=I(d(d({},p[l]),n),{props:d(d({},p[l].props),n.props)})),p})},delete_sheet:()=>{e(n=>[...n.filter(o=>o.sheetID!=r.sheetID)])}}))},r.sheetID)),a(B,{className:f("BackgroundWrapper"),transition:"middle",backgroundColor:"dark.opa.few",ssAbsoluteCovered:!0,position:"fixed",ssZIndex:100,xcss:{opacity:S?1:0,pointerEvents:"none"}})]})},sheetCategory:t=>t=="custom"?"custom":t.startsWith("drawer")?"drawer":"normal",sheetPosition:t=>t=="drawer.left"?"left":t=="drawer.right"?"right":t=="drawer.bottom"?"bottom":"",Core:t=>{let{val_sheet:e,patch_sheet:i}=t,[h,S]=X(101+y.currentIndex),[r]=X($()),n=e.type!="custom"&&!e.overwrap;U(()=>{y.currentIndex++,c.scope(()=>{if(!e.closeAtParentBlur)return;let p=c(e.parent);p[0]&&p.onEvent("mouseout",()=>{p.removeEvent("SheetClosation-"+e.sheetID),i({isOpen:!1})},{eventID:"SheetClosation-"+e.sheetID})}),P.set({[e.sheetID]:{update:p=>{setTimeout(()=>{i(p)},10)},close:p=>{i({isOpen:!1})},open:()=>{i({isOpen:!0})}}})},[]),U(()=>{c.scope(()=>{let p=Y("#"+r);if(e.isOpen){e.hold_state&&S(y.currentIndex+1),p.await(10).removeClass(f("Hide")).await(10).addClass(f("Open")).callback(()=>{delete y.openQueue[e.sheetID],e.onOpen&&e.onOpen()});return}p.await(10).removeClass(f("Open")).await(251).addClass(f("Hide")).callback(()=>{if(e.onClose&&e.onClose(),n&&j.get().browserIs!="safari"&&c(j.get().appRoot).focus(),e.hold_state)return i({isOpen:!1});t.delete_sheet()})})},[e.isOpen]);let o=y.Types[{topLeft:"Normal",topCenter:"Normal",topRight:"Normal",middleLeft:"Normal",middleCenter:"Normal",middleRight:"Normal",bottomLeft:"Normal",bottomCenter:"Normal",bottomRight:"Normal","drawer.left":"Edge","drawer.right":"Edge","drawer.bottom":"Bottom",custom:"Custom"}[e.type]];return a(B,{className:["AMOTIFY_be",f("Wrap"),f("Tcate_"+y.sheetCategory(e.type)),f("Tpos_"+y.sheetPosition(e.type)),f("isMainSheet_"+n),e.wrapperClassName||""].join(" "),transition:"middle",width:1,ssAbsoluteCovered:!0,position:"fixed",ssZIndex:h,overflow:"auto",id:r,children:L(J,{className:f("Content"),gap:0,xcss:{minHeight:"100%"},children:[!!n&&a(B,{className:f("TapSensor"),position:"sticky",top:0,height:0,width:1,flexSizing:"none",children:a(B,{backgroundColor:"trans",height:"viewHeight",position:"absolute",top:0,width:1,className:f("TapContent"),onClick:p=>{var x;((x=e.closeAtAroundClick)==null||x)&&v.close(e.sheetID)}})}),a(o,d({componentId:r},e))]})},r)},Types:{Normal:t=>{let T=t,{sheetID:e,sheetGroups:i,bodyScrolls:h,props:S,content:r,className:n="",type:o,size:p="R",xcss:l,onOpen:x,onClose:b,closeAtAroundClick:A,closeAtEscapeKeyDown:R,closeAtPageTransit:M,closeAtParentBlur:oe,closeAtSwipeDown:K,hold_state:se,overwrap:re,isOpen:ne,backgroundEffect:F,wrapperClassName:Q}=T,W=H(T,["sheetID","sheetGroups","bodyScrolls","props","content","className","type","size","xcss","onOpen","onClose","closeAtAroundClick","closeAtEscapeKeyDown","closeAtPageTransit","closeAtParentBlur","closeAtSwipeDown","hold_state","overwrap","isOpen","backgroundEffect","wrapperClassName"]),D={},w=[];return o.match(/top/)?(w.push("top"),D.marginBottom="auto"):o.match(/middle/)?(w.push("center"),D.marginTop="auto",D.marginBottom="auto"):o.match(/bottom/)&&(w.push("bottom"),D.marginTop="auto"),o.match(/left/i)?(w.push("left"),D.marginRight="auto"):o.match(/center/i)?(w.push("center"),D.marginLeft="auto",D.marginRight="auto"):o.match(/right/i)&&(w.push("right"),D.marginLeft="auto"),a(B,I(d(d({className:[f("BB"),n].join(" "),padding:1,opacity:"trans"},W),D),{xcss:d({width:{XS:"22rem",S:"26rem",R:"36rem",L:"44rem","2L":"60rem","3L":"72rem",MAX:"100%"}[p],maxWidth:"96vw",transformOrigin:w.join(" ")},l),children:c.isFunction(r)?a(r,d({},S)):r}))},Edge:t=>{let W=t,{sheetID:e,sheetGroups:i,bodyScrolls:h,type:S,props:r,content:n,className:o="",size:p="R",onOpen:l,onClose:x,closeAtAroundClick:b,closeAtEscapeKeyDown:A,closeAtPageTransit:R,closeAtParentBlur:M,closeAtSwipeDown:oe,hold_state:K,overwrap:se,isOpen:re,backgroundEffect:ne,wrapperClassName:F}=W,Q=H(W,["sheetID","sheetGroups","bodyScrolls","type","props","content","className","size","onOpen","onClose","closeAtAroundClick","closeAtEscapeKeyDown","closeAtPageTransit","closeAtParentBlur","closeAtSwipeDown","hold_state","overwrap","isOpen","backgroundEffect","wrapperClassName"]);return a(B,I(d(I(d({className:[f("BB"),o].join(" ")},S=="drawer.right"?{marginLeft:"auto"}:S=="drawer.left"?{marginRight:"auto"}:{}),{opacity:"trans",position:"relative",backgroundColor:"layer.1",flexSizing:"none",minHeight:"viewHeight",boxShadow:"3.remark"}),Q),{xcss:d({width:{XS:"16rem",S:"20rem",R:"27rem",L:"32rem","2L":"40rem","3L":"58rem",MAX:"100vw"}[p],maxWidth:"96vw"},Q.xcss),children:c.isFunction(n)?a(n,d({},r)):n}))},Bottom:t=>{let Z=t,{componentId:e,sheetID:i,sheetGroups:h,bodyScrolls:S,props:r,content:n,size:o="R",sizeChanged:p,baseStyles:l,onOpen:x,onClose:b,closeAtAroundClick:A,closeAtEscapeKeyDown:R,closeAtPageTransit:M,closeAtParentBlur:oe,closeAtSwipeDown:K=!0,hold_state:se,overwrap:re,isOpen:ne,backgroundEffect:F,wrapperClassName:Q}=Z,W=H(Z,["componentId","sheetID","sheetGroups","bodyScrolls","props","content","size","sizeChanged","baseStyles","onOpen","onClose","closeAtAroundClick","closeAtEscapeKeyDown","closeAtPageTransit","closeAtParentBlur","closeAtSwipeDown","hold_state","overwrap","isOpen","backgroundEffect","wrapperClassName"]),D=c.getScreenSize(),w=[0,.2,.6,.95],T={ZERO:0,XS:1,S:1,R:2,L:3,"2L":3,"3L":3,MAX:3},[G,ie]=X(o),[E,k]=X({process:!1,processStart:0,originY:0,originValue:0,viewHeight:0,value:w[T[o]]});const O={Start:C=>{c(document).onEvent("mousemove",O.Move,{eventID:"BottomSheetMouseMove",passive:!1}).onEvent("touchmove",O.Move,{eventID:"BottomSheetTouchMove",passive:!1}).onEvent("mouseup",O.End,{eventID:"BottomSheetMouseUp"}).onEvent("touchend",O.End,{eventID:"BottomSheetTouchEnd"});let g=c.getCursor(C),m=I(d({},E),{process:!0,processStart:new Date().getTime(),originY:g.y,originValue:E.value,viewHeight:c.getScreenSize().height});P.update({[e]:{val_edit:m}}),k(m)},Move:C=>{var z;let g=(z=P.get(e))==null?void 0:z.val_edit;if(!g.process)return;let _=(c.getCursor(C).y-g.originY)/g.viewHeight,s=g.originValue-_;if(s>.95)s=.95+(s-.95)*.5;else if(s<.2){let N=.2-s;N-=.1,s=.1+(.1-N)*.5}return k(I(d({},g),{value:s})),C.preventDefault(),C.stopPropagation(),!1},End:C=>{var s;let g=(s=P.get(e))==null?void 0:s.val_edit;if(!g.process)return;c(document).removeEvent(["BottomSheetMouseMove","BottomSheetTouchMove","BottomSheetMouseUp","BottomSheetTouchEnd"]);let m=0;if(g.value<.1||(g.value<.5?m=1:g.value>.75?m=3:m=2),new Date().getTime()-g.processStart<300){let z=c.getCursor(C).y-g.originY;if(Math.abs(z)>=20){let N=+(z<0)*2-1;m+=N,m=Math.min(Math.max(m,0),w.length-1)}}m==0&&(K||(m=1)),ie(["ZERO","S","R","L"][m]),k(I(d({},g),{value:w[m],process:!1}))}},V=ue(!1);return U(()=>{V.current?G=="ZERO"?K&&v.close(i):setTimeout(()=>{t.sizeChanged&&t.sizeChanged(G)},250):V.current=!0},[G]),a(B,{className:f("BB"),margin:[0,"auto"],marginTop:"auto",opacity:"trans",width:1,xcss:d({maxWidth:12*60,height:D.height*E.value},E.process?{transition:"0s"}:{}),children:L(J,I(d({gap:0,flexSizing:"none",borderTopLeftRadius:"1.tone.primary",borderTopRightRadius:"1.tone.primary",borderBottom:"unset",boxShadow:"3.remark",position:"relative",overflow:"hidden",height:1},l),{children:[L(ee.Separate,{padding:1,backgroundColor:"layer.1",position:"relative",xcss:{userSelect:"none"},children:[a(B,{ssSphere:2.5}),a(ee.Center,{onPointerDown:O.Start,flexSizing:0,padding:"2/3",ssPushable:!0,isRounded:!0,xcss:{cursor:"grab",userSelect:"none"},children:a(B,{unitWidth:6,unitHeight:"1/2",backgroundColor:"layer.4",isRounded:!0,className:f("DragBar")})}),a(te.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{v.close(i)},children:a(q.X,{})})]}),a(B,I(d({backgroundColor:"layer.1",flexSizing:0,overflow:"auto"},W),{children:c.isFunction(n)?a(n,d({},r)):n}))]}))})},Custom:t=>{let Z=t,{sheetID:e,sheetGroups:i,bodyScrolls:h,event:S,parent:r,nextToCursor:n,gravityPoint:o=22,props:p,content:l,closeAtAroundClick:x,closeAtEscapeKeyDown:b,closeAtPageTransit:A,closeAtParentBlur:R,closeAtSwipeDown:M,hold_state:oe,onOpen:K,onClose:se,overwrap:re,isOpen:ne,resize:F,backgroundEffect:Q,wrapperClassName:W}=Z,D=H(Z,["sheetID","sheetGroups","bodyScrolls","event","parent","nextToCursor","gravityPoint","props","content","closeAtAroundClick","closeAtEscapeKeyDown","closeAtPageTransit","closeAtParentBlur","closeAtSwipeDown","hold_state","onOpen","onClose","overwrap","isOpen","resize","backgroundEffect","wrapperClassName"]),[w]=X($()),T=c.isElement(r)||c.isJmini(r)?c(r):Y(r),G='[data-sheet-id="'+w+'"]',ie='[data-sheet-content="'+w+'"]';o=o;let E=o%5||5,k=Math.ceil(o/5);const O={Init:()=>{if(n&&S){let u=c.getScreenSize(),ae=c.getCursor(S);return{top:ae.y-u.pageYOffset,left:ae.x-u.pageXOffset}}let C={};if(!T||!T[0])return C;let{top:g,right:m,bottom:_,left:s,height:z,width:N}=T.position();return c.isOneOf(E,1,2)?C.left=s:E==3?C.left=s+N/2:c.isOneOf(E,4,5)&&(C.left=m),o<=10?C.top=g:o<=15?C.top=g+z/2:o<=25&&(C.top=_),C},Adjust:()=>{let C=Y(G).position(),g=Y(ie).position(),m=T.position(),_=c.getScreenSize(),s={};for(let u in g)s[u]=g[u];if(c.scope(()=>{if(t.nextToCursor)return;let u=0;k==1?u=m.top-s.bottom:k==2?u=m.top-s.top:k==3?u=m.top-s.top+(m.height-s.height)/2:k==4?u=m.bottom-s.bottom:k==5&&(u=m.bottom-s.top),s.top+=u,s.bottom+=u}),c.scope(()=>{if(t.nextToCursor)return;let u=0;E==1?u=m.left-s.right:E==2?u=m.left-s.left:E==3?u=m.left-s.left+(m.width-s.width)/2:E==4?u=m.right-s.right:E==5&&(u=m.right-s.left),s.left+=u,s.right+=u}),s.top<0){let u=-s.top;s.top+=u,s.bottom+=u}if(s.bottom>_.height){let u=s.bottom-_.height;s.top-=u,s.bottom-=u}if(s.left<0){let u=-s.left;s.left+=u,s.right+=u}if(s.right>_.width){let u=s.right-_.width;s.left-=u,s.right-=u}let z=s.top-g.top,N=s.left-g.left;c(G).css({top:C.top+z+"px",left:C.left+N+"px"})}};let[V]=X(O.Init());return U(()=>{Y(G).await(10).addClass(f("Open")).await(200).callback(()=>{(F==null||F)&&O.Adjust()}),P.update({["customSheet-"+t.sheetID]:{reposition:()=>{O.Adjust()}}})},[]),T[0]?a(B,{className:[f("BB"),f("CustomSheet")].join(" "),"data-sheet-id":w,transition:"long",position:"absolute",width:0,height:0,opacity:"trans",flexCenter:!0,xcss:V,children:a(ce,{position:"absolute",className:[f("GPT"),f("GPT_"+o),f("Col_"+E),f("Row_"+k)].join(" "),children:a(B,I(d({"data-sheet-content":w,flexSizing:"none",maxHeight:"viewHeight"},D),{xcss:d({maxWidth:"98vw"},D.xcss),children:c.isFunction(l)?a(l,d({},p)):l}))})}):null}}},v={Wrapper:()=>a(y.Wrapper,{}),Element:t=>{let S=t,{isOpen:e,children:i}=S,h=H(S,["isOpen","children"]);return U(()=>{if(e){v.open(t.type,I(d({},h),{content:i}));return}h.sheetID&&v.close(h.sheetID)},[e,h.props||""]),null},image:(t,e)=>{let i=t.sheetID||$(),r=t,{type:h}=r,S=H(r,["type"]);v.open(h||"topCenter",I(d({size:"MAX"},S),{sheetID:i,xcss:{maxWidth:"100vw"},content:()=>{let[n]=X(c.Arrayify(e));return a(ge,{children:L(J,{children:[a(ee.Right,{children:L(te.Sub.S,{color:"cloud",isRounded:!0,onClick:()=>{v.close(i)},children:[a(q.X,{})," \u9589\u3058\u308B"]})}),a(me.Layout,{gap:1,gridTemplateColumns:"repeat(3,1fr)",gridTemplateRows:"repeat(2,auto)",gridChildTemplates:[["span 3",0],["span 2","span 2"],[0,0],[0,0],[0,"span 2"],["span 2",0],[0,0],[0,0]],children:n.map((o,p)=>a(he,{ssCardBox:!0,position:"relative",flexCenter:!0,src:o},p))})]})})}}))},open:(t,e,i)=>{e.sheetID=(e.sheetID||"").replace(/\./g,"-"),e.type=t;let h=P.get("Sheet-"+j.get().sessionUID);h&&h.add(e,i)},confirm:(t,e)=>{let i=(e==null?void 0:e.sheetID)||$();return new Promise((h,S)=>{let r=!1;v.open("middleCenter",{sheetID:i,size:(e==null?void 0:e.size)||"S",closeAtAroundClick:!0,onClose:()=>{h(r)},content:n=>L(J,{children:[a(ee.Right,{children:a(te.Sub.S,{color:"cloud",ssSphere:3,onClick:()=>{v.close(i)},children:a(q.X,{})})}),a(v.Body,{children:L(J,{gap:1,padding:2,children:[a(fe,{children:t}),a(te.Prime,{color:(e==null?void 0:e.color)||"theme",onClick:()=>{v.close(i),r=!0,h(r)},children:(e==null?void 0:e.buttonLabel)||L(le,{children:["\u5B9F\u884C ",a(q.ArrowRight,{})]})})]})})]})})})},update:(t,e)=>{t=(t||"").replace(/\./g,"-");let i=P.get(t);i&&i.update&&i.update(e)},customSheet:{reposition:t=>{let e=P.get("customSheet-"+t);e&&e.reposition&&e.reposition()}},close:function(t,e,i){let h=y.getSessionStates();if(!h)return;let{val_sheets:S}=h;t=t==null?void 0:t.replace(/\./g,"-");let r=S.find(o=>o.sheetID==t);if(!r||e=="Escape"&&!r.closeAtEscapeKeyDown)return;let n=P.get(r.sheetID);n&&n.close&&n.close(i)},closeGroup:t=>{let e=y.getSessionStates();if(!e)return;let{val_sheets:i}=e;t=(t||"").replace(/\./g,"-");for(let h of i)h.sheetGroups&&h.sheetGroups==t&&v.close(h.sheetID)},closeAll:t=>{let e=y.getSessionStates();if(!e)return;let{val_sheets:i}=e;for(let h of i)t&&!h.closeAtPageTransit||v.close(h.sheetID,"pageTransit",!0)},Body:t=>a(B,d({className:f("BaseBody"),backgroundColor:"layer.1",borderRadius:"1.tone.primary",position:"relative",boxShadow:"3.remark",transition:"long"},t))};export{v as Sheet,v as default};