amotify/dist/fn/Input/DigitCharacters.js

UI Component for React,NextJS,esbuild

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