@telus-uds/components-base 3.8.0 → 3.9.0

package/src/Validator/Validator.jsx

@@ -24,7 +24,7 @@ const Validator = React.forwardRef(
 
     const { supportsProps } = selectProps(rest)
     const strValidation = supportsProps.validation
-    const [individualCodes, setIndividualCodes] = React.useState({})
+    const [, setIndividualCodes] = React.useState({})
     const [text, setText] = React.useState(value)
     const validatorsLength = 6
     const prefix = 'code'
@@ -44,75 +44,110 @@ const Validator = React.forwardRef(
     const [codeReferences, singleCodes] = React.useMemo(() => {
       const codes = []
       const valueCodes = {}
-      for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      Array.from({ length: validatorsLength }, (_, i) => {
         codes[prefix + i] = React.createRef()
         valueCodes[prefix + i] = ''
         valueCodes[prefix + i + sufixValidation] = ''
-      }
-      return [codes, valueCodes]
-    }, [])
-
-    const handleSingleCodes = (codeId, val, validation) => {
-      singleCodes[codeId] = val
-      singleCodes[codeId + sufixValidation] = validation
-      /* eslint-disable no-unused-expressions */
-      setIndividualCodes({
-        ...individualCodes,
-        [codeId]: val
+        return null
       })
-    }
-
-    const changeDataMasking = (boxElement) => {
-      let charMasking = ''
-      const element = boxElement
-      if (mask && mask.length === 1) charMasking = mask
-      else if (mask && mask.length > 1) charMasking = mask.substring(0, 1)
+      return [codes, valueCodes]
+    }, [validatorsLength, prefix, sufixValidation])
 
-      if (charMasking) element.value = charMasking
-    }
+    const handleSingleCodes = React.useCallback(
+      (codeId, val, validation) => {
+        singleCodes[codeId] = val
+        singleCodes[codeId + sufixValidation] = validation
+        setIndividualCodes((prev) => ({
+          ...prev,
+          [codeId]: val
+        }))
+      },
+      [singleCodes, sufixValidation]
+    )
 
-    const handleChangeCode = () => {
-      let code = ''
-      for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i]
-      if (typeof onChange === 'function') onChange(code, singleCodes)
-    }
+    const changeDataMasking = React.useCallback(
+      (boxElement) => {
+        let charMasking = ''
+        const element = boxElement
+        if (mask && mask.length === 1) {
+          charMasking = mask
+        } else if (mask && mask.length > 1) {
+          charMasking = mask.substring(0, 1)
+        }
 
-    const handleChangeCodeValues = (event, codeId, nextIndex) => {
-      const codeElement = codeReferences[codeId]?.current
-      const val = event.nativeEvent?.value || event.target?.value
+        if (charMasking && element) {
+          element.value = charMasking
+        }
+      },
+      [mask]
+    )
 
-      if (Number(val).toString() === 'NaN') {
-        codeElement.value = singleCodes[codeId] ?? ''
-        return
+    const handleChangeCode = React.useCallback(() => {
+      const code = Array.from(
+        { length: validatorsLength },
+        (_, i) => singleCodes[prefix + i] || ''
+      ).join('')
+      if (typeof onChange === 'function') {
+        onChange(code, singleCodes)
       }
+    }, [validatorsLength, singleCodes, prefix, onChange])
 
-      handleSingleCodes(codeId, codeElement?.value ?? singleCodes[codeId], 'success')
-      handleChangeCode()
-      if (nextIndex === validatorsLength) {
-        codeElement.blur()
-        changeDataMasking(codeElement)
-        return
-      }
-      if (codeElement?.value?.length > 0) {
-        codeReferences[prefix + nextIndex].current.focus()
-        changeDataMasking(codeElement)
-      }
-    }
+    const handleChangeCodeValues = React.useCallback(
+      (event, codeId, nextIndex) => {
+        const codeElement = codeReferences[codeId]?.current
+        const val = event.nativeEvent?.value || event.target?.value
+
+        // Only allow numeric characters and limit to single digit
+        const numericOnly = val.replace(/\D/g, '').substring(0, 1)
+
+        if (codeElement && codeElement.value) {
+          codeElement.value = numericOnly
+        }
+
+        handleSingleCodes(codeId, numericOnly, numericOnly ? 'success' : '')
+        handleChangeCode()
+
+        if (nextIndex === validatorsLength) {
+          codeElement?.blur()
+          changeDataMasking(codeElement)
+          return
+        }
+
+        if (numericOnly.length > 0) {
+          const nextElement = codeReferences[prefix + nextIndex]?.current
+          nextElement?.focus()
+          changeDataMasking(codeElement)
+        }
+      },
+      [
+        codeReferences,
+        handleSingleCodes,
+        handleChangeCode,
+        validatorsLength,
+        changeDataMasking,
+        prefix
+      ]
+    )
 
     const handleKeyPress = (event, currentIndex, previousIndex) => {
-      if (!(event.keyCode === 8 || event.code === 'Backspace')) return
+      if (!(event.keyCode === 8 || event.code === 'Backspace')) {
+        return
+      }
       if (currentIndex > 0) {
-        codeReferences[prefix + currentIndex].current.value = ''
-        codeReferences[prefix + previousIndex].current.focus()
+        const currentElement = codeReferences[prefix + currentIndex]?.current
+        const previousElement = codeReferences[prefix + previousIndex]?.current
+
+        if (currentElement && currentElement.value) {
+          currentElement.value = ''
+        }
+        previousElement?.focus()
       }
       handleSingleCodes(prefix + currentIndex, '', '')
       handleChangeCode()
     }
 
     const getCodeComponents = () => {
-      const components = []
-
-      for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      return Array.from({ length: validatorsLength }, (_, i) => {
         const codeId = prefix + i
         const codeInputProps = {
           nativeID: codeId,
@@ -120,75 +155,127 @@ const Validator = React.forwardRef(
           ref: codeReferences[codeId] ?? null,
           validation: strValidation || singleCodes[codeId + sufixValidation],
           tokens: selectCodeTextInputTokens(themeTokens),
-          onFocus: () => codeReferences[codeId]?.current?.select() ?? null,
+          onFocus: () => {
+            const element = codeReferences[codeId]?.current
+            if (Platform.OS === 'web' && element?.select) {
+              return element.select() ?? null
+            }
+            if (element?.focus) {
+              return element.focus() ?? null
+            }
+            return null
+          },
           onKeyPress: (event) => handleKeyPress(event, i, i - 1),
           onMouseOver: handleMouseOver,
           onMouseOut: handleMouseOut,
           inactive
         }
-        codeInputProps.validation || delete codeInputProps.validation
+        if (!codeInputProps.validation) {
+          delete codeInputProps.validation
+        }
 
-        components.push(
+        return (
           <View key={codeId} style={staticStyles.codeInputWidth}>
             <TextInput {...codeInputProps} />
           </View>
         )
-      }
-      return components
+      })
     }
 
     React.useEffect(() => {
-      /* eslint-disable no-unused-expressions */
-      if (Number(value).toString() !== 'NaN') setText(value)
+      if (Number(value).toString() !== 'NaN') {
+        setText(value)
+      }
     }, [value])
 
-    /* eslint-disable react-hooks/exhaustive-deps */
     React.useEffect(() => {
-      for (let i = 0; i < validatorsLength; i += 1) {
-        if (mask && text[i]) codeReferences[prefix + i].current.value = mask
-        else codeReferences[prefix + i].current.value = text[i] ?? ''
+      Array.from({ length: validatorsLength }, (_, i) => {
+        const element = codeReferences[prefix + i]?.current
+        if (element && element.value !== undefined) {
+          if (mask && text[i]) {
+            element.value = mask
+          } else {
+            element.value = text[i] ?? ''
+          }
+        }
         handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '')
-      }
-    }, [text])
+        return null
+      })
+    }, [text, mask, validatorsLength, prefix, codeReferences, handleSingleCodes])
 
