@codeleap/mobile 1.2.1 → 1.4.0

package/src/components/Checkbox/styles.ts

@@ -1,11 +1,23 @@
-import {createDefaultVariantFactory, includePresets} from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
-type CheckboxParts = 'wrapper' | 'label' | 'input' | 'checkmark' | 'checkmarkWrapper' | 'error'
+type CheckboxParts =
+  | 'wrapper'
+  | 'label'
+  | 'input'
+  | 'checkmark'
+  | 'checkmarkWrapper'
+  | 'error';
 
-export type MobileCheckboxComposition = CheckboxParts | `${CheckboxParts}:checked` | `${CheckboxParts}:disabled` | `${CheckboxParts}:error`;
-const createCheckboxStyle = createDefaultVariantFactory<MobileCheckboxComposition>()
+export type MobileCheckboxComposition =
+  | CheckboxParts
+  | `${CheckboxParts}:checked`
+  | `${CheckboxParts}:disabled`
+  | `${CheckboxParts}:error`;
+const createCheckboxStyle =
+  createDefaultVariantFactory<MobileCheckboxComposition>()
 
-const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })))
+const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })),
+)
 
 export const MobileCheckboxStyles = {
   ...presets,
@@ -15,49 +27,46 @@ export const MobileCheckboxStyles = {
     const markHeight = size * 0.5
     const markWidth = size * 0.25
 
-    const translateX = -(markWidth/2)
-    const translateY = -(markHeight/2)
+    const translateX = -(markWidth / 2)
+    const translateY = -(markHeight / 2)
     return {
-      wrapper: {
-        
-      },
+      wrapper: {},
       input: {
         flexDirection: 'row',
         ...theme.presets.alignCenter,
-        borderRadius: theme.borderRadius.small
+        borderRadius: theme.borderRadius.small,
       },
       label: {
         ...theme.spacing.marginLeft(0.5),
       },
-    
+
       checkmark: {
-          position: 'absolute',
-          top: '40%',
-          left: '50%',
-         
-          height: markHeight,
-          width: markWidth,
-          transform: [{translateX}, {translateY}, {rotate: '45deg'},]
+        position: 'absolute',
+        top: '40%',
+        left: '50%',
+
+        height: markHeight,
+        width: markWidth,
+        transform: [{ translateX }, { translateY }, { rotate: '45deg' }],
       },
-      "checkmark:checked": {
+      'checkmark:checked': {
         ...theme.border.white({
           width: 2,
-          directions: ['right','bottom']
+          directions: ['right', 'bottom'],
         }),
       },
       checkmarkWrapper: {
-          position: 'relative',
-          width: size,
-          height: size,
-          ...theme.border.gray(1)
+        position: 'relative',
+        width: size,
+        height: size,
+        ...theme.border.neutral(1),
       },
-      "checkmarkWrapper:checked": {
-          backgroundColor: theme.colors.primary
+      'checkmarkWrapper:checked': {
+        backgroundColor: theme.colors.primary,
       },
       error: {
-        color: theme.colors.negative
-      }
+        color: theme.colors.negative,
+      },
     }
   }),
-
 }

package/src/components/ContentView.tsx

@@ -1,37 +1,43 @@
 import React from 'react'
-import { ComponentVariants, ContentViewStyles, useComponentStyle, ViewComposition } from '@codeleap/common'
+import {
+  ComponentVariants,
+  ContentViewStyles,
+  useDefaultComponentStyle,
+  ViewComposition,
+} from '@codeleap/common'
 import { ViewProps, View } from './View'
 import { Text } from './Text'
 import { StylesOf } from '../types/utility'
 import { ActivityIndicator } from './ActivityIndicator'
+import { StyleSheet } from 'react-native'
 
-export type ContentViewProps = Omit<ViewProps, 'variants' | 'responsiveVariants'> & {
-  placeholderMsg: string
-  loading?: boolean
-  styles?: StylesOf<ViewComposition>
-} & ComponentVariants<typeof ContentViewStyles>
+export type ContentViewProps = Omit<
+  ViewProps,
+  'variants' | 'responsiveVariants'
+> & {
+  placeholderMsg: string;
+  loading?: boolean;
+  styles?: StylesOf<ViewComposition>;
+} & ComponentVariants<typeof ContentViewStyles>;
 
-const WrapContent = ({ children, ...props }) => <View {...props}>{children}</View>
+const WrapContent = ({ children, ...props }) => (
+  <View {...props}>{children}</View>
+)
 
 export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
