From a64af5fb1eaf7a771ba1ab3d3856f23af4b52fc9 Mon Sep 17 00:00:00 2001
From: rizky <rizky@avolut.com>
Date: Sun, 18 Aug 2024 20:34:06 -0700
Subject: [PATCH] fix

---
 comps/form/field/type/TypeInput.tsx | 40 +++++++++++++++++++++++++++++
 comps/form/typings.ts               |  1 +
 2 files changed, 41 insertions(+)

diff --git a/comps/form/field/type/TypeInput.tsx b/comps/form/field/type/TypeInput.tsx
index 06a9ed6..e646c9d 100755
--- a/comps/form/field/type/TypeInput.tsx
+++ b/comps/form/field/type/TypeInput.tsx
@@ -31,6 +31,7 @@ export type PropTypeInput = {
     | "import"
     | "monthly"
     | "key-value"
+    | "mask"
     | "phone";
   placeholder?: string;
   onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
@@ -269,6 +270,45 @@ export const FieldTypeInput: FC<{
           />
         </div>
       );
+    case "mask":
+      const mask = arg.mask || "____-____-_______";
+      return (
+        <div className="c-flex c-relative c-flex-1">
+          <InputMask
+            mask={mask}
+            replacement={{ _: /\d/ }}
+            onChange={(ev) => {
+              fm.data[field.name] = ev.currentTarget.value.replace(/\D/g, "");
+              renderOnChange();
+
+              if (prop.onChange) {
+                prop.onChange(fm.data[field.name]);
+              }
+            }}
+            value={format(value, {
+              mask: mask,
+              replacement: { _: /\d/ },
+            })}
+            placeholder={prop.placeholder || arg.placeholder || ""}
+            disabled={disabled}
+            className="c-flex-1 c-transition-all c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
+            spellCheck={false}
+            onFocus={(e) => {
+              field.focused = true;
+              field.render();
+              prop.onFocus?.(e);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && fm.status === "ready") fm.submit();
+            }}
+            onBlur={(e) => {
+              field.focused = false;
+              field.render();
+              prop.onBlur?.(e);
+            }}
+          />
+        </div>
+      );
     case "monthly": {
       return (
         <Datepicker
diff --git a/comps/form/typings.ts b/comps/form/typings.ts
index 6a6ba14..ce73f8e 100755
--- a/comps/form/typings.ts
+++ b/comps/form/typings.ts
@@ -48,6 +48,7 @@ export type FieldProp = {
   label: string;
   desc?: string;
   props?: any;
+  mask?:string;
   kv?: { default: any; index: "preserve" | "auto-sort" };
   upload?: {
     mode: "single-file" | "multi-file";