@cdek-it/react-native-ui-kit 0.6.2 → 0.6.4

package/dist/components/Dialog/Dialog.js

@@ -7,7 +7,6 @@ const ANIMATION_BACKDROP_DURATION = 200;
 const ANIMATION_CONTENT_DURATION = 500;
 const BACKDROP_OPACITY = 0.5;
 const SCALE_INIT_VALUE = 0.9;
-// eslint-disable-next-line import-x/no-deprecated
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export const Dialog = ({ isVisible, onClose, onHideComplete, header, footer, body, testID, }) => {
     const [showModal, setShowModal] = useState(false);

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

@@ -23,13 +23,11 @@ export const InputOtp = memo(({ length, onChange, disabled = false, error = fals
         onBlur?.(e);
     }, [onBlur]);
     const activeIndex = useMemo(() => Math.min(value.length, length - 1), [value.length, length]);
-    const renderArray = useMemo(() => Array.from({ length }).fill(null), [length]);
+    const renderArray = useMemo(() => Array.from({ length }, (_, i) => `Otp-Item-${i}`), [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]}/>))}
+              {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}/>
           </>)}

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

@@ -69,12 +69,22 @@ export const InputTextBase = memo(
     const toggleUserDefinedSecureTextEntry = useCallback(() => setUserDefinedSecureTextEntry((old) => !old), []);
     const showSecureToggle = secureTextEntryProp === 'toggleable';
     const hasRightContent = loading || showClearButton || showSecureToggle || disabled;
+    const isOnlyButton = useMemo(() => {
+        return ([showClearButton, showSecureToggle].filter((val) => val).length === 1);
+    }, [showClearButton, showSecureToggle]);
     const rightButtonHitSlop = useMemo(() => ({
-        top: 0,
-        bottom: 0,
-        left: styles.rightContainer.gap / 2,
-        right: styles.rightContainer.gap / 2,
-    }), [styles.rightContainer.gap]);
+        // Большие вертикальные отступы (100) - чтобы компенсировать возможное
+        // растягивание инпута по вертикали, при этом область тапа
+        // гарантированно не выйдет за пределы инпута
+        top: 100,
+        bottom: 100,
+        left: isOnlyButton
+            ? styles.rightContainer.gap
+            : styles.rightContainer.gap / 2,
+        right: isOnlyButton
+            ? styles.rightContainer.gap
+            : styles.rightContainer.gap / 2,
+    }), [styles.rightContainer.gap, isOnlyButton]);
     const texInputProps = useMemo(() => ({
         ...otherProps,
         allowFontScaling: floatLabel ? false : otherProps.allowFontScaling,

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

@@ -11,6 +11,7 @@ export declare const useInputStyle: (size?: InputTextBaseProps["size"]) => {
     containerFocused: {
         outlineColor: string;
         outlineWidth: number;
+        borderColor: string;
     };
     containerFloatLabel: {
         minHeight: number;

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

@@ -27,6 +27,7 @@ const useStyles = makeStyles(({ theme, border, typography, spacing, fonts }) =>
     containerFocused: {
         outlineColor: theme.General.focusOutlineColor,
         outlineWidth: Math.round(theme.General.focusShadowWidth),
+        borderColor: theme.General.focusBorderColor,
     },
     containerFloatLabel: {
         minHeight: theme.Button.Common.buttonHeightXL,

package/dist/components/ProgressSpinner/ProgressSpinner.js

@@ -2,9 +2,7 @@ import { memo, useEffect, useMemo } from 'react';
 import Animated, { Easing, interpolate, useAnimatedProps, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
 import Svg, { Circle } from 'react-native-svg';
 import { makeStyles } from '../../utils/makeStyles';
-// eslint-disable-next-line import-x/no-deprecated
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
-// eslint-disable-next-line import-x/no-deprecated
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const STROKE_WIDTH = 2;
 /**

package/dist/components/Rating/Rating.js

@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 import { makeStyles } from '../../utils/makeStyles';
 import { RatingClear } from './RatingClear';
@@ -20,12 +20,10 @@ export const Rating = memo(({ disabled = false, paddings = false, maxRating = 5,
     const handleItemPress = useCallback((index) => () => {
         onChange(index + 1);
     }, [onChange]);
+    const renderArray = useMemo(() => Array.from({ length: maxRating }, (_, i) => `Rating-Item-${i}`), [maxRating]);
     return (<View style={styles.container}>
         <RatingClear disabled={disabled} paddings={paddings} testID={testID || 'RatingClear'} onPress={onClear} {...rest}/>
-        {new Array(maxRating).fill(null).map((_, index) => (<RatingItem checked={index < rating} 
-        // Использовать индекс массива в качестве ключа - единственно возможное и правильное решение
-        // eslint-disable-next-line react/no-array-index-key
-        key={`RatingItem-${index}`} paddings={paddings} testID={`RatingItem-${index + 1}`} onPress={handleItemPress(index)}/>))}
+        {renderArray.map((key, index) => (<RatingItem checked={index < rating} key={key} paddings={paddings} testID={`RatingItem-${index + 1}`} onPress={handleItemPress(index)}/>))}
       </View>);
 });
 const useStyles = makeStyles(({ theme }) => ({

package/dist/components/Timer/Timer.js

@@ -5,7 +5,6 @@ import Svg, { Circle } from 'react-native-svg';
 import { makeStyles } from '../../utils/makeStyles';
 import { TimerFlip } from './TimerFlip';
 import { COUNTER_SIZE } from './constants';
-// eslint-disable-next-line import-x/no-deprecated
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const BORDER_WIDTH = 2;
 /**
@@ -21,6 +20,8 @@ export const Timer = memo(({ countFrom, onFinish }) => {
     const center = COUNTER_SIZE / 2;
     const circleAnimatedProps = useAnimatedProps(() => ({
         strokeDashoffset: -circleAnimation.value * circumferenceLength,
+        origin: [center, center],
+        rotation: -90,
     }));
     useEffect(() => {
         setCurrentTimerValue(countFrom);
@@ -45,7 +46,7 @@ export const Timer = memo(({ countFrom, onFinish }) => {
     }, [currentTimerValue, onFinish]);
     return (<View style={styles.container} testID={TestId.Container}>
       <Svg style={styles.svgContainer}>
-        <AnimatedCircle animatedProps={circleAnimatedProps} cx={center} cy={center} fill='none' origin={[center, center]} r={circumferenceRadius} rotation={-90} stroke={styles.circle.color} strokeDasharray={circumferenceLength} strokeLinecap='round' strokeWidth={BORDER_WIDTH}/>
+        <AnimatedCircle animatedProps={circleAnimatedProps} cx={center} cy={center} fill='none' r={circumferenceRadius} stroke={styles.circle.color} strokeDasharray={circumferenceLength} strokeLinecap='round' strokeWidth={BORDER_WIDTH}/>
       </Svg>
 
       <TimerFlip value={currentTimerValue}/>

package/package.json

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