-  const {
-    children,
-    placeholderMsg,
-    loading,
-    variants,
-    styles,
-    ...props
-  } = rawProps
+  const { children, placeholderMsg, loading, variants, styles, ...props } =
+    rawProps
 
-  const variantStyle = useComponentStyle('ContentView', {
+  const variantStyle = useDefaultComponentStyle('ContentView', {
     variants,
+    transform: StyleSheet.flatten,
     styles,
   })
 
   if (loading) {
     return (
       <WrapContent {...props} style={variantStyle.wrapper}>
-        <ActivityIndicator styles={{wrapper: variantStyle.loader}}/>
+        <ActivityIndicator styles={{ wrapper: variantStyle.loader }} />
       </WrapContent>
     )
   }
@@ -49,4 +55,4 @@ export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
       <Text text={placeholderMsg} />
     </WrapContent>
   )
-}
+}

package/src/components/FileInput.tsx

@@ -1,6 +1,178 @@
-import * as React from 'react'
-import { Text } from 'react-native'
+import React, { forwardRef, useImperativeHandle } from 'react'
+import { DocumentPicker, ImageCropPicker } from '../modules/documentPicker'
+import {
+  ComponentVariants,
+  FileInputComposition,
+  FileInputStyles,
+  IconPlaceholder,
+  MobileInputFile,
+  parseFilePathData,
+  useDefaultComponentStyle,
+  useCodeleapContext,
+} from '@codeleap/common'
+import { StylesOf } from '../types/utility'
+import { Button, ButtonProps } from './Button'
+import { View } from './View'
+import { InputLabel } from './TextInput'
+import OSAlert from '../utils/OSAlert'
+import { Options } from 'react-native-image-crop-picker'
+import { DocumentPickerOptions } from '../modules/types/documentPicker'
 
-export const FileInput = React.forwardRef(() => {
-    return <Text >Not implemented</Text>
-})
+export type FileInputRef = {
+  openFilePicker: () => void;
+};
+
+export type FileInputProps = {
+  label?: string;
+  iconName?: IconPlaceholder;
+  styles?: StylesOf<FileInputComposition>;
+  mode: 'hidden' | 'button';
+  variants?: ComponentVariants<typeof FileInputStyles>['variants'];
+  onFileSelect(files: MobileInputFile[]): void;
+  options?: DocumentPickerOptions<any>;
+  buttonProps?: ButtonProps;
+  ref?: FileInputRef;
+  placeholder?: string
+  type?: 'image' | 'anyFile'
+  alertProps?: Parameters<typeof OSAlert.ask>[0]
+  pickerOptions?: Partial<Options>
+};
+
+const pickerDefaults = {
+  width: 300,
+  height: 400,
+  cropping: true,
+}
+
+function parsePickerData(data:any):MobileInputFile {
+
+  const filePathData = parseFilePathData(data.path)
+  const d:MobileInputFile['file'] = {
+    name: filePathData.name,
+    size: data.size,
+    type: data.mime,
+    uri: data.path,
+    fileCopyUri: data.path,
+  }
+  
+  return {
+    file: d,
+    preview: data.path,
+  }
+}
+
+export const FileInput = forwardRef<
+  FileInputRef,
+  FileInputProps
+>((fileInputProps, ref) => {
+  const {
+    mode = 'hidden',
+    onFileSelect,
+    iconName,
+    styles,
+    label,
+    variants,
+    options,
+    type = 'image',
+    alertProps,
+    placeholder = 'Select a file',
+    pickerOptions,
+    buttonProps,
+  } = fileInputProps
+
+  const [file, setFile] = React.useState(null)
+
+  const { logger } = useCodeleapContext()
+
+  async function openFileSystem(){
+    try {
+      let files = await DocumentPicker.pick(options)
+      if (!Array.isArray(files)) {
+        files = [files]
+      }
+      setFile(files)
+      onFileSelect(files.map((file) => ({ preview: file.uri, file })))
+    } catch (err) {
+      if (DocumentPicker.isCancel(err)) {
+        logger.log('User cancelled the picker.', null, 'Component')
+      } else {
+        throw err
+      }
+    }
+  }
+
+  const mergedOptions  = {
+    ...pickerDefaults,
+    ...pickerOptions,
+  } as Options
+  
+  const handlePickerResolution = data => {
+    onFileSelect(mergedOptions.multiple ? data.map(parsePickerData)  : [
+      parsePickerData(data),
+    ])
+  }
+
+  const openFilePicker = async () => {
+    
+    if (type === 'image'){
+      OSAlert.ask({
+        title: 'Change Image',
+        body: 'Do you want to take a new picture or select an existing one?',
+        ...alertProps,
+        options: [
+          {
+            text: 'Cancel',
+            onPress: () => {},
+            ...alertProps?.options[0],
+          },
+          {
+            text: alertProps?.options?.[0]?.text || 'Camera',
+            onPress: () => {
+              ImageCropPicker.openCamera(mergedOptions).then(handlePickerResolution)
+            },
+            ...alertProps?.options[1],
+          },
+          {
+            text: 'Library',
+            onPress: () => {
+              ImageCropPicker.openPicker(mergedOptions).then(handlePickerResolution)
+        
+            },
+            ...alertProps?.options[2],
+          },
+         
+        ],
+      })
+    } else {
+      openFileSystem()
+    }
+   
+  }
+
+  const variantStyles = useDefaultComponentStyle('FileInput', {
+    styles,
+    variants,
+  })
+
+  useImperativeHandle(ref, () => ({
+    openFilePicker,
+  }))
+
+  const filenames = file ? file.map((f) => f.name) : ''
+  if (mode === 'button') {
+    return (
+      <View style={variantStyles.wrapper}>
+        <InputLabel label={label} style={variantStyles.label} />
+        <Button
+          onPress={() => openFilePicker()}
+          text={filenames || placeholder}
+          icon={iconName || ('fileInputButton' as IconPlaceholder)}
+          variants={filenames ? '' : 'icon'}
+          {...buttonProps}
+        />
+      </View>
+    )
+  }
+
+  return null
+})

