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

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/dist/components/RadioButton/RadioButton.js

@@ -1,7 +1,8 @@
 import { memo, useCallback, useState } from 'react';
 import { Pressable, View, } from 'react-native';
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export const RadioButton = memo(({ onPress, checked = false, disabled = false, state = 'default', testID, ...rest }) => {
     const [pressed, setPressed] = useState(false);
     radioStyles.useVariants({
@@ -13,49 +14,43 @@ export const RadioButton = memo(({ onPress, checked = false, disabled = false, s
     const onPressIn = useCallback(() => setPressed(true), []);
     const onPressOut = useCallback(() => setPressed(false), []);
     return (<View>
-        {!disabled && state === 'danger' && (<Animated.View layout={LinearTransition.duration(100)} style={radioStyles.outline}/>)}
-        <Pressable disabled={disabled} style={radioStyles.container} testID={testID || 'RadioButton_Pressable'} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} {...rest}>
-          <View style={radioStyles.center}/>
-        </Pressable>
+        <Animated.View pointerEvents='none' style={radioStyles.outline}/>
+        <AnimatedPressable disabled={disabled} style={radioStyles.container} testID={testID || 'RadioButton_Pressable'} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} {...rest}>
+          <Animated.View style={radioStyles.center}/>
+        </AnimatedPressable>
       </View>);
 });
-const radioStyles = StyleSheet.create(({ theme }) => ({
+const radioStyles = StyleSheet.create(({ theme, border }) => ({
     container: {
         width: theme.Form.RadioButton.radiobuttonWidth,
         height: theme.Form.RadioButton.radiobuttonHeight,
-        borderRadius: theme.Form.RadioButton.radiobuttonWidth,
+        borderRadius: border.Radius['rounded-full'],
+        borderWidth: 1,
         alignItems: 'center',
         justifyContent: 'center',
-        margin: theme.General.focusShadowWidth,
+        transitionProperty: ['borderColor', 'backgroundColor'],
+        transitionDuration: 100,
         variants: {
             checked: {
                 true: {
                     borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
                     backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-                    borderWidth: 5,
                 },
                 false: {
                     borderColor: theme.Form.InputText.inputBorderColor,
-                    borderWidth: 1,
                     backgroundColor: theme.Form.InputText.inputBg,
                 },
             },
-            pressed: {
-                true: { borderColor: theme.Form.InputText.inputHoverBorderColor },
-                false: {},
-            },
-            state: {
-                danger: { borderColor: theme.Form.InputText.inputErrorBorderColor },
-            },
+            pressed: { true: {}, false: {} },
             disabled: {
                 true: {
                     borderColor: theme.Form.InputText.inputBorderColor,
                     backgroundColor: theme.Button.Disabled.disabledButtonBg,
                     opacity: 0.6,
-                    borderWidth: 1,
                 },
                 false: {},
             },
+            state: { danger: {}, default: {} },
         },
         compoundVariants: [
             {
@@ -63,26 +58,28 @@ const radioStyles = StyleSheet.create(({ theme }) => ({
                 pressed: 'true',
                 styles: {
                     borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
-                    backgroundColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
-                    borderWidth: 5,
+                    backgroundColor: theme.Form.RadioButton.radiobuttonActiveHoverBg,
                 },
             },
             {
-                state: 'danger',
                 checked: 'true',
+                disabled: 'true',
                 styles: {
-                    borderColor: theme.Form.InputText.inputErrorBorderColor,
+                    borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
                     backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-                    borderWidth: 1,
                 },
             },
             {
-                checked: 'true',
-                disabled: 'true',
+                state: 'danger',
+                disabled: 'false',
+                checked: 'false',
+                styles: { borderColor: theme.Form.InputText.inputErrorBorderColor },
+            },
+            {
+                checked: 'false',
+                pressed: 'true',
                 styles: {
-                    borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-                    backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-                    borderWidth: 5,
+                    borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
                 },
             },
         ],
@@ -90,28 +87,27 @@ const radioStyles = StyleSheet.create(({ theme }) => ({
     center: {
         width: theme.Form.RadioButton.radiobuttonIconSize,
         height: theme.Form.RadioButton.radiobuttonIconSize,
-        borderRadius: theme.Form.RadioButton.radiobuttonIconSize,
+        borderRadius: border.Radius['rounded-full'],
         backgroundColor: theme.Form.InputText.inputBg,
-        variants: {
-            checked: { true: {}, false: {} },
-            disabled: { true: {}, false: {} },
-        },
-        compoundVariants: [
-            {
-                disabled: 'true',
-                checked: 'false',
-                styles: { backgroundColor: 'transparent' },
-            },
-        ],
+        transitionProperty: ['opacity'],
+        transitionDuration: 100,
+        variants: { checked: { false: { opacity: 0 }, true: { opacity: 1 } } },
     },
     outline: {
         position: 'absolute',
+        top: -theme.General.focusShadowWidth,
+        left: -theme.General.focusShadowWidth,
         width: theme.Form.RadioButton.radiobuttonWidth +
             theme.General.focusShadowWidth * 2,
         height: theme.Form.RadioButton.radiobuttonHeight +
             theme.General.focusShadowWidth * 2,
-        borderRadius: theme.Form.RadioButton.radiobuttonHeight +
-            theme.General.focusShadowWidth * 2,
+        borderRadius: border.Radius['rounded-full'],
         backgroundColor: theme.General.focusOutlineErrorColor,
+        transitionProperty: 'opacity',
+        transitionDuration: 100,
+        variants: {
+            state: { danger: { opacity: 1 }, default: { opacity: 0 } },
+            disabled: { true: { opacity: 0 } },
+        },
     },
 }));

package/package.json

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