@codeleap/mobile 1.9.11 → 1.9.14

package/src/components/FileInput.tsx

@@ -1,181 +1,220 @@
-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 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>
-  required?: boolean
-}
-
-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,
-    required,
-    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: 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],
-          },
-          {
-            text: 'Cancel',
-            style: 'cancel',
-            onPress: () => {},
-            ...alertProps?.options[0],
-          },
-
-        ],
-      })
-    } 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} required={required}/>
-        <Button
-          onPress={() => openFilePicker()}
-          text={filenames || placeholder}
-          debugName={'Open file picker'}
-          icon={iconName || ('fileInputButton' as IconPlaceholder)}
-          variants={filenames ? '' : 'icon'}
-          {...buttonProps}
-        />
-      </View>
-    )
-  }
-
-  return null
-})
+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 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>
+  required?: boolean
+  onOpenCamera?: (resolve: (() => void)) => Promise<void>
+  onOpenGallery?: (resolve: (() => void)) => Promise<void>
+  onError?: (error: any) => void
+}
+
+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,
+  }
+}
+
+const emptyPromise = async () => {
+  return
+}
+
+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,
+    required,
+    buttonProps,
+    onOpenCamera = emptyPromise,
+    onOpenGallery = emptyPromise,
+    onError,
+  } = 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) {
+      handleError(err)
+    }
+  }
+
+  function handleError(err) {
+    const warn = DocumentPicker.isCancel(err) || String(err).includes('Error: User cancelled')
+    if (warn) {
+      // NOTE yeah, it should not be both of course but just logger.* isn't showing for some reason
+      logger.warn(err)
+      console.warn(err)
+    } else {
+      // NOTE yeah, it should not be both of course but just logger.* isn't showing for some reason
+      logger.error(err)
+      console.error(err)
+      if (onError) {
+        onError(err)
+      } else {
+        OSAlert.error({
+          title: 'Error',
+          body: err.message,
+        })
+      }
+    }
+  }
+
+  const mergedOptions = {
+    ...pickerDefaults,
+    ...pickerOptions,
+  } as Options
+
+  const handlePickerResolution = data => {
+    onFileSelect(mergedOptions.multiple ? data.map(parsePickerData) : [
+      parsePickerData(data),
+    ])
+  }
+  const onPress = (open?: 'camera' | 'library') => {
+    const call = open === 'camera' ? 'openCamera' : 'openPicker'
+    ImageCropPicker[call](mergedOptions).then(handlePickerResolution)
+  }
+  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: alertProps?.options?.[0]?.text || 'Camera',
+            onPress: () => {
+              if (onOpenCamera) {
+                onOpenCamera(() => onPress('camera'))
+              } else {
+                onPress('camera')
+              }
+
+            },
+            ...alertProps?.options[1],
+          },
+          {
+            text: 'Library',
+            onPress: () => {
+              if (onOpenGallery) {
+                onOpenGallery(() => onPress('library'))
+              } else {
+                onPress('library')
+              }
+
+            },
+            ...alertProps?.options[2],
+          },
+          {
+            text: 'Cancel',
+            style: 'cancel',
+            onPress: () => {},
+            ...alertProps?.options[0],
+          },
+
+        ],
+      })
+    } 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} required={required}/>
+        <Button
+          onPress={() => openFilePicker()}
+          text={filenames || placeholder}
+          debugName={'Open file picker'}
+          icon={iconName || ('fileInputButton' as IconPlaceholder)}
+          variants={filenames ? '' : 'icon'}
+          {...buttonProps}
+        />
+      </View>
+    )
+  }
+
+  return null
+})

package/src/components/Icon.tsx

