@codeleap/mobile 1.2.1 → 1.4.0

package/src/components/Text.tsx

@@ -1,31 +1,30 @@
 import * as React from 'react'
 import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import { ComponentVariants, useComponentStyle, BaseViewProps, TextStyles } from '@codeleap/common'
-import { Text as NativeText } from  'react-native'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  BaseViewProps,
+  TextStyles,
+} from '@codeleap/common'
+import { Text as NativeText } from 'react-native'
 
-
-export type TextProps =
-  ComponentPropsWithoutRef<typeof NativeText> & 
-{
-  text?: string,
-  variants?: ComponentVariants <typeof TextStyles>['variants'],
-} & BaseViewProps
+export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
+  text?: string;
+  variants?: ComponentVariants<typeof TextStyles>['variants'];
+} & BaseViewProps;
 
 export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
-  const { 
-    variants = [], 
-    text,
-    style,
-    ...props
-  } = textProps
-  
-  const variantStyles = useComponentStyle('Text', {
+  const { variants = [], text, style, ...props } = textProps
+
+  const variantStyles = useDefaultComponentStyle('Text', {
     variants,
-    rootElement : 'text'
+    rootElement: 'text',
   })
-  
+
   const styles = [variantStyles.text, style]
-  return <NativeText  {...props} style={styles} ref={ref}> 
-    {text}
-  </NativeText>
-})
+  return (
+    <NativeText {...props} style={styles} ref={ref}>
+      {text}
+    </NativeText>
+  )
+})

package/src/components/TextInput.tsx

@@ -1,200 +1,203 @@
 import * as React from 'react'
-import { 
-    ComponentVariants,
-    FormTypes,
-    IconPlaceholder,
-    TextInputComposition,
-    TextInputStyles,
-    useBooleanToggle,
-    useComponentStyle,
-    useValidate  
-} from '@codeleap/common';
-  import { ComponentPropsWithoutRef,  forwardRef, useImperativeHandle, useRef, useState } from 'react'
-  import { Text } from './Text';
-  import { View  } from './View';
-  import { Button } from './Button';
-  import { StylesOf } from '../types/utility';
-  import { Icon } from './Icon';
-  import {NativeSyntheticEvent, StyleSheet, TextInput as NativeTextInput, TextInputChangeEventData} from 'react-native'
-import { useLogStyles } from '../utils/styles';
- 
-  type IconProp = {name: IconPlaceholder, action?:() => void}
-
-  type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
-  
-  export type TextInputProps = 
-    ComponentVariants<typeof TextInputStyles> & 
-    Omit<NativeProps, 'value'> &
-    {
-      multiline?: boolean;
-      onChangeText?: (text: string) => void;
-      disabled?: boolean;
-      edited?: boolean;
-      type?: string;
-      label?:React.ReactNode
-      
-      leftIcon?:IconProp
-      rightIcon?:IconProp
-      styles?: StylesOf<TextInputComposition>
-      validate?: FormTypes.ValidatorFunction | string
-      value?:string
-      password?:boolean
-      visibilityToggle?: boolean
-    };
-  
-  export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
-    const {
-      onChange,
-      type,
-      value,
-      onChangeText,
-      disabled,
-      edited,
-      onFocus,
-      onBlur,
-      multiline,
-      responsiveVariants,
-      variants,
-      label,
-      leftIcon,
-      rightIcon,
-      styles,
-      validate,
-      password,
-      visibilityToggle,
-    
-      ...props
-    } = rawprops
-  
-    const [focused, setFocus] = useState(false)
-    const [editedState, setEdited] = useState(edited)
-    
-    const input = useRef<any>(null)
-    const [textIsVisible, setTextVisible] = useBooleanToggle(false)
-    const variantStyles =useComponentStyle('TextInput', {
-      variants,
-      responsiveVariants,
-      styles,
-      transform: StyleSheet.flatten
-    })
-    const InputElement = NativeTextInput
-  
-    const handleBlur:TextInputProps['onBlur'] = (e) => {
-      if (!editedState && value) setEdited(true)
-      setFocus(false)
-  
-      if (onBlur) {
-        onBlur(e)
-      }
-    }
-  
-    const handleFocus:TextInputProps['onFocus'] = (e) => {
-      setFocus(true)
-      if (onFocus) {
-        onFocus(e)
-      }
-    }
-  
-    const handleChange = (event:NativeSyntheticEvent<TextInputChangeEventData>) => {
-      const text = event.nativeEvent.text
-  
-      if (onChange) onChange(event)
-      if (onChangeText) onChangeText(text)
-    }
-    
-  
-
-  
-    useImperativeHandle(inputRef, () => input.current)
-  
-    const {showError, error} = useValidate(value, validate)
-  
-
-    
-    function getStyles(k:TextInputComposition|TextInputComposition[]){
-      let parts = k as string[]
-      if(typeof k === 'string'){
-        parts = [k]
-      }
-     const requestedStyles = parts.map(key => [
-      variantStyles[key], 
-      showError ? variantStyles[key + ':error'] : {},
-      focused ? variantStyles[key + ':focus'] : {}
-     ]) 
+import {
+  ComponentVariants,
+  FormTypes,
+  IconPlaceholder,
+  TextInputComposition,
+  TextInputStyles,
+  useBooleanToggle,
+  useDefaultComponentStyle,
+  useValidate,
+} from '@codeleap/common'
+import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import { Text } from './Text'
+import { View, ViewProps  } from './View'
+import { Button } from './Button'
+import { StylesOf } from '../types/utility'
+import { Icon } from './Icon'
+import { NativeSyntheticEvent, StyleSheet, TextInput as NativeTextInput, TextInputChangeEventData } from 'react-native'
+import { Touchable, TouchableProps } from './Touchable'
 
-      return StyleSheet.flatten(requestedStyles)
-    }
+type IconProp = { name: IconPlaceholder, action?: () => void }
+
+type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
+
+export type TextInputProps =
+  ComponentVariants<typeof TextInputStyles> &
+  Omit<NativeProps, 'value'> &
+  {
+    multiline?: boolean;
+    onChangeText?: (text: string) => void;
+    disabled?: boolean;
+    edited?: boolean;
+    type?: string;
+    label?: React.ReactNode
+
+    leftIcon?: IconProp
+    rightIcon?: IconProp
+    styles?: StylesOf<TextInputComposition>
+    validate?: FormTypes.ValidatorFunctionWithoutForm | string
+    value?: string
+    password?: boolean
+    visibilityToggle?: boolean
+    touchableWrapper?: boolean
+    innerWrapperProps?: TouchableProps | ViewProps
+  };
+
+export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
+  const {
+    onChange,
+    type,
+    value,
+    onChangeText,
+    disabled,
+    edited,
+    onFocus,
+    onBlur,
+    multiline,
+    variants,
+    label,
+    leftIcon,
+    rightIcon,
+    styles,
+    validate,
+    password,
+    visibilityToggle,
+    touchableWrapper,
+    innerWrapperProps,
+    ...props
+  } = rawprops
 
