From cbc22411b7e2b1adc6e893953a46eaa6ebfd74a2 Mon Sep 17 00:00:00 2001
From: rizky <rizky@avolut.com>
Date: Sun, 18 Aug 2024 20:28:10 -0700
Subject: [PATCH] fix field phone

---
 comps/form/field/type/TypeInput.tsx | 63 +++++++++++++++++++----------
 comps/list/TableList.tsx            |  5 +--
 modules.json                        |  1 +
 3 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/comps/form/field/type/TypeInput.tsx b/comps/form/field/type/TypeInput.tsx
index af73548..06a9ed6 100755
--- a/comps/form/field/type/TypeInput.tsx
+++ b/comps/form/field/type/TypeInput.tsx
@@ -9,6 +9,7 @@ import { FieldMoney } from "./TypeMoney";
 import { FieldRichText } from "./TypeRichText";
 import { FieldUpload } from "./TypeUpload";
 import { KeyValue } from "./KeyValue";
+import { InputMask, format } from "@react-input/mask";
 
 export type PropTypeInput = {
   type: "input";
@@ -29,7 +30,8 @@ export type PropTypeInput = {
     | "password"
     | "import"
     | "monthly"
-    | "key-value";
+    | "key-value"
+    | "phone";
   placeholder?: string;
   onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
   onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
@@ -229,6 +231,44 @@ export const FieldTypeInput: FC<{
           }}
         />
       );
+    case "phone":
+      return (
+        <div className="c-flex c-relative c-flex-1">
+          <InputMask
+            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: "____-____-_______",
+              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
@@ -276,27 +316,6 @@ export const FieldTypeInput: FC<{
             prop.onChange(fm.data[field.name]);
           }
         }}
-        onInput={
-          arg.sub_type === "phone"
-            ? (event) => {
-                const target = event.currentTarget;
-                var matrix = target.defaultValue,
-                  i = 0,
-                  def = matrix.replace(/\D/g, ""),
-                  val = target.value.replace(/\D/g, "");
-                def.length >= val.length && (val = def);
-                matrix = matrix.replace(/[_\d]/g, function (a) {
-                  return val.charAt(i++) || "_";
-                });
-                target.value = matrix;
-                i = matrix.lastIndexOf(val.substr(-1));
-                i < matrix.length && matrix != target.defaultValue
-                  ? i++
-                  : (i = matrix.indexOf("_"));
-                setCursorPosition(i, target);
-              }
-            : undefined
-        }
         placeholder={prop.placeholder || arg.placeholder || ""}
         value={value}
         disabled={disabled}
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index af8a505..3774335 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -163,13 +163,14 @@ export const TableList: FC<TableListProp> = ({
         last_length: 0,
         scroll: (currentTarget: HTMLDivElement) => {
           if (
+            local.data.length < local.paging.take ||
             local.data.length === 0 ||
             local.status !== "ready" ||
             !isAtBottom(currentTarget) ||
             local.reloading
           )
             return;
-            
+
           if (local.paging.last_length <= local.data.length) {
             local.paging.skip = local.data.length;
             local.reload();
@@ -788,8 +789,6 @@ export const TableList: FC<TableListProp> = ({
 
     return (
       <>
-        {local.paging.skip} {local.paging.last_length} {local.data.length}{" "}
-        {local.status}
         <div
           className={cx(
             "table-list c-w-full c-h-full c-flex-1 c-relative c-overflow-hidden",
diff --git a/modules.json b/modules.json
index e36c107..3f5ace2 100755
--- a/modules.json
+++ b/modules.json
@@ -11,6 +11,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.1.0",
+    "@react-input/mask": "^1.2.5",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",