feat(buttons): implemented segmented button

Author: computools-anastasiia-nahaiska

src/buttons/segmented-button/SegmentedButton.component.tsx

@@ -0,0 +1,69 @@
+import {View, type ViewProps, type ColorValue, type StyleProp, type TextStyle} from 'react-native';
+import React, {useCallback, type ReactElement} from 'react';
+
+import {styles} from './segmented-button.styles';
+import {useTheme} from '../../theme/useTheme.hook';
+import {type IconProps} from '../../icons/icon-props';
+import {ButtonSegment as ButtonSegmentComponent} from './button-segment/ButtonSegment.component';
+
+export interface ButtonSegment<T> {
+  value: T;
+
+  label?: string;
+  Icon?: React.FC<IconProps>;
+}
+
+export interface SegmentedButtonProps<T> extends ViewProps {
+  segments: ButtonSegment<T>[];
+  selected: T[];
+
+  multiSelectionEnabled?: boolean;
+  withCheckmark?: boolean;
+  iconSize?: number;
+  iconColor?: ColorValue;
+  rippleColor?: ColorValue;
+  labelStyle?: StyleProp<TextStyle>;
+
+  onSegmentPress: (value: T[] | ((currValues: T[]) => T[])) => void;
+}
+
+export const SegmentedButton: <T extends any>(props: SegmentedButtonProps<T>) => ReactElement = ({
+  segments,
+  selected,
+  multiSelectionEnabled = false,
+  onSegmentPress,
+  style,
+  withCheckmark,
+  labelStyle,
+  iconSize,
+  iconColor,
+  rippleColor,
+  ...props
+}) => {
+  const {outline} = useTheme();
+
+  const renderButtonSegment = useCallback(
+    (segment, index) => (
+      <ButtonSegmentComponent
+        key={segment.value}
+        style={{borderLeftWidth: Number(Boolean(index))}}
+        selected={selected.includes(segment.value)}
+        onSegmentPress={onSegmentPress}
+        multiSelectionEnabled={multiSelectionEnabled}
+        withCheckmark={withCheckmark}
+        labelStyle={labelStyle}
+        iconSize={iconSize}
+        iconColor={iconColor}
+        rippleColor={rippleColor}
+        {...segment}
+      />
+    ),
+    [selected, withCheckmark, labelStyle, iconColor, iconSize, rippleColor, multiSelectionEnabled, onSegmentPress]
+  );
+
+  return (
+    <View style={[styles.container, {borderColor: outline}, style]} {...props}>
+      {segments.map(renderButtonSegment)}
+    </View>
+  );
+};

src/buttons/segmented-button/button-segment/ButtonSegment.component.tsx

