react-native-varia 0.2.4 → 0.4.0

package/lib/components/Slider.tsx

@@ -1,18 +1,36 @@
 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, {
-  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'
+
+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>
 
+const AnimatedView = Animated.createAnimatedComponent(View)
+
 type ThumbStyleExtended = ReturnType<typeof SliderStyles.thumb> & {
   width: number
   height: number
@@ -23,7 +41,6 @@ type SliderProps = SliderVariants & {
   thickness?: number
   minimumTrackThickness?: number
   minimumTrackColor?: string
-  displayStepsOnMinimumTrack?: boolean
   thumbSize?: {
     width: number
     height: number
@@ -33,26 +50,23 @@ type SliderProps = SliderVariants & {
   value?: number
   onValueChange?: (value: number) => void
   onSlidingComplete?: (value: number) => void
+  flex?: ViewStyle['flex']
+  alignSelf?: ViewStyle['alignSelf']
 }
 
 const Slider = ({
   colorPalette = 'accent',
   variant = SliderDefaultVariants.variant,
   size = SliderDefaultVariants.size,
-  displayStepsOnMinimumTrack = false,
   thumbChildren: ThumbChildren,
   axis = 'x',
   value = 0,
   steps,
   onValueChange,
   onSlidingComplete,
+  flex = 0,
+  alignSelf = 'auto',
 }: SliderProps) => {
-  // let styles
-  // if (axis === 'x') {
-  //   styles = stylesX
-  // } else {
-  //   styles = stylesY
-  // }
   SliderStyles.useVariants({
     size,
     variant,
@@ -61,20 +75,36 @@ const Slider = ({
   styles.useVariants({
     axis,
   })
-  const thumbStyle = SliderStyles.thumb(colorPalette) as ThumbStyleExtended
 
-  const halfSize =
-    axis === 'x' ? (thumbStyle.width ?? 0) / 2 : (thumbStyle.height ?? 0) / 2
+  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},
+    'width',
+  )
+  const thumbHeight = getCompoundVariantValue(
+    SliderStyles.thumb(colorPalette),
+    {axis, size},
+    'height',
+  )
+  // const thumbHeight = getVariantValue(SliderStyles.thumb(colorPalette), 'size', size, 'height', true)
+
+  const halfSize = ((axis === 'x' ? thumbWidth : thumbHeight) ?? 0) / 2
   const context = useSharedValue({x: 0})
   const translate = useSharedValue(value)
   const trackLength = useSharedValue(0)
   const isInsideChild = useSharedValue(false)
 
-  // const handleTrackLayout = (event: LayoutChangeEvent) => {
-  //   const {width, height} = event.nativeEvent.layout
-  //   console.log('🚀 ~ handleTrackLayout ~ width:', width)
-  //   trackLength.value = axis === 'x' ? width : height
-  // }
+  const handleTrackLayout = (event: LayoutChangeEvent) => {
+    const {width, height} = event.nativeEvent.layout
+    trackLength.value = axis === 'x' ? width : height
+  }
 
   const slideGesture = Gesture.Pan()
     .onTouchesDown(() => {
@@ -84,7 +114,6 @@ const Slider = ({
       context.value.x = translate.value
     })
     .onUpdate(e => {
-      // console.log('e', e.translationX)
       const stepLength = steps ? trackLength.value / steps : 1
       const delta = axis === 'y' ? -e.translationY : e.translationX
 
@@ -101,10 +130,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,
           )
       }
@@ -121,6 +150,7 @@ const Slider = ({
     .onFinalize(() => {
       isInsideChild.value = false
     })
+
   const tapGesture = Gesture.Tap()
     .onBegin(e => {
       if (isInsideChild.value) {
@@ -156,58 +186,143 @@ const Slider = ({
     })
     .simultaneousWithExternalGesture(slideGesture)
 
-  const animatedTrack = useAnimatedStyle(() => ({
-    [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
-  }))
+  const trackPan = Gesture.Pan()
+    .onBegin(e => {
+      if (trackLength.value <= 0) return
 
-  const opacityTrack = steps !== undefined && displayStepsOnMinimumTrack
+      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(() => {
+    return {
+      [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}],
+      }
+    }
+  })
 
   return (
     <View
       style={[
-        styles.container(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(),
             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
+          onLayout={handleTrackLayout}>
+          <AnimatedView
             style={[
               styles.minimumTrack(halfSize),
-              SliderStyles.minimumTrack(colorPalette, opacityTrack),
+              SliderStyles.minimumTrack(colorPalette),
               animatedTrack,
-            ]}>
-            <GestureDetector gesture={slideGesture}>
-              <View
-                style={[
-                  SliderStyles.thumb(colorPalette),
-                  styles.thumb(halfSize),
-                ]}>
-                {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}>
+              <AnimatedView style={[animatedThumb, {flex: 1}]}>
+                <View
+                  style={[
+                    SliderStyles.thumb(colorPalette),
+                    styles.thumb(halfSize),
+                  ]}>
+                  {ThumbChildren || null}
+                </View>
+              </AnimatedView>
+            </View>
+          </GestureDetector>
         </View>
       </GestureDetector>
       {axis === 'y' && <View style={{height: halfSize}} />}
@@ -216,18 +331,25 @@ const Slider = ({
 }
 
 const styles = StyleSheet.create(theme => ({
-  container: (halfSize: number) => ({
+  container: (
+    halfSize: number,
+    flex: ViewStyle['flex'],
+    alignSelf: ViewStyle['alignSelf'],
+  ) => ({
+    flex,
+    alignSelf,
+    overflow: 'hidden',
+    // flexBasis: 'auto',
     variants: {
       axis: {
         x: {
-          maxWidth: 'auto',
-          width: '100%',
+          // maxWidth: 'auto',
           paddingTop: 0,
           paddingRight: halfSize,
           flexDirection: 'row',
         },
         y: {
-          maxHeight: 'auto',
+          // maxHeight: 'auto',
           height: '100%',
           paddingTop: halfSize,
           paddingRight: 0,
@@ -235,84 +357,119 @@ const styles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      _classNames: 'slider-container-base',
+      flex: flex === 0 ? undefined : flex,
+    },
   }),
   maximumTrack: () => ({
     flex: 1,
-    justifyContent: 'center',
     position: 'relative',
+    overflow: 'visible',
+    flexBasis: 'auto',
     variants: {
       axis: {
-        x: {},
+        x: {
+          justifyContent: 'center',
+        },
         y: {
-          alignItems: 'center',
+          justifyContent: 'flex-end',
         },
       },
     },
+    _web: {
+      _classNames: 'slider-maximun-track-base',
+    },
   }),
   minimumTrack: (halfSize: number) => ({
+    flexBasis: 'auto',
     variants: {
       axis: {
         x: {
+          flex: 1,
+          marginLeft: halfSize * -1,
           width: '100%',
-          left: halfSize * -1,
           bottom: 'auto',
           paddingBottom: 0,
           paddingLeft: halfSize,
-          borderBottomLeftRadius: 20,
-          borderBottomRightRadius: 0,
-          borderTopLeftRadius: 20,
           justifyContent: 'center',
+          alignItems: 'flex-end',
         },
         y: {
-          position: 'absolute',
           height: '100%',
-          left: 'auto',
-          bottom: halfSize * -1,
           paddingBottom: halfSize,
+          marginBottom: halfSize * -1,
           paddingLeft: 0,
-          borderBottomLeftRadius: 20,
-          borderBottomRightRadius: 20,
-          borderTopLeftRadius: 0,
-          alignItems: 'center',
+          alignItems: 'flex-start',
         },
       },
     },
+    _web: {
+      _classNames: 'slider-minimum-track-base',
+    },
   }),
-  thumb: halfSize => ({
-    borderRadius: 25,
+  thumbContainerFull: {
     position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 2,
+    _web: {
+      _classNames: 'thumb-container-full-base',
+    },
+  },
+  thumb: halfSize => ({
     variants: {
       axis: {
         x: {
-          right: 0,
-          zIndex: 2,
-          transform: [{translateX: '50%'}],
+          height: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
         },
         y: {
-          top: 0,
-          zIndex: 2,
-          transform: [{translateY: halfSize * -1}],
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
         },
       },
     },
+    _web: {
+      _classNames: 'slider-thumb-base',
+    },
   }),
+
+  stepsOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 1,
+    _web: {
+      _classNames: 'slider-steps-overlay-base',
+    },
+  },
   steps: {
     width: '100%',
     height: '100%',
     justifyContent: 'space-between',
     alignItems: 'center',
     zIndex: 0,
+    position: 'absolute',
     variants: {
       axis: {
         x: {
           flexDirection: 'row',
-          position: 'absolute',
         },
         y: {
           flexDirection: 'column',
         },
       },
     },
+    _web: {
+      _classNames: 'slider-steps-base',
+    },
   },
   step: (index, length) => ({
     backgroundColor:
@@ -329,57 +486,10 @@ const styles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      _classNames: 'slider-step-base',
+    },
   }),
 }))
-// const stylesY = StyleSheet.create(theme => ({
-//   container: halfSize => ({
-//     maxHeight: 'auto',
-//     height: '100%',
-//     paddingTop: halfSize,
-//     paddingRight: 0,
-//     flexDirection: 'column',
-//   }),
-//   maximumTrack: () => ({
-//     flex: 1,
-//     justifyContent: 'center',
-//     alignItems: 'center',
-//     position: 'relative',
-//     // borderWidth: 1,
-//     // borderColor: 'yellow',
-//   }),
-//   minimumTrack: halfSize => ({
-//     position: 'absolute',
-//     height: '100%',
-//     left: 'auto',
-//     bottom: halfSize * -1,
-//     paddingBottom: halfSize,
-//     paddingLeft: 0,
-//     borderBottomLeftRadius: 20,
-//     borderBottomRightRadius: 20,
-//     borderTopLeftRadius: 0,
-//     alignItems: 'center',
-//   }),
-//   thumb: halfSize => ({
-//     borderRadius: 25,
-//     position: 'absolute',
-//     top: 0,
-//     zIndex: 2,
-//     transform: [{translateY: halfSize * -1}],
-//   }),
-//   steps: {
-//     width: '100%',
-//     height: '100%',
-//     justifyContent: 'space-between',
-//     alignItems: 'center',
-//     zIndex: 0,
-//     flexDirection: 'column',
-//   },
-//   step: (index, length) => ({
-//     width: '100%',
-//     height: 1,
-//     backgroundColor:
-//       index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
-//   }),
-// }))
 
 export default Slider

package/lib/components/Slideshow.tsx

@@ -18,6 +18,7 @@ export type SlideshowRef = {
   handlePrev: () => void | null
 }
 
+const AnimatedView = Animated.createAnimatedComponent(View)
 type SlideshowVariants = UnistylesVariants<typeof SlideshowStyles>
 
 type Axis = 'x' | 'y'
@@ -174,7 +175,7 @@ const Slideshow = ({
             setContainerWidth(e.nativeEvent.layout.width)
             setContainerHeight(e.nativeEvent.layout.height)
           }}>
-          <Animated.View
+          <AnimatedView
             style={[
               styles.slidesContainer(`${NUM_PAGES * 100}%`, isHorizontal),
               animatedStyle,
@@ -189,7 +190,7 @@ const Slideshow = ({
                 {Slide}
               </View>
             ))}
-          </Animated.View>
+          </AnimatedView>
         </View>
       </GestureDetector>
     </View>
@@ -201,15 +202,24 @@ export default Slideshow
 const styles = StyleSheet.create({
   flex: flex => ({
     flex,
+    flexBasis: 'auto',
     flexDirection: 'row',
+    alignSelf: 'stretch',
+    _web: {
+      _classNames: 'slideshow-container-flex-base',
+    },
   }),
 
   container: () => ({
+    flexBasis: 'auto',
     width: '100%',
-    height: '100%',
+    maxHeight: '100%',
     overflow: 'hidden',
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
+    _web: {
+      _classNames: 'slideshow-container-base',
+    },
   }),
 
   slidesContainer: (size, isHorizontal) => ({
@@ -217,6 +227,9 @@ const styles = StyleSheet.create({
     width: isHorizontal ? size : '100%',
     minHeight: isHorizontal ? '100%' : size,
     flex: 1,
+    _web: {
+      _classNames: 'slideshow-container-slides-container-base',
+    },
   }),
 
   slide: (size, isHorizontal) => ({
@@ -225,5 +238,8 @@ const styles = StyleSheet.create({
     height: isHorizontal ? '100%' : size,
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'slideshow-container-slide-base',
+    },
   }),
 })

package/lib/components/Spinner.tsx

@@ -11,7 +11,7 @@ import {
   ThemeColors,
 } from '../style/varia/types'
 import {SpinnerTokens} from '../theme/Spinner.recipe'
-import {resolveColor} from '../style/varia/utils'
+import {getVariantValue, resolveColor} from '../style/varia/utils'
 import {SpinnerStyles} from '../theme/Spinner.recipe'
 
 type SpinnerVariants = UnistylesVariants<typeof SpinnerStyles>
@@ -39,10 +39,20 @@ const BaseSpinner = ({
     size,
   })
 
+  // console.log('color', color)
+
+  const resolvedSize = getVariantValue(
+    SpinnerStyles.base,
+    'size',
+    size,
+    'width',
+  )
+
   return (
     <ActivityIndicator
+      testID="spinner"
       color={resolvedColor}
-      size={SpinnerStyles.base.width}
+      size={resolvedSize}
       {...props}
       style={[style && style, mixins && mixins]}
     />