@telus-uds/components-base 1.28.0 → 1.30.0

package/src/Validator/Validator.jsx

@@ -0,0 +1,217 @@
+import React, { forwardRef, createRef, useRef, useMemo, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform } from 'react-native'
+import { inputSupportsProps, selectSystemProps } from '../utils'
+import { TextInput } from '../TextInput'
+import StackView from '../StackView'
+import InputSupports from '../InputSupports'
+import { useThemeTokens } from '../ThemeProvider'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([inputSupportsProps])
+
+const selectCodeTextInputTokens = ({ outerBorderColor, outerBackgroundColor }) => {
+  return {
+    outerBorderColor,
+    outerBackgroundColor,
+    icon: null
+  }
+}
+
+const Validator = forwardRef(
+  ({ value = '', inactive, onChange, tokens = {}, variant = {}, ...rest }, ref) => {
+    const defaultRef = useRef()
+    const codeRef = ref ?? defaultRef
+
+    const { supportsProps } = selectProps(rest)
+    const strValidation = supportsProps.validation
+    const [individualCodes, setIndividualCodes] = useState({})
+    const [text, setText] = useState(value)
+    const validatorsLength = 6
+    const prefix = 'code'
+    const sufixValidation = 'Validation'
+
+    const [isHover, setIsHover] = useState(false)
+    const handleMouseOver = () => {
+      setIsHover(true)
+    }
+
+    const handleMouseOut = () => {
+      setIsHover(false)
+    }
+
+    const themeTokens = useThemeTokens('TextInput', tokens, variant, { hover: isHover })
+
+    const [codeReferences, singleCodes] = useMemo(() => {
+      const codes = []
+      const valueCodes = {}
+      for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+        codes[prefix + i] = 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
+      })
+    }
+
+    const handleChangeCode = () => {
+      let code = ''
+      for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i]
+      if (typeof onChange === 'function') onChange(code, singleCodes)
+    }
+
+    const handleChangeCodeValues = (event, codeId, nextIndex) => {
+      const codeElement = codeReferences[codeId]?.current
+      const val = event.nativeEvent?.value || event.target?.value
+
+      if (Number(val).toString() === 'NaN') {
+        codeElement.value = singleCodes[codeId] ?? ''
+        return
+      }
+      if (codeElement?.value?.length > 1) {
+        const oldValue = singleCodes[codeId]
+        const newValue = codeElement.value.replace(oldValue, '')
+        codeElement.value = newValue
+        handleSingleCodes(codeId, codeElement.value, 'success')
+      }
+
+      handleSingleCodes(codeId, codeElement?.value ?? singleCodes[codeId], 'success')
+      handleChangeCode()
+      if (nextIndex === validatorsLength) {
+        codeElement.blur()
+        return
+      }
+      if (codeElement?.value?.length > 0) codeReferences[prefix + nextIndex].current.focus()
+    }
+
+    const handleKeyPress = (event, currentIndex, previousIndex) => {
+      if (!(event.keyCode === 8 || event.code === 'Backspace')) return
+      if (currentIndex > 0) {
+        codeReferences[prefix + currentIndex].current.value = ''
+        codeReferences[prefix + previousIndex].current.focus()
+      }
+      handleSingleCodes(prefix + currentIndex, '', '')
+      handleChangeCode()
+    }
+
+    const getCodeComponents = () => {
+      const components = []
+
+      for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+        const codeId = prefix + i
+        const codeInputProps = {
+          nativeID: codeId,
+          ref: codeReferences[codeId] ?? null,
+          validation: strValidation || singleCodes[codeId + sufixValidation],
+          tokens: selectCodeTextInputTokens(themeTokens),
+          onFocus: () => codeReferences[codeId].current.select(),
+          onKeyPress: (event) => handleKeyPress(event, i, i - 1),
+          onMouseOver: handleMouseOver,
+          onMouseOut: handleMouseOut,
+          inactive
+        }
+        codeInputProps.validation || delete codeInputProps.validation
+
+        components.push(
+          <View key={codeId} style={staticStyles.codeInputWidth}>
+            <TextInput {...codeInputProps} />
+          </View>
+        )
+      }
+      return components
+    }
+
+    useEffect(() => {
+      /* eslint-disable no-unused-expressions */
+      if (Number(value).toString() !== 'NaN') setText(value)
+    }, [value])
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    useEffect(() => {
+      for (let i = 0; i < validatorsLength; i += 1) {
+        codeReferences[prefix + i].current.value = text[i] ?? ''
+        handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '')
+      }
+    }, [text])
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    useEffect(() => {
+      const handlePasteCode = (event) => {
+        setText('')
+        const clipBoardText = event.clipboardData.getData('text')
+        if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText)
+      }
+
+      const handleCopy = (event) => {
+        let clipBoardText = ''
+        for (let i = 0; i < validatorsLength; i += 1)
+          singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i])
+        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) =>
+              handleChangeCodeValues(event, prefix + i, i + 1)
+            )
+          }
+        }
+      }
+    }, [])
+
+    return (
+      <InputSupports {...supportsProps}>
+        <StackView space={2} direction="row" ref={codeRef}>
+          {getCodeComponents()}
+        </StackView>
+      </InputSupports>
+    )
+  }
+)
+Validator.displayName = 'Validator'
+
+Validator.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize
+   */
+  value: PropTypes.string,
+  /**
+   * If true, the component is inactive and non editable.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
+   */
+  onChange: PropTypes.func
+}
+
+export default Validator
+
+const staticStyles = StyleSheet.create({
+  codeInputWidth: {
+    width: 43
+  }
+})

package/src/Validator/index.js

@@ -0,0 +1,3 @@
+import Validator from './Validator'
+
+export default Validator

package/src/index.js

@@ -53,6 +53,7 @@ export { default as Typography } from './Typography'
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider'
 export { default as BaseProvider } from './BaseProvider'
 export { useHydrationContext } from './BaseProvider/HydrationContext'
+export { default as Validator } from './Validator'
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider'
 export {
   default as ThemeProvider,

package/src/utils/props/handlerProps.js

@@ -65,7 +65,11 @@ const textInputHandlerProps = {
     /**
      * onKeyDown handler (only supported on Web)
      */
-    onKeyDown: PropTypes.func
+    onMouseOver: PropTypes.func,
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onMouseOut: PropTypes.func
   }
 }
 const selectTextInputHandlers = getPropSelector(textInputHandlerProps.types)