react-native-varia 0.2.3 → 0.2.4

package/lib/components/NumberInput.tsx

@@ -1,18 +1,25 @@
-import React, {createContext, useContext, useState} from 'react'
-import {View, TextInput, Pressable} from 'react-native'
+import React, {createContext, useContext, useMemo, useState} from 'react'
+import {View, TextInput, Pressable, StyleProp, ViewStyle} from 'react-native'
 import {UnistylesVariants, StyleSheet} from 'react-native-unistyles'
 import {
   NumberInputStyles,
   NumberInputDefaultVariants,
 } from '../theme/NumberInput.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  AlignSelf,
+  PalettesWithNestedKeys,
+  StackDirection,
+} from '../style/varia/types'
 import Plus from '../icons/Plus'
 import Minus from '../icons/Minus'
+import {computeFlexSync} from '../style/varia/utils'
 
 type NumberInputVariants = UnistylesVariants<typeof NumberInputStyles>
 
 type PublicInputProps = Omit<NumberInputVariants, 'variant' | 'size'> & {
   placeholder?: string
+  flex?: number
+  style?: StyleProp<ViewStyle>
 }
 
 interface IconProps {
@@ -36,6 +43,9 @@ type SimpleNumberInputProps = NumberInputVariants & {
   flex?: number
   min?: number
   max?: number
+  alignSelf?: AlignSelf
+  style?: StyleProp<ViewStyle>
+  direction?: 'row' | 'column'
 }
 
 export const SimpleNumberInputContext = createContext<{
@@ -48,12 +58,16 @@ export const SimpleNumberInputContext = createContext<{
   distribution?: NumberInputVariants['distribution']
   min?: number
   max?: number
+  flex?: number
+  alignSelf?: AlignSelf
+  direction?: StackDirection
 }>({
   value: 0,
   setValue: () => {},
   onBlur: undefined,
   min: undefined,
   max: undefined,
+  flex: 0,
 })
 
 function useSimpleNumberInputContext() {
@@ -75,9 +89,12 @@ const NumberInput = {
     variant = NumberInputDefaultVariants.variant,
     size = NumberInputDefaultVariants.size,
     children,
-    flex = 1,
+    flex = 0,
     min,
     max,
+    alignSelf = 'auto',
+    direction = 'column',
+    style,
   }: React.PropsWithChildren<SimpleNumberInputProps>) => {
     NumberInputStyles.useVariants({variant, size, distribution})
     const [internalValue, setInternalValue] = useState<number>(defaultValue)
@@ -103,11 +120,15 @@ const NumberInput = {
           variant,
           size,
           distribution,
+          flex,
+          alignSelf,
+          direction,
         }}>
         <View
           style={[
-            simpleNumberInputstyles.rootContainer(flex),
+            simpleNumberInputstyles.rootContainer(flex, alignSelf),
             NumberInputStyles.container(colorPalette),
+            style || {},
           ]}>
           {children}
         </View>
@@ -126,7 +147,26 @@ const NumberInput = {
       distribution,
       min,
       max,
+      style,
+      flex,
+      alignSelf,
+      direction,
     } = {...useSimpleNumberInputContext(), ...props}
+    const resolvedDirection =
+      direction === 'row'
+        ? distribution === 'horizontal'
+          ? 'row'
+          : 'column'
+        : 'row'
+
+    const {flex: childFlex} = useMemo(() => {
+      return computeFlexSync(
+        flex as number,
+        alignSelf,
+        resolvedDirection as StackDirection,
+      )
+    }, [flex, alignSelf, direction])
+
     const handleChangeText = (text: string) => {
       const numeric = text.replace(/[^0-9]/g, '')
       let num = numeric === '' ? 0 : parseInt(numeric, 10)
@@ -138,8 +178,9 @@ const NumberInput = {
     return (
       <TextInput
         style={[
-          simpleNumberInputstyles.input,
+          simpleNumberInputstyles.input(childFlex as number),
           NumberInputStyles.input(colorPalette),
+          style || {},
         ]}
         keyboardType="numeric"
         value={value.toString()}
@@ -236,14 +277,16 @@ const DecreaseTriggerIcon = ({color}: {color?: string}) => {
 export default NumberInput
 
 const simpleNumberInputstyles = StyleSheet.create({
-  rootContainer: (flex: number) => ({
+  rootContainer: (flex: number, alignSelf?: AlignSelf) => ({
     flexDirection: 'row',
-    flexGrow: flex,
-    alignSelf: 'flex-start',
+    flex,
+    alignSelf,
+    alignItems: 'stretch',
   }),
-  input: {
+  input: (flex: number) => ({
     paddingVertical: 0,
-  },
+    flex,
+  }),
   button: {
     justifyContent: 'center',
     alignItems: 'center',

package/lib/components/OldSlider.tsx

@@ -0,0 +1,327 @@
+import React from 'react'
+import {type LayoutChangeEvent, View} from 'react-native'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated'
+import {runOnJS} from 'react-native-worklets'
+import {SliderStyles, SliderDefaultVariants} from '../theme/OldSlider.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+type SliderVariants = UnistylesVariants<typeof SliderStyles>
+
+type SliderProps = SliderVariants & {
+  colorPalette?: PalettesWithNestedKeys
+  thickness?: number
+  minimumTrackThickness?: number
+  minimumTrackColor?: string
+  displayStepsOnMinimumTrack?: boolean
+  thumbSize?: {
+    width: number
+    height: number
+  }
+  thumbChildren?: React.ReactNode
+  axis: 'x' | 'y'
+  steps?: number
+  value?: number
+  onValueChange?: (value: number) => void
+  onSlidingComplete?: (value: number) => void
+}
+
+const OldSlider = ({
+  colorPalette = 'accent',
+  variant = SliderDefaultVariants.variant,
+  size = SliderDefaultVariants.size,
+  displayStepsOnMinimumTrack = false,
+  thumbChildren: ThumbChildren,
+  axis = 'x',
+  value = 0,
+  steps,
+  onValueChange,
+  onSlidingComplete,
+}: SliderProps) => {
+  let styles
+  if (axis === 'x') {
+    styles = stylesX
+  } else {
+    styles = stylesY
+  }
+  SliderStyles.useVariants({
+    size,
+    variant,
+  })
+  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 ?? 30
+  const minimumTrackWidth = minimumTrackStyle.height ?? 30
+  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 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
+
+      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)
+        onValueChange && runOnJS(onValueChange)(stepIndex)
+      } else {
+        onValueChange &&
+          runOnJS(onValueChange)(
+            Math.round((snappedValue / 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)
+    })
+    .onFinalize(() => {
+      isInsideChild.value = false
+    })
+  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 animatedTrack = useAnimatedStyle(() => ({
+    [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
+  }))
+
+  const opacityTrack = steps !== undefined && displayStepsOnMinimumTrack
+
+  return (
+    <View
+      style={[
+        styles.container(maximumTrackWidth, halfSize),
+        SliderStyles.container(colorPalette),
+      ]}>
+      {axis === 'x' && <View style={{width: halfSize}} />}
+      <GestureDetector gesture={tapGesture}>
+        <View
+          style={[
+            styles.maximumTrack(maximumTrackWidth),
+            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),
+              SliderStyles.minimumTrack(colorPalette, opacityTrack),
+              animatedTrack,
+            ]}>
+            <GestureDetector gesture={slideGesture}>
+              <View
+                style={[
+                  SliderStyles.thumb(colorPalette),
+                  styles.thumb(halfSize, thumbSize),
+                ]}>
+                {ThumbChildren || null}
+              </View>
+            </GestureDetector>
+          </Animated.View>
+        </View>
+      </GestureDetector>
+      {axis === 'y' && <View style={{height: halfSize}} />}
+    </View>
+  )
+}
+
+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 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',
+    borderWidth: 1,
+    borderColor: 'yellow',
+    // minWidth: 30,
+  }),
+  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) => ({
+    borderRadius: 25,
+    position: 'absolute',
+    top: 0,
+    zIndex: 2,
+    transform: [{translateY: halfSize * -1}],
+    width: thumbSize.height,
+    height: thumbSize.width,
+  }),
+  steps: {
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    zIndex: 0,
+  },
+  step: (index, length) => ({
+    width: '100%',
+    height: 1,
+    backgroundColor:
+      index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
+  }),
+}))
+
+export default OldSlider

package/lib/components/RadioGroup.tsx

@@ -1,11 +1,15 @@
 import React, {createContext, useContext, useState, useCallback} from 'react'
-import {View, Text, Pressable} from 'react-native'
+import {View, Text, Pressable, ViewStyle} from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {
   RadioGroupStyles,
   RadioGroupDefaultVariants,
 } from '../theme/RadioGroup.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  AlignSelf,
+  PalettesWithNestedKeys,
+  StackDirection,
+} from '../style/varia/types'
 
 type RadioGroupVariants = UnistylesVariants<typeof RadioGroupStyles>
 
@@ -14,7 +18,12 @@ type RadioGroupRootProps = RadioGroupVariants & {
   colorPalette?: PalettesWithNestedKeys
   defaultValue?: string
   onValueChange?: (value: string) => void
-  direction?: 'horizontal' | 'vertical'
+  direction?: StackDirection
+  flex?: number
+  alignSelf?: AlignSelf
+  justifyContent?: string
+  alignItems?: string
+  gap?: number
 }
 
 type RadioGroupContextProps = {
@@ -23,6 +32,8 @@ type RadioGroupContextProps = {
   colorPalette: PalettesWithNestedKeys
   variant: RadioGroupVariants['variant']
   size: RadioGroupVariants['size']
+  flex: number
+  alignSelf?: AlignSelf
 }
 
 const RadioGroupContext = createContext<RadioGroupContextProps | null>(null)
@@ -44,7 +55,12 @@ function Root({
   variant = RadioGroupDefaultVariants.variant,
   size = RadioGroupDefaultVariants.size,
   onValueChange,
-  direction = 'vertical',
+  flex = 0,
+  alignSelf = 'auto',
+  direction = 'column',
+  justifyContent,
+  alignItems,
+  gap,
 }: RadioGroupRootProps) {
   RadioGroupStyles.useVariants({variant, size})
   const [value, setValue] = useState(defaultValue)
@@ -65,15 +81,22 @@ function Root({
     colorPalette,
     variant,
     size,
+    flex,
   }
 
   return (
     <RadioGroupContext.Provider value={contextValue}>
       <View
         style={[
-          styles.root,
+          styles.root(
+            flex,
+            direction,
+            alignSelf,
+            justifyContent as ViewStyle['justifyContent'],
+            alignItems as ViewStyle['alignItems'],
+            gap,
+          ),
           RadioGroupStyles.container(colorPalette),
-          direction === 'horizontal' && styles.rootHorizontal,
         ]}>
         {children}
       </View>
@@ -99,17 +122,23 @@ function Item({children, value: itemValue}: PublicItemProps) {
 
   const childrenWithValue = React.Children.map(children, child => {
     if (React.isValidElement(child)) {
-      return React.cloneElement(child as React.ReactElement<any>, {
-        itemValue,
-        isSelected,
-      })
+      return React.cloneElement(
+        child as React.ReactElement<{itemValue: string; isSelected: boolean}>,
+        {
+          itemValue,
+          isSelected,
+        },
+      )
     }
     return child
   })
 
   return (
     <Pressable
-      style={[styles.item, RadioGroupStyles.item(colorPalette)]}
+      style={({pressed}) => [
+        styles.item,
+        RadioGroupStyles.item(colorPalette, pressed),
+      ]}
       onPress={() => onValueChange(itemValue)}
       accessibilityRole="radio"
       accessibilityState={{checked: isSelected}}>
@@ -175,12 +204,21 @@ function ItemText({
 }
 
 const styles = StyleSheet.create({
-  root: {
-    flexDirection: 'column',
-  },
-  rootHorizontal: {
-    flexDirection: 'row',
-  },
+  root: (
+    flex: number,
+    direction: StackDirection,
+    alignSelf?: AlignSelf,
+    justifyContent?: ViewStyle['justifyContent'],
+    alignItems?: ViewStyle['alignItems'],
+    gap?: number,
+  ) => ({
+    flex,
+    flexDirection: direction,
+    alignSelf,
+    alignItems,
+    gap,
+    justifyContent,
+  }),
   item: {
     flexDirection: 'row',
     alignItems: 'center',

package/lib/components/ReText.tsx

@@ -51,7 +51,7 @@ const ReText = ({
   const animatedProps = useAnimatedProps(() => {
     return {
       text: text.value,
-    } as any
+    } as TextInputProps
   })
   return (
     <AnimatedTextInput