-    return (
-      <View
-        style={getStyles('wrapper')}
-      >
-        <InputLabel label={label} style={getStyles('label')}/>
-  
-        <View style={getStyles('innerWrapper')}>
-  
-    
-          <InputIcon {...leftIcon} style={getStyles(['icon','leftIcon'])}/>
-          <InputElement
-            ref={input}
-            secureTextEntry={password && !textIsVisible}
-            onChange={handleChange}
-            value={value}
-            editable={disabled}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            {...props}
-            style={getStyles('textField')}
-          />
-          {
-            visibilityToggle ? 
-              <InputIcon  name={
-                  (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder
-              } action={() => setTextVisible()} style={getStyles(['icon','rightIcon'])}/>
-              :
-              <InputIcon {...rightIcon} style={getStyles(['icon','rightIcon'])}/>
-          }
-        </View>
-        
-        <FormError message={error.message} style={getStyles(['error'])}/>
-          
-        
-      </View>
-    )
+  const [isFocused, setFocus] = useState(false)
+  const [editedState, setEdited] = useState(edited)
+
+  const input = useRef<any>(null)
+  const [textIsVisible, setTextVisible] = useBooleanToggle(false)
+  const variantStyles = useDefaultComponentStyle('TextInput', {
+    variants,
+    styles,
   })
-  
-  export const FormError = ({message, ...props}) => {
-  
-    
-    if (['number', 'string', 'undefined'].includes(typeof message)){
-      return  <Text text={`${message||' '}`} variants={['p2', 'marginTop:1']} {...props}/> 
+  const InputElement = NativeTextInput
+
+  const handleBlur: TextInputProps['onBlur'] = (e) => {
+    if (!editedState && value) setEdited(true)
+    setFocus(false)
+
+    if (onBlur) {
+      onBlur(e)
     }
-    return message
   }
-  export const InputIcon:React.FC<{style:any} & IconProp> = ({name, style, action}) => {
-    if (!name) return null
-  
-    if (action){
-    
-      return <Button icon={name} onPress={() => action()}  styles={{
-        icon: style,
-      }} variants={['icon']}/>
-  
+
+  const handleFocus: TextInputProps['onFocus'] = (e) => {
+    setFocus(true)
+    if (onFocus) {
+      onFocus(e)
     }
-  
-    return <Icon name={name} style={style}/>
   }
-  export const InputLabel = ({label, style}) => {
-    if (!label) return null
-    
-    switch (typeof label){
-      case 'string':
-        return <Text variants={['p2']} style={style} text={label}/>
-      case 'object':
-      
-        return label
-      default:
-        return null
-    }
+
+  const handleChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
+    const text = event.nativeEvent.text
+
+    if (onChange) onChange(event)
+    if (onChangeText) onChangeText(text)
+  }
+
+  useImperativeHandle(inputRef, () => ({...input.current, focus: () => {
+    input.current?.focus?.()
+  }, isTextInput: true}))
+
+  const { showError, error } = useValidate(value, validate)
+
+  const leftIconStyle = {
+    ...variantStyles.icon,
+    ...(isFocused ? variantStyles['icon:focus'] : {}),
+    ...(showError ? variantStyles['icon:error'] : {}),
+    ...variantStyles.leftIcon,
+    ...(isFocused ? variantStyles['leftIcon:focus'] : {}),
+    ...(showError ? variantStyles['leftIcon:error'] : {}),
+  }
+
+  const rightIconStyle = {
+    ...variantStyles.icon,
+    ...(isFocused ? variantStyles['icon:focus'] : {}),
+    ...(showError ? variantStyles['icon:error'] : {}),
+    ...variantStyles.rightIcon,
+    ...(isFocused ? variantStyles['rightIcon:focus'] : {}),
+    ...(showError ? variantStyles['rightIcon:error'] : {}),
+  }
+
+  function getStyles(key: TextInputComposition) {
+    const requestedStyles = [
+      variantStyles[key],
+      isFocused ? variantStyles[key + ':focus'] : {},
+      showError ? variantStyles[key + ':error'] : {},
+    ]
+    return requestedStyles
+  }
+
+  const InnerWrapper = touchableWrapper ? Touchable : View
+
+  return (
+    <View
+      style={getStyles('wrapper')}
+    >
+      <InputLabel label={label} style={getStyles('label')} />
+      <InnerWrapper style={getStyles('innerWrapper')} {...innerWrapperProps}>
+        <InputIcon {...leftIcon} style={leftIconStyle} />
+        <InputElement
+          ref={input}
+          secureTextEntry={password && !textIsVisible}
+          onChange={handleChange}
+          value={value}
+          editable={disabled}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={StyleSheet.flatten(getStyles('placeholder'))?.color}
+          {...props}
+          style={getStyles('textField')}
+        />
+        {
+          visibilityToggle ?
+            <InputIcon name={
+              (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder
+            } action={() => setTextVisible()} style={rightIconStyle} />
+            :
+            <InputIcon {...rightIcon} style={rightIconStyle} />
+        }
+      </InnerWrapper>
+      <FormError message={error.message} style={{
+        ...variantStyles.error,
+      }} />
+    </View>
+  )
+})
+
+export const FormError = ({ message, ...props }) => {
+  if (['number', 'string', 'undefined'].includes(typeof message)) {
+    return <Text text={`${message || ' '}`} variants={['p2', 'marginTop:1']} {...props} />
+  }
+  return message
+}
+
+export const InputIcon: React.FC<{ style: any } & IconProp> = ({ name, style, action }) => {
+  if (!name) return null
+  if (action) {
+    return <Button icon={name} onPress={() => action()} styles={{
+      icon: style,
+    }} variants={['icon']} />
+  }
+  return <Icon name={name} style={style} />
+}
+
+export const InputLabel = ({ label, style }) => {
+  if (!label) return null
+
+  switch (typeof label) {
+    case 'string':
+      return <Text style={style} text={label} />
+    case 'object':
+      return label
+    default:
+      return null
   }
-  
+}

package/src/components/Touchable.tsx

@@ -1,54 +1,64 @@
 import * as React from 'react'
 import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import { ComponentVariants, useComponentStyle, BaseViewProps, ViewStyles, useStyle } from '@codeleap/common'
-import { View } from './View'
-import { Animated, TouchableOpacity as NativeTouchable } from  'react-native'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  BaseViewProps,
+  ViewStyles,
+  useCodeleapContext,
+  AnyFunction,
+} from '@codeleap/common'
+import { TouchableOpacity as NativeTouchable } from 'react-native'
 
-export type TouchableProps =
-  ComponentPropsWithoutRef<typeof NativeTouchable> & 
-{
-  variants?: ComponentVariants <typeof ViewStyles>['variants'],
-  component?: any
-} & BaseViewProps
+import { createAnimatableComponent } from 'react-native-animatable'
+export type TouchableProps = Omit<
+  ComponentPropsWithoutRef<typeof NativeTouchable>,
+  'onPress'
+> & {
+  variants?: ComponentVariants<typeof ViewStyles>['variants'];
+  component?: any;
+  ref?: React.Ref<NativeTouchable>;
+  debugName?: string;
+  debugComponent?: string;
+  onPress?: AnyFunction;
+} & BaseViewProps;
 
-export const Touchable = forwardRef<NativeTouchable, TouchableProps>((touchableProps, ref) => {
-  const { 
+export const Touchable: React.FC<TouchableProps> = forwardRef<
+  NativeTouchable,
+  TouchableProps
+>((touchableProps, ref) => {
+  const {
     variants = [],
     children,
     onPress,
     style,
+    debugName,
+    debugComponent,
     ...props
   } = touchableProps
-  
-  const variantStyles = useComponentStyle('View', {
+
+  const variantStyles = useDefaultComponentStyle('View', {
     variants,
   })
-  const {logger} = useStyle()
+
+  const { logger } = useCodeleapContext()
   const press = () => {
-    if(!onPress) throw {message: 'No onPress passed to touchable', touchableProps}
-    logger.log('<Touchable/> pressed', { style, variants }, 'Component')
-    onPress(null)
+    if (!onPress) { throw { message: 'No onPress passed to touchable', touchableProps } }
+    logger.log(
+      `<${debugComponent || 'Touchable'}/>  pressed`,
+      { debugName, style, variants },
+      'User interaction',
+    )
+    onPress && onPress()
   }
-  
+
   const styles = [variantStyles.wrapper, style]
 
-  return <NativeTouchable onPress={press} {...props} ref={ref}> 
-    <View style={styles}>
+  return (
+    <NativeTouchable onPress={press} style={styles} {...props} ref={ref}>
       {children}
-    </View>
-  </NativeTouchable>
+    </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,53 +1,46 @@
-import * as React from 'react';
+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 {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  ViewStyles,
+  BaseViewProps,
+} from '@codeleap/common'
+import { View as NativeView, ViewStyle } from 'react-native'
 
-export type ViewProps =
- ComponentPropsWithoutRef<typeof NativeView> & 
- ComponentVariants<typeof ViewStyles> & {
-  
-    component?: any
-} & BaseViewProps
+export type ViewProps = ComponentPropsWithoutRef<typeof NativeView> &
+  ComponentVariants<typeof ViewStyles> & {
+    ref?: any;
+    component?: any;
+  } & BaseViewProps;
 
-
-export const View = forwardRef<NativeView, ViewProps>((viewProps, ref) => {
-  const { 
-    responsiveVariants = {}, 
-    variants = [], 
+export const View: React.FC<ViewProps> = forwardRef<NativeView, ViewProps>((viewProps, ref) => {
+  const {
+    responsiveVariants = {},
+    variants = [],
     children,
     style,
     onHover,
     component,
     ...props
-  } = viewProps;
-  
-  const variantStyles = useComponentStyle('View', {
+  } = viewProps
+
+  const variantStyles = useDefaultComponentStyle('View', {
     responsiveVariants,
     variants,
-  });
-  const Component  = component|| NativeView 
+  })
+  const Component = component || NativeView
 
-  return <Component
-    
-    style={[variantStyles.wrapper, style]} 
-    ref={ref}
-    {...props} 
-  > 
-    {children}
-  </Component>
+  return (
+    <Component style={[variantStyles.wrapper, style]} ref={ref} {...props}>
+      {children}
+    </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/components.ts

@@ -0,0 +1,26 @@
+export * from './View'
+export * from './Animated'
+export * from './Icon'
+export * from './Touchable'
+export * from './Text'
+export * from './Image'
+export * from './Checkbox'
+export * from './TextInput'
+export * from './RadioInput'
+export * from './Switch'
+export * from './ContentView'
+
+export * from './Select'
+export * from './FileInput'
+export * from './Slider'
+export * from './Navigation'
+export * from './Scroll'
+export * from './List'
+export * from './ActivityIndicator'
+export * from './Button'
+export * from './ContentView'
+export * from './Overlay'
+export * from './Modal'
+
+export * from './Navigation'
+export * from './Pager'

package/src/index.ts

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

package/src/modules/documentPicker.ts

@@ -0,0 +1,8 @@
+// @ts-ignore
+import  DP from 'react-native-document-picker'
+import * as  DocumentPickerTypes from './types/documentPicker'
+
+
+export const DocumentPicker = DP as DocumentPickerTypes.DocumentPicker
+
+export {default as ImageCropPicker} from 'react-native-image-crop-picker'

package/src/modules/fastImage.ts

@@ -1,2 +1,2 @@
-// @ts-ignore 
-export {default as FastImage} from 'react-native-fast-image'
+// @ts-ignore
+export { default as FastImage } from 'react-native-fast-image'