Правки InputOtp

src/components/Input/InputOtp/InputOtp.tsx

@@ -1,6 +1,7 @@
 import {
   memo,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -48,20 +49,34 @@ export const InputOtp = memo<InputOtpProps>(
     value = '',
     onFocus,
     onBlur,
+    editable,
     ...rest
   }) => {
     const [isFocused, setIsFocused] = useState(false)
 
     const inputRef = useRef<TextInput>(null)
+    const isInputEditable = !disabled && editable !== false
 
     useImperativeHandle<TextInput | null, TextInput | null>(
       propsInputRef,
       () => inputRef.current
     )
 
+    useEffect(() => {
+      if (!isInputEditable) {
+        setIsFocused(false)
+
+        if (inputRef.current?.isFocused()) {
+          inputRef.current.blur()
+        }
+      }
+    }, [isInputEditable])
+
     const handlePress = useCallback(() => {
-      inputRef.current?.focus()
-    }, [])
+      if (isInputEditable) {
+        inputRef.current?.focus()
+      }
+    }, [isInputEditable])
 
     const handleChange = useCallback(
       (text: string) => {
@@ -121,6 +136,7 @@ export const InputOtp = memo<InputOtpProps>(
               ))}
             </View>
             <TextInput
+              editable={isInputEditable}
               keyboardType='number-pad'
               maxLength={length}
               ref={inputRef}

src/components/Input/InputOtp/InputOtpItem.tsx

@@ -1,13 +1,7 @@
-import { memo, useEffect } from 'react'
-import { View, type ViewProps, Text } from 'react-native'
+import { memo } from 'react'
+import { View, Text, type TextStyle, type ViewProps } from 'react-native'
 
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withTiming,
-} from 'react-native-reanimated'
+import Animated, { type AnimatedStyle } from 'react-native-reanimated'
 
 import { StyleSheet } from 'react-native-unistyles'
 
