amotify 0.1.31 → 0.1.32

package/dist/fn/Input/DigitCharacters.js

@@ -1 +1,275 @@
-import{b as t,c as s,d as S}from"../../chunk-VY3566IV.js";import{jsx as I,jsxs as Z}from"react/jsx-runtime";import{useState as V}from"react";import{$$ as y,$$fromRoot as O}from"../../@utils/_";import{Wrapper as q,BoxWrapper as w,SubmitForm as U,CommonEffects as j,DefaultStyles as z}from"./core";import G from"../../atoms/Flex";import J from"./Hidden";import{InputClasses as R}from"../../@styles/componentClasses/_";function Q(e){let{value:n,params:u}=e,{required:p,numericOnly:l=!1,digits:m}=u,r=[];return p&&!n&&r.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),n&&(l&&n.match(/\D/)&&r.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),n.length!=m&&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 X=(e,n="")=>{let u=String(n),p=[];for(let l=0;l<e;l++)p[l]=u[l]||"";return{formatValue:p,dataValue:u}},F=(e="")=>{let n=e,u=n.join("");return{formatValue:n,dataValue:u}},Y=e=>{let b=e,{tone:n,required:u,form:p,name:l,className:m="",digits:r,numericOnly:d=!1,enableFormSubmit:_,checkValidationAtFirst:P,onChange:ee,onKeyDown:te,onValidate:ne,onUpdateValue:k,onUpdateValidValue:A,value:N="",override:ie,componentID:ae,listStyles:B}=b,E=S(b,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","value","override","componentID","listStyles"]);d&&(e.inputMode=e.inputMode||"numeric");let H=s(t({componentID:e.componentID||""},X(r,N)),{eventType:"init",eventID:y.uuid.gen()}),[i,f]=V(H),[h,L]=V({ok:!1,notice:[]});j({params:e,val_status:i,set_status:f,val_validate:h,set_validate:L,onUpdateValue:k,onUpdateValidValue:A,DefaultValidation:Q});let v=[];for(let a=0;a<r;a++){let W=i.formatValue[a],$={},x=m;e.combineInput&&(x=[m,R("DigitCharacterCell"),R("Combined")].join(" ")),v.push(I("input",{type:"text",inputMode:e.inputMode||"text",value:W,"data-form-name":p,id:"Digit-"+a+"-"+i.componentID,className:x,style:t(t({},e.style),$),onKeyDown:D=>{let{key:g,code:K}=D;if(g=="Tab")return;D.preventDefault();let c=null;if(g=="Backspace"){let o=i.formatValue;o[a]="",f(s(t(t({},i),F(o)),{eventType:"update",eventID:y.uuid.gen()})),c=a-1}else if(["ArrowLeft","ArrowRight"].includes(g)){let o=+(g=="ArrowRight")*2-1;c=a+o}else _&&U(D),(()=>{let o=K.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!o)return;let C=o[2]||o[3]||o[4];if(d&&!C.match(/\d/)||!C)return;let T=i.formatValue;T[a]=C,f(s(t(t({},i),F(T)),{eventType:"update",eventID:y.uuid.gen()})),c=a+1})();y.is.exist(c)&&O("#Digit-"+c+"-"+i.componentID).focus()},onChange:()=>{}},a))}return Z(w,{val_status:i,set_status:f,val_validate:h,params:e,children:[I(J,t({name:l,"data-input-type":"digitCharacters","data-form":p,"data-validation":h.ok,componentID:i.componentID,"data-value":i.dataValue},E)),I(G,s(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},B),{children:v}))]})},M=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=s(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 n=z.Boxish(e);return I(q,{componentID:e.componentID,children:Y,params:n})};export{M as DigitCharacters,M as default};
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-JJ3PEWPN.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState
+} from "react";
+import {
+  $$,
+  $$fromRoot
+} from "../../@utils/_";
+import {
+  Wrapper,
+  BoxWrapper,
+  SubmitForm,
+  CommonEffects,
+  DefaultStyles
+} from "./core";
+import Flex from "../../atoms/Flex";
+import Hidden from "./Hidden";
+import { InputClasses } from "../../@styles/componentClasses/_";
+function DefaultValidation(props) {
+  let { value, params } = props;
+  let {
+    required,
+    numericOnly = false,
+    digits
+  } = params;
+  let notice = [];
+  if (required && !value) {
+    notice.push({ type: "invalid", label: "\u5FC5\u9808\u9805\u76EE\u3067\u3059" });
+  }
+  if (value) {
+    if (numericOnly && value.match(/\D/)) {
+      notice.push({ type: "invalid", label: "\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044" });
+    }
+    if (value.length != digits) {
+      notice.push({ type: "warn", label: "\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044" });
+    }
+  }
+  return {
+    ok: !notice.filter(({ type }) => type == "invalid" || type == "warn").length,
+    notice
+  };
+}
+const dataToFormat = (digits, value = "") => {
+  let dataValue = String(value);
+  let formatValue = [];
+  for (let index = 0; index < digits; index++) {
+    formatValue[index] = dataValue[index] || "";
+  }
+  return {
+    formatValue,
+    dataValue
+  };
+};
+const formatToData = (value = "") => {
+  let formatValue = value;
+  let dataValue = formatValue.join("");
+  return {
+    formatValue,
+    dataValue
+  };
+};
+const DigitCharactersInput = (params) => {
+  let _a = params, {
+    tone,
+    required,
+    form,
+    name,
+    className = "",
+    digits,
+    numericOnly = false,
+    enableFormSubmit,
+    checkValidationAtFirst,
+    onChange,
+    onKeyDown,
+    onValidate,
+    onUpdateValue,
+    onUpdateValidValue,
+    value = "",
+    override,
+    componentID,
+    listStyles
+  } = _a, others = __objRest(_a, [
+    "tone",
+    "required",
+    "form",
+    "name",
+    "className",
+    "digits",
+    "numericOnly",
+    "enableFormSubmit",
+    "checkValidationAtFirst",
+    "onChange",
+    "onKeyDown",
+    "onValidate",
+    "onUpdateValue",
+    "onUpdateValidValue",
+    "value",
+    "override",
+    "componentID",
+    "listStyles"
+  ]);
+  if (numericOnly) {
+    params.inputMode = params.inputMode || "numeric";
+  }
+  let Default_Status = __spreadProps(__spreadValues({
+    componentID: params.componentID || ""
+  }, dataToFormat(digits, value)), {
+    eventType: "init",
+    eventID: $$.uuid.gen()
+  });
+  let [val_status, set_status] = useState(Default_Status);
+  let [val_validate, set_validate] = useState({
+    ok: false,
+    notice: []
+  });
+  CommonEffects({
+    params,
+    val_status,
+    set_status,
+    val_validate,
+    set_validate,
+    onUpdateValue,
+    onUpdateValidValue,
+    DefaultValidation
+  });
+  let Digits = [];
+  for (let index = 0; index < digits; index++) {
+    let Character = val_status.formatValue[index];
+    let Styles = {};
+    let ClassName = className;
+    if (params.combineInput) {
+      ClassName = [
+        className,
+        InputClasses("DigitCharacterCell"),
+        InputClasses("Combined")
+      ].join(" ");
+    }
+    Digits.push(/* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        inputMode: params.inputMode || "text",
+        value: Character,
+        "data-form-name": form,
+        id: "Digit-" + index + "-" + val_status.componentID,
+        className: ClassName,
+        style: __spreadValues(__spreadValues({}, params.style), Styles),
+        onKeyDown: (event) => {
+          let {
+            key,
+            code
+          } = event;
+          if (key == "Tab")
+            return;
+          event.preventDefault();
+          let nextFocusIndex = null;
+          if (key == "Backspace") {
+            let newFormatValue = val_status.formatValue;
+            newFormatValue[index] = "";
+            set_status(__spreadProps(__spreadValues(__spreadValues({}, val_status), formatToData(newFormatValue)), {
+              eventType: "update",
+              eventID: $$.uuid.gen()
+            }));
+            nextFocusIndex = index - 1;
+          } else if (["ArrowLeft", "ArrowRight"].includes(key)) {
+            let dir = Number(key == "ArrowRight") * 2 - 1;
+            nextFocusIndex = index + dir;
+          } else {
+            if (enableFormSubmit)
+              SubmitForm(event);
+            (() => {
+              let regExp = code.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);
+              if (!regExp)
+                return;
+              let newCharacter = regExp[2] || regExp[3] || regExp[4];
+              if (numericOnly) {
+                if (!newCharacter.match(/\d/))
+                  return;
+              }
+              if (!newCharacter)
+                return;
+              let newFormatValue = val_status.formatValue;
+              newFormatValue[index] = newCharacter;
+              set_status(__spreadProps(__spreadValues(__spreadValues({}, val_status), formatToData(newFormatValue)), {
+                eventType: "update",
+                eventID: $$.uuid.gen()
+              }));
+              nextFocusIndex = index + 1;
+            })();
+          }
+          if ($$.is.exist(nextFocusIndex)) {
+            $$fromRoot("#Digit-" + nextFocusIndex + "-" + val_status.componentID).focus();
+          }
+        },
+        onChange: () => {
+        }
+      },
+      index
+    ));
+  }
+  return /* @__PURE__ */ jsxs(
+    BoxWrapper,
+    {
+      val_status,
+      set_status,
+      val_validate,
+      params,
+      children: [
+        /* @__PURE__ */ jsx(
+          Hidden,
+          __spreadValues({
+            name,
+            "data-input-type": "digitCharacters",
+            "data-form": form,
+            "data-validation": val_validate.ok,
+            componentID: val_status.componentID,
+            "data-value": val_status.dataValue
+          }, others)
+        ),
+        /* @__PURE__ */ jsx(
+          Flex,
+          __spreadProps(__spreadValues({
+            gap: "1/2",
+            flexChilds: "even",
+            flexWrap: false,
+            flexSizing: "auto"
+          }, listStyles), {
+            children: Digits
+          })
+        )
+      ]
+    }
+  );
+};
+const DigitCharacters = (rawParams) => {
+  rawParams = __spreadValues({}, rawParams);
+  rawParams = __spreadValues({
+    textAlign: "center",
+    width: 0
+  }, rawParams);
+  if (rawParams.combineInput) {
+    rawParams = __spreadProps(__spreadValues({
+      textAlign: "center",
+      width: 0
+    }, rawParams), {
+      freeCSS: __spreadValues({
+        minWidth: 12 * 2,
+        marginRight: -1
+      }, rawParams.freeCSS),
+      listStyles: __spreadValues({
+        borderRadius: "2.tone.secondary",
+        border: "unset",
+        gap: 0
+      }, rawParams.listStyles)
+    });
+  }
+  let params = DefaultStyles.Boxish(rawParams);
+  return /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      componentID: rawParams.componentID,
+      children: DigitCharactersInput,
+      params
+    }
+  );
+};
+export {
+  DigitCharacters,
+  DigitCharacters as default
+};