feat: implemented continuous and discrete sliders

Author: computools-anastasiia-nahaiska

src/index.tsx

@@ -6,8 +6,11 @@ export {Divider, type DividerProps} from './divider/Divider.component';
 
 export {InputChip, type InputChipProps} from './chips/input-chip/InputChip.component';
 export {FilterChip, type FilterChipProps} from './chips/filter-chip/FilterChip.component';
-export {SuggestionChip, type SuggestionChipProps} from './chips/suggestion-chip/SuggestionChip.component';
 export {AssistChip, type AssistChipProps, IconType} from './chips/assist-chip/AssistChip.component';
+export {SuggestionChip, type SuggestionChipProps} from './chips/suggestion-chip/SuggestionChip.component';
+
+export {DiscreteSlider, type DiscreteSliderProps} from './sliders/discrete-slider/DiscreteSlider.component';
+export {ContinuousSlider, type ContinuousSliderProps} from './sliders/continuous-slider/ContinuousSlider.component';
 
 export {
   CenterAlignedTopAppBar,

src/sliders/base-slider/BaseSlider.component.tsx

@@ -0,0 +1,155 @@
+import {View} from 'react-native';
+import React, {useState} from 'react';
+import {Gesture, GestureDetector} from 'react-native-gesture-handler';
+import {type LayoutChangeEvent, type ViewProps, type StyleProp, type ViewStyle, type TextStyle} from 'react-native';
+import {interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring, withTiming} from 'react-native-reanimated';
+
+import {styles} from './base-slider.styles';
+import {useTheme} from '../../theme/useTheme.hook';
+import {SliderTrack} from './slider-track/SliderTrack.component';
+import {SliderIndicator} from './slider-indicator/SliderIndicator.component';
+import {SliderTrackPoint} from './slider-track-point/SliderTrackPoint.component';
+
+export interface BaseSliderProps extends ViewProps {
+  min: number;
+  max: number;
+
+  value?: number;
+  trackPoints: number[];
+
+  thumbStyle?: StyleProp<ViewStyle>;
+  valueStyle?: StyleProp<TextStyle>;
+  indicatorStyle?: StyleProp<ViewStyle>;
+  trackPointStyle?: StyleProp<ViewStyle>;
+  trackPointsStyle?: StyleProp<ViewStyle>;
+  filledTrackStyle?: StyleProp<ViewStyle>;
+  remainingTrackStyle?: StyleProp<ViewStyle>;
+  valueContainerStyle?: StyleProp<ViewStyle>;
+
+  onChangeValue?: (value: number) => void;
+}
+
+export const BaseSlider: React.FC<BaseSliderProps> = ({
+  min,
+  max,
+
+  value = 0,
+  trackPoints = [],
+
+  thumbStyle,
+  valueStyle,
+  indicatorStyle,
+  trackPointStyle,
+  trackPointsStyle,
+  filledTrackStyle,
+  valueContainerStyle,
+  remainingTrackStyle,
+
+  onChangeValue,
+  onLayout,
+  style,
+  ...props
+}) => {
+  const [sliderWidth, setSliderWith] = useState(0);
+  const [selectedValue, setSelectedValue] = useState(value);
+
+  const {primary, secondaryContainer} = useTheme();
+
+  const sliding = useSharedValue(0);
+  const thumbTranslationX = useSharedValue(0);
+  const thumbTranslationXContext = useSharedValue(0);
+
+  const filledTrackAnimatedStyle = useAnimatedStyle(() => ({flex: interpolate(thumbTranslationX.value, [0, sliderWidth], [0, 1])}), [sliderWidth]);
+  const remainingTrackAnimatedStyle = useAnimatedStyle(() => ({flex: interpolate(thumbTranslationX.value, [0, sliderWidth], [1, 0])}), [sliderWidth]);
+
+  const calcAndUpdateValueBasedOnThumbTranslationX = (translationX: number, onChange: (value: number) => void) => {
+    const currrentValue = Math.round(interpolate(translationX, [0, sliderWidth], [min, max]));
+
+    onChange(currrentValue);
+  };
+
+  useAnimatedReaction(
+    () => thumbTranslationX.value,
+    (currentThumbValue) => {
+      runOnJS(calcAndUpdateValueBasedOnThumbTranslationX)(currentThumbValue, setSelectedValue);
+    }
+  );
+
+  const gesture = Gesture.Pan()
+    .onStart(() => {
+      sliding.value = withTiming(1);
+    })
+    .onUpdate((e) => {
+      thumbTranslationX.value = Math.max(0, Math.min(Math.round(thumbTranslationXContext.value + e.translationX), sliderWidth));
+
+      runOnJS(calcAndUpdateValueBasedOnThumbTranslationX)(thumbTranslationX.value, setSelectedValue);
+    })
+    .onEnd(() => {
+      thumbTranslationXContext.value = thumbTranslationX.value;
+      sliding.value = withTiming(0);
+
+      if (onChangeValue) {
+        runOnJS(calcAndUpdateValueBasedOnThumbTranslationX)(thumbTranslationX.value, onChangeValue);
+      }
+    });
+
+  const handleLayoutChange = (e: LayoutChangeEvent) => {
+    const width = e.nativeEvent.layout.width;
+
+    initializeThumbPosition(width);
+    setSliderWith(width);
+
+    if (onLayout) {
+      onLayout(e);
+    }
+  };
+
+  const initializeThumbPosition = (width: number) => {
+    const initialTthumbTranslationX = (value * width) / max;
+    thumbTranslationX.value = initialTthumbTranslationX;
+    thumbTranslationXContext.value = initialTthumbTranslationX;
+  };
+
+  const slideToTrackPoint = (pointValue: number) => {
+    const thumbPointValueTranslationX = ((pointValue - min) / (max - min)) * sliderWidth;
+
+    sliding.value = withTiming(1);
+    thumbTranslationX.value = withSpring(thumbPointValueTranslationX, {damping: 20}, () => {
+      sliding.value = withTiming(0);
+      thumbTranslationXContext.value = thumbPointValueTranslationX;
+
+      if (onChangeValue) {
+        runOnJS(onChangeValue)(pointValue);
+      }
+    });
+  };
+
+  const renderTrackPoint = (pointValue: number) => (
+    <SliderTrackPoint
+      key={pointValue}
+      value={pointValue}
+      onPress={slideToTrackPoint}
+      style={[{backgroundColor: selectedValue > pointValue ? secondaryContainer.background : secondaryContainer.text}, trackPointStyle]}
+    />
+  );
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <View style={[styles.container, style]} onLayout={handleLayoutChange} {...props}>
+        <SliderTrack style={[{backgroundColor: primary.background}, styles.filledTrack, filledTrackAnimatedStyle, filledTrackStyle]} />
+        <SliderIndicator
+          value={selectedValue}
+          sliding={sliding}
+          style={[styles.thumb, indicatorStyle]}
+          thumbStyle={thumbStyle}
+          valueStyle={valueStyle}
+          valueContainerStyle={valueContainerStyle}
+        />
+        <SliderTrack
+          style={[{backgroundColor: secondaryContainer.background}, styles.remainingTrack, remainingTrackAnimatedStyle, remainingTrackStyle]}
+        />
+        <View style={[styles.trackPoints, trackPointsStyle]}>{trackPoints.map(renderTrackPoint)}</View>
+      </View>
+    </GestureDetector>
+  );
+};

