@codeleap/mobile 2.3.0 → 2.3.2

package/src/components/FileInput/index.tsx

@@ -0,0 +1,181 @@
+import React, { forwardRef, useImperativeHandle } from 'react'
+import { DocumentPicker, ImageCropPicker } from '../../modules/documentPicker'
+import {
+  MobileInputFile,
+  parseFilePathData,
+  useCodeleapContext,
+  MobileFile,
+} from '@codeleap/common'
+import { OSAlert } from '../../utils'
+import { ImageOrVideo, Options } from 'react-native-image-crop-picker'
+import { DocumentPickerOptions } from '../../modules/types/documentPicker'
+
+export * from './styles'
+
+export type FileInputRef = {
+  openFilePicker: (string?: 'camera' | 'library') => void
+}
+
+export type FileInputProps = {
+  mode: 'hidden' | 'button'
+  onFileSelect(files: MobileInputFile<ImageOrVideo>[]): void
+  options?: DocumentPickerOptions<any>
+
+  ref?: FileInputRef
+
+  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 = {
+  cropping: true,
+}
+
+function parsePickerData(data:ImageOrVideo):MobileInputFile<ImageOrVideo> {
+
+  const filePathData = parseFilePathData(data.path)
+  const d:MobileFile = {
+    ...data,
+    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 {
+
+    onFileSelect,
+
+    options,
+    type = 'image',
+    alertProps,
+
+    pickerOptions,
+
+    onOpenCamera = null,
+    onOpenGallery = null,
+    onOpenFileSystem = null,
+    onError,
+  } = fileInputProps
+
+  const { logger } = useCodeleapContext()
+
+  async function openFileSystem() {
+    try {
+      let files = await DocumentPicker.pick(options)
+      if (!Array.isArray(files)) {
+        files = [files]
+      }
+
+      onFileSelect(files.map((file) => ({ preview: file.uri, file })))
+    } catch (err) {
+      handleError(err)
+    }
+  }
+
+  function handleError(err) {
+
+    logger.warn('File Input Error', err, 'FILE INPUT')
+    onError?.(err)
+
+  }
+
+  const mergedOptions = {
+    ...pickerDefaults,
+    ...pickerOptions,
+  } as Options
+
+  const handlePickerResolution = (data: ImageOrVideo | ImageOrVideo[]) => {
+    let imageArray:ImageOrVideo[] = []
+    if (!Array.isArray(data)) {
+      imageArray = [data]
+    } else {
+      imageArray = data
+    }
+    onFileSelect(imageArray.map(parsePickerData))
+  }
+  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')
+      }
+    }
+
+  }
+
+  useImperativeHandle(ref, () => ({
+    openFilePicker,
+  }))
+
+  return null
+})

package/src/components/FileInput/styles.ts

@@ -0,0 +1,15 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type FileInputComposition = 'label' | 'wrapper' | 'input'
+
+const createFileInputStyle =
+  createDefaultVariantFactory<FileInputComposition>()
+
+const presets = includePresets((styles) => createFileInputStyle(() => ({ wrapper: styles })),
+)
+
+export const FileInputStyles = {
+  ...presets,
+  default: createFileInputStyle((theme) => ({})),
+
+}

package/src/components/Grid/index.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+import { forwardRef } from 'react'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+} from '@codeleap/common'
+
+import { FlatGrid, FlatGridProps, GridRenderItemInfo } from 'react-native-super-grid'
+import { RefreshControl, StyleSheet, RefreshControlProps } from 'react-native'
+import { View, ViewProps } from '../View'
+import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { GridComposition, GridStyles } from './styles'
+import { StylesOf } from '../../types'
+import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
+
+export type DataboundFlatGridPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
+
+export type ReplaceFlatGridProps<P, T> = Omit<P, DataboundFlatGridPropsTypes> & {
+  data: T[]
+  keyExtractor?: (item: T, index: number) => string
+  renderItem: (data: GridRenderItemInfo<T>) => React.ReactElement
+  onRefresh?: () => void
+  getItemLayout?: ((
+    data:T,
+    index: number,
+) => { length: number; offset: number; index: number })
+}
+
+export * from './styles'
+
+export type GridProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> =FlatGridProps<Data> &
+  Omit<ViewProps, 'variants'> & {
+    separators?: boolean
+    placeholder?: EmptyPlaceholderProps
+    keyboardAware?: GetKeyboardAwarePropsOptions
+    debugName?: string
+    styles?: StylesOf<GridComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+  } & ComponentVariants<typeof GridStyles>
+
+const GridCP = forwardRef<FlatGrid, GridProps>(
+  (flatGridProps, ref) => {
+    const {
+      variants = [],
+      style,
+      styles = {},
+      onRefresh,
+      refreshing,
+      placeholder,
+      keyboardAware,
+      debugName,
+      refreshControlProps = {},
+      ...props
+    } = flatGridProps
+
+    const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridStyles>('u:Grid', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+
+    })
+
+    const renderSeparator = () => {
+      return (
+        <View variants={['separator']}></View>
+      )
+    }
+
+    const separatorProp = props.separators
+    const isEmpty = !props.data || !props.data.length
+    const separator = !isEmpty && separatorProp == true && renderSeparator
+
+    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
+    const Component = FlatGrid
+
+    const _gridProps = {
+      style: [variantStyles.wrapper, style],
+      contentContainerStyle: variantStyles.content,
+      ref: ref as unknown as FlatGrid,
+      ItemSeparatorComponent: separator,
+      refreshControl:
+          !!onRefresh && (
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor={refreshStyles?.color}
+              colors={[refreshStyles?.color]}
+              {...refreshControlProps}
+            />
+          ),
+
+      ListEmptyComponent: <EmptyPlaceholder {...placeholder}/>,
+      ...props,
+    }
+    const keyboard = useKeyboardAwareView({
+      debugName,
+    })
+    const gridProps = keyboard.getKeyboardAwareProps(_gridProps, {
+      baseStyleProp: 'contentContainerStyle',
+      adapt: 'paddingBottom',
+      ...keyboardAware,
+    })
+    return (
+      <Component
+        {...gridProps}
+      />
+    )
+  },
+)
+
+export type GridComponentType = <T extends any[] = any[]>(props: FlatGridProps<T>) => React.ReactElement
+
+export const Grid = GridCP as GridComponentType
+

