Merge pull request #269 from web-ridge/autoformat-text-input

Introduce auto slashes to text input.

Author: RichardLindhout

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,41 @@ function TextInputWithMask(
   )
 
   const onInnerChange = (text: string) => {
-    if (text.length === mask.length) {
-      onChangeText && onChangeText(text)
+    const splitCharacter = detectCharacter(mask)
+    const maskParts = mask.split(splitCharacter)
+
+    let trimmedText = text.trim()
+    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${splitCharacter}$2${splitCharacter}$3$4`.replace(
+      new RegExp(splitCharacter, 'g'),
+      (replaceValue ?? '') as string
+    )
+
+    const isBackSpace = controlledValue.length > trimmedText.length
+
+    if (!isBackSpace) {
+      trimmedText = trimmedText
+        .replace(/(^|\W)(?=\d\W)/g, '$10')
+        .replace(match, replace)
+        .replace(/(\W)+/g, '$1')
+    }
+
+    if (trimmedText.length === mask.length) {
+      onChangeText && onChangeText(trimmedText)
     }
-    setControlledValue(text)
-  }
 
-  const onInnerBlur = () => {
-    const enhancedText = enhanceTextWithMask(value, mask, controlledValue)
-    setControlledValue(enhancedText)
+    setControlledValue(trimmedText)
   }
 
   React.useEffect(() => {
@@ -107,7 +74,7 @@ function TextInputWithMask(
       onChange={(e) => {
         onChange && onChange(e)
       }}
-      onBlur={onInnerBlur}
+      maxLength={10}
     />
   )
 }

src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap

@@ -3652,6 +3652,7 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                 keyboardAppearance="default"
                 keyboardType="number-pad"
                 maxFontSizeMultiplier={1.5}
+                maxLength={10}
                 multiline={false}
                 onBlur={[Function]}
                 onChange={[Function]}

src/__tests__/Date/__snapshots__/CalendarEdit.test.tsx.snap

@@ -174,6 +174,7 @@ exports[`renders CalendarEdit 1`] = `
             keyboardAppearance="default"
             keyboardType="number-pad"
             maxFontSizeMultiplier={1.5}
+            maxLength={10}
             multiline={false}
             onBlur={[Function]}
             onChange={[Function]}

src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap

@@ -168,6 +168,7 @@ exports[`renders DatePickerInput 1`] = `
             keyboardAppearance="default"
             keyboardType="number-pad"
             maxFontSizeMultiplier={1.5}
+            maxLength={10}
             multiline={false}
             onBlur={[Function]}
             onChange={[Function]}

src/__tests__/Date/__snapshots__/DatePickerInputWithoutModal.test.tsx.snap

@@ -167,6 +167,7 @@ exports[`renders DatePickerInput 1`] = `
           keyboardAppearance="default"
           keyboardType="number-pad"
           maxFontSizeMultiplier={1.5}
+          maxLength={10}
           multiline={false}
           onBlur={[Function]}
           onChange={[Function]}