src/sliders/base-slider/base-slider.styles.ts

@@ -0,0 +1,34 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  thumb: {
+    zIndex: 1,
+  },
+  trackPoints: {
+    position: 'absolute',
+
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+
+    width: '100%',
+    paddingHorizontal: 4,
+  },
+  filledTrack: {
+    borderTopEndRadius: 2,
+    borderBottomEndRadius: 2,
+    borderTopStartRadius: 16,
+    borderBottomStartRadius: 16,
+  },
+  remainingTrack: {
+    justifyContent: 'center',
+
+    borderTopEndRadius: 16,
+    borderBottomEndRadius: 16,
+    borderTopStartRadius: 2,
+    borderBottomStartRadius: 2,
+  },
+});

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import {View, Text, type ViewProps, type StyleProp, type ViewStyle, type TextStyle} from 'react-native';
+import Animated, {interpolate, useAnimatedStyle, type SharedValue} from 'react-native-reanimated';
+
+import {styles} from './slider-indicator.styles';
+import {useTheme} from '../../../theme/useTheme.hook';
+import {useTypography} from '../../../typography/useTypography.component';
+
+interface SliderIndicatorProps extends ViewProps {
+  value: number;
+  sliding: SharedValue<number>;
+
+  thumbStyle?: StyleProp<ViewStyle>;
+  valueStyle?: StyleProp<TextStyle>;
+  valueContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export const SliderIndicator: React.FC<SliderIndicatorProps> = ({value, sliding, thumbStyle, valueStyle, valueContainerStyle, ...props}) => {
+  const {labelLarge} = useTypography();
+  const {surface, primary} = useTheme();
+
+  const valueAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: sliding.value,
+      transform: [{scale: sliding.value}],
+      top: interpolate(sliding.value, [0, 1], [-24, -48]),
+    }),
+    []
+  );
+
+  const thumbAnimatedStyle = useAnimatedStyle(
+    () => ({
+      width: interpolate(sliding.value, [0, 1], [4, 2]),
+    }),
+    []
+  );
+
+  return (
+    <View {...props}>
+      <Animated.View style={[styles.valueContainer, {backgroundColor: surface.backgroundInverse}, valueAnimatedStyle, valueContainerStyle]}>
+        <Text style={[labelLarge, {color: surface.textInverse}, valueStyle]}>{value}</Text>
+      </Animated.View>
+      <Animated.View style={[styles.thumb, {backgroundColor: primary.background}, thumbAnimatedStyle, thumbStyle]} />
+    </View>
+  );
+};