-    /* eslint-disable react-hooks/exhaustive-deps */
     React.useEffect(() => {
       const handlePasteCode = (event) => {
+        event.preventDefault()
+
+        // Clear current state first
         setText('')
+
+        // Clear all individual input fields and their state
+        Array.from({ length: validatorsLength }, (_, i) => {
+          const element = codeReferences[prefix + i]?.current
+          if (element && element.value !== undefined) {
+            element.value = ''
+          }
+          handleSingleCodes(prefix + i, '', '')
+          return null
+        })
+
         const clipBoardText = event.clipboardData.getData('text')
-        if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText)
+
+        // Validate that input contains only digits and truncate to 6 characters
+        const numericOnly = clipBoardText.replace(/\D/g, '').substring(0, validatorsLength)
+
+        if (numericOnly.length > 0) {
+          setText(numericOnly)
+        }
       }
 
       const handleCopy = (event) => {
-        let clipBoardText = ''
-        for (let i = 0; i < validatorsLength; i += 1)
-          singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i])
+        const clipBoardText = Array.from(
+          { length: validatorsLength },
+          (_, i) => singleCodes[prefix + i] || ''
+        ).join('')
         event.clipboardData.setData('text/plain', clipBoardText)
         event.preventDefault()
       }
 
       if (Platform.OS === 'web') {
-        for (let i = 0; i < validatorsLength; i += 1) {
-          codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode)
-          codeReferences[prefix + i].current.addEventListener('copy', handleCopy)
-          codeReferences[prefix + i].current.addEventListener('input', (event) =>
-            handleChangeCodeValues(event, prefix + i, i + 1)
-          )
-        }
-      }
-
-      return () => {
-        if (Platform.oldValue === 'web') {
-          for (let i = 0; i < validatorsLength; i += 1) {
-            codeReferences[prefix + i]?.current?.removeEventListener('paste', handlePasteCode)
-            codeReferences[prefix + i]?.current?.removeEventListener('copy', handleCopy)
-            codeReferences[prefix + i]?.current?.removeEventListener('input', (event) =>
+        Array.from({ length: validatorsLength }, (_, i) => {
+          const element = codeReferences[prefix + i]?.current
+          if (element && typeof element.addEventListener === 'function') {
+            element.addEventListener('paste', handlePasteCode)
+            element.addEventListener('copy', handleCopy)
+            element.addEventListener('input', (event) =>
               handleChangeCodeValues(event, prefix + i, i + 1)
             )
           }
+          return null
+        })
+      }
+
+      return () => {
+        if (Platform.OS === 'web') {
+          Array.from({ length: validatorsLength }, (_, i) => {
+            const element = codeReferences[prefix + i]?.current
+            if (element && typeof element.removeEventListener === 'function') {
+              element.removeEventListener('paste', handlePasteCode)
+              element.removeEventListener('copy', handleCopy)
+              element.removeEventListener('input', (event) =>
+                handleChangeCodeValues(event, prefix + i, i + 1)
+              )
+            }
+            return null
+          })
         }
       }
-    }, [])
+    }, [
+      validatorsLength,
+      prefix,
+      codeReferences,
+      handleChangeCodeValues,
+      handleSingleCodes,
+      singleCodes
+    ])
 
     return (
       <InputSupports