@@ -0,0 +1,121 @@
+import React, {useEffect} from 'react';
+import {Pressable, type PressableProps, type StyleProp, type ViewStyle, type TextStyle, type ColorValue} from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  interpolate,
+  interpolateColor,
+  LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import {styles} from './button-segment.styles';
+import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
+import {useTypography} from '../../../typography/useTypography.component';
+import {AnimatedSelectedIcon} from './animated-selected-icon/AnimatedSelectedIcon.component';
+
+interface ButtonSegmentProps<T> extends Omit<PressableProps, 'onPress'> {
+  value: T;
+  selected: boolean;
+  multiSelectionEnabled: boolean;
+
+  label?: string;
+  withCheckmark?: boolean;
+  Icon?: React.FC<IconProps>;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  iconSize?: number;
+  iconColor?: ColorValue;
+  rippleColor?: ColorValue;
+
+  onSegmentPress: (value: T[] | ((prevValues: T[]) => T[])) => void;
+}
+
+const DEFAULT_ICON_SIZE = 18;
+
+export const ButtonSegment = React.memo(
+  <T extends any>({
+    value,
+    selected,
+    Icon,
+    label,
+    multiSelectionEnabled,
+    withCheckmark = true,
+    onSegmentPress,
+    iconSize = DEFAULT_ICON_SIZE,
+    labelStyle,
+    iconColor,
+    rippleColor,
+    style,
+    ...props
+  }: ButtonSegmentProps<T>) => {
+    const {labelLarge} = useTypography();
+    const {surface, secondaryContainer} = useTheme();
+
+    const fill = useSharedValue(Number(selected));
+
+    useEffect(() => {
+      fill.value = withTiming(Number(selected));
+    }, [selected]);
+
+    const animatedLabelStyle = useAnimatedStyle(
+      () => ({
+        color: interpolateColor(fill.value, [0, 1], [surface.text as string, secondaryContainer.text as string]),
+      }),
+      []
+    );
+
+    const circleAnimatedStyle = useAnimatedStyle(() => {
+      return {
+        opacity: fill.value,
+        width: `${interpolate(fill.value, [0, 1], [0, 100])}%`,
+      };
+    }, []);
+
+    const handleSegmentPress = () => {
+      if (multiSelectionEnabled) {
+        handleMultiplyChoosing();
+      } else {
+        onSegmentPress([value]);
+      }
+    };
+
+    const handleMultiplyChoosing = () => {
+      onSegmentPress((prevValues) => {
+        const filteredCurrValuesDependsOnLength = prevValues.length === 1 ? prevValues : prevValues.filter((prevValue) => prevValue !== value);
+
+        return selected ? filteredCurrValuesDependsOnLength : [...prevValues, value];
+      });
+    };
+
+    const renderIconConditionally = () => {
+      const defaultIconColor = selected ? secondaryContainer.text : surface.text;
+
+      return Icon ? (
+        <Animated.View layout={LinearTransition} entering={FadeIn} exiting={FadeOut}>
+          <Icon size={iconSize} color={iconColor ?? defaultIconColor} />
+        </Animated.View>
+      ) : null;
+    };
+
+    return (
+      <Pressable style={[styles.container, style]} {...props} onPress={handleSegmentPress}>
+        <Animated.View style={[styles.ripple, {backgroundColor: rippleColor ?? secondaryContainer.background}, circleAnimatedStyle]} />
+        {withCheckmark && selected ? (
+          <Animated.View layout={LinearTransition} entering={FadeIn}>
+            <AnimatedSelectedIcon width={iconSize} height={iconSize} strokeWidth={2} stroke={secondaryContainer.text} />
+          </Animated.View>
+        ) : null}
+        {Icon && withCheckmark && selected ? null : renderIconConditionally()}
+        {label ? (
+          <Animated.Text layout={LinearTransition} style={[labelLarge, animatedLabelStyle, labelStyle]}>
+            {label}
+          </Animated.Text>
+        ) : null}
+      </Pressable>
+    );
+  }
+);

src/buttons/segmented-button/button-segment/animated-selected-icon/AnimatedSelectedIcon.component.tsx

@@ -0,0 +1,37 @@
+import React, {useCallback} from 'react';
+import Svg, {type SvgProps, Path} from 'react-native-svg';
+import Animated, {interpolate, useAnimatedProps, useSharedValue, withTiming} from 'react-native-reanimated';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+export const AnimatedSelectedIcon: React.FC<SvgProps> = (props) => {
+  const pathRef = React.useRef<Path>(null);
+  const progress = useSharedValue(0);
+  const [length, setLength] = React.useState(0);
+
+  const onLayout = useCallback(() => setLength(pathRef.current?.getTotalLength() ?? 0), [pathRef.current]);
+
+  React.useEffect(() => {
+    progress.value = withTiming(1, {duration: 330});
+  }, []);
+
+  const animatedProps = useAnimatedProps(() => ({
+    strokeDashoffset: interpolate(progress.value, [0, 1], [length, 0]),
+  }));
+
+  return (
+    <Svg width={props.width} height={props.height} viewBox="0 0 21 24" fill="none" {...props}>
+      <AnimatedPath
+        ref={pathRef}
+        onLayout={onLayout}
+        stroke={props.stroke}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={props.strokeWidth}
+        d="M4 12.611 8.923 17.5 20 6.5"
+        animatedProps={animatedProps}
+        strokeDasharray={length}
+      />
+    </Svg>
+  );
+};

src/buttons/segmented-button/button-segment/button-segment.styles.ts

@@ -0,0 +1,20 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    gap: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    paddingVertical: 10,
+
+    overflow: 'hidden',
+  },
+  ripple: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+  },
+});

src/buttons/segmented-button/segmented-button.styles.ts

@@ -0,0 +1,12 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+
+    borderWidth: 1,
+    borderRadius: 100,
+
+    overflow: 'hidden',
+  },
+});