amotify/dist/fn/Input/Drum.js

UI Component for React,NextJS,esbuild

import{b as a,c as p,d as _}from"../../chunk-C5N2D3ZX.js";import{Fragment as G,jsx as r,jsxs as W}from"react/jsx-runtime";import x,{UUID as I}from"jmini";import{useState as k,useEffect as H}from"react";import{$$fromRoot as $}from"../../@utils";import{Box as v,Column as j,CacheRender as q}from"../../atoms";import{Button as N}from"../Button";import{OptionalInputWrapper as Z,BoxWrapper as X,CoreEffects as V,DefaultBoxishStyles as J}from"./core";function Y(o){let{value:e,states:n}=o,{required:l}=n,t=[];return l&&e===null&&t.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!t.filter(({type:u})=>u=="invalid").length,notice:t}}const f={Original:o=>{let{rootStates:e,val_status:n,set_status:l}=o,C=e,{required:t,form:u,className:d,isHorizontal:s,enableFormSubmit:E,showInitValidation:z,onValidate:K,onValidateDelay:Q,onUpdateValue:ee,onUpdateValidValue:te,onUserAction:oe,value:ne="",options:D,componentId:R,status_id:ae,wrapStyles:re}=C,B=_(C,["required","form","className","isHorizontal","enableFormSubmit","showInitValidation","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","componentId","status_id","wrapStyles"]),[i,A]=k(null);return H(()=>{let c=$(`[data-component-id="${R}"]`);if(!c[0])return;A(c[0]);let h="onscrollend"in window,y="scroll.Drum-"+R,g=h?50:150;return c.onEvent(h&&"scrollend"||"scroll",S=>{x.interval.once(()=>{let{top:m,left:L,width:M,height:P}=c.position();const b=document.elementFromPoint(L+M/2,m+P/2);if(!b||!b.id)return;let[F,le,U]=b.id.split("-");if(F!=n.componentId)return;let w=D[Number(U)];w&&l(T=>T.rawValue==w.value?p(a({},T),{eventID:I(12)}):p(a({},T),{rawValue:w.value,eventType:"update",eventID:I(12),isInspected:!1,isValidated:!1,notice:[]}))},g,"update-drum-input-value")},{eventID:y}),()=>{c.removeEvent(y)}},[]),H(()=>{if(!i)return;let c=D.findIndex(m=>(m==null?void 0:m.value)==n.rawValue);if(c===-1)return;let h=x("#"+[n.componentId,"opt",c].join("-"))[0];if(!h)return;let y=i.position(),g=h.position();if(s){let m=h.offsetLeft-y.width/2+g.width/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({left:m,behavior:"smooth"});return}i.scrollLeft=m;return}let S=h.offsetTop-y.height/2+g.height/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({top:S,behavior:"smooth"});return}i.scrollTop=S},[i,n.rawValue]),W(j,p(a({gap:"1/4",tabIndex:0,position:"relative"},B),{"data-disabled":e.disabled,"data-show-validation":V.isShowValidation(n,!!z),"data-component-id":n.componentId,"data-input-origin":n.componentId,children:[r(f.Marker,p(a({},o),{val_parent:i})),r(f.EdgePadding,{}),r(f.Options,a({},o)),r(f.EdgePadding,{})]}))},Options:o=>{let{rootStates:e,val_status:n,set_status:l}=o;return r(G,{children:e.options.map((t,u)=>{if(!t)return null;let d=x.isEqual(t==null?void 0:t.value,n.rawValue);return t.type=="label"?r(v,{children:t.label||t.value},I(12)):r(q,{params:{value:t.value,isSelected:d},forceRender:(s,E)=>s.isSelected!=E.isSelected,children:r(N.Clear,{id:[n.componentId,"opt",u].join("-"),tabIndex:-1,padding:"1/2",color:"cloud",border:"0.trans",ssEffectsOnActive:!1,isActive:d,isActiveStyles:{isSemiBoldFont:!0},xcss:{scrollSnapAlign:"center"},onClick:()=>{d||l(s=>p(a({},s),{rawValue:t.value,eventType:"update",eventID:I(12),isInspected:!1,isValidated:!1,notice:[]}))},children:t.label||t.value})},[u,t==null?void 0:t.value].join("-"))})})},Marker:o=>{let{rootStates:e,val_parent:n,val_status:l}=o,t=!e.isHorizontal;if(!n)return null;let u=e.options.findIndex(s=>(s==null?void 0:s.value)==l.rawValue);if(u===-1)return null;let d=x("#"+[l.componentId,"opt",u].join("-"))[0];return d?r(v,p(a({flexSizing:"none",transition:"short",position:"sticky"},t?{height:0}:{width:0}),{flexCenter:!0,ssZIndex:3,xcss:a({pointerEvents:"none"},t?{top:"50%",transform:"translateY(-50%)"}:{left:"50%",transform:"translateX(-50%)"}),children:r(v,{transition:"short",boxShadow:"0.remark",borderRadius:"2.tone.secondary",backgroundColor:"theme.opa.few",border:!0,borderColor:"theme",flexSizing:"none",xcss:{height:d.position().height||0,width:d.position().width||0}})})):null},EdgePadding:()=>r(v,{flexSizing:"none",xcss:{width:"50%",height:"50%",pointerEvents:"none"}}),EdgeShadow:o=>o.position=="top"||o.position=="bottom"?r(v,{position:"absolute",borderRadius:"1.tone.primary",ssZIndex:10,gradients:{deg:o.position=="top"?0:180,colors:["hsla(var(--color-layer0-hsl),0)","hsla(var(--color-layer0-hsl),.8)"]},xcss:{[o.position]:1,left:1,right:1,height:"35%",pointerEvents:"none"}}):r(v,{position:"absolute",borderRadius:"1.tone.primary",ssZIndex:10,xcss:{[o.position]:1,top:1,bottom:1,width:"35%",pointerEvents:"none"}}),Core:o=>{let[e,n]=k(V.DefaultStatus(o.componentId,o.value)),l={rootStates:o,val_status:e,set_status:n};return V.CommonEffects({type:"drum",states:o,val_status:e,set_status:n,SystemValidation:Y}),W(X,{val_status:e,set_status:n,states:o,children:[r(f.EdgeShadow,{position:o.isHorizontal?"left":"top"}),r(f.Original,a({},l)),r(f.EdgeShadow,{position:o.isHorizontal?"right":"bottom"})]})}},O=o=>{var n,l;let e=a({},o);return e=a({padding:"1/2",overflow:"auto"},e),e.isHorizontal?e=p(a({flexType:"row",flexWrap:!1},e),{xcss:a({whiteSpace:"nowrap",scrollSnapType:"x mandatory",maxWidth:12*24},e.xcss)}):e=p(a({},e),{xcss:a({scrollSnapType:"y mandatory",maxHeight:12*20,minWidth:12*6},e.xcss)}),e.value=(n=e.value)!=null?n:null,(l=e.options)==null||l.forEach((t,u)=>{if(!t)return;let{type:d,value:s}=t;e.options[u]=p(a({id:I(12)},t),{value:s,type:d||"selector"})}),r(Z,{componentId:e.componentId,children:f.Core,states:J(e)})};export{O as Drum,O as default};