amotify/dist/fn/Input/DigitCharacters.js

UI Component for React,NextJS,esbuild

import{b as t,c as o,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as x}from"react/jsx-runtime";import{useState as P}from"react";import V,{UUID as g}from"jmini";import{$$fromRoot as _,GenerateHTMLProps as K}from"../../@utils";import{OptionalInputWrapper as U,BoxWrapper as W,CoreEffects as F,DefaultBoxishStyles as k}from"./core";import{Flex as $}from"../../atoms";import{InputClasses as R}from"../../@styles/componentClasses";function z(e){let{value:n,states:u}=e,{required:d,numericOnly:p=!1,digits:D}=u,r=[];return d&&!n&&r.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),n&&(p&&n.match(/\D/)&&r.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),n.length!=D&&r.push({type:"warn",label:"\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"})),{ok:!r.filter(({type:h})=>h=="invalid"||h=="warn").length,notice:r}}const q=(e,n="")=>{let u=String(n),d=[];for(let p=0;p<e;p++)d[p]=u[p]||"";return{safeValue:d,rawValue:u}},B=(e="")=>{let n=e,u=n.join("");return{safeValue:n,rawValue:u}},X=e=>{let S=e,{tone:n,required:u,form:d,name:p,className:D="",digits:r,numericOnly:C=!1,enableFormSubmit:h,showInitValidation:j,onChange:G,onKeyDown:J,onValidate:Q,onValidateDelay:Y,onUpdateValue:Z,onUpdateValidValue:ee,onUserAction:te,value:A="",override:ne,xcss:ae,wrapStyles:ie,combineInput:se,componentId:re,listStyles:E}=S,a=T(S,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","showInitValidation","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","override","xcss","wrapStyles","combineInput","componentId","listStyles"]),[c,f]=P(()=>o(t({componentId:e.componentId||""},q(r,A)),{eventType:"init",eventID:g(12)}));F.CommonEffects({type:"textfield",states:e,val_status:c,set_status:f,SystemValidation:z});let b=[];for(let i=0;i<r;i++){let M=c.safeValue[i],H={},v=D;e.combineInput&&(v=[D,R("DigitCharacterCell"),R("Combined")].join(" ")),b.push(x("input",{type:"text",inputMode:C?"numeric":e.inputMode||"text",value:M,id:"Digit-"+i+"-"+c.componentId,className:v,style:t(t({},e.style),H),onKeyDown:m=>{let{key:l,code:L}=m;if(l=="Tab")return;m.preventDefault();let y=null;if(l=="Backspace"){let s=c.safeValue;s[i]="",f(I=>o(t(t({},I),B(s)),{eventType:"update",eventID:g(12),isInspected:!1})),y=i-1}else if(V.isOneOf(l,"ArrowLeft","ArrowRight")){let s=+(l=="ArrowRight")*2-1;y=i+s}else h&&F.SubmitForm(m,d),(()=>{let s=L.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!s)return;let I=s[2]||s[3]||s[4];if(C&&!I.match(/\d/)||!I)return;let w=c.safeValue;w[i]=I,f(N=>o(t(t({},N),B(w)),{eventType:"update",eventID:g(12),isInspected:!1})),y=i+1})();V.isExist(y)&&_("#Digit-"+y+"-"+c.componentId).focus()},onChange:()=>{},onFocus:m=>{a!=null&&a.onFocus&&(a==null||a.onFocus(m)),f(l=>o(t({},l),{eventID:g(12),isFocusing:!0}))},onBlur:m=>{a!=null&&a.onBlur&&(a==null||a.onBlur(m)),f(l=>o(t({},l),{eventID:g(12),isFocusing:!1}))}},i))}return x(W,{val_status:c,set_status:f,states:e,children:x($,o(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},E),{children:b}))})},O=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=o(t({textAlign:"center",width:0},e),{xcss:t({minWidth:12*2,marginRight:-1},e.xcss),listStyles:t({borderRadius:"2.tone.secondary",border:"unset",gap:0},e.listStyles)}));let n=K(k(e));return x(U,{componentId:e.componentId,children:X,states:n})};export{O as DigitCharacters,O as default};