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

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

@@ -1,8 +1,10 @@
-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'> {
+import { type Ref } from 'react';
+import { TextInput, type TextInputProps, type PressableProps } from 'react-native';
+export interface InputOtpProps extends Omit<TextInputProps, 'onChangeText' | 'onChange' | 'ref' | 'keyboardType' | 'style'>, Pick<PressableProps, 'testOnly_pressed'> {
     length: number;
-    onComplete?: (value: string) => void;
+    onChange: (value: string) => void;
     disabled?: boolean;
     error?: boolean;
+    inputRef?: Ref<TextInput | null>;
 }
 export declare const InputOtp: import("react").NamedExoticComponent<InputOtpProps>;

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

@@ -1,29 +1,27 @@
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useImperativeHandle, 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 }) => {
+export const InputOtp = memo(({ length, onChange, disabled = false, error = false, testOnly_pressed, inputRef: propsInputRef, testID, value = '', onFocus, onBlur, ...rest }) => {
     const styles = useStyles();
-    const [value, setValue] = useState('');
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
+    useImperativeHandle(propsInputRef, () => inputRef.current);
     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(() => {
+        onChange(sanitizedText);
+    }, [onChange]);
+    const handleFocus = useCallback((e) => {
         setIsFocused(true);
-    }, []);
-    const handleBlur = useCallback(() => {
+        onFocus?.(e);
+    }, [onFocus]);
+    const handleBlur = useCallback((e) => {
         setIsFocused(false);
-    }, []);
+        onBlur?.(e);
+    }, [onBlur]);
     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}>

package/dist/components/Input/InputTextBase/InputTextBase.js

@@ -14,7 +14,7 @@ import { useStyles } from './useStyles';
  */
 export const InputTextBase = memo(
 // eslint-disable-next-line max-lines-per-function
-({ state, clearable = true, secureTextEntry: secureTextEntryProp = false, inputRef: propsInputRef, disabled, containerStyle, loading, renderTextInput, clearButtonAccessibilityLabel, floatLabel = false, placeholder, ...otherProps
+({ state, clearable = true, secureTextEntry: secureTextEntryProp = false, inputRef: propsInputRef, disabled, containerStyle, loading, renderTextInput, clearButtonAccessibilityLabel, floatLabel = false, placeholder, editable = true, ...otherProps
 // TODO: разделить float label и обычный инпут -> добавить во float label поддержку font scale
 // eslint-disable-next-line complexity
  }) => {
@@ -80,7 +80,7 @@ export const InputTextBase = memo(
         allowFontScaling: floatLabel ? false : otherProps.allowFontScaling,
         placeholder: '',
         testID: makeTestId(),
-        editable: !disabled,
+        editable: disabled ? false : editable,
         secureTextEntry,
         style: [
             styles.inputFont,
@@ -97,6 +97,7 @@ export const InputTextBase = memo(
         floatLabel,
         makeTestId,
         disabled,
+        editable,
         secureTextEntry,
         styles.inputFont,
         styles.floatLabelInput,

package/dist/components/Input/InputTextBase/types.d.ts

@@ -1,7 +1,7 @@
 import type { Ref, ReactNode } from 'react';
 import type { TextInputProps, ViewStyle, TextInput } from 'react-native';
 /** @see TextInputProps */
-export interface InputTextBaseProps extends Omit<TextInputProps, 'style' | 'editable' | 'secureTextEntry'> {
+export interface InputTextBaseProps extends Omit<TextInputProps, 'style' | 'secureTextEntry'> {
     /**
      * Управление отображения иконки очистки поля
      * @default true

package/dist/components/Input/InputTextBase/useStyles.d.ts

@@ -70,6 +70,7 @@ export declare const useStyles: () => {
         paddingHorizontal: number;
         gap: number;
         overflow: "hidden";
+        alignItems: "center";
     };
     rightButtonContainer: {
         justifyContent: "center";

package/dist/components/Input/InputTextBase/useStyles.js

@@ -65,6 +65,7 @@ export const useStyles = makeStyles(({ theme, border, typography, spacing, fonts
         paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
         gap: theme.Form.InputText.inputPaddingLeftRight,
         overflow: 'hidden',
+        alignItems: 'center',
     },
     rightButtonContainer: { justifyContent: 'center' },
     rightIcon: { color: theme.Form.InputText.inputIconColor },

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

@@ -3,3 +3,4 @@ export { InputText } from './InputText';
 export { FloatLabel } from './FloatLabel';
 export { InputSwitch } from './InputSwitch';
 export type { InputTextBaseProps } from './InputTextBase/types';
+export { InputOtp } from './InputOtp/InputOtp';

package/dist/components/Input/index.js

@@ -2,3 +2,4 @@ export { InputGroup } from './InputGroup';
 export { InputText } from './InputText';
 export { FloatLabel } from './FloatLabel';
 export { InputSwitch } from './InputSwitch';
+export { InputOtp } from './InputOtp/InputOtp';

package/package.json

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