@codeleap/mobile 1.2.1 → 1.3.0

package/src/components/Touchable.tsx

@@ -1,54 +1,51 @@
 import * as React from 'react'
 import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import { ComponentVariants, useComponentStyle, BaseViewProps, ViewStyles, useStyle } from '@codeleap/common'
+import { ComponentVariants, useComponentStyle, BaseViewProps, ViewStyles, useStyle, AnyFunction } from '@codeleap/common'
 import { View } from './View'
-import { Animated, TouchableOpacity as NativeTouchable } from  'react-native'
+import { TouchableOpacity as NativeTouchable} from  'react-native'
 
+import { createAnimatableComponent } from 'react-native-animatable'
 export type TouchableProps =
-  ComponentPropsWithoutRef<typeof NativeTouchable> & 
+  Omit<ComponentPropsWithoutRef<typeof NativeTouchable>, 'onPress'> & 
 {
   variants?: ComponentVariants <typeof ViewStyles>['variants'],
   component?: any
+  ref?: React.Ref<NativeTouchable>
+  debugName?:string
+  onPress?: AnyFunction
 } & BaseViewProps
 
-export const Touchable = forwardRef<NativeTouchable, TouchableProps>((touchableProps, ref) => {
+export const Touchable:React.FC<TouchableProps> = forwardRef<NativeTouchable, TouchableProps>((touchableProps, ref) => {
   const { 
     variants = [],
     children,
     onPress,
     style,
+    debugName,
+    
     ...props
   } = touchableProps
   
   const variantStyles = useComponentStyle('View', {
     variants,
   })
+  
   const {logger} = useStyle()
   const press = () => {
     if(!onPress) throw {message: 'No onPress passed to touchable', touchableProps}
-    logger.log('<Touchable/> pressed', { style, variants }, 'Component')
-    onPress(null)
+    logger.log(`${debugName || '<Touchable/>'}  pressed`, { style, variants }, 'Component')
+    onPress && onPress()
   }
   
   const styles = [variantStyles.wrapper, style]
 
-  return <NativeTouchable onPress={press} {...props} ref={ref}> 
-    <View style={styles}>
-      {children}
-    </View>
+ 
+  return <NativeTouchable onPress={press} style={styles} {...props} ref={ref}> 
+  
+
+        {children} 
+   
   </NativeTouchable>
 })
 
-export type AnimatedTouchableProps =
-ComponentPropsWithoutRef<typeof Animated.View> & 
-TouchableProps
-
-export const AnimatedTouchable = forwardRef<typeof Animated.View, AnimatedTouchableProps>((viewProps, ref) => {
-  // @ts-ignore
-  return <Touchable
-    component={Animated.View}
-   
-    {...viewProps} 
-  /> 
-  
-})
+export const AnimatedTouchable = createAnimatableComponent(Touchable)

package/src/components/View.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
+import * as Animatable from 'react-native-animatable'
 import { ComponentPropsWithoutRef, forwardRef } from 'react'
 import { ComponentVariants, useComponentStyle, ViewStyles, BaseViewProps } from '@codeleap/common'
-import { Animated, View as NativeView } from  'react-native'
+import { View as NativeView, ViewStyle } from  'react-native'
 
 export type ViewProps =
  ComponentPropsWithoutRef<typeof NativeView> & 
  ComponentVariants<typeof ViewStyles> & {
-  
+  ref?:any
     component?: any
 } & BaseViewProps
 
@@ -38,16 +39,5 @@ export const View = forwardRef<NativeView, ViewProps>((viewProps, ref) => {
   </Component>
 })
 
-export type AnimatedViewProps =
-ComponentPropsWithoutRef<typeof Animated.View> & 
-ComponentVariants<typeof ViewStyles>  & BaseViewProps
-
-export const AnimatedView = forwardRef<typeof Animated.View, AnimatedViewProps>((viewProps, ref) => {
-  // @ts-ignore
-  return <View
-    component={Animated.View}
-   
-    {...viewProps} 
-  /> 
-  
-})
+export const AnimatedView = 
+  Animatable.createAnimatableComponent(View) as unknown as React.ForwardRefExoticComponent<{transition?: any,animation?: any} & ViewProps>

package/src/components/index.ts

@@ -7,6 +7,8 @@ export *  from './Checkbox'
 export *  from './TextInput'
 export *  from './RadioInput'
 export *  from './Switch'
+export * from './ContentView'
+
 export *  from './Select'
 export *  from './FileInput'
 export *  from './Slider'
@@ -15,5 +17,7 @@ export * from './Scroll'
 export * from './ActivityIndicator'
 export * from './Button'
 export * from './ContentView'
+export * from './Overlay'
+export * from './Modal'
 
 export *  from './Navigation'

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './components'
-export {default as OSAlert } from './utils/OSAlert'
+export {default as OSAlert } from './utils/OSAlert'
+export {default as posed} from 'react-native-pose'

package/src/modules/documentPicker.ts

@@ -0,0 +1,2 @@
+// @ts-ignore 
+export {default as DocumentPicker} from 'react-native-document-picker'

package/src/utils/styles.ts

@@ -1,4 +1,4 @@
-import { useComponentStyle, useStyle } from "@codeleap/common";
+import { useStyle } from "@codeleap/common";
 import { StyleSheet } from "react-native";
 
 export function useLogStyles(){
@@ -14,4 +14,4 @@ export function useLogStyles(){
         )
     }
     
-}
+}