@codeleap/mobile 1.9.24 → 1.9.27

package/src/components/EmptyPlaceholder.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react'
+import { Icon } from './Icon'
+import { View } from './View'
+import { Text } from './Text'
+import { ActivityIndicator } from './ActivityIndicator'
+import {
+  ComponentVariants,
+  EmptyPlaceholderComposition,
+  EmptyPlaceholderStyles,
+  getNestedStylesByKey,
+  IconPlaceholder,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../types/utility'
+
+export type EmptyPlaceholderProps = {
+  itemName?: string
+  title?: string
+  loading?: boolean
+  styles?: StylesOf<EmptyPlaceholderComposition>
+  variants?: ComponentVariants<typeof EmptyPlaceholderStyles>['variants']
+  emptyIconName?: IconPlaceholder
+}
+
+export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPlaceholderProps) => {
+  const { itemName, title, loading, styles = {}, variants = [], emptyIconName = 'search' } = props
+  const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
+
+  const componentStyles = useDefaultComponentStyle('EmptyPlaceholder', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  const activityIndicatorStyles = useMemo(() => getNestedStylesByKey('loader', componentStyles)
+    , [componentStyles])
+
+  if (loading) {
+    return (
+      <View style={[componentStyles.wrapper, componentStyles['wrapper:loading']]} >
+        <ActivityIndicator styles={activityIndicatorStyles}/>
+      </View>
+    )
+  }
+
+  return (
+    <View style={componentStyles.wrapper}>
+      <Icon name={emptyIconName as IconPlaceholder} style={componentStyles.icon}/>
+      <Text text={emptyText} style={componentStyles.text}/>
+    </View>
+  )
+}

package/src/components/FileInput.tsx

@@ -1,230 +1,230 @@
-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: (string?: 'camera' | 'library') => 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>
-  onOpenFileSystem?: (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,
-  }
-}
-
-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 = null,
-    onOpenGallery = null,
-    onOpenFileSystem = null,
-    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' | 'fs', options?: Options) => {
-    if (open == 'fs') {
-      openFileSystem()
-    } else {
-      const call = open === 'camera' ? 'openCamera' : 'openPicker'
-      ImageCropPicker[call]({ ...mergedOptions, ...(options || {}) }).then(handlePickerResolution)
-    }
-  }
-  const openFilePicker = async (imageSource = null) => {
-    if (type === 'image') {
-      if (imageSource === 'camera') {
-        onPress('camera')
-      } else if (imageSource === 'library') {
-        onPress('library')
-      } else {
-        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 {
-      if (onOpenFileSystem) {
-        onOpenFileSystem(() => onPress('fs'))
-      } else {
-
-        onPress('fs')
-      }
-    }
-
-  }
-
-  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: (string?: 'camera' | 'library') => 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>
+  onOpenFileSystem?: (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,
+  }
+}
+
+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 = null,
+    onOpenGallery = null,
+    onOpenFileSystem = null,
+    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.warn(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' | 'fs', options?: Options) => {
+    if (open == 'fs') {
+      openFileSystem()
+    } else {
+      const call = open === 'camera' ? 'openCamera' : 'openPicker'
+      ImageCropPicker[call]({ ...mergedOptions, ...(options || {}) }).then(handlePickerResolution)
+    }
+  }
+  const openFilePicker = async (imageSource = null) => {
+    if (type === 'image') {
+      if (imageSource === 'camera') {
+        onPress('camera')
+      } else if (imageSource === 'library') {
+        onPress('library')
+      } else {
+        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 {
+      if (onOpenFileSystem) {
+        onOpenFileSystem(() => onPress('fs'))
+      } else {
+
+        onPress('fs')
+      }
+    }
+
+  }
+
+  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/Gap.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { useCodeleapContext } from '@codeleap/common'
+import { View, ViewProps } from './View'
+
+type GapProps = ViewProps & {
+    value: number
+
+    defaultProps?: any
+}
+
+export const Gap:React.FC<GapProps> = ({ children, value, defaultProps = {}, ...props }) => {
+  const { Theme } = useCodeleapContext()
+  const horizontal = props.variants?.includes('row')
+  return (
+    <View {...props}>
+      {
+        React.Children.toArray(children).map((Element, idx, childArr) => {
+          if (React.isValidElement(Element)) {
+            const props = { ...Element.props, ...defaultProps }
+
+            let spacingFunction = horizontal ? 'marginHorizontal' : 'marginVertical'
+            switch (idx) {
+              case 0:
+                spacingFunction = horizontal ? 'marginRight' : 'marginBottom'
+                break
+              case childArr.length - 1:
+                spacingFunction = horizontal ? 'marginLeft' : 'marginTop'
+                break
+              default:
+                break
+            }
+            props.style = [props.style, Theme.spacing[spacingFunction](value / 2)]
+            return React.cloneElement(Element, props)
+          }
+          return Element
+        })
+      }
+    </View>
+  )
+}

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)
+