@codeleap/mobile 3.1.2 → 3.2.1

package/src/components/Slider/index.tsx

@@ -4,29 +4,27 @@ import { StyleSheet } from 'react-native'
 import {
   TypeGuards,
   useDefaultComponentStyle,
-  onUpdate
+  onUpdate,
 } from '@codeleap/common'
 
 import { SliderProps, TrackMarkProps } from './types'
 import { InputBase, selectInputBaseProps } from '../InputBase'
-import {SliderPresets} from './styles'
+import { SliderPresets } from './styles'
 import { Text } from '../Text'
 import { View } from '../View'
 
 export * from './styles'
 
-
-
 const DefaultSliderTrackMark = (props: TrackMarkProps) => {
   const { index, content, style } = props
 
-  if(!TypeGuards.isString(props.content)){
+  if (!TypeGuards.isString(props.content)) {
     return <>
       {props.content}
     </>
   }
 
-  return <Text 
+  return <Text
     text={props.content}
     style={style}
   />
@@ -35,7 +33,7 @@ const DefaultSliderTrackMark = (props: TrackMarkProps) => {
 export const Slider = (props:SliderProps) => {
   const {
     inputBaseProps,
-    others
+    others,
   } = selectInputBaseProps(props)
 
   const {
@@ -57,13 +55,11 @@ export const Slider = (props:SliderProps) => {
   const [_value, _setValue] = React.useState(value)
 
   onUpdate(() => {
-    if(value !== _value){
+    if (value !== _value) {
       _setValue(value)
     }
   }, [value])
 
-
-
   const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderPresets>('u:Slider', {
     variants,
     styles,
@@ -74,30 +70,30 @@ export const Slider = (props:SliderProps) => {
     return StyleSheet.flatten([
       variantStyles.thumb,
       disabled && variantStyles['thumb:disabled'],
-    ])  
-  }, []) 
+    ])
+  }, [])
 
   const trackStyle = React.useMemo(() => {
     return StyleSheet.flatten([
       variantStyles.track,
       disabled && variantStyles['track:disabled'],
-    ])  
-  }, [disabled]) 
+    ])
+  }, [disabled])
 
   const selectedTrackStyle = React.useMemo(() => {
     return StyleSheet.flatten([
       variantStyles.selectedTrack,
       disabled && variantStyles['selectedTrack:disabled'],
-    ])  
-  }, [disabled]) 
+    ])
+  }, [disabled])
 
   const unselectedTrackStyle = React.useMemo(() => {
     return StyleSheet.flatten([
       variantStyles.unselectedTrack,
       disabled && variantStyles['unselectedTrack:disabled'],
-    ])  
+    ])
   }, [disabled])
