@cdek-it/react-native-ui-kit 1.0.0-beta.8 → 1.0.0

package/dist/components/Input/InputOtp/InputOtp.js

@@ -1,14 +1,25 @@
-import { memo, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Pressable, View, TextInput, } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { InputOtpItem } from './InputOtpItem';
-export const InputOtp = memo(({ length, onChange, disabled = false, error = false, testOnly_pressed, inputRef: propsInputRef, testID, value = '', onFocus, onBlur, ...rest }) => {
+export const InputOtp = memo(({ length, onChange, disabled = false, error = false, testOnly_pressed, inputRef: propsInputRef, testID, value = '', onFocus, onBlur, editable, ...rest }) => {
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
+    const isInputEditable = !disabled && editable !== false;
     useImperativeHandle(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) => {
         const sanitizedText = text.replace(/[^0-9]/g, '');
         onChange(sanitizedText);
@@ -28,7 +39,7 @@ export const InputOtp = memo(({ length, onChange, disabled = false, error = fals
             <View style={styles.content}>
               {renderArray.map((key, index) => (<InputOtpItem disabled={disabled} error={error} focused={isFocused ? index === activeIndex : false} key={key} pressed={pressed} testID={`${testID}Item`} value={value[index]}/>))}
             </View>
-            <TextInput keyboardType='number-pad' maxLength={length} ref={inputRef} style={styles.input} testID={`${testID}HiddenInput`} value={value} onBlur={handleBlur} onChangeText={handleChange} onFocus={handleFocus} {...rest}/>
+            <TextInput editable={isInputEditable} keyboardType='number-pad' maxLength={length} ref={inputRef} style={styles.input} testID={`${testID}HiddenInput`} value={value} onBlur={handleBlur} onChangeText={handleChange} onFocus={handleFocus} {...rest}/>
           </>)}
       </Pressable>);
 });

package/dist/components/Input/InputOtp/InputOtpItem.js

@@ -1,34 +1,32 @@
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
 import { View, Text } from 'react-native';
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 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',
+};
 export const InputOtpItem = memo(({ 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={[
             styles.container,
             error && styles.error,
             pressed && styles.pressed,
             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>
+            </Animated.Text>
+          </View>) : (<Text style={styles.text} testID={testID}>
+            {value}
+          </Text>)}
       </View>);
 });
 const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({
@@ -42,14 +40,16 @@ const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({
         alignItems: 'center',
         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 },
     error: { borderColor: theme.Form.InputText.inputErrorBorderColor },
     disabled: { mixBlendMode: 'luminosity', opacity: 0.6 },
-    cursor: { color: theme.Form.InputText.inputTextColor },
+    cursor: { color: theme.Form.InputText.inputTextColor, marginBottom: 3 },
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdek-it/react-native-ui-kit",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0",
   "description": "UI kit на основе Prime Faces, Prime Flex для React Native",
   "license": "MIT",
   "homepage": "https://developer.cdek.ru/design-system",