react-native-varia 0.2.3 → 0.3.0

package/lib/components/Slider.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {type LayoutChangeEvent, View} from 'react-native'
+import {type LayoutChangeEvent, View, ViewStyle} from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
@@ -10,8 +10,29 @@ import {runOnJS} from 'react-native-worklets'
 import {SliderStyles, SliderDefaultVariants} from '../theme/Slider.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 
+function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit = 50,
+): (...args: Parameters<T>) => void {
+  let inThrottle = false
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      func(...(args as Parameters<T>))
+      inThrottle = true
+      setTimeout(() => {
+        inThrottle = false
+      }, limit)
+    }
+  }
+}
+
 type SliderVariants = UnistylesVariants<typeof SliderStyles>
 
+type ThumbStyleExtended = ReturnType<typeof SliderStyles.thumb> & {
+  width: number
+  height: number
+}
+
 type SliderProps = SliderVariants & {
   colorPalette?: PalettesWithNestedKeys
   thickness?: number
@@ -23,11 +44,12 @@ type SliderProps = SliderVariants & {
     height: number
   }
   thumbChildren?: React.ReactNode
-  axis: 'x' | 'y'
   steps?: number
   value?: number
   onValueChange?: (value: number) => void
   onSlidingComplete?: (value: number) => void
+  flex?: ViewStyle['flex']
+  alignSelf?: ViewStyle['alignSelf']
 }
 
 const Slider = ({
@@ -41,28 +63,27 @@ const Slider = ({
   steps,
   onValueChange,
   onSlidingComplete,
+  flex = 0,
+  alignSelf = 'auto',
 }: SliderProps) => {
-  let styles
-  if (axis === 'x') {
-    styles = stylesX
-  } else {
-    styles = stylesY
-  }
   SliderStyles.useVariants({
     size,
     variant,
+    axis,
   })
-  const thumbStyle = SliderStyles.thumb(colorPalette)
-  const maximumTrackStyle = SliderStyles.maximumTrack(colorPalette)
-  const minimumTrackStyle = SliderStyles.minimumTrack(colorPalette, false)
-
-  const halfSize = (thumbStyle.width ?? 0) / 2
-  const thumbSize = {
-    width: thumbStyle.width,
-    height: thumbStyle.height,
-  }
-  const maximumTrackWidth = maximumTrackStyle.height ?? 0
-  const minimumTrackWidth = minimumTrackStyle.height ?? 0
+  styles.useVariants({
+    axis,
+  })
+
+  const throttledOnValueChange = React.useMemo(() => {
+    if (!onValueChange) return undefined
+    return throttle(onValueChange, 50)
+  }, [onValueChange])
+
+  const thumbStyle = SliderStyles.thumb(colorPalette) as ThumbStyleExtended
+
+  const halfSize =
+    axis === 'x' ? (thumbStyle.width ?? 0) / 2 : (thumbStyle.height ?? 0) / 2
   const context = useSharedValue({x: 0})
   const translate = useSharedValue(value)
   const trackLength = useSharedValue(0)
@@ -97,10 +118,10 @@ const Slider = ({
 
       if (steps) {
         const stepIndex = Math.round(snappedValue / stepLength)
-        onValueChange && runOnJS(onValueChange)(stepIndex)
+        throttledOnValueChange && runOnJS(throttledOnValueChange)(stepIndex)
       } else {
-        onValueChange &&
-          runOnJS(onValueChange)(
+        throttledOnValueChange &&
+          runOnJS(throttledOnValueChange)(
             Math.round((snappedValue / trackLength.value) * 100) / 100,
           )
       }
@@ -117,6 +138,7 @@ const Slider = ({
     .onFinalize(() => {
       isInsideChild.value = false
     })
+
   const tapGesture = Gesture.Tap()
     .onBegin(e => {
       if (isInsideChild.value) {
@@ -152,57 +174,143 @@ const Slider = ({
     })
     .simultaneousWithExternalGesture(slideGesture)
 
+  const trackPan = Gesture.Pan()
+    .onBegin(e => {
+      if (trackLength.value <= 0) return
+
+      const tapPosition = axis === 'x' ? e.x : e.y
+      const stepLength = steps ? trackLength.value / steps : 1
+
+      const rawValue =
+        axis === 'y'
+          ? Math.max(
+              0,
+              Math.min(trackLength.value - tapPosition, trackLength.value),
+            )
+          : Math.max(0, Math.min(tapPosition, trackLength.value))
+
+      const snappedValue = steps
+        ? Math.round(rawValue / stepLength) * stepLength
+        : rawValue
+
+      context.value.x = snappedValue
+      translate.value = snappedValue
+
+      if (steps) {
+        const stepIndex = Math.round(snappedValue / stepLength)
+        onValueChange && runOnJS(onValueChange)(stepIndex)
+      } else {
+        const normalizedValue =
+          Math.round((snappedValue / trackLength.value) * 100) / 100
+        onValueChange && runOnJS(onValueChange)(normalizedValue)
+      }
+    })
+    .onUpdate(e => {
+      if (trackLength.value <= 0) return
+
+      const stepLength = steps ? trackLength.value / steps : 1
+      const delta = axis === 'y' ? -e.translationY : e.translationX
+
+      const rawValue = Math.max(
+        0,
+        Math.min(context.value.x + delta, trackLength.value),
+      )
+
+      if (steps) {
+        const snappedValue = Math.round(rawValue / stepLength) * stepLength
+        translate.value = snappedValue
+
+        const stepIndex = Math.round(snappedValue / stepLength)
+        throttledOnValueChange && runOnJS(throttledOnValueChange)(stepIndex)
+      } else {
+        translate.value = rawValue
+        throttledOnValueChange &&
+          runOnJS(throttledOnValueChange)(
+            Math.round((rawValue / trackLength.value) * 100) / 100,
+          )
+      }
+    })
+    .onEnd(() => {
+      const stepLength = steps ? trackLength.value / steps : 1
+
+      const snappedValue = steps
+        ? Math.round(translate.value / stepLength)
+        : translate.value / trackLength.value
+
+      onSlidingComplete && runOnJS(onSlidingComplete)(snappedValue)
+    })
+
   const animatedTrack = useAnimatedStyle(() => ({
     [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
   }))
 
+  const animatedThumb = useAnimatedStyle(() => {
+    if (axis === 'x') {
+      return {
+        transform: [{translateX: translate.value - halfSize}],
+      }
+    } else {
+      const translateY = trackLength.value - translate.value - halfSize
+      return {
+        transform: [{translateY}],
+      }
+    }
+  })
+
   const opacityTrack = steps !== undefined && displayStepsOnMinimumTrack
 
   return (
     <View
       style={[
-        styles.container(maximumTrackWidth, halfSize),
+        styles.container(halfSize, flex, alignSelf),
         SliderStyles.container(colorPalette),
       ]}>
       {axis === 'x' && <View style={{width: halfSize}} />}
-      <GestureDetector gesture={tapGesture}>
+      <GestureDetector gesture={Gesture.Simultaneous(trackPan, tapGesture)}>
         <View
           style={[
-            styles.maximumTrack(maximumTrackWidth),
+            styles.maximumTrack(),
             SliderStyles.maximumTrack(colorPalette),
           ]}
           onLayout={handleTrackLayout}>
-          {steps && (
-            <View style={styles.steps}>
-              {Array.from({length: steps + 1}, (_, index) => index).map(
-                (_, i) => (
-                  <View
-                    key={i}
-                    style={[
-                      styles.step(i, steps),
-                      SliderStyles.step(colorPalette),
-                    ]}
-                  />
-                ),
-              )}
-            </View>
-          )}
           <Animated.View
             style={[
-              styles.minimumTrack(halfSize, minimumTrackWidth),
+              styles.minimumTrack(halfSize),
               SliderStyles.minimumTrack(colorPalette, opacityTrack),
               animatedTrack,
-            ]}>
-            <GestureDetector gesture={slideGesture}>
-              <View
-                style={[
-                  SliderStyles.thumb(colorPalette),
-                  styles.thumb(halfSize, thumbSize),
-                ]}>
-                {ThumbChildren || null}
+            ]}
+          />
+
+          {steps && (
+            <View style={[styles.stepsOverlay]} pointerEvents="none">
+              <View style={styles.steps}>
+                {Array.from({length: steps + 1}, (_, index) => index).map(
+                  (_, i) => (
+                    <View
+                      key={i}
+                      style={[
+                        styles.step(i, steps),
+                        SliderStyles.step(colorPalette),
+                      ]}
+                    />
+                  ),
+                )}
               </View>
-            </GestureDetector>
-          </Animated.View>
+            </View>
+          )}
+          <GestureDetector gesture={slideGesture}>
+            <View style={styles.thumbContainerFull}>
+              <Animated.View style={[animatedThumb]}>
+                <View
+                  style={[
+                    SliderStyles.thumb(colorPalette),
+                    styles.thumb(halfSize),
+                  ]}>
+                  {ThumbChildren || null}
+                </View>
+              </Animated.View>
+            </View>
+          </GestureDetector>
         </View>
       </GestureDetector>
       {axis === 'y' && <View style={{height: halfSize}} />}
@@ -210,114 +318,141 @@ const Slider = ({
   )
 }
 
-const stylesX = StyleSheet.create(theme => ({
-  container: (thickness, halfSize) => ({
-    flex: thickness ? 1 : 1,
-    maxWidth: 'auto',
-    borderRadius: 22,
-    width: '100%',
-    height: '100%',
-    paddingTop: 0,
-    paddingRight: halfSize,
-    flexDirection: 'row',
+const styles = StyleSheet.create(theme => ({
+  container: (
+    halfSize: number,
+    flex: ViewStyle['flex'],
+    alignSelf: ViewStyle['alignSelf'],
+  ) => ({
+    flex,
+    alignSelf,
+    variants: {
+      axis: {
+        x: {
+          maxWidth: 'auto',
+          paddingTop: 0,
+          paddingRight: halfSize,
+          flexDirection: 'row',
+        },
+        y: {
+          maxHeight: 'auto',
+          height: '100%',
+          paddingTop: halfSize,
+          paddingRight: 0,
+          flexDirection: 'column',
+        },
+      },
+    },
   }),
-  maximumTrack: thickness => ({
-    flex: thickness ? 1 : 1,
-    justifyContent: 'center',
+  maximumTrack: () => ({
+    flex: 1,
     position: 'relative',
-    borderRadius: 22,
+    overflow: 'visible',
+    variants: {
+      axis: {
+        x: {
+          justifyContent: 'center',
+        },
+        y: {
+          justifyContent: 'flex-end',
+        },
+      },
+    },
   }),
-  minimumTrack: (halfSize, minimumTrackThickness) => ({
-    height: minimumTrackThickness,
-    width: '100%',
-    left: halfSize * -1,
-    bottom: 'auto',
-    paddingBottom: 0,
-    paddingLeft: halfSize,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 0,
-    borderTopLeftRadius: 20,
-    justifyContent: 'center',
+  minimumTrack: (halfSize: number) => ({
+    variants: {
+      axis: {
+        x: {
+          flex: 1,
+          marginLeft: halfSize * -1,
+          width: '100%',
+          bottom: 'auto',
+          paddingBottom: 0,
+          paddingLeft: halfSize,
+          borderBottomLeftRadius: 20,
+          borderBottomRightRadius: 0,
+          borderTopLeftRadius: 20,
+          justifyContent: 'center',
+          alignItems: 'flex-end',
+        },
+        y: {
+          height: '100%',
+          paddingBottom: halfSize,
+          marginBottom: halfSize * -1,
+          paddingLeft: 0,
+          borderBottomLeftRadius: 20,
+          borderBottomRightRadius: 20,
+          borderTopLeftRadius: 0,
+          alignItems: 'flex-start',
+        },
+      },
+    },
   }),
-  thumb: (halfSize, thumbSize) => ({
-    width: halfSize ? thumbSize.width : thumbSize.width,
-    height: thumbSize.height,
-    borderRadius: 25,
+  thumbContainerFull: {
     position: 'absolute',
+    left: 0,
     right: 0,
+    top: 0,
+    bottom: 0,
     zIndex: 2,
-    transform: [{translateX: '50%'}],
-  }),
-  steps: {
-    width: '100%',
-    height: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    zIndex: 0,
-    position: 'absolute',
   },
-  step: (index, length) => ({
-    width: 1,
-    height: '100%',
-    backgroundColor:
-      index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
-  }),
-}))
-const stylesY = StyleSheet.create(theme => ({
-  container: (maximumTrackWidth, halfSize) => ({
-    flex: 1,
-    maxWidth: maximumTrackWidth,
-    maxHeight: 'auto',
-    borderRadius: 22,
-    width: '100%',
-    height: '100%',
-    paddingTop: halfSize,
-    paddingRight: 0,
-    flexDirection: 'column',
-  }),
-  maximumTrack: maximumTrackWidth => ({
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    maxWidth: maximumTrackWidth,
-  }),
-  minimumTrack: (halfSize, minimumTrackWidth) => ({
-    position: 'absolute',
-    height: '100%',
-    width: minimumTrackWidth,
-    left: 'auto',
-    bottom: halfSize * -1,
-    paddingBottom: halfSize,
-    paddingLeft: 0,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 20,
-    borderTopLeftRadius: 0,
-    alignItems: 'center',
-  }),
-  thumb: (halfSize, thumbSize) => ({
+  thumb: halfSize => ({
     borderRadius: 25,
+    variants: {
+      axis: {
+        x: {
+          height: '100%',
+          justifyContent: 'center',
+        },
+        y: {
+          width: '100%',
+          alignItems: 'center',
+        },
+      },
+    },
+  }),
+
+  stepsOverlay: {
     position: 'absolute',
+    left: 0,
+    right: 0,
     top: 0,
-    zIndex: 2,
-    transform: [{translateY: halfSize * -1}],
-    width: thumbSize.height,
-    height: thumbSize.width,
-  }),
+    bottom: 0,
+    zIndex: 1,
+  },
   steps: {
     width: '100%',
     height: '100%',
-    flexDirection: 'column',
     justifyContent: 'space-between',
     alignItems: 'center',
     zIndex: 0,
+    position: 'absolute',
+    variants: {
+      axis: {
+        x: {
+          flexDirection: 'row',
+        },
+        y: {
+          flexDirection: 'column',
+        },
+      },
+    },
   },
   step: (index, length) => ({
-    width: '100%',
-    height: 1,
     backgroundColor:
       index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
+    variants: {
+      axis: {
+        x: {
+          width: 1,
+          height: '100%',
+        },
+        y: {
+          width: '100%',
+          height: 1,
+        },
+      },
+    },
   }),
 }))