package/src/components/Icon.tsx

@@ -1,35 +1,48 @@
 import * as React from 'react'
-import { ComponentVariants, IconPlaceholder, IconStyles, useComponentStyle, useStyle } from '@codeleap/common'
+import {
+  ComponentVariants,
+  IconPlaceholder,
+  IconStyles,
+  useDefaultComponentStyle,
+  useCodeleapContext,
+} from '@codeleap/common'
 import { StyleSheet } from 'react-native'
+import { View } from './View'
 
 export type IconProps = {
-    name:IconPlaceholder
-    style?: {
-      color: string
-      size?:string|number
-      width?:string|number
-      height?:string|number
-    }
-    variants?: ComponentVariants<typeof IconStyles>['variants']
-} 
- 
-export const Icon:React.FC<IconProps> = ({name, style, variants}) => {
-  const {Theme} = useStyle()
-  
-  if (!name) return null
+  name: IconPlaceholder
+  style?: any
+  color?: string
+  variants?: ComponentVariants<typeof IconStyles>['variants']
+  renderEmptySpace?: boolean
+  size?: number
+};
+
+export const Icon: React.FC<IconProps> = ({ name, style, variants, renderEmptySpace, ...otherProps }) => {
+  const { Theme, logger } = useCodeleapContext()
   
-  const Component = Theme?.icons?.[name]
-   
-  const {logger} = useStyle()
-  const variantStyles = useComponentStyle('Icon', {
+  const variantStyles = useDefaultComponentStyle('Icon', {
     variants,
+    transform: StyleSheet.flatten,
     styles: {
-      icon: StyleSheet.flatten([style]),
-    }
+      icon: style,
+    },
+    rootElement: 'icon',
   })
+ 
+  if (!name) {
+    return renderEmptySpace ? <View style={variantStyles.icon}/> : null
+  }
+
+  const Component = Theme?.icons?.[name]
+
   if (!Component) {
-    logger.warn('Icon', `No icon found in theme for name "${name}"`, 'Component')
+    logger.warn(
+      `Icon: No icon found in theme for name "${name}".`,
+      { props: { style, name, variants, variantStyles }},
+      'Component',
+    )
     return null
   }
-  return <Component style={variantStyles.icon}/>
+  return <Component {...otherProps} style={variantStyles.icon} />
 }

package/src/components/Image.tsx

@@ -1,43 +1,49 @@
 import * as React from 'react'
-import { ComponentVariants, ImageStyles, useComponentStyle } from "@codeleap/common"
-import { ComponentPropsWithoutRef } from "react"
-import { Image as NativeImage } from 'react-native'
-import {FastImage} from '../modules/fastImage'
+import {
+  ComponentVariants,
+  ImageStyles,
+  MobileInputFile,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { ComponentPropsWithoutRef } from 'react'
+import {
+  Image as NativeImage,
+  ImageStyle,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native'
+import { FastImage } from '../modules/fastImage'
 
-type NativeImageProps = ComponentPropsWithoutRef<typeof NativeImage>
-export type ImageProps = Omit<NativeImageProps, 'source'> & {
-    variants?: ComponentVariants<typeof ImageStyles>['variants']
-    fast?: boolean
-    source: NativeImageProps['source'] & {
-        priority?: keyof typeof FastImage.priority
-    }
-    resizeMode?: keyof typeof FastImage.resizeMode
-}
+type NativeImageProps = ComponentPropsWithoutRef<typeof NativeImage>;
+export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
+  variants?: ComponentVariants<typeof ImageStyles>['variants'];
+  fast?: boolean;
+  style?: StyleProp<ImageStyle | TextStyle | ViewStyle>;
+  source:
+    | (NativeImageProps['source'] & {
+        priority?: keyof typeof FastImage.priority;
+      })
+    | MobileInputFile
+    | string;
+  resizeMode?: keyof typeof FastImage.resizeMode;
+};
 
-export const Image:React.FC<ImageProps> = (props) => {
-    const {
-        variants,
-        style,
-        fast,
-        resizeMode,
-        resizeMethod,
-        ...imageProps
-    } = props
-    
-    const variantStyles = useComponentStyle('Image', {variants})
+export const Image: React.FC<ImageProps> = (props) => {
+  const { variants, style, fast = true, resizeMode = 'contain', ...imageProps } = props
 
-    const styles = [variantStyles.wrapper, style]
+  const variantStyles = useDefaultComponentStyle('Image', { variants })
 
+  const styles = [variantStyles.wrapper, style]
 
-    if(fast){
-        return <FastImage 
-            style={styles}
-            resizeMode={ FastImage.resizeMode[resizeMode || 'contain']}
-            {...imageProps}
-        />
-    }
-    return <NativeImage 
+  if (fast) {
+    return (
+      <FastImage
         style={styles}
+        resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
         {...imageProps}
-    />
-}
+      />
+    )
+  }
+  return <NativeImage style={styles} resizeMode={resizeMode} {...(imageProps as any)} />
+}

package/src/components/List.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+  useCodeleapContext,
+} from '@codeleap/common'
+import {
+  KeyboardAwareFlatListProps,
+  KeyboardAwareFlatList as KBDView,
+} from 'react-native-keyboard-aware-scroll-view'
+import { RefreshControl, FlatList } from 'react-native'
+import { View, ViewProps } from './View'
+
+export type FlatListProps = KeyboardAwareFlatListProps<any> &
+  ViewProps & {
+    onRefresh?: () => void;
+    refreshTimeout?: number;
+    changeData?: any;
+    separators?: boolean;
+  };
+
+const KeyboardAwareFlatList =
+  KBDView as unknown as React.ForwardRefExoticComponent<
+    ViewProps & {
+      refreshControl?: JSX.Element;
+      ref?: FlatList;
+    }
+  >
+
+export const List = forwardRef<FlatList, FlatListProps>(
+  (flatListProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      changeData,
+      ...props
+    } = flatListProps
+    const hasRefresh = !!props.onRefresh
+    const [refreshing, setRefreshing] = useState(false)
+
+    const timer = React.useRef(null)
+    const previousData = usePrevious(changeData)
+
+    const onRefresh = () => {
+      if (timer.current) {
+        clearTimeout(timer.current)
+      }
+
+      setRefreshing(true)
+
+      props.onRefresh()
+
+      timer.current = setTimeout(() => {
+        setRefreshing(false)
+      }, refreshTimeout)
+    }
+    onUpdate(() => {
+      if (refreshing && !deepEqual(previousData, changeData)) {
+        setRefreshing(false)
+        if (timer.current) {
+          clearTimeout(timer.current)
+        }
+      }
+    }, [refreshing, changeData])
+    const { Theme } = useCodeleapContext()
+
+    const variantStyles = useDefaultComponentStyle('View', {
+      variants,
+    })
+
+    const renderSeparator = () => {
+      return (
+        <View variants={['separator']}></View>
+      )
+    }
+
+    const separatorProp = props.separators
+    const isEmpty = !props.data || !props.data.length
+    const separator = !isEmpty && separatorProp == true && renderSeparator
+
+    return (
+      <KeyboardAwareFlatList
+        style={[Theme.presets.full, style]}
+        contentContainerStyle={[variantStyles.wrapper]}
+        ref={ref as unknown as FlatList}
+        ItemSeparatorComponent={separator}
+        {...props}
+        refreshControl={
+          hasRefresh && (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          )
+        }
+      />
+    )
+  },
+)