react-native-varia 0.2.3 → 0.2.4

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',

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