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

package/dist/components/SelectButton/SelectButton.d.ts

@@ -1,22 +1,15 @@
 import { type AccessibilityProps, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
 import { type SharedValue } from 'react-native-reanimated';
 import { type SelectButtonItemProps } from './SelectButtonItem';
-export interface SelectButtonProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
+interface SelectButtonBaseProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
     /** Массив кнопок. Должен содержать как минимум 2 кнопки. */
-    buttons: Array<Pick<SelectButtonItemProps, 'label' | 'showIcon' | 'Icon'> & {
+    buttons: Array<Pick<SelectButtonItemProps, 'accessibilityLabel' | 'label' | 'showIcon' | 'Icon'> & {
         key: string;
     }>;
     /** true - если кнопки недоступны для нажатия */
     disabled?: boolean;
-    /** Индекс выбранной кнопки при первом рендере */
-    initialIndex?: number;
     /** Вызывается при нажатии на кнопку */
     onPress?: (index: number) => void;
-    /**
-     * Анимированное значение 0...n-1, где n - это количество кнопок.
-     * Используется для контроля элемента извне. Если передано, то компонент становится управляемым.
-     */
-    position?: SharedValue<number>;
     /**
      * Выбор размера элемента
      * @default 'base'
@@ -25,8 +18,21 @@ export interface SelectButtonProps extends AccessibilityProps, Pick<ViewProps, '
     /** Дополнительная стилизация для контейнера компонента */
     style?: StyleProp<ViewStyle>;
 }
+/**
+ * `position` имеет приоритет над `selectedIndex`, а `selectedIndex` — над
+ * `initialIndex`. Одновременная передача сохранена для обратной совместимости.
+ */
+export interface SelectButtonProps extends SelectButtonBaseProps {
+    /** Индекс выбранной кнопки при первом рендере */
+    initialIndex?: number;
+    /** Индекс выбранной кнопки в контролируемом режиме */
+    selectedIndex?: number;
+    /** Значение позиции для синхронизации с внешней анимацией */
+    position?: SharedValue<number>;
+}
 /**
  * Используется для маркировки элементов интерфейса
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4921
  */
 export declare const SelectButton: import("react").NamedExoticComponent<SelectButtonProps>;
+export {};

package/dist/components/SelectButton/SelectButton.js

@@ -1,15 +1,21 @@
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { View, } from 'react-native';
 import Animated, { Easing, interpolate, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { scheduleOnRN } from 'react-native-worklets';
 import { SelectButtonItem, } from './SelectButtonItem';
 const DEFAULT_ANIMATION_DURATION = 200; // ms
-/**
- * Используется для маркировки элементов интерфейса
- * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4921
- */
-export const SelectButton = memo(({ buttons, disabled, initialIndex: initialIndexProp, onPress: onPressProp, size, style, testID, position: positionProp, ...rest }) => {
+// TODO(next major): экспортировать StrictSelectButtonProps как SelectButtonProps, после миграции удалить адаптер и тесты
+const normalizeSelectButtonProps = ({ initialIndex, position, selectedIndex, ...baseProps }) => {
+    if (position !== undefined) {
+        return { ...baseProps, position };
+    }
+    if (selectedIndex !== undefined) {
+        return { ...baseProps, selectedIndex };
+    }
+    return { ...baseProps, initialIndex };
+};
+const SelectButtonStrict = memo(({ buttons, disabled, initialIndex: initialIndexProp, onPress: onPressProp, selectedIndex, size, style, testID, position: positionProp, ...rest }) => {
     const buttonsLayoutListRef = useRef([]);
     const buttonsLayoutList = useSharedValue([]);
     const [frameKey, setFrameKey] = useState(Date.now());
@@ -27,15 +33,24 @@ export const SelectButton = memo(({ buttons, disabled, initialIndex: initialInde
             scheduleOnRN(setFrameKey, Date.now());
         }
     });
-    const positionInner = useSharedValue(initialIndex);
+    const positionInner = useSharedValue(selectedIndex ?? initialIndex);
     const position = useMemo(() => positionProp || positionInner, [positionInner, positionProp]);
+    useEffect(() => {
+        if (selectedIndex === undefined) {
+            return;
+        }
+        positionInner.value = withTiming(selectedIndex, {
+            duration: DEFAULT_ANIMATION_DURATION,
+            easing: Easing.linear,
+        });
+    }, [positionInner, selectedIndex]);
     const animationInputRange = useMemo(() => buttons.map((_, index) => index), [buttons]);
     const framePositionStyle = useAnimatedStyle(() => {
         const left = interpolate(position.value, animationInputRange, animationInputRange.map((index) => buttonsLayoutList.value[index]?.x ?? 0));
         const width = interpolate(position.value, animationInputRange, animationInputRange.map((index) => buttonsLayoutList.value[index]?.width ?? 0));
         return { left, width };
     });
-    const isUncontrolledComponent = useMemo(() => !positionProp, [positionProp]);
+    const isUncontrolledComponent = positionProp === undefined && selectedIndex === undefined;
     const onPress = useCallback((index) => {
         if (isUncontrolledComponent) {
             positionInner.value = withTiming(index, {
@@ -46,11 +61,16 @@ export const SelectButton = memo(({ buttons, disabled, initialIndex: initialInde
         onPressProp?.(index);
     }, [isUncontrolledComponent, onPressProp, positionInner]);
     return (<View collapsable={false} style={[styles.container, style]} testID={testID} {...rest}>
-        {buttons.map(({ label, Icon, key, showIcon }, index) => (<SelectButtonItem Icon={Icon} disabled={disabled} index={index} key={key} label={label} position={position} showIcon={showIcon} size={size} testID={`SelectButton_SelectButtonItem_${index}`} onLayout={(event) => onButtonLayout(index, event)} onPress={() => onPress(index)}/>))}
+        {buttons.map(({ accessibilityLabel, label, Icon, key, showIcon }, index) => (<SelectButtonItem Icon={Icon} accessibilityLabel={accessibilityLabel} disabled={disabled} index={index} key={key} label={label} position={position} showIcon={showIcon} size={size} testID={`SelectButton_SelectButtonItem_${index}`} onLayout={(event) => onButtonLayout(index, event)} onPress={() => onPress(index)}/>))}
 
         {!disabled && (<Animated.View key={frameKey} style={[styles.frame, framePositionStyle]} testID='SelectButton_AnimatedFrame'/>)}
       </View>);
 });
+/**
+ * Используется для маркировки элементов интерфейса
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4921
+ */
+export const SelectButton = memo((props) => (<SelectButtonStrict {...normalizeSelectButtonProps(props)}/>));
 const styles = StyleSheet.create(({ theme }) => ({
     container: {
         flexDirection: 'row',

package/dist/components/SelectButton/SelectButtonItem.d.ts

@@ -1,7 +1,7 @@
 import { type ViewProps } from 'react-native';
 import { type SharedValue } from 'react-native-reanimated';
 import { type SvgSource } from '../../utils/SvgUniversal';
-export interface SelectButtonItemProps extends Pick<ViewProps, 'onLayout' | 'testID'> {
+export interface SelectButtonItemProps extends Pick<ViewProps, 'accessibilityLabel' | 'onLayout' | 'testID'> {
     /** Индекс кнопки */
     index: number;
     /** Обработчик нажатия на кнопку */
@@ -13,7 +13,7 @@ export interface SelectButtonItemProps extends Pick<ViewProps, 'onLayout' | 'tes
     position: SharedValue<number>;
     /** true - если кнопка недоступна для нажатия */
     disabled?: boolean;
-    /** Текст на кнопке */
+    /** Текст на кнопке. Может быть опущен для сегмента только с иконкой. */
     label?: string;
     /**
      * Выбор размера элемента

package/dist/components/SelectButton/SelectButtonItem.js

@@ -8,7 +8,7 @@ import { SvgUniversal } from '../../utils/SvgUniversal';
  * Дочерний элемент компонента SelectButton. Не используется отдельно от SelectButton.
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=481-4393
  */
-export const SelectButtonItem = memo(({ index, position, onPress, disabled, label, onLayout, size = 'base', showIcon = true, Icon, }) => {
+export const SelectButtonItem = memo(({ accessibilityLabel, index, position, onPress, disabled, label, onLayout, testID, size = 'base', showIcon = true, Icon, }) => {
     const sizeMap = useMemo(() => ({
         small: { icon: styles.iconSmall, label: styles.labelSmall },
         base: { icon: styles.iconBase, label: styles.labelBase },
@@ -32,11 +32,11 @@ export const SelectButtonItem = memo(({ index, position, onPress, disabled, labe
             scheduleOnRN(setIsSelected, value === index);
         }
     });
-    return (<TouchableOpacity disabled={disabled} style={[
+    return (<TouchableOpacity accessibilityLabel={accessibilityLabel} accessibilityRole='button' accessibilityState={{ disabled, selected: isSelected }} disabled={disabled} style={[
             styles.container,
             styles[size],
             disabled && styles.disabledContainer,
-        ]} testID='SelectButtonItem_TouchableOpacity' onLayout={onLayout} onPress={onPress}>
+        ]} testID={testID || 'SelectButtonItem_TouchableOpacity'} onLayout={onLayout} onPress={onPress}>
         {Icon && showIcon ? (<SvgUniversal {...iconSize} source={Icon} testID='SelectButtonItem_Icon' uniProps={({ theme }) => ({
                 color: disabled
                     ? theme.Button.Disabled.disabledButtonBorderColor

package/package.json

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