chore(buttons): added disabled styles for segmented button

Author: computools-anastasiia-nahaiska

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

@@ -1,9 +1,10 @@
+import React, {useCallback, useMemo, type ReactElement} from 'react';
 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 {convertToRGBA} from '../../utils/convert-to-rgba';
 import {ButtonSegment as ButtonSegmentComponent} from './button-segment/ButtonSegment.component';
 
 export interface ButtonSegment<T> {
@@ -17,6 +18,7 @@ export interface SegmentedButtonProps<T> extends ViewProps {
   segments: ButtonSegment<T>[];
   selected: T[];
 
+  disabled?: boolean;
   multiSelectionEnabled?: boolean;
   withCheckmark?: boolean;
   iconSize?: number;
@@ -30,6 +32,7 @@ export interface SegmentedButtonProps<T> extends ViewProps {
 export const SegmentedButton: <T extends any>(props: SegmentedButtonProps<T>) => ReactElement = ({
   segments,
   selected,
+  disabled = false,
   multiSelectionEnabled = false,
   onSegmentPress,
   style,
@@ -42,13 +45,16 @@ export const SegmentedButton: <T extends any>(props: SegmentedButtonProps<T>) =>
 }) => {
   const {outline} = useTheme();
 
+  const borderColor = useMemo(() => (disabled ? convertToRGBA(outline as string, 0.12) : outline), [disabled]);
+
   const renderButtonSegment = useCallback(
     (segment, index) => (
       <ButtonSegmentComponent
         key={segment.value}
-        style={{borderLeftWidth: Number(Boolean(index))}}
+        style={{borderLeftWidth: Number(Boolean(index)), borderLeftColor: borderColor}}
         selected={selected.includes(segment.value)}
         onSegmentPress={onSegmentPress}
+        disabled={disabled}
         multiSelectionEnabled={multiSelectionEnabled}
         withCheckmark={withCheckmark}
         labelStyle={labelStyle}
@@ -58,11 +64,11 @@ export const SegmentedButton: <T extends any>(props: SegmentedButtonProps<T>) =>
         {...segment}
       />
     ),
-    [selected, withCheckmark, labelStyle, iconColor, iconSize, rippleColor, multiSelectionEnabled, onSegmentPress]
+    [selected, withCheckmark, disabled, borderColor, labelStyle, iconColor, iconSize, rippleColor, multiSelectionEnabled, onSegmentPress]
   );
 
   return (
-    <View style={[styles.container, {borderColor: outline}, style]} {...props}>
+    <View style={[styles.container, {borderColor}, style]} {...props}>
       {segments.map(renderButtonSegment)}
     </View>
   );

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

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {Pressable, type PressableProps, type StyleProp, type ViewStyle, type TextStyle, type ColorValue} from 'react-native';
 import Animated, {
   FadeIn,
@@ -14,12 +14,14 @@ import Animated, {
 import {styles} from './button-segment.styles';
 import {useTheme} from '../../../theme/useTheme.hook';
 import {type IconProps} from '../../../icons/icon-props';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
 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;
+  disabled: boolean;
   multiSelectionEnabled: boolean;
 
   label?: string;
@@ -40,6 +42,7 @@ export const ButtonSegment = React.memo(
   <T extends any>({
     value,
     selected,
+    disabled,
     Icon,
     label,
     multiSelectionEnabled,
@@ -56,16 +59,20 @@ export const ButtonSegment = React.memo(
     const {surface, secondaryContainer} = useTheme();
 
     const fill = useSharedValue(Number(selected));
+    const labelDisabledColor = useMemo(() => convertToRGBA(surface.text as string, 0.38), []);
+
+    const defaultIconColor = selected ? secondaryContainer.text : iconColor ?? surface.text;
+    const appliedIconColor = disabled ? labelDisabledColor : defaultIconColor;
 
     useEffect(() => {
       fill.value = withTiming(Number(selected));
     }, [selected]);
 
     const animatedLabelStyle = useAnimatedStyle(
       () => ({
-        color: interpolateColor(fill.value, [0, 1], [surface.text as string, secondaryContainer.text as string]),
+        color: disabled ? labelDisabledColor : interpolateColor(fill.value, [0, 1], [surface.text as string, secondaryContainer.text as string]),
       }),
-      []
+      [disabled]
     );
 
     const circleAnimatedStyle = useAnimatedStyle(() => {
@@ -91,25 +98,22 @@ export const ButtonSegment = React.memo(
       });
     };
 
-    const renderIconConditionally = () => {
-      const defaultIconColor = selected ? secondaryContainer.text : surface.text;
-
-      return Icon ? (
+    const renderIconConditionally = () =>
+      Icon ? (
         <Animated.View layout={LinearTransition} entering={FadeIn} exiting={FadeOut}>
-          <Icon size={iconSize} color={iconColor ?? defaultIconColor} />
+          <Icon size={iconSize} color={appliedIconColor} />
         </Animated.View>
       ) : null;
-    };
 
     return (
-      <Pressable style={[styles.container, style]} {...props} onPress={handleSegmentPress}>
+      <Pressable style={[styles.container, style]} disabled={disabled} {...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} />
+            <AnimatedSelectedIcon width={iconSize} height={iconSize} strokeWidth={2} stroke={appliedIconColor} />
           </Animated.View>
         ) : null}
-        {Icon && withCheckmark && selected ? null : renderIconConditionally()}
+        {Icon && withCheckmark && label && selected ? null : renderIconConditionally()}
         {label ? (
           <Animated.Text layout={LinearTransition} style={[labelLarge, animatedLabelStyle, labelStyle]}>
             {label}