@pagopa/io-app-design-system 7.0.2 → 7.1.0

package/src/components/otpInput/OTPInput.tsx

@@ -1,11 +1,4 @@
-import {
-  createRef,
-  forwardRef,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import { Ref, createRef, useEffect, useMemo, useRef, useState } from "react";
 import {
   AccessibilityInfo,
   Platform,
@@ -26,6 +19,7 @@ import { BoxedInput } from "./BoxedInput";
 const OTP_ITEMS_GAP = 8;
 
 type Props = {
+  ref?: Ref<View>;
   value: string;
   onValueChange: (value: string) => void;
   length: number;
@@ -57,175 +51,170 @@ type Props = {
  * @param errorMessage - The error message to display
  * @returns
  */
-export const OTPInput = forwardRef<View, Props>(
-  (
-    {
-      value,
-      onValueChange,
-      length,
-      accessibilityLabel,
-      accessibilityHint,
-      accessibilityValueText,
-      onValidate,
-      errorMessage = "",
-      secret = false,
-      autocomplete = false,
-      inputAccessoryViewID,
-      autoFocus = false,
-      deleteButtonAccessibilityLabel
-    },
-    ref
-  ) => {
-    const [hasFocus, setHasFocus] = useState(autoFocus);
-    const [hasError, setHasError] = useState(false);
+export const OTPInput = ({
+  value,
+  onValueChange,
+  length,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityValueText,
+  onValidate,
+  errorMessage = "",
+  secret = false,
+  autocomplete = false,
+  inputAccessoryViewID,
+  autoFocus = false,
+  deleteButtonAccessibilityLabel,
+  ref
+}: Props) => {
+  const [hasFocus, setHasFocus] = useState(autoFocus);
+  const [hasError, setHasError] = useState(false);
 
-    const theme = useIOTheme();
+  const theme = useIOTheme();
 
-    const { translate, animatedStyle, shakeAnimation } =
-      useErrorShakeAnimation();
+  const { translate, animatedStyle, shakeAnimation } = useErrorShakeAnimation();
 
-    const inputRef = createRef<TextInput>();
-    const timerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const inputRef = createRef<TextInput>();
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
-    const handleValidate = (val: string) => {
-      if (!onValidate || val.length < length) {
-        return;
-      }
-      const isValid = onValidate(val);
-      if (!isValid) {
-        setHasError(true);
-        triggerHaptic("notificationError");
-        // eslint-disable-next-line functional/immutable-data
-        translate.value = shakeAnimation();
+  const handleValidate = (val: string) => {
+    if (!onValidate || val.length < length) {
+      return;
+    }
+    const isValid = onValidate(val);
+    if (!isValid) {
+      setHasError(true);
+      triggerHaptic("notificationError");
+      // eslint-disable-next-line functional/immutable-data
+      translate.value = shakeAnimation();
 
-        if (timerRef.current) {
-          clearTimeout(timerRef.current);
-        }
-        // eslint-disable-next-line functional/immutable-data
-        timerRef.current = setTimeout(() => {
-          setHasError(false);
-          onValueChange("");
-        }, 500);
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
       }
-    };
+      // eslint-disable-next-line functional/immutable-data
+      timerRef.current = setTimeout(() => {
+        setHasError(false);
+        onValueChange("");
+      }, 500);
+    }
+  };
 
-    useEffect(
-      () => () => {
-        if (timerRef.current) {
-          clearTimeout(timerRef.current);
-        }
-      },
-      []
-    );
-
-    const handleChange = (value: string) => {
-      if (value.length > length) {
-        return;
+  useEffect(
+    () => () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
       }
-      onValueChange(value);
-      handleValidate(value);
-    };
+    },
+    []
+  );
 
-    const handleKeyPress = (e: TextInputKeyPressEvent) => {
-      switch (e.nativeEvent.key) {
-        case "Backspace":
-          if (deleteButtonAccessibilityLabel && value.length > 0) {
-            AccessibilityInfo.announceForAccessibility(
-              deleteButtonAccessibilityLabel
-            );
-          }
-          break;
-        default:
-          AccessibilityInfo.announceForAccessibility(e.nativeEvent.key);
-          break;
-      }
-    };
+  const handleChange = (value: string) => {
+    if (value.length > length) {
+      return;
+    }
+    onValueChange(value);
+    handleValidate(value);
+  };
+
+  const handleKeyPress = (e: TextInputKeyPressEvent) => {
+    switch (e.nativeEvent.key) {
+      case "Backspace":
+        if (deleteButtonAccessibilityLabel && value.length > 0) {
+          AccessibilityInfo.announceForAccessibility(
+            deleteButtonAccessibilityLabel
+          );
+        }
+        break;
+      default:
+        AccessibilityInfo.announceForAccessibility(e.nativeEvent.key);
+        break;
+    }
+  };
 
-    const cells = useMemo(() => Array.from({ length }), [length]);
+  const cells = useMemo(() => Array.from({ length }), [length]);
 
-    return (
-      <Animated.View style={[{ flexGrow: 1 }, animatedStyle]}>
-        <Pressable
-          onPress={() => {
-            inputRef.current?.focus();
-            setHasFocus(true);
+  return (
+    <Animated.View style={[{ flexGrow: 1 }, animatedStyle]}>
+      <Pressable
+        onPress={() => {
+          inputRef.current?.focus();
+          setHasFocus(true);
+        }}
+        ref={ref}
+        accessible={false}
+      >
+        <TextInput
+          value={value}
+          onChangeText={handleChange}
+          onKeyPress={handleKeyPress}
+          caretHidden={Platform.OS === "ios"}
+          style={[
+            StyleSheet.absoluteFillObject,
+            Platform.select({
+              ios: { opacity: 0.01 },
+              android: { opacity: 0 }
+            })
+          ]}
+          maxLength={length}
+          ref={inputRef}
+          onBlur={() => setHasFocus(false)}
+          keyboardType="numeric"
+          inputMode="numeric"
+          returnKeyType="done"
+          textContentType="oneTimeCode"
+          autoComplete={autocomplete ? "sms-otp" : undefined}
+          inputAccessoryViewID={inputAccessoryViewID}
+          accessible={true}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          // Ensure the screen reader pronounces the code digit by digit
+          accessibilityValue={{
+            text:
+              accessibilityValueText?.({
+                valueLength: value.length,
+                length
+              }) ?? value.split("").join(" ")
           }}
-          ref={ref}
-          accessible={false}
+          autoFocus={autoFocus}
+          secureTextEntry={secret}
+        />
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            columnGap: OTP_ITEMS_GAP,
+            flexGrow: 1,
+            zIndex: 10
+          }}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+        >
+          {cells.map((_, i) => (
+            <BoxedInput
+              key={i}
+              status={
+                hasError
+                  ? "error"
+                  : hasFocus && value.length === i
+                  ? "focus"
+                  : "default"
+              }
+              secret={secret}
+              value={value[i]}
+            />
+          ))}
+        </View>
+      </Pressable>
+      <VSpacer size={4} />
+      {hasError && errorMessage && (
+        <BodySmall
+          weight="Semibold"
+          color={theme.errorText}
+          style={{ textAlign: "center" }}
         >
-          <TextInput
-            value={value}
-            onChangeText={handleChange}
-            onKeyPress={handleKeyPress}
-            caretHidden={Platform.OS === "ios"}
-            style={[
-              StyleSheet.absoluteFillObject,
-              Platform.select({
-                ios: { opacity: 0.01 },
-                android: { opacity: 0 }
-              })
-            ]}
-            maxLength={length}
-            ref={inputRef}
-            onBlur={() => setHasFocus(false)}
-            keyboardType="numeric"
-            inputMode="numeric"
-            returnKeyType="done"
-            textContentType="oneTimeCode"
-            autoComplete={autocomplete ? "sms-otp" : undefined}
-            inputAccessoryViewID={inputAccessoryViewID}
-            accessible={true}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityHint={accessibilityHint}
-            // Ensure the screen reader pronounces the code digit by digit
-            accessibilityValue={{
-              text:
-                accessibilityValueText?.({
-                  valueLength: value.length,
-                  length
-                }) ?? value.split("").join(" ")
-            }}
-            autoFocus={autoFocus}
-            secureTextEntry={secret}
-          />
-          <View
-            style={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              columnGap: OTP_ITEMS_GAP,
-              flexGrow: 1,
-              zIndex: 10
-            }}
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-          >
-            {cells.map((_, i) => (
-              <BoxedInput
-                key={i}
-                status={
-                  hasError
-                    ? "error"
-                    : hasFocus && value.length === i
-                    ? "focus"
-                    : "default"
-                }
-                secret={secret}
-                value={value[i]}
-              />
-            ))}
-          </View>
-        </Pressable>
-        <VSpacer size={4} />
-        {hasError && errorMessage && (
-          <BodySmall
-            weight="Semibold"
-            color={theme.errorText}
-            style={{ textAlign: "center" }}
-          >
-            {errorMessage}
-          </BodySmall>
-        )}
-      </Animated.View>
-    );
-  }
-);
+          {errorMessage}
+        </BodySmall>
+      )}
+    </Animated.View>
+  );
+};