amotify/dist/fn/Input/Slider.js

UI Component for React,NextJS,esbuild

import{b as d,c as h,d as F,e as P}from"../../chunk-C5N2D3ZX.js";import{Fragment as ee,jsx as m,jsxs as C}from"react/jsx-runtime";import x,{UUID as E}from"jmini";import{useState as W,useEffect as K}from"react";import{$$fromRoot as _,GenerateHTMLProps as $}from"../../@utils";import{Box as b,Flex as q,Column as z}from"../../atoms";import{Literal as O}from"../../mols";import{Button as Y}from"../Button";import{OptionalInputWrapper as G,BoxWrapper as j,CoreEffects as X}from"./core";import{InputSliderClasses as M}from"../../@styles/componentClasses";function Q(e){let{value:n,states:t}=e,{required:l}=t,a=[],[o,r]=x.Arrayify(n);return l&&!o&&!r&&a.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!a.filter(({type:i})=>i=="invalid").length,notice:a}}const f={getOffsetLeft:e=>{let{trackMin:n,min:t,max:l,value:a}=e,o=(a-(n!=null?n:t))/(l-(n!=null?n:t));return Math.min(o,1)*100},normalize:e=>{let{min:n,max:t,step:l,value:a}=e;a=Math.max(a,n),a=Math.min(a,t);let o=Math.round(a/l)*l;return{value:o,offsetLeft:f.getOffsetLeft(h(d({},e),{value:o}))}},Effects:{Start:(e,n)=>{let t=x.getCursor(e).x,{val_status:l}=n,{componentId:a}=l,o=_("#"+a+"_Bar"),{width:r,left:i}=o.position(),c=(t-i)/r;c=Math.max(c,0),c=Math.min(c,1);let u=c*l.max;x(document).onEvent("mousemove",p=>{f.Effects.Move(p,n,u)},{eventID:"SliderMouseMove",passive:!1}).onEvent("touchmove",p=>{f.Effects.Move(p,n,u)},{eventID:"SliderTouchMove",passive:!1}).onEvent("mouseup",()=>{f.Effects.End()},{eventID:"SliderMouseUp"}).onEvent("touchend",()=>{f.Effects.End()},{eventID:"SliderTouchEnd"})},Move:(e,n,t)=>{var I;let l=x.getCursor(e).x,{val_status:a}=n,{componentId:o}=a,r=_("#"+o+"_Bar"),{width:i,left:c}=r.position(),u=(l-c)/i;u=Math.max(u,0),u=Math.min(u,1);let p=(I=a.trackMin)!=null?I:a.min,v=u*(a.max-p)+p,S=f.normalize(h(d({},a),{value:v})).value,s=Math.round(v-t);return n.onChange(S,s),e.preventDefault(),e.stopPropagation(),!1},End:()=>{x(document).removeEvent(["SliderMouseMove","SliderTouchMove","SliderMouseUp","SliderTouchEnd"])}},Rail:e=>{let{rootStates:n,val_status:t,set_status:l}=e,{componentId:a}=t,o=2;n.size=="small"?o=1.5:n.size=="large"&&(o=2.5);let r=[f.normalize(h(d({},t),{value:t.safeValue[0]})),f.normalize(h(d({},t),{value:t.safeValue[1]||0}))];const i=(c,u)=>{let{min:p,max:v,step:g}=t;c=Math.max(Math.min(c,v),p),l(S=>{let s=d({},S);return s.safeValue[u]==c?s:(s.safeValue[u]=c,t.ranged&&s.safeValue[0]>s.safeValue[1]&&(s.safeValue=[s.safeValue[1],s.safeValue[0]]),h(d({},s),{rawValue:s.ranged?s.safeValue:s.safeValue[0],eventType:"update",eventID:E(12),isInspected:!1}))})};return m(z,{padding:[1,"1/2"],onPointerDown:c=>{e.rootStates.disabled||(c.stopPropagation(),!t.ranged&&f.Effects.Start(c,{val_status:t,onChange:u=>{i(u,0)}}))},children:C(b,{className:M("Bar"),height:0,position:"relative",transition:"middle",flexSizing:"none",id:a+"_Bar",children:[m(b,{position:"absolute",isRounded:!0,backgroundColor:"cloud",xcss:{top:-2*o,left:-2*o,right:-2*o,bottom:-2*o}}),m(f.Range,{rootStates:n,val_status:t,set_status:l,formatData:r,onUpdateValue:i}),m(f.DiscreteScale,{rootStates:n,val_status:t}),m(f.Edge,{focusIndex:0,rootStates:n,val_status:t,set_status:l,formatData:r[0],onUpdateValue:i}),t.ranged&&m(f.Edge,{focusIndex:1,rootStates:n,val_status:t,set_status:l,formatData:r[1],onUpdateValue:i})]})})},DiscreteScale:e=>{let{rootStates:n,val_status:t}=e;if(!n.discreteScale)return null;let{trackMin:l,min:a,max:o,step:r}=t,i=Math.round(a/r),u=Math.round(o/r)-i+1,p=0,v=t.safeValue[0]||0;return t.ranged&&(p=t.safeValue[0]||0,v=t.safeValue[1]||0),m(ee,{children:Array.from({length:u},(g,S)=>S+i).map(g=>{let S=g*r;S=Math.max(S,a),S=Math.min(S,o);let s=f.getOffsetLeft(h(d({},t),{value:S}))+"%",I=x.isInRange(S,p,v);return m(z,{gap:0,position:"absolute",verticalAlign:"center",horizontalAlign:"center",width:0,height:0,transition:"middle",fontColor:"1.clear",xcss:{pointerEvents:"none",top:"50%",left:s,transform:"translateY(-50%)"},children:m(b,{isRounded:!0,backgroundColor:I?"layer.0":"gray",ssSphere:"1/4"})},S)})})},Range:e=>{let{rootStates:n,formatData:t,val_status:l}=e,a=2;return n.size=="small"?a=1.5:n.size=="large"&&(a=2.5),C(b,{className:M("Range"),position:"absolute",transition:"middle",xcss:d({cursor:"pointer",top:"50%",transform:"translateY(-50%)"},l.ranged?{left:t[0].offsetLeft+"%",width:t[1].offsetLeft-t[0].offsetLeft+"%"}:{left:0,width:(t[0].offsetLeft||0)+"%"}),onPointerDown:o=>{if(!e.rootStates.disabled){if(o.stopPropagation(),l.ranged){let[r,i]=l.safeValue;o.stopPropagation(),f.Effects.Start(o,{val_status:l,onChange:(c,u)=>{e.set_status(p=>{let v=p.safeValue,g=d({},p);return g.safeValue=[f.normalize(h(d({},l),{value:r+u})).value,f.normalize(h(d({},l),{value:i+u})).value],g.safeValue[0]==v[0]&&g.safeValue[1]==v[1]?h(d({},p),{eventType:"update",eventID:E(12)}):h(d({},g),{rawValue:g.ranged?g.safeValue:g.safeValue[0],eventType:"update",eventID:E(12),isInspected:!1})})}});return}f.Effects.Start(o,{val_status:l,onChange:r=>{e.onUpdateValue(r,0)}})}},children:[m(b,{className:M("Field"),transition:"middle",position:"absolute",isRounded:!0,backgroundColor:n.color,xcss:{top:-6*a,bottom:-6*a,left:-6*a,right:-6*a}}),m(b,{className:M("Child"),transition:"middle",position:"absolute",isRounded:!0,backgroundColor:n.color,xcss:{pointerEvents:"none",top:-2*a,left:-2*a,right:-2*a,bottom:-2*a}})]})},Edge:e=>{let{formatData:n,rootStates:t,val_status:l,set_status:a}=e,o=2;return t.size=="small"?o=1.5:t.size=="large"&&(o=2.5),C(Y.Plain,{className:M("Edge"),position:"absolute",transition:"middle",height:0,width:0,flexCenter:!0,xcss:{left:n.offsetLeft+"%"},onPointerDown:r=>{e.rootStates.disabled||e.focusIndex==1&&!l.ranged||(r.stopPropagation(),f.Effects.Start(r,{val_status:l,onChange:i=>{e.onUpdateValue(i,e.focusIndex)}}))},onKeyDown:r=>{t.enableFormSubmit&&X.SubmitForm(r,t.form);let{min:i,max:c,step:u}=l,{key:p,metaKey:v,ctrlKey:g}=r,S=g||v,s=l.safeValue[e.focusIndex];if(!p.match(/Arrow/))return;r.preventDefault(),p.match(/Left|Up/)?S?s=i:s-=u:p.match(/Right|Down/)&&(S?s=c:s+=u);let I=f.normalize(h(d({},l),{value:s}));e.onUpdateValue(I.value,e.focusIndex)},onFocus:r=>{a(i=>h(d({},i),{eventID:E(12),isFocusing:!0}))},onBlur:r=>{a(i=>h(d({},i),{eventID:E(12),isFocusing:!1}))},children:[m(b,{className:M("EdgeChild"),transition:"middle",position:"absolute",backgroundColor:t.color,isRounded:!0,opacity:"trans",xcss:{pointerEvents:"all",top:-12*o,bottom:-12*o,left:-12*o,right:-12*o}}),m(b,{transition:"long",boxShadow:"1.remark",fontSize:"0.xs",backgroundColor:!l.ranged||e.focusIndex==1?t.color:"layer.0",ssSphere:o,xcss:{pointerEvents:"all"}})]})},Legends:e=>{var g;let{val_status:n,rootStates:t}=e,{trackMin:l,min:a,max:o,step:r}=n,[i]=W(E()),c=(g=t.legends)!=null?g:!0,u=Math.round(a/r),p=Math.round(o/r),v=p-u+1;return K(()=>{if(!c)return;const S=()=>P(void 0,null,function*(){yield x.pending(100);let s=_("#"+i),I=_("#"+i+"-"+a),T=s.position().width-I.position().left,B=12*4,k=Math.round(T/B),U=Math.max(1,Math.floor(v/k));for(let y=u;y<=p;y++){let D=y*r,A=y==u||y==p||y%U==0;_("#"+i+"-"+D).css({display:A?"flex":"none"})}});return x(window).onEvent("resize",S,{eventID:"SliderResizeCB-"+i}),S(),()=>{x(window).removeEvent("SliderResizeCB-"+i)}},[]),c?C(q,{fontSize:"0.xs",position:"relative",padding:[0,"1/2"],id:i,xcss:{pointerEvents:"none",userSelect:"none"},children:[C(z,{gap:0,unitWidth:0,opacity:"trans",children:[m(b,{unitHeight:"1/2"}),m(O.Mini,{fontHeight:1.2,children:"A"})]}),Array.from({length:v},(S,s)=>s+u).map(S=>{let s=S*r;s=Math.max(s,a),s=Math.min(s,o);let I=f.getOffsetLeft(h(d({},n),{value:s}))+"%";return C(z,{gap:0,id:i+"-"+s,className:M("Legend"),position:"relative",verticalAlign:"center",unitWidth:0,display:"none",transition:"middle",fontColor:"1.clear",textAlign:"center",xcss:{left:I,whiteSpace:"nowrap"},children:[m(b,{isRounded:!0,backgroundColor:"mono.positive",opacity:"low",unitWidth:"1/12",unitHeight:"1/2"}),m(O.Micro,{fontHeight:1.2,children:t.onLegendRender?t.onLegendRender(s):s.rank()})]},s)})]}):null},index:e=>{let N=e,{color:n="theme",required:t,form:l="",discreteScale:a,size:o,ranged:r,legends:i,onLegendRender:c,trackMin:u,min:p,max:v,step:g,enableFormSubmit:S,showInitValidation:s,onValidate:I,onValidateDelay:T,onUpdateValue:B,onUpdateValidValue:k,onUserAction:U,value:y=0,className:D,wrapStyles:A}=N,J=F(N,["color","required","form","discreteScale","size","ranged","legends","onLegendRender","trackMin","min","max","step","enableFormSubmit","showInitValidation","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","className","wrapStyles"]),[L,w]=W({componentId:e.componentId||"",rawValue:y,safeValue:x.Arrayify(y),ranged:!!r,trackMin:Math.min(u!=null?u:p,p),min:p,max:v,step:g,eventType:"init",eventID:E(12)});return X.CommonEffects({type:"slider",states:e,val_status:L,set_status:w,SystemValidation:Q,ExtraOverrideStates:H=>({safeValue:x.Arrayify(H)})}),m(j,{val_status:L,set_status:w,states:e,children:C(z,h(d({gap:0,padding:[0,"1/2"],flexSizing:"auto"},J),{className:[D,M("Wrap")].join(" "),children:[m(f.Rail,{rootStates:e,val_status:L,set_status:w}),m(f.Legends,{rootStates:e,val_status:L})]}))})}},V=e=>{let n=h(d({color:"theme",size:"medium",discreteScale:!0},e),{xcss:d({minWidth:120},e.xcss)});return m(G,{componentId:e.componentId,children:f.index,states:$(n)})},R=V;R.Small=e=>m(V,d({size:"small"},e)),R.Medium=e=>m(V,d({size:"medium"},e)),R.Large=e=>m(V,d({size:"large"},e));const Z=e=>m(V,d({ranged:!0},e));R.Range=Z,R.Range.Small=e=>m(V,d({ranged:!0,size:"small"},e)),R.Range.Medium=e=>m(V,d({ranged:!0,size:"medium"},e)),R.Range.Large=e=>m(V,d({ranged:!0,size:"large"},e));export{R as Slider,R as default};