Parameterize mask for any locale.

Author: iM-GeeKy

src/TextInputMask.tsx

@@ -7,65 +7,6 @@ function detectCharacter(mask: string): string {
   return c || ''
 }
 
-function enhanceTextWithMask(
-  text: string,
-  mask: string,
-  previousValue: string
-): string {
-  const isBackSpace = previousValue.length > text.length
-  const splitCharacter = detectCharacter(mask)
-
-  const maskParts = mask.split(splitCharacter)
-  const textParts = text.split(splitCharacter)
-
-  let finalString: string[] = []
-  for (let maskPartIndex = 0; maskPartIndex < mask.length; maskPartIndex++) {
-    let partString: string[] = []
-
-    const maskPart = maskParts[maskPartIndex]
-    const textPart = textParts[maskPartIndex]
-    if (!textPart) {
-      continue
-    }
-
-    for (
-      let maskDigitIndex = 0;
-      maskDigitIndex < maskPart.length;
-      maskDigitIndex++
-    ) {
-      const currentCharacter = textPart[maskDigitIndex]
-
-      if (isBackSpace && currentCharacter === undefined) {
-        continue
-      }
-
-      const character = textPart[maskDigitIndex]
-
-      if (character !== undefined) {
-        partString.push(character)
-      }
-    }
-
-    finalString.push(partString.join(''))
-  }
-
-  const lastPart = finalString[finalString.length - 1]
-  const lastMaskPart = maskParts[finalString.length - 1]
-  if (
-    // if mask is completed
-    finalString.length !== maskParts.length &&
-    // or ...
-    lastPart &&
-    lastMaskPart &&
-    lastPart.length === lastMaskPart.length
-  ) {
-    return (
-      finalString.join(splitCharacter) + (isBackSpace ? '' : splitCharacter)
-    )
-  }
-  return finalString.join(splitCharacter)
-}
-
 function TextInputWithMask(
   {
     onChangeText,
@@ -82,15 +23,26 @@ function TextInputWithMask(
   )
 
   const onInnerChange = (text: string) => {
+    const splitCharacter = detectCharacter(mask)
+    const maskParts = mask.split(splitCharacter)
+
     let trimmedText = text.trim()
-    const format = 'mm/dd/yyyy'
+    const format =
+      maskParts[0].toLowerCase() +
+      splitCharacter +
+      maskParts[1].toLowerCase() +
+      splitCharacter +
+      maskParts[2].toLowerCase()
     const match = new RegExp(
       format
         .replace(/(\w+)\W(\w+)\W(\w+)/, '^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*')
         .replace(/m|d|y/g, '\\d')
     )
     const replaceValue = format.match(/\W/)
-    const replace = '$1/$2/$3$4'.replace(/\//g, (replaceValue ?? '') as string)
+    const replace = `$1${splitCharacter}$2${splitCharacter}$3$4`.replace(
+      new RegExp(splitCharacter, 'g'),
+      (replaceValue ?? '') as string
+    )
 
     const isBackSpace = controlledValue.length > trimmedText.length
 
@@ -108,11 +60,6 @@ function TextInputWithMask(
     setControlledValue(trimmedText)
   }
 
-  const onInnerBlur = () => {
-    const enhancedText = enhanceTextWithMask(value, mask, controlledValue)
-    setControlledValue(enhancedText)
-  }
-
   React.useEffect(() => {
     setControlledValue(value || '')
   }, [value])
@@ -128,7 +75,6 @@ function TextInputWithMask(
         onChange && onChange(e)
       }}
       maxLength={10}
-      onBlur={onInnerBlur}
     />
   )
 }