src/sliders/base-slider/slider-indicator/slider-indicator.styles.ts

@@ -0,0 +1,22 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  thumb: {
+    width: 4,
+    height: 44,
+    marginHorizontal: 4,
+    borderRadius: 2,
+  },
+  valueContainer: {
+    position: 'absolute',
+    top: -48,
+
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+
+    width: 48,
+    height: 44,
+    borderRadius: 100,
+  },
+});

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Pressable, type PressableProps, type StyleProp, type ViewStyle} from 'react-native';
+
+import {styles} from './slider-track-point.styles';
+import {useTheme} from '../../../theme/useTheme.hook';
+
+interface SliderTrackProps extends Omit<PressableProps, 'onPress'> {
+  value: number;
+
+  style?: StyleProp<ViewStyle>;
+
+  onPress: (value: number) => void;
+}
+
+export const SliderTrackPoint: React.FC<SliderTrackProps> = ({value, onPress, style, ...props}) => {
+  const {secondaryContainer} = useTheme();
+
+  const handleTrackPointPress = () => onPress(value);
+
+  return (
+    <Pressable
+      hitSlop={16}
+      onPress={handleTrackPointPress}
+      style={[styles.trackPoint, {backgroundColor: secondaryContainer.text}, style]}
+      {...props}
+    />
+  );
+};

src/sliders/base-slider/slider-track-point/slider-track-point.styles.ts

@@ -0,0 +1,9 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  trackPoint: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+  },
+});

src/sliders/base-slider/slider-track/SliderTrack.component.tsx

@@ -0,0 +1,11 @@
+import {type ViewProps} from 'react-native';
+import React, {type PropsWithChildren} from 'react';
+
+import {styles} from './slider-track.styles';
+import Animated, {type AnimatedProps} from 'react-native-reanimated';
+
+export const SliderTrack: React.FC<PropsWithChildren<AnimatedProps<ViewProps>>> = ({children, style, ...props}) => (
+  <Animated.View style={[styles.track, style]} {...props}>
+    {children}
+  </Animated.View>
+);

src/sliders/base-slider/slider-track/slider-track.styles.ts

@@ -0,0 +1,7 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  track: {
+    height: 16,
+  },
+});

src/sliders/continuous-slider/ContinuousSlider.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {styles} from './continuous-slider.styles';
+import {BaseSlider, type BaseSliderProps} from '../base-slider/BaseSlider.component';
+
+export type ContinuousSliderProps = Omit<BaseSliderProps, 'trackPoints'>;
+
+export const ContinuousSlider: React.FC<ContinuousSliderProps> = ({max, trackPointsStyle, ...props}) => {
+  const trackPoints = [max];
+
+  return <BaseSlider trackPoints={trackPoints} max={max} trackPointsStyle={[styles.trackPoints, trackPointsStyle]} {...props} />;
+};