@cdek-it/react-native-ui-kit 0.3.0 → 0.4.0

package/dist/components/Input/InputOtp/InputOtp.d.ts

@@ -0,0 +1,8 @@
+import { type TextInputProps, type PressableProps } from 'react-native';
+export interface InputOtpProps extends Omit<TextInputProps, 'value' | 'onChangeText' | 'onFocus' | 'onBlur' | 'ref' | 'keyboardType' | 'style'>, Pick<PressableProps, 'testOnly_pressed'> {
+    length: number;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    error?: boolean;
+}
+export declare const InputOtp: import("react").NamedExoticComponent<InputOtpProps>;

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

@@ -0,0 +1,44 @@
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Pressable, View, TextInput, } from 'react-native';
+import { makeStyles } from '../../../utils/makeStyles';
+import { InputOtpItem } from './InputOtpItem';
+export const InputOtp = memo(({ length, onComplete, disabled = false, error = false, testOnly_pressed, testID, ...rest }) => {
+    const styles = useStyles();
+    const [value, setValue] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const handlePress = useCallback(() => {
+        inputRef.current?.focus();
+    }, []);
+    const handleChange = useCallback((text) => {
+        const sanitizedText = text.replace(/[^0-9]/g, '');
+        setValue(sanitizedText);
+        if (sanitizedText.length === length) {
+            onComplete?.(sanitizedText);
+            inputRef.current?.blur();
+        }
+    }, [length, onComplete]);
+    const handleFocus = useCallback(() => {
+        setIsFocused(true);
+    }, []);
+    const handleBlur = useCallback(() => {
+        setIsFocused(false);
+    }, []);
+    const activeIndex = useMemo(() => Math.min(value.length, length - 1), [value.length, length]);
+    const renderArray = useMemo(() => Array.from({ length }).fill(null), [length]);
+    return (<Pressable disabled={disabled} style={styles.container} testID={testID} testOnly_pressed={testOnly_pressed} onPress={handlePress}>
+        {({ pressed }) => (<>
+            <View style={styles.content}>
+              {renderArray.map((_, index) => (<InputOtpItem disabled={disabled} error={error} focused={isFocused ? index === activeIndex : false} 
+            // eslint-disable-next-line react/no-array-index-key
+            key={index} 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}/>
+          </>)}
+      </Pressable>);
+});
+const useStyles = makeStyles(({ spacing }) => ({
+    container: {},
+    content: { flexDirection: 'row', gap: spacing.Gap['gap-2'] },
+    input: { position: 'absolute', width: 1, height: 1, opacity: 0 },
+}));

package/dist/components/Input/InputOtp/InputOtpItem.d.ts

@@ -0,0 +1,9 @@
+import { type ViewProps } from 'react-native';
+export interface InputOtpItemProps extends Pick<ViewProps, 'testID'> {
+    value?: string;
+    error: boolean;
+    pressed: boolean;
+    disabled: boolean;
+    focused: boolean;
+}
+export declare const InputOtpItem: import("react").NamedExoticComponent<InputOtpItemProps>;

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

@@ -0,0 +1,56 @@
+import { memo, useEffect } from 'react';
+import { View, Text } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import { makeStyles } from '../../../utils/makeStyles';
+const CURSOR_ANIMATION_DURATION = 500;
+export const InputOtpItem = memo(({ value, error, pressed, disabled, focused, testID }) => {
+    const styles = useStyles();
+    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]}>
+              |
+            </Animated.Text>) : null}
+        </Text>
+      </View>);
+});
+const useStyles = makeStyles(({ theme, border, fonts, typography }) => ({
+    container: {
+        minHeight: theme.Button.Common.buttonHeight,
+        minWidth: theme.Button.Common.buttonHeight,
+        paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
+        paddingVertical: theme.Form.InputText.inputPaddingTopBottom,
+        borderBottomWidth: border.Width.border,
+        borderColor: theme.Form.InputText.inputBorderColor,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text: {
+        fontSize: typography.Size['text-2xl'],
+        fontFamily: fonts.secondary,
+        fontWeight: '400',
+        color: theme.Form.InputText.inputTextColor,
+    },
+    pressed: { borderColor: theme.Form.InputText.inputHoverBorderColor },
+    error: { borderColor: theme.Form.InputText.inputErrorBorderColor },
+    disabled: { mixBlendMode: 'luminosity', opacity: 0.6 },
+    cursor: { color: theme.Form.InputText.inputFocusBorderColor },
+}));

package/package.json

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