-  
+
   const containerStyle = React.useMemo(() => {
     return StyleSheet.flatten([
       variantStyles.sliderContainer,
@@ -108,11 +104,11 @@ export const Slider = (props:SliderProps) => {
   const trackMarksHaveContent = !(TypeGuards.isArray(trackMarks) || TypeGuards.isNil(trackMarks))
 
   const trackMarksProp = React.useMemo(() => {
-    if(!trackMarksHaveContent){
+    if (!trackMarksHaveContent) {
       return trackMarks
     }
     return Object.keys(trackMarks).map((key) => Number(key))
-  },[trackMarksHaveContent])
+  }, [trackMarksHaveContent])
 
   const trackMarkStyle = React.useMemo(() => {
     return StyleSheet.flatten([
@@ -128,7 +124,7 @@ export const Slider = (props:SliderProps) => {
       styles={variantStyles}
       labelAsRow
     >
-      <RNSlider 
+      <RNSlider
         value={_value}
         onValueChange={_setValue}
         // @ts-ignore
@@ -150,38 +146,38 @@ export const Slider = (props:SliderProps) => {
       {
         trackMarksProp ? (
           <View style={variantStyles.trackMarkWrapper}>
-          {
-            trackMarksProp.map((_, idx) => {
-              let idxStyle = {}
-
-              if(idx === 0){
-                idxStyle = variantStyles.firstTrackMark
-              } else if(idx === trackMarksProp.length - 1){
-                idxStyle = variantStyles.lastTrackMark
-              }
-              const style = [
-                trackMarkStyle,
-                idxStyle,
-              ]
-
-              if(!trackMarksHaveContent){
-                return <SliderTrackMark 
-                  index={idx} 
-                  style={style}
-                  key={idx}
-                />
-              }
-              
-              const relativeValue = trackMarksProp[idx]
-              const content = trackMarks[relativeValue]
-          
-              return <SliderTrackMark index={idx} content={content} style={style} key={idx}/>
-            })
-          }
+            {
+              trackMarksProp.map((_, idx) => {
+                let idxStyle = {}
+
+                if (idx === 0) {
+                  idxStyle = variantStyles.firstTrackMark
+                } else if (idx === trackMarksProp.length - 1) {
+                  idxStyle = variantStyles.lastTrackMark
+                }
+                const style = [
+                  trackMarkStyle,
+                  idxStyle,
+                ]
+
+                if (!trackMarksHaveContent) {
+                  return <SliderTrackMark
+                    index={idx}
+                    style={style}
+                    key={idx}
+                  />
+                }
+
+                const relativeValue = trackMarksProp[idx]
+                const content = trackMarks[relativeValue]
+
+                return <SliderTrackMark index={idx} content={content} style={style} key={idx}/>
+              })
+            }
           </View>
         ) : null
       }
-    </InputBase>    
+    </InputBase>
   )
 }
 

package/src/components/Switch/index.tsx

@@ -6,7 +6,6 @@ import {
   StylesOf,
   PropsOf,
 } from '@codeleap/common'
-import { ReactNode } from 'react'
 import { StyleSheet } from 'react-native'
 import { View } from '../View'
 
@@ -18,15 +17,12 @@ import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps
 import { useAnimatedVariantStyles } from '../..'
 import { Touchable } from '../Touchable'
 
-
 export * from './styles'
 
-
-  
 export type SwitchProps = Pick<
   InputBaseProps,
   'debugName' | 'disabled' | 'label'
-> &  {
+> & {
   variants?: ComponentVariants<typeof SwitchPresets>['variants']
   styles?: StylesOf<SwitchComposition>
   value: boolean
@@ -37,107 +33,105 @@ export type SwitchProps = Pick<
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
+export const Switch = (props: SwitchProps) => {
+  const {
+    inputBaseProps,
+    others,
+  } = selectInputBaseProps(props)
+  const {
+    variants = [],
+    style = {},
+    styles = {},
+    value,
+    disabled,
+    debugName,
+    onValueChange,
+    switchOnLeft,
+  } = others
 
+  const variantStyles = useDefaultComponentStyle<'u:Switch', typeof SwitchPresets>('u:Switch', {
+    variants,
+    styles,
+    rootElement: 'wrapper',
+    transform: StyleSheet.flatten,
+  })
 
-export const Switch = (props: SwitchProps) => {
-    const {
-      inputBaseProps,
-      others
-    } = selectInputBaseProps(props)
-    const {
-      variants = [],
-      style = {},
-      styles = {},
-      value,
-      disabled,
-      debugName,
-      onValueChange,
-      switchOnLeft,
-    } = others
+  const trackAnimation = useAnimatedVariantStyles({
+    variantStyles,
+    animatedProperties: ['track:off', 'track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
+    transition: variantStyles['track:transition'],
+    updater: () => {
+      'worklet'
+      let disabledStyle = {}
+      if (disabled) {
+        disabledStyle = value ? variantStyles['track:disabled-on'] : variantStyles['track:disabled-off']
+      }
+      const style = value ? variantStyles['track:on'] : variantStyles['track:off']
 
-    const variantStyles = useDefaultComponentStyle<'u:Switch', typeof SwitchPresets>('u:Switch', {
-      variants,
-      styles, 
-      rootElement: 'wrapper',
-      transform: StyleSheet.flatten
-    })
-    
-    const trackAnimation = useAnimatedVariantStyles({
-      variantStyles,
-      animatedProperties: ['track:off','track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
-      transition: variantStyles['track:transition'],
-      updater: () =>{
-        'worklet'
-        let disabledStyle = {}
-        if(disabled){
-          disabledStyle =  value ? variantStyles['track:disabled-on'] : variantStyles['track:disabled-off']
-        }
-        const style =  value ? variantStyles['track:on'] : variantStyles['track:off']
+      return {
+        ...style,
+        ...disabledStyle,
+      }
 
-        return {
-          ...style,
-          ...disabledStyle
-        }
-        
-      },
-      dependencies: [value, disabled],
-    })
+    },
+    dependencies: [value, disabled],
+  })
 
-    const thumbAnimation = useAnimatedVariantStyles({
-      variantStyles,
-      animatedProperties: ['thumb:off','thumb:disabled', 'thumb:on', 'thumb:disabled-off', 'thumb:disabled-on'],
-      transition: variantStyles['thumb:transition'],
-      updater: () =>{
-        'worklet'
-        let disabledStyle = {}
-        if(disabled){
-          disabledStyle = value ? variantStyles['thumb:disabled-on'] : variantStyles['thumb:disabled-off']
-        }
-        const style = value ? variantStyles['thumb:on'] : variantStyles['thumb:off']
-        return {
-          ...style,
-          ...disabledStyle
-        }
-        
-      },
-      dependencies: [value, disabled],
-    })
+  const thumbAnimation = useAnimatedVariantStyles({
+    variantStyles,
+    animatedProperties: ['thumb:off', 'thumb:disabled', 'thumb:on', 'thumb:disabled-off', 'thumb:disabled-on'],
+    transition: variantStyles['thumb:transition'],
+    updater: () => {
+      'worklet'
+      let disabledStyle = {}
+      if (disabled) {
+        disabledStyle = value ? variantStyles['thumb:disabled-on'] : variantStyles['thumb:disabled-off']
+      }
+      const style = value ? variantStyles['thumb:on'] : variantStyles['thumb:off']
+      return {
+        ...style,
+        ...disabledStyle,
+      }
+
+    },
+    dependencies: [value, disabled],
+  })
+
+  const _switchOnLeft = switchOnLeft ?? variantStyles.__props?.switchOnLeft
 
-    const _switchOnLeft = switchOnLeft ?? variantStyles['__props']?.switchOnLeft
+  return <InputBase
+    {...inputBaseProps}
+    debugName={debugName}
+    wrapper={Touchable}
+    styles={variantStyles}
+    wrapperProps={{
+      onPress: () => {
+        onValueChange(!value)
+      },
+      disabled,
+      rippleDisabled: true,
+    }}
+    order={_switchOnLeft ? reversedOrder : InputBaseDefaultOrder}
+    style={style}
+    disabled={disabled}
 
-    return <InputBase
-      {...inputBaseProps}
-      debugName={debugName}
-      wrapper={Touchable}
-      styles={variantStyles}
-      wrapperProps={{
-        onPress: () => {
-          onValueChange(!value)
-        },
-        disabled,
-        rippleDisabled: true
-      }}
-      order={_switchOnLeft ?  reversedOrder : InputBaseDefaultOrder}
-      style={style}
-      disabled={disabled} 
-      
+  >
+    <View
+      animated
+      style={[
+        variantStyles.track,
+        disabled && variantStyles['track:disabled'],
+        trackAnimation,
+      ]}
     >
-      <View 
-        animated 
+      <View
+        animated
         style={[
-          variantStyles.track, 
-          disabled && variantStyles['track:disabled'],
-          trackAnimation
+          variantStyles.thumb,
+          disabled && variantStyles['thumb:disabled'],
+          thumbAnimation,
         ]}
-        >
-        <View 
-          animated 
-          style={[
-            variantStyles.thumb, 
-            disabled && variantStyles['thumb:disabled'],
-            thumbAnimation
-          ]}
-        />
-      </View>
-    </InputBase>
+      />
+    </View>
+  </InputBase>
 }

package/src/components/Text/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { forwardRef } from 'react'
 import {
   ComponentVariants,
   useDefaultComponentStyle,
@@ -7,13 +7,13 @@ import {
   TypeGuards,
   useState,
 } from '@codeleap/common'
-import { Animated, Platform, StyleSheet, Text as NativeText } from 'react-native'
-import { useAnimateColor, usePressableFeedback } from '../../utils'
+import { Animated, Platform, StyleSheet, Text as NativeText, TextProps as RNTextProps } from 'react-native'
+import { usePressableFeedback } from '../../utils'
 import { TextPresets } from './styles'
 
 export * from './styles'
 
-export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
+export type TextProps = RNTextProps & {
   text?: React.ReactNode
   variants?: ComponentVariants<typeof TextPresets>['variants']
   animated?: boolean
@@ -21,11 +21,9 @@ export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
   debugName?: string
   debounce?: number
   pressDisabled?: boolean
-} & BaseViewProps 
+}
 
-
-
-export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
+const _Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
   const { variants = [], text, children, onPress, style, debounce = 1000, pressDisabled, ...props } = textProps
 
   const pressPolyfillEnabled = Platform.OS === 'android' && !!onPress && !pressDisabled
@@ -68,14 +66,10 @@ export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
 
   const styles = StyleSheet.flatten([variantStyles.text, style])
 
-
-
   if (!!text && !TypeGuards.isString(text)) return <>{text}</>
 
   const Component = textProps.animated ? Animated.Text : NativeText
 
-  
-
   const { getFeedbackStyle } = usePressableFeedback(styles, {
     disabled: !pressPolyfillEnabled,
     feedbackConfig: variantStyles.pressFeedback,
@@ -90,7 +84,7 @@ export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
 
   return <Component {...props}
     onPressIn={handlePress(true)} onPressOut={handlePress(false)}
-    style={[styles,  feedbackStyle, !!onPress && pressDisabled ? variantStyles['text:disabled'] : null]}
+    style={[styles, feedbackStyle, !!onPress && pressDisabled ? variantStyles['text:disabled'] : null]}
     allowFontScaling={false}
     {...pressProps}
     // @ts-ignore
@@ -102,7 +96,7 @@ export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
 
 })
 
-
+export const Text = _Text as (props: TextProps & {ref?: React.MutableRefObject<NativeText> }) => JSX.Element
 
 export const AnimatedText = Animated.createAnimatedComponent(Text)
 

package/src/components/TextInput/index.tsx

@@ -43,7 +43,7 @@ const defaultProps:Partial<TextInputProps> = {
   visibleIcon: 'input-visiblity:visible' as IconPlaceholder,
 }
 
-export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inputRef) => {
+const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, inputRef) => {
 
   const innerInputRef = React.useRef<NativeTextInput>(null)
 
@@ -217,6 +217,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
 export type SearchInputProps = {
   onTypingChange: (isTyping: boolean) => void
   onSearchChange: (search: string) => void
+  onValueChange?: (search: string) => void
   onClear?: () => void
   debugName: string
   debounce?: number
@@ -235,13 +236,15 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
     searchIcon,
     debounce,
     placeholder,
+    value,
+    onValueChange,
     ...others
   } = {
     ...SearchInput.defaultProps,
     ...props,
   }
 
-  const [search, setSearch] = useState('')
+  const [search, setSearch] = !TypeGuards.isNil(value) && !!onValueChange ? [value, onValueChange] : useState('')
 
   const setSearchTimeout = React.useRef<NodeJS.Timeout|null>(null)
 
@@ -291,7 +294,10 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
   )
 }
 
+export const TextInput = TextInputComponent as ComponentWithDefaultProps<TextInputProps>
+
 TextInput.defaultProps = defaultProps
+
 SearchInput.defaultProps = {
   debounce: null,
   clearIcon: 'x' as IconPlaceholder,

package/src/components/Touchable/index.tsx

@@ -1,25 +1,25 @@
 import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { forwardRef } from 'react'
 import {
   ComponentVariants,
   useDefaultComponentStyle,
-  BaseViewProps,
 
   useCodeleapContext,
   AnyFunction,
   TypeGuards,
   onMount,
 } from '@codeleap/common'
-import { Pressable, StyleSheet, View as RNView, Insets, Platform } from 'react-native'
+import { Pressable, StyleSheet, View as RNView, Insets, Platform, PressableProps, ViewStyle, StyleProp } from 'react-native'
 import { TouchableComposition, TouchablePresets } from './styles'
 import { StylesOf } from '../../types'
 import { View } from '../View'
 import { usePressableFeedback } from '../../utils'
+
 import { PressableRipple } from '../../modules/PressableRipple'
-export type TouchableProps = React.PropsWithChildren<
+export type TouchableProps =
   Omit<
-    ComponentPropsWithoutRef<typeof Pressable>,
-    'onPress'|'children'
+    PressableProps,
+    'onPress' | 'children' | 'style'
   > & {
     variants?: ComponentVariants<typeof TouchablePresets>['variants']
     component?: any
@@ -34,11 +34,13 @@ export type TouchableProps = React.PropsWithChildren<
     styles?: StylesOf<TouchableComposition>
     setPressed?: (param: boolean) => void
     rippleDisabled?: boolean
-} & BaseViewProps
->
+    children?: React.ReactNode
+    style?: StyleProp<ViewStyle>
+  }
+
 export * from './styles'
 
-export const Touchable: React.FC<TouchableProps> = forwardRef<
+const _Touchable = forwardRef<
   RNView,
   TouchableProps
 >((touchableProps, ref) => {
@@ -237,3 +239,5 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
     </Wrapper>
   )
 })
+
+export const Touchable = _Touchable as ((props: TouchableProps) => JSX.Element)

package/src/components/View/index.tsx

@@ -1,36 +1,34 @@
-import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import React from 'react'
+import { forwardRef } from 'react'
 import {
   ComponentVariants,
   useDefaultComponentStyle,
   ViewStyles,
-  BaseViewProps,
   useCodeleapContext,
   useMemo,
+  AnyRef,
 } from '@codeleap/common'
 import { View as NativeView, ViewProps as RNViewProps } from 'react-native'
-import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
-import {TransitionConfig} from '../../types'
+import { GetKeyboardAwarePropsOptions } from '../../utils'
+import { TransitionConfig } from '../../types'
 import Animated from 'react-native-reanimated'
 export * from './styles'
 
+type NativeViewProps = RNViewProps
 
+export type ViewRefType = NativeView
 
-type NativeViewProps =Omit<ComponentPropsWithoutRef<typeof NativeView>, 'children'>
-
-export type ViewRefType = NativeView | React.ForwardedRef<NativeView>
-export type ViewProps = React.PropsWithChildren<{
-  ref?: ViewRefType
+export type ViewProps ={
+  ref?: AnyRef<ViewRefType>
   component?: any
   animated?: boolean
   keyboardAware?: GetKeyboardAwarePropsOptions
   transition?: Partial<TransitionConfig>
-} &
-  NativeViewProps & ComponentVariants<typeof ViewStyles>   & BaseViewProps
->
-
+}
+  & NativeViewProps
+  & ComponentVariants<typeof ViewStyles>
 
-export const View  = forwardRef<NativeView,ViewProps>((viewProps, ref) => {
+export const View = forwardRef<NativeView, ViewProps>((viewProps, ref) => {
   const {
     responsiveVariants = {},
     variants = [],
@@ -46,15 +44,14 @@ export const View  = forwardRef<NativeView,ViewProps>((viewProps, ref) => {
     responsiveVariants,
     variants,
   })
-  const Component = animated ? Animated.View  : component || NativeView
+  const Component = animated ? Animated.View : component || NativeView
 
   return (
-    <Component  {...props} style={[variantStyles.wrapper, style]}>
+    <Component {...props} style={[variantStyles.wrapper, style]}>
       {children}
     </Component>
   )
-}) as unknown as React.FC<ViewProps>
-
+}) as unknown as ((props: ViewProps) => JSX.Element)
 
 type GapProps = ViewProps & {
   value: number
@@ -62,7 +59,7 @@ type GapProps = ViewProps & {
   defaultProps?: any
 }
 
-export const Gap:React.FC<React.PropsWithChildren<GapProps>> = ({ children, value, defaultProps = {}, ...props }) => {
+export const Gap = ({ children, value, defaultProps = {}, ...props }: GapProps) => {
   const { Theme } = useCodeleapContext()
   const childArr = React.Children.toArray(children)
 

package/src/components/components.ts

@@ -27,8 +27,8 @@ export * from './Pager'
 export * from './EmptyPlaceholder'
 export * from './Backdrop'
 export * from './Drawer'
+export * from './SegmentedControl'
 export * from './Autocomplete'
-
 export * from './Grid'
 export * from './InputLabel'
 export * from './LoadingOverlay'

package/src/modules/reactNavigation.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react'
 export { createStackNavigator } from '@react-navigation/stack'
 export { createDrawerNavigator } from '@react-navigation/drawer'
@@ -11,5 +10,5 @@ export function useNavigationContext() {
   const navigation = React.useContext(NavigationContext)
   if (!navigation && !root) return undefined
 
-  return (navigation ?? root) as unknown as T
+  return (navigation ?? root)
 }