react-native-varia 0.2.2 → 0.2.4

package/lib/components/Slider.tsx

@@ -3,6 +3,7 @@ import {type LayoutChangeEvent, View} 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'
@@ -12,6 +13,11 @@ import {PalettesWithNestedKeys} from '../style/varia/types'
 
 type SliderVariants = UnistylesVariants<typeof SliderStyles>
 
+type ThumbStyleExtended = ReturnType<typeof SliderStyles.thumb> & {
+  width: number
+  height: number
+}
+
 type SliderProps = SliderVariants & {
   colorPalette?: PalettesWithNestedKeys
   thickness?: number
@@ -23,7 +29,6 @@ type SliderProps = SliderVariants & {
     height: number
   }
   thumbChildren?: React.ReactNode
-  axis: 'x' | 'y'
   steps?: number
   value?: number
   onValueChange?: (value: number) => void
@@ -42,36 +47,34 @@ const Slider = ({
   onValueChange,
   onSlidingComplete,
 }: SliderProps) => {
-  let styles
-  if (axis === 'x') {
-    styles = stylesX
-  } else {
-    styles = stylesY
-  }
+  // 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)
+  styles.useVariants({
+    axis,
+  })
+  const thumbStyle = SliderStyles.thumb(colorPalette) as ThumbStyleExtended
 
-  const halfSize = (thumbStyle.width ?? 0) / 2
-  const thumbSize = {
-    width: thumbStyle.width,
-    height: thumbStyle.height,
-  }
-  const maximumTrackWidth = maximumTrackStyle.height ?? 0
-  const minimumTrackWidth = minimumTrackStyle.height ?? 0
+  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)
   const isInsideChild = useSharedValue(false)
 
-  const handleTrackLayout = (event: LayoutChangeEvent) => {
-    const {width, height} = event.nativeEvent.layout
-    trackLength.value = axis === 'x' ? width : height
-  }
+  // const handleTrackLayout = (event: LayoutChangeEvent) => {
+  //   const {width, height} = event.nativeEvent.layout
+  //   console.log('🚀 ~ handleTrackLayout ~ width:', width)
+  //   trackLength.value = axis === 'x' ? width : height
+  // }
 
   const slideGesture = Gesture.Pan()
     .onTouchesDown(() => {
@@ -81,6 +84,7 @@ 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
 
@@ -161,17 +165,18 @@ const Slider = ({
   return (
     <View
       style={[
-        styles.container(maximumTrackWidth, halfSize),
+        styles.container(halfSize),
         SliderStyles.container(colorPalette),
       ]}>
       {axis === 'x' && <View style={{width: halfSize}} />}
       <GestureDetector gesture={tapGesture}>
         <View
           style={[
-            styles.maximumTrack(maximumTrackWidth),
+            styles.maximumTrack(),
             SliderStyles.maximumTrack(colorPalette),
           ]}
-          onLayout={handleTrackLayout}>
+          // onLayout={handleTrackLayout}
+        >
           {steps && (
             <View style={styles.steps}>
               {Array.from({length: steps + 1}, (_, index) => index).map(
@@ -189,7 +194,7 @@ const Slider = ({
           )}
           <Animated.View
             style={[
-              styles.minimumTrack(halfSize, minimumTrackWidth),
+              styles.minimumTrack(halfSize),
               SliderStyles.minimumTrack(colorPalette, opacityTrack),
               animatedTrack,
             ]}>
@@ -197,7 +202,7 @@ const Slider = ({
               <View
                 style={[
                   SliderStyles.thumb(colorPalette),
-                  styles.thumb(halfSize, thumbSize),
+                  styles.thumb(halfSize),
                 ]}>
                 {ThumbChildren || null}
               </View>
@@ -210,115 +215,171 @@ 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',
-  }),
-  maximumTrack: thickness => ({
-    flex: thickness ? 1 : 1,
-    justifyContent: 'center',
-    position: 'relative',
-    borderRadius: 22,
-  }),
-  minimumTrack: (halfSize, minimumTrackThickness) => ({
-    height: minimumTrackThickness,
-    width: '100%',
-    left: halfSize * -1,
-    bottom: 'auto',
-    paddingBottom: 0,
-    paddingLeft: halfSize,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 0,
-    borderTopLeftRadius: 20,
-    justifyContent: 'center',
-  }),
-  thumb: (halfSize, thumbSize) => ({
-    width: halfSize ? thumbSize.width : thumbSize.width,
-    height: thumbSize.height,
-    borderRadius: 25,
-    position: 'absolute',
-    right: 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 styles = StyleSheet.create(theme => ({
+  container: (halfSize: number) => ({
+    variants: {
+      axis: {
+        x: {
+          maxWidth: 'auto',
+          width: '100%',
+          paddingTop: 0,
+          paddingRight: halfSize,
+          flexDirection: 'row',
+        },
+        y: {
+          maxHeight: 'auto',
+          height: '100%',
+          paddingTop: halfSize,
+          paddingRight: 0,
+          flexDirection: 'column',
+        },
+      },
+    },
   }),
-}))
-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 => ({
+  maximumTrack: () => ({
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
     position: 'relative',
-    maxWidth: maximumTrackWidth,
+    variants: {
+      axis: {
+        x: {},
+        y: {
+          alignItems: 'center',
+        },
+      },
+    },
   }),
-  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',
+  minimumTrack: (halfSize: number) => ({
+    variants: {
+      axis: {
+        x: {
+          width: '100%',
+          left: halfSize * -1,
+          bottom: 'auto',
+          paddingBottom: 0,
+          paddingLeft: halfSize,
+          borderBottomLeftRadius: 20,
+          borderBottomRightRadius: 0,
+          borderTopLeftRadius: 20,
+          justifyContent: 'center',
+        },
+        y: {
+          position: 'absolute',
+          height: '100%',
+          left: 'auto',
+          bottom: halfSize * -1,
+          paddingBottom: halfSize,
+          paddingLeft: 0,
+          borderBottomLeftRadius: 20,
+          borderBottomRightRadius: 20,
+          borderTopLeftRadius: 0,
+          alignItems: 'center',
+        },
+      },
+    },
   }),
-  thumb: (halfSize, thumbSize) => ({
+  thumb: halfSize => ({
     borderRadius: 25,
     position: 'absolute',
-    top: 0,
-    zIndex: 2,
-    transform: [{translateY: halfSize * -1}],
-    width: thumbSize.height,
-    height: thumbSize.width,
+    variants: {
+      axis: {
+        x: {
+          right: 0,
+          zIndex: 2,
+          transform: [{translateX: '50%'}],
+        },
+        y: {
+          top: 0,
+          zIndex: 2,
+          transform: [{translateY: halfSize * -1}],
+        },
+      },
+    },
   }),
   steps: {
     width: '100%',
     height: '100%',
-    flexDirection: 'column',
     justifyContent: 'space-between',
     alignItems: 'center',
     zIndex: 0,
+    variants: {
+      axis: {
+        x: {
+          flexDirection: 'row',
+          position: 'absolute',
+        },
+        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,
+        },
+      },
+    },
   }),
 }))
+// 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

@@ -7,7 +7,7 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated'
-import {runOnJS} from 'react-native-worklets'
+import {scheduleOnRN} from 'react-native-worklets'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import {SlideshowStyles, SlideshowTokens} from '../theme/Slideshow.recipe'
@@ -20,30 +20,21 @@ export type SlideshowRef = {
 
 type SlideshowVariants = UnistylesVariants<typeof SlideshowStyles>
 
+type Axis = 'x' | 'y'
+
 type SlideshowProps = SlideshowVariants & {
+  axis?: Axis
   animation?: keyof typeof SlideshowTokens.variants.animation
   colorPalette?: PalettesWithNestedKeys
   allowGestures?: boolean
   flex?: number
   onSlideChange?: (index: number) => void
-  slideContainerType?: any
   children: ReactNode
-  ref?: React.RefObject<SlideshowRef>
+  ref?: React.RefObject<SlideshowRef | null>
 }
 
-/**
- * Flex Wrapper
- * @param colorScheme ? string: color scheme
- * @param animation ? string: animation props
- * @param allowGestures ? boolean: allow gestures
- * @param flex ? number: flex value
- * @param onSlideChange ? function: callback function
- * @param slideContainerType ? color scheme
- * @param children ? react children
- * @param ref ? react ref
- * @returns Slideshow react component
- */
 const Slideshow = ({
+  axis = 'x',
   colorPalette = 'accent',
   variant = 'solid',
   allowGestures = true,
@@ -53,6 +44,8 @@ const Slideshow = ({
   children,
   ref,
 }: SlideshowProps) => {
+  const isHorizontal = axis === 'x'
+
   const slides = Children.toArray(children)
   const NUM_PAGES = slides.length
   const scalingFactor = 1 / NUM_PAGES
@@ -62,17 +55,17 @@ const Slideshow = ({
   })
 
   const [containerWidth, setContainerWidth] = useState(0)
+  const [containerHeight, setContainerHeight] = useState(0)
+
+  const dimension = isHorizontal ? containerWidth : containerHeight
+  const slideSize = 100 / NUM_PAGES
 
-  const slideWidth = 100 / NUM_PAGES
-  const translateX = useSharedValue(0)
+  const translate = useSharedValue(0)
   const currentSlide = useSharedValue(0)
 
   type AnimationType = 'withSpring' | 'withTiming'
+  const animations = {withSpring, withTiming}
 
-  const animations = {
-    withSpring,
-    withTiming,
-  }
   const animationVariant =
     SlideshowTokens.variants?.animation && animation
       ? SlideshowTokens.variants.animation[animation]
@@ -88,18 +81,14 @@ const Slideshow = ({
   const animateSlide = (destination: number) => {
     'worklet'
 
-    if (
-      animationVariant &&
-      animationVariant.type &&
-      animations[animationVariant.type]
-    ) {
-      translateX.value = animations[animationVariant.type](
+    if (animationVariant.type && animations[animationVariant.type]) {
+      translate.value = animations[animationVariant.type](
         destination,
         animationVariant.props,
       )
 
       if (onSlideChange) {
-        runOnJS(onSlideChange)((destination / 100) * NUM_PAGES * -1)
+        scheduleOnRN(onSlideChange, (destination / 100) * NUM_PAGES * -1)
       }
     }
   }
@@ -107,68 +96,73 @@ const Slideshow = ({
   useAnimatedReaction(
     () => currentSlide.value,
     () => {
-      animateSlide(-currentSlide.value * slideWidth)
+      animateSlide(-currentSlide.value * slideSize)
     },
   )
 
-  const handlePrev = () => {
+  const nextSlide = () => {
     'worklet'
-    if (currentSlide.value > 0) {
-      currentSlide.value -= 1
-    }
+    if (currentSlide.value > 0) currentSlide.value -= 1
   }
-  const handleNext = () => {
+
+  const prevSlide = () => {
     'worklet'
-    if (currentSlide.value < NUM_PAGES - 1) {
-      currentSlide.value += 1
-    }
+    if (currentSlide.value < NUM_PAGES - 1) currentSlide.value += 1
   }
 
-  const context = useSharedValue({x: 0, snapPoint: 0})
+  const context = useSharedValue({x: 0})
   const velocityThreshold = 500
 
   const slideGesture = Gesture.Pan()
     .enabled(allowGestures)
     .onBegin(() => {
-      context.value.x = translateX.value
+      context.value.x = translate.value
     })
     .onUpdate(e => {
-      const pixelToPercentage =
-        (e.translationX / containerWidth) * 100 * scalingFactor
-      translateX.value = context.value.x + pixelToPercentage
+      const translation = isHorizontal ? e.translationX : e.translationY
+
+      const pixelToPercentage = (translation / dimension) * 100 * scalingFactor
+
+      translate.value = context.value.x + pixelToPercentage
     })
-    .onEnd(({velocityX, translationX}) => {
-      const pixelToPercentage =
-        (translationX / containerWidth) * 100 * scalingFactor
-      const slideWidthPercentage = 100 / NUM_PAGES
+    .onEnd(({velocityX, velocityY, translationX, translationY}) => {
+      const translation = isHorizontal ? translationX : translationY
+      const velocity = isHorizontal ? velocityX : velocityY
+
+      const pixelToPercentage = (translation / dimension) * 100 * scalingFactor
 
+      const slideWidthPercentage = 100 / NUM_PAGES
       const currentIndex = Math.round(-context.value.x / slideWidthPercentage)
 
       let targetIndex
-      if (Math.abs(velocityX) > velocityThreshold) {
-        targetIndex = velocityX > 0 ? currentIndex - 1 : currentIndex + 1
+      if (Math.abs(velocity) > velocityThreshold) {
+        targetIndex = velocity > 0 ? currentIndex - 1 : currentIndex + 1
       } else {
-        const crossedThreshold =
-          Math.abs(pixelToPercentage) > slideWidthPercentage / 2
+        const crossed = Math.abs(pixelToPercentage) > slideWidthPercentage / 2
+
         targetIndex =
-          crossedThreshold && pixelToPercentage < 0
+          crossed && pixelToPercentage < 0
             ? currentIndex + 1
-            : crossedThreshold
+            : crossed
             ? currentIndex - 1
             : currentIndex
       }
+
       targetIndex = Math.max(0, Math.min(NUM_PAGES - 1, targetIndex))
+
       animateSlide(-targetIndex * slideWidthPercentage)
       currentSlide.value = targetIndex
     })
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{translateX: `${translateX.value}%`}],
-  }))
+  const animatedStyle = useAnimatedStyle(() =>
+    isHorizontal
+      ? {transform: [{translateX: `${translate.value}%`}]}
+      : {transform: [{translateY: `${translate.value}%`}]},
+  )
 
   useImperativeHandle(ref, () => ({
-    handlePrev,
-    handleNext,
+    handlePrev: nextSlide,
+    handleNext: prevSlide,
   }))
 
   return (
@@ -176,17 +170,20 @@ const Slideshow = ({
       <GestureDetector gesture={slideGesture}>
         <View
           style={[styles.container(), SlideshowStyles.container(colorPalette)]}
-          onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}>
+          onLayout={e => {
+            setContainerWidth(e.nativeEvent.layout.width)
+            setContainerHeight(e.nativeEvent.layout.height)
+          }}>
           <Animated.View
             style={[
-              styles.slidesContainer(`${NUM_PAGES * 100}%`),
+              styles.slidesContainer(`${NUM_PAGES * 100}%`, isHorizontal),
               animatedStyle,
             ]}>
             {slides.map((Slide, index) => (
               <View
                 key={index}
                 style={[
-                  styles.slide(`${slideWidth}%`),
+                  styles.slide(`${slideSize}%`, isHorizontal),
                   SlideshowStyles.slideContainer(colorPalette),
                 ]}>
                 {Slide}
@@ -206,24 +203,26 @@ const styles = StyleSheet.create({
     flex,
     flexDirection: 'row',
   }),
+
   container: () => ({
-    zIndex: 1,
     width: '100%',
     height: '100%',
     overflow: 'hidden',
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
-    backgroundColor: 'white',
-    borderRadius: 16,
   }),
-  slidesContainer: width => ({
-    flexDirection: 'row',
-    width,
+
+  slidesContainer: (size, isHorizontal) => ({
+    flexDirection: isHorizontal ? 'row' : 'column',
+    width: isHorizontal ? size : '100%',
+    minHeight: isHorizontal ? '100%' : size,
     flex: 1,
   }),
-  slide: width => ({
-    width,
-    flex: 1,
+
+  slide: (size, isHorizontal) => ({
+    overflow: 'hidden',
+    width: isHorizontal ? size : '100%',
+    height: isHorizontal ? '100%' : size,
     justifyContent: 'center',
     alignItems: 'center',
   }),