react-native-varia 0.2.2 → 0.2.4

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

package/lib/components/Select.tsx

@@ -4,24 +4,35 @@ import React, {
   useState,
   ReactNode,
   ReactElement,
+  useMemo,
 } from 'react'
 import {
   View,
   TouchableOpacity,
   ScrollView,
   TouchableWithoutFeedback,
-  StyleSheet,
+  Pressable,
 } from 'react-native'
 import {UnistylesVariants} from 'react-native-unistyles'
 import {Portal} from '@gorhom/portal'
 import Text from './Text'
-import {StyleSheet as UniStyleSheet} from 'react-native-unistyles'
+import {StyleSheet} from 'react-native-unistyles'
 import {SelectStyles, SelectDefaultVariants} from '../theme/Select.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  AlignSelf,
+  Flex,
+  PalettesWithNestedKeys,
+  StackDirection,
+} from '../style/varia/types'
+import {computeFlexSync} from '../style/varia/utils'
 
 type SelectVariants = UnistylesVariants<typeof SelectStyles>
 
-interface Option {
+function hasDisplayName(type: any): type is {displayName: string} {
+  return typeof type === 'function' && 'displayName' in type
+}
+
+type Option = SelectVariants & {
   label: string
   value: string
 }
@@ -35,6 +46,7 @@ interface SelectContextType {
   colorPalette: PalettesWithNestedKeys
   variant: SelectVariants['variant']
   size: SelectVariants['size']
+  flex: Flex
 }
 
 const SelectContext = createContext<SelectContextType | undefined>(undefined)
@@ -53,9 +65,11 @@ type RootProps = SelectVariants & {
   defaultValue?: string
   placeholder?: string
   colorPalette?: PalettesWithNestedKeys
-  flex?: number
   portalHostName?: string
   children: ReactNode
+  flex?: Flex
+  stretch?: AlignSelf
+  direction?: 'row' | 'column'
 }
 
 const SelectRoot = ({
@@ -66,9 +80,11 @@ const SelectRoot = ({
   variant = SelectDefaultVariants.variant,
   size = SelectDefaultVariants.size,
   colorPalette = 'accent',
-  flex = 1,
   portalHostName = 'select',
   children,
+  flex = 0,
+  stretch,
+  direction = 'column',
 }: RootProps) => {
   SelectStyles.useVariants({variant, size})
   const [internalValue, setInternalValue] = useState(defaultValue)
@@ -84,27 +100,32 @@ const SelectRoot = ({
   }
 
   const trigger = React.Children.toArray(children).find(
-    (child: any) =>
+    (child): child is ReactElement<TriggerProps> =>
       React.isValidElement(child) &&
-      (child.type as any).displayName === 'SelectTrigger',
+      hasDisplayName(child.type) &&
+      child.type.displayName === 'SelectTrigger',
   )
 
   const portalChildren = React.Children.toArray(children).filter(
-    (child: any) =>
+    (child): child is ReactElement<TriggerProps> =>
       !(
         React.isValidElement(child) &&
-        (child.type as any).displayName === 'SelectTrigger'
+        hasDisplayName(child.type) &&
+        child.type.displayName === 'SelectTrigger'
       ),
   )
 
   return (
-    <View style={[styles.container(flex)]}>
+    <View style={[styles.container(flex, stretch)]}>
       {trigger &&
         React.cloneElement(trigger as ReactElement<TriggerProps>, {
           isOpen,
           setIsOpen,
           value,
           options,
+          flex,
+          stretch,
+          direction,
           variant:
             (trigger as ReactElement<TriggerProps>).props.variant ?? variant,
           size: (trigger as ReactElement<TriggerProps>).props.size ?? size,
@@ -125,6 +146,7 @@ const SelectRoot = ({
               colorPalette,
               variant,
               size,
+              flex,
             }}>
             <View style={styles.portalContainer}>{portalChildren}</View>
           </SelectContext.Provider>
@@ -143,6 +165,9 @@ interface TriggerProps {
   colorPalette?: PalettesWithNestedKeys
   value?: string
   options?: Option[]
+  flex?: Flex
+  stretch?: AlignSelf
+  direction?: 'row' | 'column'
 }
 
 const SelectTrigger = ({
@@ -153,16 +178,25 @@ const SelectTrigger = ({
   size,
   colorPalette = 'accent',
   value,
+  flex = 0,
+  stretch,
+  direction,
   options = [],
 }: TriggerProps) => {
   SelectStyles.useVariants({variant, size})
+  const {flex: childFlex} = useMemo(() => {
+    return computeFlexSync(flex as number, stretch, direction as StackDirection)
+  }, [flex, stretch, direction])
   const selected = options.find(opt => opt.value === value)
   return (
-    <TouchableWithoutFeedback onPress={() => setIsOpen?.(!isOpen)}>
-      <View style={[styles.input, SelectStyles.trigger(colorPalette)]}>
-        <Text>{selected ? selected.label : placeholder}</Text>
-      </View>
-    </TouchableWithoutFeedback>
+    <Pressable
+      onPress={() => setIsOpen?.(!isOpen)}
+      style={({pressed}) => [
+        styles.input(childFlex),
+        SelectStyles.trigger(colorPalette, pressed),
+      ]}>
+      <Text>{selected ? selected.label : placeholder}</Text>
+    </Pressable>
   )
 }
 SelectTrigger.displayName = 'SelectTrigger'
@@ -236,18 +270,20 @@ const Select = {
 
 export default Select
 
-const styles = UniStyleSheet.create({
-  container: (flex: number) => ({
-    flexGrow: flex,
+const styles = StyleSheet.create({
+  container: (flex: Flex, stretch: AlignSelf) => ({
+    flex,
     flexDirection: 'row',
     justifyContent: 'center',
+    ...(stretch ? {alignSelf: stretch} : {}),
+    alignItems: 'stretch',
   }),
-  input: {
-    flex: 1,
+  input: (flex: Flex) => ({
+    flex,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-  },
+  }),
   item: {
     alignItems: 'center',
     flexDirection: 'row',