@@ -21,27 +15,16 @@ export interface InputOtpItemProps extends Pick<ViewProps, 'testID'> {
 
 const CURSOR_ANIMATION_DURATION = 500
 
+const cursorAnimationStyle = {
+  animationName: { from: { opacity: 1 }, to: { opacity: 0.2 } },
+  animationDuration: CURSOR_ANIMATION_DURATION,
+  animationDirection: 'alternate',
+  animationIterationCount: 'infinite',
+  animationTimingFunction: 'ease',
+} satisfies AnimatedStyle<TextStyle>
+
 export const InputOtpItem = memo<InputOtpItemProps>(
   ({ value, error, pressed, disabled, focused, testID }) => {
-    const opacity = useSharedValue(1)
-
-    useEffect(() => {
-      if (focused) {
-        opacity.value = withRepeat(
-          withTiming(0.2, {
-            duration: CURSOR_ANIMATION_DURATION,
-            easing: Easing.ease,
-          }),
-          -1,
-          true
-        )
-      } else {
-        opacity.value = 1
-      }
-    }, [focused, opacity])
-
-    const cursorBlinking = useAnimatedStyle(() => ({ opacity: opacity.value }))
-
     return (
       <View
         style={[
@@ -51,14 +34,23 @@ export const InputOtpItem = memo<InputOtpItemProps>(
           disabled && styles.disabled,
         ]}
       >
-        <Text style={styles.text} testID={testID}>
-          {value}
-          {focused ? (
-            <Animated.Text style={[styles.cursor, cursorBlinking]}>
+        {focused ? (
+          <View style={styles.textRow} testID={`${testID}CursorRow`}>
+            <Text style={styles.text} testID={testID}>
+              {value}
+            </Text>
+            <Animated.Text
+              style={[styles.text, styles.cursor, cursorAnimationStyle]}
+              testID={`${testID}Cursor`}
+            >
               |
             </Animated.Text>
-          ) : null}
-        </Text>
+          </View>
+        ) : (
+          <Text style={styles.text} testID={testID}>
+            {value}
+          </Text>
+        )}
       </View>
     )
   }
@@ -76,11 +68,14 @@ const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({
     justifyContent: 'center',
   },
 
+  textRow: { flexDirection: 'row', alignItems: 'center' },
+
   text: {
     fontSize: typography.Size['text-2xl'],
     fontFamily: fonts.primary,
     fontWeight: '400',
     color: theme.Form.InputText.inputTextColor,
+    includeFontPadding: false,
   },
 
   pressed: { borderColor: theme.Form.InputText.inputHoverBorderColor },
@@ -89,5 +84,5 @@ const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({
 
   disabled: { mixBlendMode: 'luminosity', opacity: 0.6 },
 
-  cursor: { color: theme.Form.InputText.inputTextColor },
+  cursor: { color: theme.Form.InputText.inputTextColor, marginBottom: 3 },
 }))

src/components/Input/InputOtp/__tests__/InputOtp.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render } from '@testing-library/react-native'
+import type { TextInput } from 'react-native'
 
 import { InputOtp, type InputOtpProps } from '../InputOtp'
 
@@ -43,4 +44,105 @@ describe('InputOtp component tests', () => {
 
     expect(mockedOnChange).toHaveBeenCalledWith('55')
   })
+
+  test('should set hidden input editable prop correctly', () => {
+    const mockedOnChange = jest.fn()
+    const { getByTestId, update } = render(
+      <InputOtp length={4} testID='InputOtp' onChange={mockedOnChange} />
+    )
+
+    expect(getByTestId('InputOtpHiddenInput')).toHaveProp('editable', true)
+
+    update(
+      <InputOtp
+        disabled
+        length={4}
+        testID='InputOtp'
+        onChange={mockedOnChange}
+      />
+    )
+
+    expect(getByTestId('InputOtpHiddenInput')).toHaveProp('editable', false)
+
+    update(
+      <InputOtp
+        editable={false}
+        length={4}
+        testID='InputOtp'
+        onChange={mockedOnChange}
+      />
+    )
+
+    expect(getByTestId('InputOtpHiddenInput')).toHaveProp('editable', false)
+  })
+
+  test('should blur and reset focus when input becomes disabled', () => {
+    const mockedOnChange = jest.fn()
+    let inputRef: TextInput | null = null
+    const handleInputRef = (ref: TextInput | null) => {
+      inputRef = ref
+    }
+    const { getByTestId, getByText, queryByText, update } = render(
+      <InputOtp
+        inputRef={handleInputRef}
+        length={4}
+        testID='InputOtp'
+        onChange={mockedOnChange}
+      />
+    )
+
+    fireEvent(getByTestId('InputOtpHiddenInput'), 'focus')
+
+    expect(getByText('|')).toBeOnTheScreen()
+
+    if (!inputRef) {
+      throw new Error('Input ref was not set')
+    }
+
+    const blur = jest.fn()
+
+    Object.assign(inputRef, { blur, isFocused: () => true })
+
+    update(
+      <InputOtp
+        disabled
+        inputRef={handleInputRef}
+        length={4}
+        testID='InputOtp'
+        onChange={mockedOnChange}
+      />
+    )
+
+    expect(blur).toHaveBeenCalledOnce()
+    expect(queryByText('|')).not.toBeOnTheScreen()
+  })
+
+  test('should not focus hidden input on press when input is not editable', () => {
+    const mockedOnChange = jest.fn()
+    let inputRef: TextInput | null = null
+    const handleInputRef = (ref: TextInput | null) => {
+      inputRef = ref
+    }
+    const { getByTestId } = render(
+      <InputOtp
+        editable={false}
+        inputRef={handleInputRef}
+        length={4}
+        testID='InputOtp'
+        onChange={mockedOnChange}
+      />
+    )
+
+    if (!inputRef) {
+      throw new Error('Input ref was not set')
+    }
+
+    const focus = jest.fn()
+
+    Object.assign(inputRef, { focus })
+
+    fireEvent.press(getByTestId('InputOtp'))
+
+    expect(focus).not.toHaveBeenCalled()
+  })
 })