feat: added disabled mode

Author: computools-anastasiia-nahaiska

src/sliders/range-slider/RangeSlider.component.tsx

@@ -4,8 +4,8 @@ import {GestureDetector} from 'react-native-gesture-handler';
 import {type LayoutChangeEvent, type ViewProps, type StyleProp, type ViewStyle, type TextStyle} from 'react-native';
 
 import {styles} from './range-slider.styles';
-import {useTheme} from '../../theme/useTheme.hook';
 import {useRangeSlider} from './useRangeSlider.hook';
+import {useSliderColors} from '../use-slider-colors.hook';
 import {SliderTrack} from '../ui/slider-track/SliderTrack.component';
 import {useRangeSliderTrackPoints} from './useRangeSliderTrackPoints.hook';
 import {SliderIndicator} from '../ui/slider-indicator/SliderIndicator.component';
@@ -19,6 +19,7 @@ export interface RangeSliderProps extends ViewProps {
   step?: number;
   damping?: number;
   centered?: boolean;
+  disabled?: boolean;
 
   valueHeight?: number;
   thumbWidthActive?: number;
@@ -43,6 +44,7 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
   range = [0, 0],
   damping = 20,
   centered = false,
+  disabled = false,
 
   thumbStyle,
   valueStyle,
@@ -61,7 +63,7 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
   style,
   ...props
 }) => {
-  const {primary, secondaryContainer} = useTheme();
+  const {filledTrackColor, remainingTrackColor} = useSliderColors(disabled, centered);
 
   const trackPoints = useRangeSliderTrackPoints({max, min, step, centered});
   const {
@@ -90,32 +92,35 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
     <SliderTrackPoint
       key={pointValue}
       value={pointValue}
+      disabled={disabled}
       selectedValue={selectedRange}
       onPress={slideToTrackPoint}
-      style={[{backgroundColor: secondaryContainer.text}, trackPointStyle]}
+      style={trackPointStyle}
     />
   );
 
   return (
-    <GestureDetector gesture={gesture}>
+    <GestureDetector gesture={gesture.enabled(!disabled)}>
       <View style={[styles.container, style]} onLayout={handleLayoutChange} {...props}>
         <SliderTrack
-          style={[{backgroundColor: secondaryContainer.background}, styles.remainingBeforeTrack, remainingTrackBeforeAnimatedStyle, filledTrackStyle]}
+          style={[{backgroundColor: remainingTrackColor}, styles.remainingBeforeTrack, remainingTrackBeforeAnimatedStyle, filledTrackStyle]}
         />
         <SliderIndicator
           animValueProps={animMinValueProps}
           sliding={thumbMinSliding}
+          disabled={disabled}
           style={[styles.thumb, indicatorStyle]}
           thumbStyle={thumbStyle}
           valueStyle={valueStyle}
           valueHeight={valueHeight}
           thumbWidthActive={thumbWidthActive}
           thumbWidthInactive={thumbWidthInactive}
         />
-        <SliderTrack style={[{backgroundColor: primary.background}, styles.filledTrack, filledTrackAnimatedStyle, filledTrackStyle]} />
+        <SliderTrack style={[{backgroundColor: filledTrackColor}, styles.filledTrack, filledTrackAnimatedStyle, filledTrackStyle]} />
         <SliderIndicator
           animValueProps={animMaxValueProps}
           sliding={thumbMaxSliding}
+          disabled={disabled}
           style={[styles.thumb, indicatorStyle]}
           thumbStyle={thumbStyle}
           valueStyle={valueStyle}
@@ -124,12 +129,7 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
           thumbWidthInactive={thumbWidthInactive}
         />
         <SliderTrack
-          style={[
-            {backgroundColor: secondaryContainer.background},
-            styles.remainingAfterTrack,
-            remainingTrackAfterAnimatedStyle,
-            remainingTrackStyle,
-          ]}
+          style={[{backgroundColor: remainingTrackColor}, styles.remainingAfterTrack, remainingTrackAfterAnimatedStyle, remainingTrackStyle]}
         />
         <View style={[styles.trackPoints, trackPointsStyle]}>{trackPoints.map(renderTrackPoint)}</View>
       </View>

src/sliders/slider /Slider.component.tsx

@@ -5,11 +5,11 @@ import {type LayoutChangeEvent, type ViewProps, type StyleProp, type ViewStyle,
 
 import {styles} from './slider.styles';
 import {useSlider} from './useSlider.hook';
-import {useTheme} from '../../theme/useTheme.hook';
 import {useSliderTrackPoints} from './useSliderTrackPoints.hook';
 import {SliderTrack} from '../ui/slider-track/SliderTrack.component';
 import {SliderIndicator} from '../ui/slider-indicator/SliderIndicator.component';
 import {SliderTrackPoint} from '../ui/slider-track-point/SliderTrackPoint.component';
+import {useSliderColors} from '../use-slider-colors.hook';
 
 export interface SliderProps extends ViewProps {
   max: number;
@@ -18,6 +18,7 @@ export interface SliderProps extends ViewProps {
   value?: number;
   step?: number;
   centered?: boolean;
+  disabled?: boolean;
   damping?: number;
 
   valueHeight?: number;
@@ -42,6 +43,7 @@ export const Slider: React.FC<SliderProps> = ({
   step,
   value = 0,
   damping = 20,
+  disabled = false,
   centered = false,
 
   thumbStyle,
@@ -61,7 +63,7 @@ export const Slider: React.FC<SliderProps> = ({
   style,
   ...props
 }) => {
-  const {primary, secondaryContainer} = useTheme();
+  const {filledTrackColor, remainingTrackColor} = useSliderColors(disabled, centered);
 
   const trackPoints = useSliderTrackPoints({max, min, step, centered});
   const {
@@ -88,27 +90,22 @@ export const Slider: React.FC<SliderProps> = ({
   const renderTrackPoint = (pointValue: number) => (
     <SliderTrackPoint
       key={pointValue}
-      selectedValue={selectedValue}
       value={pointValue}
+      selectedValue={selectedValue}
+      disabled={disabled}
       onPress={slideToTrackPoint}
       disableColorChange={centered}
       style={trackPointStyle}
     />
   );
 
   return (
-    <GestureDetector gesture={gesture}>
+    <GestureDetector gesture={gesture.enabled(!disabled)}>
       <View style={[styles.container, style]} onLayout={handleLayoutChange} {...props}>
-        <SliderTrack
-          style={[
-            {backgroundColor: centered ? secondaryContainer.background : primary.background},
-            styles.filledTrack,
-            filledTrackAnimatedStyle,
-            filledTrackStyle,
-          ]}
-        />
+        <SliderTrack style={[{backgroundColor: filledTrackColor}, styles.filledTrack, filledTrackAnimatedStyle, filledTrackStyle]} />
         <SliderIndicator
           sliding={sliding}
+          disabled={disabled}
           animValueProps={animValueProps}
           style={[styles.thumb, indicatorStyle]}
           thumbStyle={thumbStyle}
@@ -117,9 +114,7 @@ export const Slider: React.FC<SliderProps> = ({
           thumbWidthActive={thumbWidthActive}
           thumbWidthInactive={thumbWidthInactive}
         />
-        <SliderTrack
-          style={[{backgroundColor: secondaryContainer.background}, styles.remainingTrack, remainingTrackAnimatedStyle, remainingTrackStyle]}
-        />
+        <SliderTrack style={[{backgroundColor: remainingTrackColor}, styles.remainingTrack, remainingTrackAnimatedStyle, remainingTrackStyle]} />
         <View style={[styles.trackPoints, {justifyContent: trackPointsJustifyContent}, trackPointsStyle]}>{trackPoints.map(renderTrackPoint)}</View>
       </View>
     </GestureDetector>

src/sliders/ui/slider-indicator/SliderIndicator.component.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import Animated, {interpolate, useAnimatedStyle, type AnimatedProps, type SharedValue} from 'react-native-reanimated';
 import {View, TextInput, type ViewProps, type TextInputProps, type StyleProp, type ViewStyle, type TextStyle} from 'react-native';
 
 import {styles} from './slider-indicator.styles';
 import {useTheme} from '../../../theme/useTheme.hook';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {useTypography} from '../../../typography/useTypography.component';
 
 interface SliderIndicatorProps extends ViewProps {
+  disabled: boolean;
   sliding: SharedValue<number>;
   animValueProps: AnimatedProps<Pick<TextInputProps, 'value' | 'defaultValue'>>;
 
@@ -23,8 +25,10 @@ const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 const THUMB_VALUE_GAP = 4;
 
 export const SliderIndicator: React.FC<SliderIndicatorProps> = ({
-  animValueProps,
   sliding,
+  disabled,
+  animValueProps,
+
   thumbStyle,
   valueStyle,
   valueHeight = 44,
@@ -35,6 +39,8 @@ export const SliderIndicator: React.FC<SliderIndicatorProps> = ({
   const {labelLarge} = useTypography();
   const {surface, primary} = useTheme();
 
+  const disabledColor = useMemo(() => convertToRGBA(surface.text as string, 0.38), [surface.text]);
+
   const valueAnimatedStyle = useAnimatedStyle(() => {
     const topActive = -valueHeight - THUMB_VALUE_GAP;
 
@@ -66,7 +72,7 @@ export const SliderIndicator: React.FC<SliderIndicatorProps> = ({
           valueStyle,
         ]}
       />
-      <Animated.View style={[styles.thumb, {backgroundColor: primary.background}, thumbAnimatedStyle, thumbStyle]} />
+      <Animated.View style={[styles.thumb, {backgroundColor: disabled ? disabledColor : primary.background}, thumbAnimatedStyle, thumbStyle]} />
     </View>
   );
 };

src/sliders/ui/slider-track-point/SliderTrackPoint.component.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import Animated, {useAnimatedStyle, type SharedValue} from 'react-native-reanimated';
 import {Pressable, type PressableProps, type StyleProp, type ViewStyle} from 'react-native';
 
 import {styles} from './slider-track-point.styles';
 import {useTheme} from '../../../theme/useTheme.hook';
+import {convertToRGBA} from '../../../utils/convert-to-rgba';
 
 interface SliderTrackProps extends Omit<PressableProps, 'onPress'> {
   value: number;
+  disabled: boolean;
   selectedValue: SharedValue<number> | SharedValue<number[]>;
 
   style?: StyleProp<ViewStyle>;
@@ -17,21 +19,40 @@ interface SliderTrackProps extends Omit<PressableProps, 'onPress'> {
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
-export const SliderTrackPoint: React.FC<SliderTrackProps> = ({value, selectedValue, disableColorChange = false, onPress, style, ...props}) => {
-  const {secondaryContainer} = useTheme();
+export const SliderTrackPoint: React.FC<SliderTrackProps> = ({
+  value,
+  disabled,
+  selectedValue,
+  disableColorChange = false,
+  onPress,
+  style,
+  ...props
+}) => {
+  const {secondaryContainer, surface} = useTheme();
 
-  const handleTrackPointPress = () => onPress(value);
+  const [selectedTrackPointColor, unselectedTrackPointColor] = useMemo(
+    () =>
+      disabled
+        ? [convertToRGBA(surface.textInverse as string, 0.66), convertToRGBA(surface.text as string, 0.38)]
+        : [secondaryContainer.background, secondaryContainer.text],
+    [disabled, surface]
+  );
 
-  const trackPointAnimatedStyle = useAnimatedStyle(() => ({
-    backgroundColor:
-      !disableColorChange && isTrackPointSelected(value, selectedValue.value) ? secondaryContainer.background : secondaryContainer.text,
-  }));
+  const trackPointAnimatedColorStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: !disableColorChange && isTrackPointSelected(value, selectedValue.value) ? selectedTrackPointColor : unselectedTrackPointColor,
+    }),
+    [disableColorChange, value, selectedTrackPointColor, unselectedTrackPointColor]
+  );
+
+  const handleTrackPointPress = () => onPress(value);
 
   return (
     <AnimatedPressable
       hitSlop={16}
       onPress={handleTrackPointPress}
-      style={[styles.trackPoint, {backgroundColor: secondaryContainer.text}, trackPointAnimatedStyle, style]}
+      style={[styles.trackPoint, trackPointAnimatedColorStyle, style]}
+      disabled={disabled}
       {...props}
     />
   );

src/sliders/use-slider-colors.hook.ts

@@ -0,0 +1,21 @@
+import {useMemo} from 'react';
+import {useTheme} from '../theme/useTheme.hook';
+import {convertToRGBA} from '../utils/convert-to-rgba';
+
+export const useSliderColors = (disabled: boolean, centered: boolean) => {
+  const theme = useTheme();
+
+  const [filledTrackColor, remainingTrackColor] = useMemo(() => {
+    const disabledRemainingTrackColor = convertToRGBA(theme.surface.text as string, 0.12);
+    const [enabledFilledTrackColor, disabledFilledTrackColor] = centered
+      ? [theme.secondaryContainer.background, disabledRemainingTrackColor]
+      : [theme.primary.background, convertToRGBA(theme.surface.text as string, 0.38)];
+
+    return disabled ? [disabledFilledTrackColor, disabledRemainingTrackColor] : [enabledFilledTrackColor, theme.secondaryContainer.background];
+  }, [disabled, centered, theme]);
+
+  return {
+    filledTrackColor,
+    remainingTrackColor,
+  };
+};