package/src/components/Grid/styles.ts

@@ -0,0 +1,11 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+import { ListComposition, ListStyles } from '../List'
+
+export type GridComposition = ListComposition
+
+const createGridStyle = createDefaultVariantFactory<GridComposition>()
+
+export const GridStyles = {
+  ...ListStyles,
+
+}

package/src/components/Icon/index.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import {
+  ComponentVariants,
+
+  useDefaultComponentStyle,
+  useCodeleapContext,
+  arePropsEqual,
+  IconPlaceholder,
+  onMount,
+  onUpdate,
+} from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { View } from '../View'
+export * from './styles'
+
+import {
+  IconStyles,
+} from './styles'
+
+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<'u:Icon', typeof IconStyles>('u:Icon', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles: {
+      icon: style,
+    },
+    rootElement: 'icon',
+  })
+  const Component = Theme?.icons?.[name]
+  onUpdate(() => {
+    if (!Component && !!name) {
+      logger.warn(
+        `Icon: No icon found in theme for name "${name}".`,
+        { props: { style, name, variants, variantStyles }},
+        'Component',
+      )
+    }
+  }, [name])
+
+  if (!name) {
+    return renderEmptySpace ? <View style={variantStyles.icon}/> : null
+  }
+
+  if (!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/Icon/styles.ts

@@ -0,0 +1,57 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type IconComposition = 'icon'
+
+const createIconStyle = createDefaultVariantFactory<IconComposition>()
+
+const presets = includePresets((styles) => createIconStyle(() => ({ icon: styles })))
+
+export const IconStyles = {
+  ...presets,
+  default: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.icon,
+    },
+  })),
+  originalColor: createIconStyle(theme => ({
+    icon: {
+      color: 'auto',
+    },
+  })),
+  white: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.white,
+    },
+  })),
+
+  primary: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.primary,
+    },
+  })),
+  negative: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.negative,
+    },
+  })),
+  positive: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.positive,
+    },
+  })),
+  small: createIconStyle((theme) => ({
+    icon: {
+      ...theme.sized(1),
+    },
+  })),
+  medium: createIconStyle((theme) => ({
+    icon: {
+      ...theme.sized(2),
+    },
+  })),
+  large: createIconStyle((theme) => ({
+    icon: {
+      ...theme.sized(3),
+    },
+  })),
+}

package/src/components/Image/index.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import {
+  ComponentVariants,
+
+  useDefaultComponentStyle,
+  arePropsEqual,
+  FormTypes,
+  TypeGuards,
+} from '@codeleap/common'
+import { ComponentPropsWithoutRef } from 'react'
+import {
+  Image as NativeImage,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  ViewStyle,
+} from 'react-native'
+import { FastImage } from '../../modules/fastImage'
+import {
+  ImageStyles,
+} from './styles'
+import { useImageSpotlight } from '../ImageView/Spotlight'
+import { Touchable } from '../Touchable'
+import { isFile, toMultipartFile } from '../../utils'
+export * from './styles'
+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
+      })
+    | FormTypes.AnyFile
+    | string
+    | number
+  resizeMode?: keyof typeof FastImage.resizeMode
+  spotlight?: string
+}
+
+export const ImageComponent: React.FC<ImageProps> = (props) => {
+  const { variants, style, fast = true, spotlight = null, resizeMode = 'contain', source, ...imageProps } = props
+
+  const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImageStyles>('u:Image', { variants })
+
+  const styles = StyleSheet.flatten([variantStyles.wrapper, style])
+  let imSource = source
+  if (isFile(imSource)) {
+    imSource = toMultipartFile(imSource)
+  } else if (TypeGuards.isString(source)) {
+    imSource = { uri: source }
+  }
+  const spotlightActions = useImageSpotlight(spotlight, props.source)
+  const Wrapper = !!spotlight ? Touchable : ({ children }) => <>{children}</>
+  const wrapperProps = {
+    onPress: spotlightActions.onImagePressed,
+    debugName: `Press spotlight image ${props.source}`,
+    style: [variantStyles.touchable],
+    android_ripple: null,
+  }
+  if (fast) {
+    return (
+      <Wrapper {...wrapperProps}>
+
+        <FastImage
+          style={styles}
+          // @ts-ignore
+          tintColor={styles?.tintColor}
+          source={imSource}
+          resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
+          {...imageProps}
+        />
+      </Wrapper>
+    )
+  }
+  return <Wrapper {...wrapperProps}>
+    <NativeImage style={styles} resizeMode={resizeMode} source={imSource} {...(imageProps as any)} />
+
+  </Wrapper>
+}
+
+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)
+

package/src/components/Image/styles.ts

@@ -0,0 +1,20 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ImageComposition = 'wrapper' | 'touchable'
+const createImageStyle = createDefaultVariantFactory<ImageComposition>()
+
+const presets = includePresets((styles) => createImageStyle(() => ({ wrapper: styles, touchable: styles })),
+)
+
+export const ImageStyles = {
+  ...presets,
+  default: createImageStyle(() => ({
+    wrapper: {},
+  })),
+
+  round: createImageStyle(() => ({
+    wrapper: {
+      borderRadius: 100,
+    },
+  })),
+}