Use PBenahcnedElement

powerhome · Jan 30, 2025 · 47d216b · 47d216b
1 parent e43cf01
commit 47d216b
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 55 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_text_input/index.js b/playbook/app/pb_kits/playbook/pb_text_input/index.js
@@ -1,65 +1,67 @@
-export default class PbTextInput {
-  static start() {
-    const inputElements = document.querySelectorAll('[data-pb-input-mask="true"]');
+import PbEnhancedElement from "../pb_enhanced_element";
 
-    inputElements.forEach((inputElement) => {
-      inputElement.addEventListener("input", (event) => {
-        const maskType = inputElement.getAttribute("mask");
-        const cursorPosition = inputElement.selectionStart;
-
-        let rawValue = event.target.value;
-        let formattedValue = rawValue;
-
-        // Apply formatting based on the mask type
-        switch (maskType) {
-          case "currency":
-            formattedValue = formatCurrency(rawValue);
-            break;
-          case "ssn":
-            formattedValue = formatSSN(rawValue);
-            break;
-          case "postal_code":
-            formattedValue = formatPostalCode(rawValue);
-            break;
-          case "zip_code":
-            formattedValue = formatZipCode(rawValue);
-            break;
-        }
-
-        // Update the sanitized input field in the same wrapper
-        const sanitizedInput = inputElement
-          .closest(".text_input_wrapper")
-          ?.querySelector('[data="sanitized-pb-input"]');
+export default class PbTextInput extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-input-mask="true"]';
+  }
 
-        if (sanitizedInput) {
-          switch (maskType) {
-            case "ssn":
-              sanitizedInput.value = sanitizeSSN(formattedValue);
-              break;
-            case "currency":
-              sanitizedInput.value = sanitizeCurrency(formattedValue);
-              break;
-            default:
-              sanitizedInput.value = formattedValue; 
-          }
-        }
+  connect() {
+    this.handleInput = this.handleInput.bind(this);
+    this.element.addEventListener("input", this.handleInput);
+  }
 
-        inputElement.value = formattedValue;
-        setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue);
-      });
-    });
+  disconnect() {
+    this.element.removeEventListener("input", this.handleInput);
+  }
 
+  handleInput() {
+    const maskType = this.element.getAttribute("mask");
+    const cursorPosition = this.element.selectionStart;
+    const rawValue = this.element.value;
+    let formattedValue = rawValue;
+
+    switch (maskType) {
+      case "currency":
+        formattedValue = formatCurrency(rawValue);
+        break;
+      case "ssn":
+        formattedValue = formatSSN(rawValue);
+        break;
+      case "postal_code":
+        formattedValue = formatPostalCode(rawValue);
+        break;
+      case "zip_code":
+        formattedValue = formatZipCode(rawValue);
+        break;
+    }
+
+    const sanitizedInput = this.element
+      .closest(".text_input_wrapper")
+      ?.querySelector('[data="sanitized-pb-input"]');
+
+    if (sanitizedInput) {
+      switch (maskType) {
+        case "ssn":
+          sanitizedInput.value = sanitizeSSN(formattedValue);
+          break;
+        case "currency":
+          sanitizedInput.value = sanitizeCurrency(formattedValue);
+          break;
+        default:
+          sanitizedInput.value = formattedValue;
+      }
+    }
+
+    this.element.value = formattedValue;
+    setCursorPosition(this.element, cursorPosition, rawValue, formattedValue);
   }
 }
 
 function formatCurrency(value) {
   const numericValue = value.replace(/[^0-9]/g, "").slice(0, 15);
-
   if (!numericValue) return "";
-
   const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2));
   if (dollars === 0) return "";
-
   return new Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
@@ -84,19 +86,16 @@ function formatPostalCode(value) {
 }
 
 function sanitizeSSN(input) {
-  return input.replace(/\D/g, ""); 
+  return input.replace(/\D/g, "");
 }
 
 function sanitizeCurrency(input) {
-  return input.replace(/[$,]/g, ""); 
+  return input.replace(/[$,]/g, "");
 }
 
-// function to set cursor position
 function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
   const difference = formattedValue.length - rawValue.length;
-
   const newPosition = Math.max(0, cursorPosition + difference);
-
   requestAnimationFrame(() => {
     inputElement.setSelectionRange(newPosition, newPosition);
   });

diff --git a/yarn.lock b/yarn.lock
@@ -1989,6 +1989,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.23.8":
+  version "7.26.7"
+  resolved "https://npm.powerapp.cloud/@babel/runtime/-/runtime-7.26.7.tgz#f4e7fe527cd710f8dc0618610b61b4b060c3c341"
+  integrity sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.7.6":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
@@ -8704,6 +8711,14 @@ markdown-it@^13.0.1:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+match-sorter@^8.0.0:
+  version "8.0.0"
+  resolved "https://npm.powerapp.cloud/match-sorter/-/match-sorter-8.0.0.tgz#9120e35ed8aabf45cd40e127b0231f762fb2eec0"
+  integrity sha512-bGJ6Zb+OhzXe+ptP5d80OLVx7AkqfRbtGEh30vNSfjNwllu+hHI+tcbMIT/fbkx/FKN1PmKuDb65+Oofg+XUxw==
+  dependencies:
+    "@babel/runtime" "^7.23.8"
+    remove-accents "0.5.0"
+
 mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://npm.powerapp.cloud/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -10386,6 +10401,11 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
+[email protected]:
+  version "0.5.0"
+  resolved "https://npm.powerapp.cloud/remove-accents/-/remove-accents-0.5.0.tgz#77991f37ba212afba162e375b627631315bed687"
+  integrity sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://npm.powerapp.cloud/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"