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

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

@@ -74,7 +74,17 @@ export const InputTextBase = memo(
         });
     }, [isFocused, labelAnimation, value]);
     const iconSize = useMemo(() => (floatLabel ? styles.iconSizeFloatLabel : styles.iconSize), [floatLabel, styles.iconSize, styles.iconSizeFloatLabel]);
-    useImperativeHandle(propsInputRef, () => inputRef.current ? Object.assign(inputRef.current, { clear }) : null, [inputRef, clear]);
+    const imperativeHandle = useMemo(() => new Proxy({}, {
+        get(_, prop) {
+            if (prop === 'clear') {
+                return clear;
+            }
+            const input = inputRef.current;
+            const value = input?.[prop];
+            return typeof value === 'function' ? value.bind(input) : value;
+        },
+    }), [clear]);
+    useImperativeHandle(propsInputRef, () => (inputRef.current ? imperativeHandle : null), [imperativeHandle]);
     const { makeTestId } = useMakeTestId(otherProps.testID || InputTextBaseTestId.default);
     const [userDefinedSecureTextEntry, setUserDefinedSecureTextEntry] = useState(true);
     const secureTextEntry = useMemo(() => secureTextEntryProp === 'toggleable'

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.6",
+  "version": "1.0.0-beta.8",
   "description": "UI kit на основе Prime Faces, Prime Flex для React Native",
   "license": "MIT",
   "homepage": "https://developer.cdek.ru/design-system",