@@ -1,58 +1,58 @@
-import * as React from 'react'
-import {
-  ComponentVariants,
-  IconPlaceholder,
-  IconStyles,
-  useDefaultComponentStyle,
-  useCodeleapContext,
-  arePropsEqual,
-} from '@codeleap/common'
-import { StyleSheet } from 'react-native'
-import { View } from './View'
-
-export type IconProps = {
-  name: IconPlaceholder
-  style?: any
-  color?: string
-  variants?: ComponentVariants<typeof IconStyles>['variants']
-  renderEmptySpace?: boolean
-  size?: number
-}
-
-export const IconComponent: React.FC<IconProps> = ({ name, style, variants, renderEmptySpace, ...otherProps }) => {
-  const { Theme, logger } = useCodeleapContext()
-
-  const variantStyles = useDefaultComponentStyle('Icon', {
-    variants,
-    transform: StyleSheet.flatten,
-    styles: {
-      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}".`,
-      { props: { style, name, variants, variantStyles }},
-      'Component',
-    )
-    return null
-  }
-  return <Component {...otherProps} style={variantStyles.icon} />
-}
-
-function areEqual(prevProps, nextProps) {
-  const check = ['name', 'style', 'variants', 'renderEmptySpace']
-  const res = arePropsEqual(prevProps, nextProps, { check })
-  return res
-}
-
-export const Icon = React.memo(IconComponent, areEqual)
-
+import * as React from 'react'
+import {
+  ComponentVariants,
+  IconPlaceholder,
+  IconStyles,
+  useDefaultComponentStyle,
+  useCodeleapContext,
+  arePropsEqual,
+} from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { View } from './View'
+
+export type IconProps = {
+  name: IconPlaceholder
+  style?: any
+  color?: string
+  variants?: ComponentVariants<typeof IconStyles>['variants']
+  renderEmptySpace?: boolean
+  size?: number
+}
+
+export const IconComponent: React.FC<IconProps> = ({ name, style, variants, renderEmptySpace, ...otherProps }) => {
+  const { Theme, logger } = useCodeleapContext()
+
+  const variantStyles = useDefaultComponentStyle('Icon', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles: {
+      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}".`,
+      { props: { style, name, variants, variantStyles }},
+      'Component',
+    )
+    return null
+  }
+  return <Component {...otherProps} style={variantStyles.icon} />
+}
+
+function areEqual(prevProps, nextProps) {
+  const check = ['name', 'style', 'variants', 'renderEmptySpace']
+  const res = arePropsEqual(prevProps, nextProps, { check })
+  return res
+}
+
+export const Icon = React.memo(IconComponent, areEqual)
+

package/src/components/Image.tsx

@@ -1,61 +1,61 @@
-import * as React from 'react'
-import {
-  ComponentVariants,
-  ImageStyles,
-  MobileInputFile,
-  useDefaultComponentStyle,
-  arePropsEqual,
-} 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' | '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 ImageComponent: React.FC<ImageProps> = (props) => {
-  const { variants, style, fast = true, resizeMode = 'contain', ...imageProps } = props
-
-  const variantStyles = useDefaultComponentStyle('Image', { variants })
-
-  const styles = [variantStyles.wrapper, style]
-
-  if (fast) {
-    return (
-      <FastImage
-        style={styles}
-        // @ts-ignore
-        tintColor={style?.tintColor}
-        resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
-        {...imageProps}
-      />
-    )
-  }
-  return <NativeImage style={styles} resizeMode={resizeMode} {...(imageProps as any)} />
-}
-
-function areEqual(prevProps, nextProps) {
-  const check = ['source', 'style', 'variants', 'resizeMode', 'fast']
-  const res = arePropsEqual(prevProps, nextProps, { check })
-  return res
-}
-
-export const Image = React.memo(ImageComponent, areEqual)
-
+import * as React from 'react'
+import {
+  ComponentVariants,
+  ImageStyles,
+  MobileInputFile,
+  useDefaultComponentStyle,
+  arePropsEqual,
+} 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' | '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 ImageComponent: React.FC<ImageProps> = (props) => {
+  const { variants, style, fast = true, resizeMode = 'contain', ...imageProps } = props
+
+  const variantStyles = useDefaultComponentStyle('Image', { variants })
+
+  const styles = [variantStyles.wrapper, style]
+
+  if (fast) {
+    return (
+      <FastImage
+        style={styles}
+        // @ts-ignore
+        tintColor={style?.tintColor}
+        resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
+        {...imageProps}
+      />
+    )
+  }
+  return <NativeImage style={styles} resizeMode={resizeMode} {...(imageProps as any)} />
+}
+
+function areEqual(prevProps, nextProps) {
+  const check = ['source', 'style', 'variants', 'resizeMode', 'fast']
+  const res = arePropsEqual(prevProps, nextProps, { check })
+  return res
+}
+
+export const Image = React.memo(ImageComponent, areEqual)
+