amotify
Version:
UI Component for React,NextJS,esbuild
4 lines (3 loc) • 16.4 kB
JavaScript
import{b as n,c as s,d as te,e as ue}from"../../chunk-C5N2D3ZX.js";import{Fragment as fe,jsx as u,jsxs as q}from"react/jsx-runtime";import p,{UUID as w,useStore as ce}from"jmini";import{useState as pe,useEffect as ae}from"react";import{$$fromRoot as Fe,ExtractStyles as Ne}from"../../@utils";import{Box as F,FAI as De}from"../../atoms";import{Literal as ie}from"../../mols";import{Tips as me,Button as ke}from"..";import{faEye as Ee}from"@fortawesome/free-solid-svg-icons/faEye";import{OptionalInputWrapper as He,BoxWrapper as Ae,CoreEffects as $,DefaultBoxishStyles as Be}from"./core";import{InputLabel as Le}from"./Label";import{LeftIcon as Me,RightIcon as de}from".";const _e={katakana:{reg:/^[ァ-ヶー ｦ-ﾟ ]*$/g,exist:!0,reason:"\u30AB\u30BF\u30AB\u30CA\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},"hankaku.katakana":{reg:/^[ｦ-ﾟ ]*$/g,exist:!0,reason:"\u534A\u89D2\u30AB\u30BF\u30AB\u30CA\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},number:{reg:/^-?[0-9\.]{0,}[0-9]{1,}$/g,exist:!0,reason:"\u534A\u89D2\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},digitNumber:{reg:/^-?[0-9\,\.]{0,}[0-9]{1,}$/g,exist:!0,reason:"\u534A\u89D2\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},fileName:{reg:/[¥\/:*\?\"\'\|\.\s\n\r\<\>]/g,exist:!1,reason:"\u7A7A\u767D\u307E\u305F\u306F\u4E00\u90E8\u306E\u7279\u6B8A\u6587\u5B57\u306F\u4F7F\u7528\u3067\u304D\u307E\u305B\u3093"},creditCard:{reg:/^\d{14,16}$/g,exist:!0,reason:"14~16\u6841\u306E\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},email:{reg:/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+\.[A-Za-z0-9]+$/,exist:!0,reason:q(fe,{children:[u(F,{children:"\u25CB\u25CB\u25CB\u25CB@\u25CB\u25CB\u25CB\u25CB.\u25CB\u25CB\u25CB\u306E\u5F62\u5F0F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),u(F,{children:"\u6700\u5F8C\u306E\u6587\u5B57\u306B.(\u30C9\u30C3\u30C8)\u3092\u5165\u308C\u308B\u3053\u3068\u306F\u3067\u304D\u307E\u305B\u3093"})]})},password:{reg:/^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=[^0-9]*[0-9]).{8,}$/,exist:!0,reason:"8\u6587\u5B57\u4EE5\u4E0A\u3001\u534A\u89D2\u82F1\u6570\u5927\u5C0F\u6587\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},tel:{reg:/.*$/g,exist:!0,reason:q(fe,{children:[u(F,{children:"0\u304B\u3089\u59CB\u307E\u308B\u756A\u53F7\u306E\u307F\u5165\u529B\u53EF\u80FD\u3067\u3059"}),u(F,{children:"9~12\u6841\u306E\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),u(F,{children:"\u6570\u5B57\u306E\u307F\u5165\u529B\u53EF\u80FD\u3067\u3059"})]})},url:{reg:/^https?:\/\/[^\n\s]+(\.|\:)[^\n\s\.\:]+$/,exist:!0,reason:"URL\u5F62\u5F0F : http(s)://\u25EF\u25EF\u25EF\u25EF"},postal:{reg:/^\d{7}$/g,exist:!0,reason:"7\u6841\u306E\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}},T={setSelection:e=>{let{id:i,restrict:a,val_status:o}=e,m=Fe("#"+i)[0];if(!m||!o.prevValue||!o.safeValue||!o.isFocusing||o.isComposing)return;let{safeValue:t,prevValue:f,caretFrom:g,caretTo:r}=o;if(a=="creditCard")t.length>=f.length&&g%5==0&&(g++,r++),m.setSelectionRange(g,r);else if(a=="postal")t.length==5&&f.length==3&&(g++,r++),m.setSelectionRange(g,r);else if(a=="digitNumber"){let l=t.length-f.length;l==2&&(g++,r++),l==-2&&(g--,r--),m.setSelectionRange(g,r)}},Validation:{System:e=>{let{value:i,states:a}=e,{restrict:o="text",defaultValidation:m,maxLength:t,multiline:f,required:g}=a,r=[];if(f||(t=t||255),p.isExist(t)&&i.length>=Number(t)&&r.push({type:"invalid",label:t+"\u5B57\u4EE5\u5185\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),i){let l=T.Validation.Text(i,o,m);l.ok||r.push({type:"invalid",label:l.body})}else g&&r.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"});return{ok:!r.filter(({type:l})=>l=="invalid").length,notice:r}},Text:(e,i,a)=>{let o={ok:!0,body:""};return(()=>{let m=a||_e[i];if(!m)return;let t=m.reason;if(m){let f=!!(+!!e.match(m.reg)^+!m.exist);o={ok:f,body:f?"":t}}})(),o},SyncValue:e=>{let{restrict:i,allowDecimals:a,allowZeroStart:o,value:m=""}=e,t=String(m);p.isOneOf(i,"tel","number","digitNumber","postal","creditCard")&&(t=t.zen2hanNumber()),i=="katakana",i=="hankaku.katakana",p.isOneOf(i,"postal","creditCard")&&(t=t.removeLetters()),p.scope(()=>{if(!p.isOneOf(i,"number","digitNumber"))return;t=t.replace(/(\.\d+)\..*/g,"$1").replace(/\.+/g,".").replace(/[^0-9.-]/g,"");let g=Number(t)<0||t[0]=="-";t=t.replace(/[^0-9.]/g,""),g&&(t="-"+t);let r=Number(a);a?t=t.replace(/(\.\d{0,})\..*/g,"$1").replace(/\.(\d{0,})/g,(l,x)=>x.length>r?"."+x.slice(0,r):l):t=t.replace(/\.\d?/g,""),p.scope(()=>{p.isOneOf(i,"number","digitNumber")&&(o||(t=t.replace(/^0(\d+)/g,"$1").replace(/^-0(\d+)/g,"-$1")))}),p.scope(()=>{let l=t.slice(-1);if(!t||l=="."||l=="-")return;let{min:x,max:h}=e;p.isExist(x)&&p.isNumber(x)&&Number(t)<Number(x)&&(t=String(x.toFixed(r))),p.isExist(h)&&p.isNumber(h)&&Number(t)>Number(h)&&(t=String(h.toFixed(r)))}),p.scope(()=>{if(!t||t=="-"||i!="digitNumber")return;let l=t.slice(-1),[x,h]=t.split(".");t=x.replace(/\B(?=(\d{3})+(?!\d))/g,","),h&&(t+="."+h),l=="."&&(t+=".")})});let f=t;return i=="digitNumber"||(i=="postal"?t.length>=4&&(f=t.clip(0,3)+"-"+t.clip(3)):i=="creditCard"&&(f=t.replace(/.{4}(?=.)/g,"$& "))),(i=="digitNumber"||i=="number")&&(t=t.replace(/,/g,"")),{safeValue:f,rawValue:t}}},Shallow:e=>{let{rootStates:i,val_status:a}=e,o=a.rawValue||"";ae(()=>{p.scope(()=>ue(void 0,null,function*(){if(!i.multiline)return;let l=p('[data-input-origin="'+a.componentId+'"]'),x=p('[data-input-shallow="'+a.componentId+'"]'),h=p('[data-input-min-height-value-shallow="'+a.componentId+'"]'),v=p('[data-input-max-height-value-shallow="'+a.componentId+'"]');if(!l[0]||!x[0]||!h[0]||!v[0])return;let k=x.position(),J=h.position(),Y=v.position(),N=0;i.autoHeight&&(N=k.height),N=Math.max(N,J.height),N=Math.min(N,Y.height),l[0].style.height=N+"px"}))},[o]);let m=o||"";(!!o.match(/\n$/)||!o)&&(m+="T");let f="",g="";if(i.multiline){let l=i.minRows||1,x=i.maxRows||100;f=`
T`.repeat(l-1),g=`
T`.repeat(x-1)}let[r]=Ne(i);return q(F,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",ssZIndex:3,xcss:{pointerEvents:"none"},children:[u(ie.Description,s(n({className:i.className},r),{position:"absolute",width:1,xcss:s(n({},r.xcss),{color:"orange"}),"data-input-shallow":a.componentId,children:u(F,{"data-input-value-shallow":a.componentId,children:m})})),u(ie.Description,s(n({className:i.className},r),{position:"absolute",left:0,xcss:s(n({},r.xcss),{backgroundColor:"transparent",color:"blue"}),"data-input-min-height-value-shallow":a.componentId,children:f})),u(ie.Description,s(n({className:i.className},r),{position:"absolute",right:0,xcss:s(n({},r.xcss),{backgroundColor:"transparent",color:"red"}),"data-input-max-height-value-shallow":a.componentId,children:g}))]})},InputBox:e=>{let{rootStates:i,val_status:a,set_status:o,val_inputType:m,set_inputType:t}=e;if(i.multiline)return null;let re=i,{componentId:f,tone:g,required:r,restrict:l="text",form:x,autoComplete:h="off",autoCapitalize:v="off",minRows:k,maxRows:J,multiline:Y,autoHeight:N,enableFormSubmit:ne,clearButton:le=!1,allowDecimals:Z,allowZeroStart:B,showInitValidation:P,onChange:L,onKeyDown:X,onValidate:ge,onValidateDelay:xe,onUpdateValue:be,onUpdateValidValue:Ie,onUserAction:he,value:Se="",leftIndicator:Te,rightIndicator:we,leftIcon:ye,rightIcon:ve,maxLength:Ve,min:c,max:z,label:j,isLabelActive:S,defaultValidation:V,wrapStyles:oe}=re,d=te(re,["componentId","tone","required","restrict","form","autoComplete","autoCapitalize","minRows","maxRows","multiline","autoHeight","enableFormSubmit","clearButton","allowDecimals","allowZeroStart","showInitValidation","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","leftIndicator","rightIndicator","leftIcon","rightIcon","maxLength","min","max","label","isLabelActive","defaultValidation","wrapStyles"]);return u(F,s(n({htmlTag:"input",type:m,inputMode:p.isOneOf(l,"number","digitNumber","creditCard")?"numeric":l=="email"?"email":"text","data-disabled":i.disabled,"data-show-validation":$.isShowValidation(a,!!P),"data-component-id":a.componentId,"data-input-origin":a.componentId,value:a.safeValue,autoComplete:h,autoCapitalize:v,onKeyDown:I=>{let{key:b,target:C}=I,A=C,{selectionStart:M,selectionEnd:G}=A,U=Number(M),_=Number(G);{let E=a.safeValue[Number(U)],H=a.safeValue[Number(U)-1];b=="Delete"&&(l=="creditCard"&&E==" "||l=="postal"&&E=="-"||l=="digitNumber"&&E==",")&&(A.setSelectionRange(U+1,_+1),I.preventDefault()),b=="Backspace"&&(l=="creditCard"&&H==" "||l=="postal"&&H=="-"||l=="digitNumber"&&H==",")&&(A.setSelectionRange(U-1,_-1),I.preventDefault()),b=="Enter"||b=="Tab"}p.scope(()=>{p.isOneOf(l,"number","digitNumber","creditCard")&&b=="Clear"&&o(E=>s(n({},E),{rawValue:"",safeValue:"",eventType:"update",eventID:w(12),isFocusing:!0,isInspected:!1}))}),p.scope(()=>{if(!p.isOneOf(l,"number","digitNumber")||!p.isOneOf(b,"ArrowUp","ArrowDown"))return;let E=+(b=="ArrowUp")*2-1,H=a.rawValue.slice(-1),se=a.safeValue[_-1],D=_-1,R=String(a.safeValue),Q=a.rawValue.split(".")[1],Ce=(Q==null?void 0:Q.length)||0;p.scope(()=>{if(!H){R="0";return}if(H=="-"){R+="0";return}if(H=="."){R+="0";return}if(_==0)return;let ee=String(R).slice(0,D).match(/\./),Re=String(R).slice(D),K=String(Re.toNumber().toFixed(0)).length;se=="."&&(K=1,D=R.split(".")[0].length-1),se==","&&(K+=1,D--),ee&&(K=-1*(Ce-K));let O=R[D].toNumber()+E;O<0?O=9:O>=10&&(O=0),R=R.partReplace(D,String(O)),setTimeout(()=>{A.setSelectionRange(D+1,D+1)},1)}),o(ee=>s(n(n({},ee),T.Validation.SyncValue({allowDecimals:Z,allowZeroStart:B,min:c,max:z,restrict:l,value:R})),{eventType:"update",eventID:w(12),isFocusing:!0,isInspected:!1,isValidated:!1,notice:[]})),I.preventDefault()}),X&&X(I),ne&&$.SubmitForm(I,x)},onChange:I=>{let{value:b,selectionStart:C,selectionEnd:A}=I.target,M=T.Validation.SyncValue({allowDecimals:Z,allowZeroStart:B,min:c,max:z,restrict:l,value:b});a.isComposing&&(M.safeValue=b),M.safeValue!=a.safeValue&&(o(G=>s(n(n({},G),M),{prevValue:a.safeValue,eventType:"update",eventID:w(12),caretFrom:Number(C),caretTo:Number(A),isFocusing:!0,isInspected:!1,isValidated:!1,notice:[]})),L&&L(I))},width:1},d),{onFocus:I=>{d!=null&&d.onFocus&&(d==null||d.onFocus(I)),o(b=>s(n({},b),{eventID:w(12),isFocusing:!0}))},onBlur:I=>{d!=null&&d.onBlur&&(d==null||d.onBlur(I)),o(b=>s(n({},b),{eventID:w(12),isFocusing:!1}))},onCompositionStart:I=>{d!=null&&d.onCompositionStart&&(d==null||d.onCompositionStart(I)),o(b=>s(n({},b),{eventID:w(12),isComposing:!0}))},onCompositionEnd:I=>{if(d!=null&&d.onCompositionEnd&&(d==null||d.onCompositionEnd(I)),l=="text"){p.interval.once(()=>{o(C=>s(n({},C),{isComposing:!1}))},100,"input.textfield.composing.end");return}let b=T.Validation.SyncValue({allowDecimals:Z,allowZeroStart:B,min:c,max:z,restrict:l,value:a.safeValue});o(C=>s(n(n({},C),b),{prevValue:C.safeValue,eventType:"update",eventID:w(12),caretFrom:Number(C.safeValue.length+1),caretTo:Number(C.safeValue.length+1),isComposing:!1,isInspected:!1}))}}))},TextAreaBox:e=>{let{rootStates:i,val_status:a,set_status:o,isShallow:m}=e,j=i,{componentId:t,tone:f,required:g,form:r,label:l,isLabelActive:x,clearButton:h=!1,minRows:v,maxRows:k,multiline:J,autoHeight:Y,allowDecimals:N,allowZeroStart:ne,enableFormSubmit:le,maxLength:Z,showInitValidation:B,onChange:P,onKeyDown:L,onValidate:X,onValidateDelay:ge,onUpdateValue:xe,onUpdateValidValue:be,onUserAction:Ie,value:he="",leftIndicator:Se,rightIndicator:Te,leftIcon:we,rightIcon:ye,defaultValidation:ve,wrapStyles:Ve}=j,c=te(j,["componentId","tone","required","form","label","isLabelActive","clearButton","minRows","maxRows","multiline","autoHeight","allowDecimals","allowZeroStart","enableFormSubmit","maxLength","showInitValidation","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","leftIndicator","rightIndicator","leftIcon","rightIcon","defaultValidation","wrapStyles"]);return!i.multiline?null:u(F,s(n({htmlTag:"textarea","data-show-validation":$.isShowValidation(a,!!B),"data-input-origin":a.componentId,"data-component-id":a.componentId,value:a.rawValue,width:1},c),{onFocus:S=>{c!=null&&c.onFocus&&(c==null||c.onFocus(S)),o(V=>s(n({},V),{eventID:w(12),isFocusing:!0}))},onBlur:S=>{c!=null&&c.onBlur&&(c==null||c.onBlur(S)),o(V=>s(n({},V),{eventID:w(12),isFocusing:!1}))},onCompositionStart:S=>{c!=null&&c.onCompositionStart&&(c==null||c.onCompositionStart(S)),o(V=>s(n({},V),{eventID:w(12),isComposing:!0}))},onCompositionEnd:S=>{c!=null&&c.onCompositionEnd&&(c==null||c.onCompositionEnd(S)),p.interval.once(()=>{o(V=>s(n({},V),{eventID:w(12),isComposing:!1}))},100,"input.textfield.composing.end")},onKeyDown:S=>{L&&L(S),le&&$.SubmitForm(S,r)},onChange:S=>{let{value:V}=S.target;o(oe=>s(n({},oe),{rawValue:V,eventType:"update",eventID:w(12),isFocusing:!0,isInspected:!1,isValidated:!1,notice:[]})),P&&P(S)}}))}},Oe=e=>{let{componentId:i,restrict:a="text",value:o="",min:m,max:t,allowDecimals:f,allowZeroStart:g}=e,[r,l]=pe(()=>s(n({componentId:i},T.Validation.SyncValue({allowDecimals:f,allowZeroStart:g,min:m,max:t,restrict:a,value:o})),{prevValue:"",eventType:"init",eventID:w(12),caretFrom:null,caretTo:null})),[x,h]=pe(p.isOneOf(a,"password","concealed")&&"password"||"text");ae(()=>{l(k=>s(n(n({},k),T.Validation.SyncValue({allowDecimals:f,allowZeroStart:g,min:m,max:t,restrict:a,value:o})),{isInspected:!1})),ce.set({[i+":set_inputType"]:h})},[]);let v={rootStates:e,val_inputType:x,set_inputType:h,val_status:r,set_status:l};return $.CommonEffects({type:"textfield",states:e,val_status:r,set_status:l,SystemValidation:T.Validation.System,ExtraOverrideStates:k=>T.Validation.SyncValue({allowDecimals:f,allowZeroStart:g,min:m,max:t,restrict:a,value:k})}),ae(()=>{T.setSelection({id:e.id,restrict:a,val_status:r})},[r]),q(Ae,{val_status:r,set_status:l,states:v.rootStates,children:[u(Le,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:e.isLabelActive||!!r.isFocusing||!!r.rawValue,val_status:r}),u(T.Shallow,n({},v)),u(T.InputBox,n({},v)),u(T.TextAreaBox,n({},v))]})},y=e=>{var i,a;return e=n({autoHeight:!0,restrict:"text",fontSize:"inherit",value:""},e),e.value=(a=T.Validation.SyncValue({allowDecimals:e.allowDecimals,allowZeroStart:e.allowZeroStart,min:e.min,max:e.max,restrict:e.restrict||"text",value:(i=e.value)!=null?i:""}).rawValue)!=null?a:"",e.multiline?(e.minRows=e.minRows||5,e.maxRows=e.maxRows||20):(e.minRows=1,e.maxRows=1),u(He,{componentId:e.componentId,children:Oe,states:Be(e)})},W=Object.assign(y,{Validate:T.Validation.Text,Katakana:e=>u(y,s(n({},e),{restrict:"katakana",multiline:!1,autoHeight:!1})),HankakuKatakana:e=>u(y,s(n({},e),{restrict:"hankaku.katakana",multiline:!1,autoHeight:!1})),CreditCard:e=>u(y,s(n({},e),{restrict:"creditCard",multiline:!1,autoHeight:!1})),Tel:e=>u(y,s(n({},e),{restrict:"tel",multiline:!1,autoHeight:!1})),Number:e=>u(y,s(n({},e),{restrict:"number",multiline:!1,autoHeight:!1})),DigitNumber:e=>u(y,s(n({},e),{restrict:"digitNumber",multiline:!1,autoHeight:!1})),Email:e=>u(y,s(n({},e),{restrict:"email",multiline:!1,autoHeight:!1})),Url:e=>u(y,s(n({},e),{restrict:"url",multiline:!1,autoHeight:!1})),Postal:e=>u(y,s(n({label:"\u90F5\u4FBF\u756A\u53F7"},e),{restrict:"postal",multiline:!1,autoHeight:!1,leftIcon:u(Me,{ssSphere:2,fontColor:"4.thin",children:"\u3012"})})),Password:e=>u(y,s(n({label:"\u30D1\u30B9\u30EF\u30FC\u30C9",rightIcon:u(de,{ssSphere:2.5,xcss:{pointerEvents:"all"},children:u(ke.Sub,{ssSphere:2.5,borderRadius:"3.tone.tertiary",fontColor:"theme",flexCenter:!0,height:1,ssEffectsOnActive:["expand"],onMouseOver:i=>{me.open(i.currentTarget,"\u30C6\u30AD\u30B9\u30C8\u3092\u8868\u793A/\u975E\u8868\u793A",24)},onMouseLeave:me.abort,tabIndex:-1,onClick:i=>{p(i.target).parent().parent().find("input").callback(a=>{let o=a[0];if(!o)return;let m=o.dataset.componentId;if(!m)return;let t=ce.get(m+":set_inputType");t&&t(f=>f==="password"&&"text"||"password")})},children:u(De,{icon:Ee})})}),restrict:"password"},e),{multiline:!1,autoHeight:!1})),Concealed:e=>u(W.Password,s(n({label:"\u79D8\u5BC6\u9375"},e),{restrict:"concealed"})),Money:{JPY:e=>u(W.DigitNumber,s(n({rightIcon:u(de,{fontColor:"4.thin",children:"\u5186"}),allowZeroStart:!1},e),{multiline:!1,autoHeight:!1}))}});export{W as TextField,Oe as TextInput,W as default};