amotify/dist/fn/Input/List.js

UI Component for React,NextJS,esbuild

import{b as o,c as d,d as B}from"../../chunk-C5N2D3ZX.js";import{jsx as a}from"react/jsx-runtime";import S,{UUID as w}from"jmini";import{useState as ie}from"react";import{$$fromRoot as ne,GenerateHTMLProps as se}from"../../@utils";import{Box as I,Flex as re,FAI as ce,Span as ue}from"../../atoms";import{Button as de}from"../Button";import{OptionalInputWrapper as me,BoxWrapper as pe,CoreEffects as M}from"./core";import{InputListClasses as T}from"../../@styles/componentClasses";function Ce(t){let{value:l,states:i}=t,{type:e,required:s,min:n,max:p}=i;n=n||0,p=p||65535;let r=[],y=l.length;return s&&(y||e=="radio"&&r.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),y<n&&r.push({type:"invalid",label:n+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),y>p&&r.push({type:"invalid",label:p+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!r.filter(({type:g})=>g=="invalid").length,notice:r}}const h={InitOptions:t=>{let l=[];return t.forEach(i=>{let{label:e,value:s}=i;S.is.nullish(e)&&(e=String(s)),l.push(d(o({},i),{label:e,value:s}))}),l},OptionalListWrapper:t=>{let{value:l,options:i=[]}=t,e=S.is.exist(l)?S.flatArray(l):[],s=[];return e.forEach(n=>{i.findIndex(r=>S.is.equal(r.value,n))!=-1&&s.push(n)}),a(h.Core,d(o({},t),{value:s,options:i}))},Core:t=>{let D=t,{type:l,tone:i,required:e,componentID:s="",form:n,override:p,icon:r,iconType:y,iconSize:g,iconPosition:P,iconColor:V,CustomIcon:X,enableFormSubmit:A,checkValidationAtFirst:$,onValidate:W,onUpdateValue:v,onUpdateValidValue:H,value:_,options:U,className:b,cellStyles:K,cellClassName:q,cellCheckedStyles:j,cellCheckedClassName:G,min:Q,max:Y,hideInput:E,freeCSS:m,wrapStyles:N}=D,x=B(D,["type","tone","required","componentID","form","override","icon","iconType","iconSize","iconPosition","iconColor","CustomIcon","enableFormSubmit","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","className","cellStyles","cellClassName","cellCheckedStyles","cellCheckedClassName","min","max","hideInput","freeCSS","wrapStyles"]),[L,C]=ie(M.DefaultStatus(s,_)),[O,Z]=ie({ok:!1,notice:[]});return M.CommonEffects({type:"list."+l,states:t,val_status:L,set_status:C,val_validate:O,set_validate:Z,SystemValidation:Ce}),a(pe,{val_status:L,set_status:C,val_validate:O,states:t,children:a(h.List,{rootStates:t,val_status:L,set_status:C})})},List:t=>{let{rootStates:l,val_status:i,set_status:e}=t,{componentID:s,type:n,tone:p,icon:r,iconSize:y,iconColor:g,isChecker:P,options:V,name:X,form:A,tabIndex:$,hideInput:W,disabled:v,className:H,cellStyles:_,cellClassName:U="",cellCheckedStyles:b,cellCheckedClassName:K="",enableFormSubmit:q}=l,{dataValue:j}=i,G=l.CustomIcon,Q=V.map((Y,E)=>{let le=Y,{value:m,label:N,disabled:x,className:L="",checkedStyles:C,checkedClassName:O="",freeCSS:Z}=le,D=B(le,["value","label","disabled","className","checkedStyles","checkedClassName","freeCSS"]),ee=w(),R=j.findIndex(c=>c===m)!=-1,f=o(o({},_),D),z=[T("Label"),U,L];R&&(f=d(o(o(o({},f),b),C),{freeCSS:o(o(o({},f==null?void 0:f.freeCSS),b==null?void 0:b.freeCSS),C==null?void 0:C.freeCSS)}),z=[...z,K,O]);const te=()=>{if(v||x)return;let c=[];if(n=="radio")c=[m];else if(n=="checkbox"||P)if(!R)c=[...i.dataValue,m];else{let u=[...i.dataValue];u.splice(i.dataValue.findIndex(F=>F==m),1),c=u}e(u=>d(o({},u),{dataValue:c,eventType:"update",eventID:w()}))};let oe=[a(ue,{position:"relative",freeCSS:{zIndex:2},flexSizing:0,children:S.is.string(N)?a(I,{children:N}):N},"content")];return r&&oe[l.iconPosition=="right"?"push":"unshift"](a(G,{isChecked:R,iconSize:y,iconColor:g,toggle:te},"icon")),[a(I,{htmlTag:"input",type:n=="radio"?"radio":"checkbox",className:T("Input"),name:"RadioCheckbox-"+X,"data-list-index":s+"-"+E,id:ee,value:String(m),disabled:v||x,checked:R,onFocus:c=>{x||n=="radio"&&(i.dataValue.length||e(u=>d(o({},u),{dataValue:[m],eventType:"update",eventID:w()})))},onChange:()=>{te()},onKeyDown:c=>{let{key:u,shiftKey:F}=c;if((n=="checkbox"||t.rootStates.isChecker)&&u!="Tab"){if(u.match(/Arrow/)){c.preventDefault();let ae=["ArrowLeft","ArrowUp"].includes(u)?-1:1,k=E+ae;k<0?k=V.length-1:k>=V.length&&(k=0),ne(`input[data-list-index="${s}-${k}"]`).focus()}}q&&M.SubmitForm(c,A)},tabIndex:$},"List-"+S.Stringify(m)),a(I,d(o({htmlTag:"label","data-disabled":v||x,htmlFor:ee,className:z.join(" "),tabIndex:-1,display:"flex",verticalAlign:"center",flexWrap:!1},f),{children:oe}),"ListTrigger-"+S.Stringify(m))]});return a(re,{flexSizing:"auto",style:l.style,freeCSS:o({},l.freeCSS),className:[H,T("CellBase"),T("HideInput_"+W),T("IconIndicator_"+!!r),T("Tone_"+p)].join(" "),children:Q})},_Icon:t=>{let l=1.5;return t.iconSize=="small"?l=1.2:t.iconSize=="large"&&(l=2),a(de.Normal,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",ssSphere:2,freeCSS:{transform:`scale(${l})`},onClick:i=>{i.preventDefault(),i.stopPropagation(),t.toggle()},children:t.children})},RadioIcon:t=>a(h._Icon,d(o({type:"radio"},t),{children:a(I,{flexCenter:!0,isRounded:!0,border:t.isChecked?"0.trans":"3.thick",borderColor:t.isChecked?t.iconColor:"3.thick",position:"relative",transition:"middle",freeCSS:{width:"50%",height:"50%"},children:a(I,{position:"absolute",transition:"middle",isRounded:!0,backgroundColor:t.iconColor,opacity:t.isChecked?"max":"trans",freeCSS:{width:"60%",height:"60%",transform:t.isChecked?"scale(1)":"scale(.4)"}})})})),CheckboxIcon:t=>a(h._Icon,d(o({type:"checkbox"},t),{children:a(I,{flexCenter:!0,boxShadow:t.isChecked?"0.remark":"none",border:t.isChecked?"0.trans":"3.thick",backgroundColor:t.isChecked?t.iconColor:"trans",position:"relative",transition:"middle",fontColor:"white",freeCSS:{borderRadius:"25%",padding:"4%",width:"50%",height:"50%"},children:a(ce.Check,{transition:"middle",opacity:t.isChecked?"max":"trans",freeCSS:{zIndex:8,width:"100%",height:"100%",transform:t.isChecked?"scale(1)":"scale(.5)"}})})}))},J=t=>{t=t||"checkbox";const l=e=>(e=d(o({gap:1,icon:!0,iconSize:"regular",iconType:t=="radio"?"radio":"checkbox",iconPosition:"left",iconColor:"theme"},e),{type:t,cellStyles:o({gap:"1/6",position:"relative",borderRadius:"2.tone.secondary",transition:"middle"},e.cellStyles)}),e.CustomIcon||(e.iconType=="radio"?e.CustomIcon=h.RadioIcon:e.iconType=="checkbox"&&(e.CustomIcon=h.CheckboxIcon)),e.iconSize=="small"?e.cellStyles.gap=0:e.iconSize=="large"&&(e.cellStyles.gap="1/2"),e.tone=="normal"?(e.cellStyles=o({padding:["1/4",1],border:"1.thin",backgroundColor:"layer.1"},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme",boxShadow:"1.normal"},e.cellCheckedStyles)):e.tone=="border"?(e.cellStyles=o({border:"1.thin",backgroundColor:"layer.1",padding:["1/2",1,"1/2","1/2"]},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme"},e.cellCheckedStyles)):e.tone=="cloud"&&(e.cellStyles=o({border:"1.thin",backgroundColor:"layer.2",padding:["1/2",1,"1/2","1/2"]},e.cellStyles),e.cellCheckedStyles=o({backgroundColor:"cloud",fontColor:"theme"},e.cellCheckedStyles)),e=se(e),e.options=h.InitOptions(e.options),a(me,{componentID:e.componentID,children:h.OptionalListWrapper,states:e})),i=l;return i.Normal=e=>a(l,o({type:t,tone:"normal",icon:!1},e)),i.Border=e=>a(l,o({type:t,tone:"border"},e)),i.Cloud=e=>a(l,o({type:t,tone:"cloud"},e)),i.Vivid=e=>a(l,o({type:t,tone:"normal",icon:!1,cellCheckedStyles:{backgroundColor:"theme",fontColor:"white"}},e)),i.Simple=e=>a(l,o({type:t,tone:"plain",icon:!1,cellCheckedStyles:{fontColor:"theme"}},e)),i},he=J("radio"),Se=J("checkbox"),ye=J();export{Se as Checkbox,ye as List,he as Radio};