react-native-varia 0.2.4 → 0.3.0

package/lib/components/Slider.tsx

@@ -1,9 +1,8 @@
 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'
@@ -11,6 +10,22 @@ 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> & {
@@ -33,6 +48,8 @@ type SliderProps = SliderVariants & {
   value?: number
   onValueChange?: (value: number) => void
   onSlidingComplete?: (value: number) => void
+  flex?: ViewStyle['flex']
+  alignSelf?: ViewStyle['alignSelf']
 }
 
 const Slider = ({
@@ -46,13 +63,9 @@ const Slider = ({
   steps,
   onValueChange,
   onSlidingComplete,
+  flex = 0,
+  alignSelf = 'auto',
 }: SliderProps) => {
-  // let styles
-  // if (axis === 'x') {
-  //   styles = stylesX
-  // } else {
-  //   styles = stylesY
-  // }
   SliderStyles.useVariants({
     size,
     variant,
@@ -61,6 +74,12 @@ const Slider = ({
   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 =
@@ -70,11 +89,10 @@ const Slider = ({
   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 +102,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 +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,
           )
       }
@@ -121,6 +138,7 @@ const Slider = ({
     .onFinalize(() => {
       isInsideChild.value = false
     })
+
   const tapGesture = Gesture.Tap()
     .onBegin(e => {
       if (isInsideChild.value) {
@@ -156,58 +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(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>
-          )}
+          onLayout={handleTrackLayout}>
           <Animated.View
             style={[
               styles.minimumTrack(halfSize),
               SliderStyles.minimumTrack(colorPalette, opacityTrack),
               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}>
+              <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}} />}
@@ -216,12 +319,17 @@ const Slider = ({
 }
 
 const styles = StyleSheet.create(theme => ({
-  container: (halfSize: number) => ({
+  container: (
+    halfSize: number,
+    flex: ViewStyle['flex'],
+    alignSelf: ViewStyle['alignSelf'],
+  ) => ({
+    flex,
+    alignSelf,
     variants: {
       axis: {
         x: {
           maxWidth: 'auto',
-          width: '100%',
           paddingTop: 0,
           paddingRight: halfSize,
           flexDirection: 'row',
@@ -238,13 +346,15 @@ const styles = StyleSheet.create(theme => ({
   }),
   maximumTrack: () => ({
     flex: 1,
-    justifyContent: 'center',
     position: 'relative',
+    overflow: 'visible',
     variants: {
       axis: {
-        x: {},
+        x: {
+          justifyContent: 'center',
+        },
         y: {
-          alignItems: 'center',
+          justifyContent: 'flex-end',
         },
       },
     },
@@ -253,8 +363,9 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       axis: {
         x: {
+          flex: 1,
+          marginLeft: halfSize * -1,
           width: '100%',
-          left: halfSize * -1,
           bottom: 'auto',
           paddingBottom: 0,
           paddingLeft: halfSize,
@@ -262,51 +373,64 @@ const styles = StyleSheet.create(theme => ({
           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',
         },
       },
     },
   }),
+  thumbContainerFull: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 2,
+  },
   thumb: halfSize => ({
     borderRadius: 25,
-    position: 'absolute',
     variants: {
       axis: {
         x: {
-          right: 0,
-          zIndex: 2,
-          transform: [{translateX: '50%'}],
+          height: '100%',
+          justifyContent: 'center',
         },
         y: {
-          top: 0,
-          zIndex: 2,
-          transform: [{translateY: halfSize * -1}],
+          width: '100%',
+          alignItems: 'center',
         },
       },
     },
   }),
+
+  stepsOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 1,
+  },
   steps: {
     width: '100%',
     height: '100%',
     justifyContent: 'space-between',
     alignItems: 'center',
     zIndex: 0,
+    position: 'absolute',
     variants: {
       axis: {
         x: {
           flexDirection: 'row',
-          position: 'absolute',
         },
         y: {
           flexDirection: 'column',
@@ -331,55 +455,5 @@ const styles = StyleSheet.create(theme => ({
     },
   }),
 }))
-// 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/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>
@@ -34,15 +34,19 @@ const BaseSpinner = ({
   ...props
 }: SpinnerProps) => {
   const resolvedColor = resolveColor(color, colors, colorPalette)
-
+  
   SpinnerStyles.useVariants({
     size,
   })
 
+  // console.log('color', color)
+
+  const resolvedSize = getVariantValue(SpinnerStyles.base, 'size', size, 'width')
+  
   return (
     <ActivityIndicator
       color={resolvedColor}
-      size={SpinnerStyles.base.width}
+      size={resolvedSize}
       {...props}
       style={[style && style, mixins && mixins]}
     />

package/lib/patterns/index.tsx

@@ -49,6 +49,7 @@ export type HstackProps = {
   hCenter?: boolean
   flex?: number
   gap?: number
+  stretch?: boolean
 } & ViewProps
 
 const HStack: React.FC<HstackProps> = ({
@@ -59,11 +60,15 @@ const HStack: React.FC<HstackProps> = ({
   hCenter,
   flex = 0,
   gap = 0,
+  stretch,
   ...props
 }) => {
   return (
     <View
-      style={[styles.hStack(center, vCenter, hCenter, gap, flex), style]}
+      style={[
+        styles.hStack(center, vCenter, hCenter, gap, flex, stretch),
+        style,
+      ]}
       {...props}>
       {children}
     </View>
@@ -77,11 +82,15 @@ const VStack: React.FC<HstackProps> = ({
   hCenter,
   flex = 0,
   gap = 0,
+  stretch,
   ...props
 }) => {
   return (
     <View
-      style={[styles.vStack(center, vCenter, hCenter, gap, flex), style]}
+      style={[
+        styles.vStack(center, vCenter, hCenter, gap, flex, stretch),
+        style,
+      ]}
       {...props}>
       {children}
     </View>
@@ -118,19 +127,21 @@ export const FlexSpacer = () => {
   )
 }
 const styles = StyleSheet.create(() => ({
-  hStack: (center, vCenter, hCenter, gap, flex) => ({
+  hStack: (center, vCenter, hCenter, gap, flex, stretch) => ({
     flex,
     gap,
     flexDirection: 'row',
     alignItems: center ? 'center' : vCenter ? 'center' : 'stretch',
     justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
+    ...(stretch ? {alignSelf: 'stretch'} : {}),
   }),
-  vStack: (center, vCenter, hCenter, gap, flex) => ({
+  vStack: (center, vCenter, hCenter, gap, flex, stretch) => ({
     flex,
     gap,
     flexDirection: 'column',
-    alignItems: center ? 'center' : vCenter ? 'center' : 'flex-start',
+    alignItems: center ? 'center' : vCenter ? 'center' : 'stretch',
     justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
+    ...(stretch ? {alignSelf: 'stretch'} : {}),
   }),
 }))