react-native-varia 0.5.2 → 0.6.0

package/lib/components/Slider.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
-import {type LayoutChangeEvent, View, ViewStyle} from 'react-native'
+import {type LayoutChangeEvent, StyleProp, View, ViewStyle} from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
+  useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated'
 import {runOnJS} from 'react-native-worklets'
 import {SliderStyles, SliderDefaultVariants} from '../../theme/Slider.recipe'
 import {PalettesWithNestedKeys} from '../../style/varia/types'
-import {getCompoundVariantValue} from '../../style/varia/utils'
+import {getCompoundVariantValue, getVariantValue} from '../../style/varia/utils'
 
 function throttle<T extends (...args: any[]) => any>(
   func: T,
@@ -31,11 +32,6 @@ type SliderVariants = UnistylesVariants<typeof SliderStyles>
 
 const AnimatedView = Animated.createAnimatedComponent(View)
 
-type ThumbStyleExtended = ReturnType<typeof SliderStyles.thumb> & {
-  width: number
-  height: number
-}
-
 type SliderProps = SliderVariants & {
   colorPalette?: PalettesWithNestedKeys
   thickness?: number
@@ -48,10 +44,17 @@ type SliderProps = SliderVariants & {
   thumbChildren?: React.ReactNode
   steps?: number
   value?: number
+  onSlidingStart?: (value: number) => void
   onValueChange?: (value: number) => void
   onSlidingComplete?: (value: number) => void
   flex?: ViewStyle['flex']
   alignSelf?: ViewStyle['alignSelf']
+  allowGestures?: boolean
+  mode?: 'normal' | 'wrap'
+  containerStyles?: StyleProp<ViewStyle>
+  maximumTrackStyles?: StyleProp<ViewStyle>
+  minimumTrackStyles?: StyleProp<ViewStyle>
+  thumbStyles?: StyleProp<ViewStyle>
 }
 
 const Slider = ({
@@ -62,10 +65,17 @@ const Slider = ({
   axis = 'x',
   value = 0,
   steps,
+  onSlidingStart,
   onValueChange,
   onSlidingComplete,
   flex = 0,
   alignSelf = 'auto',
+  allowGestures = true,
+  mode = 'normal',
+  containerStyles,
+  maximumTrackStyles,
+  minimumTrackStyles,
+  thumbStyles,
 }: SliderProps) => {
   SliderStyles.useVariants({
     size,
@@ -76,13 +86,13 @@ const Slider = ({
     axis,
   })
 
+  const normalizedValue = useSharedValue(0)
+
   const throttledOnValueChange = React.useMemo(() => {
     if (!onValueChange) return undefined
     return throttle(onValueChange, 50)
   }, [onValueChange])
 
-  // const thumbStyle = SliderStyles.thumb(colorPalette) as ThumbStyleExtended
-  // const thumbWidth = getVariantValue(SliderStyles.thumb(colorPalette), 'size', size, 'width', true)
   const thumbWidth = getCompoundVariantValue(
     SliderStyles.thumb(colorPalette),
     {axis, size},
@@ -93,11 +103,24 @@ const Slider = ({
     {axis, size},
     'height',
   )
-  // const thumbHeight = getVariantValue(SliderStyles.thumb(colorPalette), 'size', size, 'height', true)
+
+  const maximumTrackColor =
+    getVariantValue(
+      SliderStyles.maximumTrack(colorPalette),
+      'variant',
+      variant,
+      'backgroundColor',
+    ) || 'transparent'
+
+  console.log(SliderStyles.maximumTrack(colorPalette))
 
   const halfSize = ((axis === 'x' ? thumbWidth : thumbHeight) ?? 0) / 2
+
   const context = useSharedValue({x: 0})
-  const translate = useSharedValue(value)
+
+  // ❗️CAMBIO 1: translate SIEMPRE en píxeles
+  const translate = useSharedValue(0)
+
   const trackLength = useSharedValue(0)
   const isInsideChild = useSharedValue(false)
 
@@ -106,229 +129,179 @@ const Slider = ({
     trackLength.value = axis === 'x' ? width : height
   }
 
-  const slideGesture = Gesture.Pan()
-    .onTouchesDown(() => {
-      isInsideChild.value = true
-    })
-    .onBegin(() => {
-      context.value.x = translate.value
-    })
-    .onUpdate(e => {
-      const stepLength = steps ? trackLength.value / steps : 1
-      const delta = axis === 'y' ? -e.translationY : e.translationX
+  // ❗️CAMBIO 2: sincronizar value → translate cuando hay layout
+  React.useEffect(() => {
+    if (trackLength.value <= 0) return
+
+    if (steps) {
+      const stepLength = trackLength.value / steps
+      translate.value = value * stepLength
+    } else {
+      translate.value = value * trackLength.value
+    }
+  }, [value, steps])
 
-      const rawValue = Math.max(
-        0,
-        Math.min(context.value.x + delta, trackLength.value),
-      )
-
-      const snappedValue = steps
-        ? Math.round(rawValue / stepLength) * stepLength
-        : rawValue
-
-      translate.value = snappedValue
-
-      if (steps) {
-        const stepIndex = Math.round(snappedValue / stepLength)
-        throttledOnValueChange && runOnJS(throttledOnValueChange)(stepIndex)
-      } else {
-        throttledOnValueChange &&
-          runOnJS(throttledOnValueChange)(
-            Math.round((snappedValue / trackLength.value) * 100) / 100,
-          )
+  useAnimatedReaction(
+    () => normalizedValue.value,
+    (value, prev) => {
+      if (value === prev) return
+
+      if (onValueChange) {
+        runOnJS(onValueChange)(steps ? value : Math.round(value * 100) / 100)
       }
-    })
-    .onEnd(() => {
-      const stepLength = steps ? trackLength.value / steps : 1
+    },
+    [steps],
+  )
 
-      const snappedValue = steps
-        ? Math.round(translate.value / stepLength)
-        : translate.value / trackLength.value
+  const isInteracting = useSharedValue(false)
 
-      onSlidingComplete && runOnJS(onSlidingComplete)(snappedValue)
-    })
-    .onFinalize(() => {
-      isInsideChild.value = false
-    })
+  const computeSnappedValue = (position: number) => {
+    'worklet'
+    const clamped = Math.max(0, Math.min(position, trackLength.value))
+    if (!steps) return clamped
 
-  const tapGesture = Gesture.Tap()
-    .onBegin(e => {
-      if (isInsideChild.value) {
-        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
-
-      translate.value = snappedValue
-
-      if (steps) {
-        const stepIndex = Math.round(snappedValue / stepLength)
-        onValueChange && runOnJS(onValueChange)(stepIndex)
-        onSlidingComplete && runOnJS(onSlidingComplete)(stepIndex)
-      } else {
-        const normalizedValue =
-          Math.round((snappedValue / trackLength.value) * 100) / 100
-        onValueChange && runOnJS(onValueChange)(normalizedValue)
-        onSlidingComplete && runOnJS(onSlidingComplete)(normalizedValue)
-      }
-    })
-    .simultaneousWithExternalGesture(slideGesture)
+    const stepLength = trackLength.value / steps
+    return Math.round(clamped / stepLength) * stepLength
+  }
+
+  const toNormalizedValue = (px: number) => {
+    'worklet'
+    return steps
+      ? Math.round(px / (trackLength.value / steps))
+      : px / trackLength.value
+  }
+
+  const beginInteraction = (value: number) => {
+    'worklet'
+    if (isInteracting.value) return
+    isInteracting.value = true
+    onSlidingStart && runOnJS(onSlidingStart)(value)
+  }
+
+  const updateInteraction = (value: number) => {
+    'worklet'
+    onValueChange && runOnJS(onValueChange)(value)
+  }
+
+  const endInteraction = (value: number) => {
+    'worklet'
+    if (!isInteracting.value) return
+    isInteracting.value = false
+    onSlidingComplete && runOnJS(onSlidingComplete)(value)
+  }
+
+  const panGesture = Gesture.Pan()
+    .enabled(allowGestures)
+    .minDistance(0)
 
-  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)
-      }
+      const pos = axis === 'y' ? trackLength.value - e.y : e.x
+      const snapped = computeSnappedValue(pos)
+
+      context.value.x = snapped
+      translate.value = snapped
+
+      beginInteraction(toNormalizedValue(snapped))
+      updateInteraction(toNormalizedValue(snapped))
     })
-    .onUpdate(e => {
-      if (trackLength.value <= 0) return
 
-      const stepLength = steps ? trackLength.value / steps : 1
+    .onUpdate(e => {
       const delta = axis === 'y' ? -e.translationY : e.translationX
+      const snapped = computeSnappedValue(context.value.x + delta)
 
-      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,
-          )
-      }
+      translate.value = snapped
+      updateInteraction(toNormalizedValue(snapped))
     })
-    .onEnd(() => {
-      const stepLength = steps ? trackLength.value / steps : 1
 
-      const snappedValue = steps
-        ? Math.round(translate.value / stepLength)
-        : translate.value / trackLength.value
+    .onEnd(() => {
+      endInteraction(toNormalizedValue(translate.value))
+    })
 
-      onSlidingComplete && runOnJS(onSlidingComplete)(snappedValue)
+    .onFinalize(() => {
+      // 🔒 garantiza cleanup incluso en cancelaciones
+      endInteraction(toNormalizedValue(translate.value))
     })
 
-  const animatedTrack = useAnimatedStyle(() => {
-    return {
-      [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
-    }
-  })
+  const animatedTrack = useAnimatedStyle(() => ({
+    [axis === 'y' ? 'height' : 'width']:
+      translate.value + (mode === 'wrap' ? halfSize : 0),
+  }))
 
   const animatedThumb = useAnimatedStyle(() => {
     if (axis === 'x') {
-      return {
-        transform: [{translateX: translate.value - halfSize}],
-      }
-    } else {
-      const translateY = trackLength.value - translate.value - halfSize
-      return {
-        transform: [{translateY}],
-      }
+      return {transform: [{translateX: translate.value - halfSize}]}
+    }
+    return {
+      transform: [{translateY: trackLength.value - translate.value - halfSize}],
     }
   })
 
+  console.log('maximum color', maximumTrackColor)
+
   return (
     <View
       testID="varia-slider-container"
       style={[
-        styles.container(halfSize, flex, alignSelf),
         SliderStyles.container(colorPalette),
+        containerStyles,
+        styles.container(
+          halfSize,
+          flex,
+          alignSelf,
+          mode === 'wrap' ? maximumTrackColor : 'transparent',
+        ),
       ]}>
-      {axis === 'x' && <View style={{width: halfSize}} />}
-      <GestureDetector gesture={Gesture.Simultaneous(trackPan, tapGesture)}>
+      <GestureDetector gesture={panGesture}>
         <View
           testID="varia-slider-maximun-track"
           style={[
-            styles.maximumTrack(),
+            styles.maximumTrack(mode),
+            maximumTrackStyles,
             SliderStyles.maximumTrack(colorPalette),
           ]}
           onLayout={handleTrackLayout}>
           <AnimatedView
             testID="varia-slider-minimum-track"
             style={[
-              styles.minimumTrack(halfSize),
               SliderStyles.minimumTrack(colorPalette),
+              minimumTrackStyles,
+              styles.minimumTrack(halfSize, mode),
               animatedTrack,
             ]}
           />
 
           {steps && (
-            <View style={[styles.stepsOverlay]} pointerEvents="none">
-              <View style={styles.steps} testID="varia-slider-steps">
-                {Array.from({length: steps + 1}, (_, index) => index).map(
-                  (_, i) => (
-                    <View
-                      key={i}
-                      style={[
-                        styles.step(i, steps),
-                        SliderStyles.step(colorPalette),
-                      ]}
-                    />
-                  ),
-                )}
+            <View style={styles.stepsOverlay} pointerEvents="none">
+              <View style={styles.steps}>
+                {Array.from({length: steps + 1}, (_, i) => (
+                  <View
+                    key={i}
+                    style={[
+                      styles.step(i, steps),
+                      SliderStyles.step(colorPalette),
+                    ]}
+                  />
+                ))}
               </View>
             </View>
           )}
-          <GestureDetector gesture={slideGesture}>
-            <View style={styles.thumbContainerFull} testID="varia-slider-tumb">
-              <AnimatedView style={[animatedThumb, {flex: 1}]}>
-                <View
-                  style={[
-                    SliderStyles.thumb(colorPalette),
-                    styles.thumb(halfSize),
-                  ]}>
-                  {ThumbChildren || null}
-                </View>
-              </AnimatedView>
-            </View>
-          </GestureDetector>
+
+          <View style={styles.thumbContainerFull}>
+            <AnimatedView style={[animatedThumb, styles.thumbContainer]}>
+              <View
+                style={[
+                  SliderStyles.thumb(colorPalette),
+                  thumbStyles,
+                  styles.thumb(halfSize),
+                ]}>
+                {ThumbChildren || null}
+              </View>
+            </AnimatedView>
+          </View>
+          {/* <GestureDetector gesture={slideGesture}>
+          </GestureDetector> */}
         </View>
       </GestureDetector>
-      {axis === 'y' && <View style={{height: halfSize}} />}
     </View>
   )
 }
@@ -338,23 +311,28 @@ const styles = StyleSheet.create(theme => ({
     halfSize: number,
     flex: ViewStyle['flex'],
     alignSelf: ViewStyle['alignSelf'],
+    backgroundColor: ViewStyle['backgroundColor'],
   ) => ({
     flex,
     alignSelf,
     overflow: 'hidden',
+    backgroundColor,
+    alignItems: 'center',
     // flexBasis: 'auto',
     variants: {
       axis: {
         x: {
           // maxWidth: 'auto',
           paddingTop: 0,
-          paddingRight: halfSize,
+          // paddingRight: halfSize,
+          paddingHorizontal: halfSize,
           flexDirection: 'row',
         },
         y: {
           // maxHeight: 'auto',
           // height: '100%',
-          paddingTop: halfSize,
+          // paddingTop: halfSize,
+          paddingVertical: halfSize,
           paddingRight: 0,
           flexDirection: 'column',
         },
@@ -365,7 +343,7 @@ const styles = StyleSheet.create(theme => ({
       flex: flex === 0 ? undefined : flex,
     },
   }),
-  maximumTrack: () => ({
+  maximumTrack: (mode: 'normal' | 'wrap') => ({
     flex: 1,
     position: 'relative',
     overflow: 'visible',
@@ -373,10 +351,14 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       axis: {
         x: {
+          ...(mode === 'wrap' ? {height: '100%'} : {}),
           justifyContent: 'center',
         },
         y: {
-          justifyContent: 'flex-end',
+          ...(mode === 'wrap' ? {width: '100%'} : {}),
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'flex-end',
         },
       },
     },
@@ -384,26 +366,31 @@ const styles = StyleSheet.create(theme => ({
       _classNames: 'slider-maximun-track-base',
     },
   }),
-  minimumTrack: (halfSize: number) => ({
+  minimumTrack: (halfSize: number, mode) => ({
     flexBasis: 'auto',
     variants: {
       axis: {
         x: {
-          flex: 1,
-          marginLeft: halfSize * -1,
+          // flex: 1,
+          // marginLeft: halfSize * -1,
           width: '100%',
           bottom: 'auto',
           paddingBottom: 0,
-          paddingLeft: halfSize,
+          // paddingLeft: halfSize,
           justifyContent: 'center',
           alignItems: 'flex-end',
+          ...(mode === 'wrap'
+            ? {transform: [{translateX: halfSize * -1}]}
+            : {}),
         },
         y: {
+          // flex: 1,
           height: '100%',
-          paddingBottom: halfSize,
-          marginBottom: halfSize * -1,
+          // paddingBottom: halfSize,
+          // marginBottom: halfSize * -1,
           paddingLeft: 0,
           alignItems: 'flex-start',
+          ...(mode === 'wrap' ? {transform: [{translateY: halfSize}]} : {}),
         },
       },
     },
@@ -412,6 +399,7 @@ const styles = StyleSheet.create(theme => ({
     },
   }),
   thumbContainerFull: {
+    // overflow: 'hidden',
     position: 'absolute',
     left: 0,
     right: 0,
@@ -422,18 +410,33 @@ const styles = StyleSheet.create(theme => ({
       _classNames: 'thumb-container-full-base',
     },
   },
-  thumb: halfSize => ({
+  thumbContainer: {
+    flex: 1,
     variants: {
       axis: {
         x: {
-          height: '100%',
           justifyContent: 'center',
+        },
+        y: {
           alignItems: 'center',
         },
+      },
+    },
+  },
+  thumb: (halfSize: number) => ({
+    variants: {
+      axis: {
+        x: {
+          // height: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          // transform: [{translateX: halfSize * -1}],
+        },
         y: {
-          width: '100%',
+          // width: '100%',
           justifyContent: 'center',
           alignItems: 'center',
+          // transform: [{translateY: halfSize * -1}],
         },
       },
     },
@@ -494,5 +497,4 @@ const styles = StyleSheet.create(theme => ({
     },
   }),
 }))
-
 export default Slider

package/lib/components/Slideshow.tsx

@@ -1,5 +1,5 @@
 import {Children, type ReactNode, useImperativeHandle, useState} from 'react'
-import {View} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import Animated, {
   useAnimatedReaction,
   useAnimatedStyle,
@@ -32,6 +32,8 @@ type SlideshowProps = SlideshowVariants & {
   onSlideChange?: (index: number) => void
   children: ReactNode
   ref?: React.RefObject<SlideshowRef | null>
+  containerStyles?: StyleProp<ViewStyle>
+  slideContainerStyles?: StyleProp<ViewStyle>
 }
 
 const Slideshow = ({
@@ -44,6 +46,8 @@ const Slideshow = ({
   animation = SlideshowTokens.defaultProps.animation,
   children,
   ref,
+  containerStyles,
+  slideContainerStyles,
 }: SlideshowProps) => {
   const isHorizontal = axis === 'x'
 
@@ -171,7 +175,11 @@ const Slideshow = ({
       <GestureDetector gesture={slideGesture}>
         <View
           testID="varia-slideshow"
-          style={[styles.container(), SlideshowStyles.container(colorPalette)]}
+          style={[
+            SlideshowStyles.container(colorPalette),
+            containerStyles,
+            styles.container(),
+          ]}
           onLayout={e => {
             setContainerWidth(e.nativeEvent.layout.width)
             setContainerHeight(e.nativeEvent.layout.height)
@@ -186,8 +194,9 @@ const Slideshow = ({
                 testID={`varia-slides-slide-${index}`}
                 key={index}
                 style={[
-                  styles.slide(`${slideSize}%`, isHorizontal),
                   SlideshowStyles.slideContainer(colorPalette),
+                  slideContainerStyles,
+                  styles.slide(`${slideSize}%`, isHorizontal),
                 ]}>
                 {Slide}
               </View>