@codeleap/mobile 2.2.10 → 2.3.0

package/src/components/ContentView/index.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import {
-
-  ComponentVariants,
-  useDefaultComponentStyle,
-
-} from '@codeleap/common'
-import {
-  ContentViewStyles,
-} from './styles'
-import { ViewProps, View, ViewComposition } from '../View'
-import { Text } from '../Text'
-import { StylesOf } from '../../types'
-import { ActivityIndicator } from '../ActivityIndicator'
-import { StyleSheet } from 'react-native'
-
-export * from './styles'
-
-export type ContentViewProps = Omit<
-  ViewProps,
-  'variants' | 'responsiveVariants'
-> & {
-  message?: string
-  loading?: boolean
-  styles?: StylesOf<ViewComposition>
-} & ComponentVariants<typeof ContentViewStyles>
-
-const WrapContent = ({ children, ...props }) => (
-  <View {...props}>{children}</View>
-)
-
-export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
-  const { children, message, loading, variants, styles, ...props } =
-    rawProps
-
-  const variantStyle = useDefaultComponentStyle('ContentView', {
-    variants,
-    transform: StyleSheet.flatten,
-    styles,
-  })
-
-  if (loading) {
-    return (
-      <WrapContent {...props} style={variantStyle.wrapper}>
-        <ActivityIndicator styles={{ wrapper: variantStyle.loader }} />
-      </WrapContent>
-    )
-  }
-  const hasChildren = Object.keys(children || {}).length > 0
-  if (hasChildren) {
-    return (
-      <WrapContent {...props} style={variantStyle.wrapper}>
-        {children}
-      </WrapContent>
-    )
-  }
-
-  return (
-    <WrapContent {...props} style={styles}>
-      <Text text={message} />
-    </WrapContent>
-  )
-}

package/src/components/ContentView/styles.ts

@@ -1,24 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-export type ContentViewComposition = 'placeholder' | 'wrapper' | 'loader'
-
-const createContentViewStyle =
-  createDefaultVariantFactory<ContentViewComposition>()
-
-const presets = includePresets((styles) => createContentViewStyle(() => ({ wrapper: styles })),
-)
-
-export const ContentViewStyles = {
-  ...presets,
-  default: createContentViewStyle((theme) => ({
-    wrapper: {
-      display: 'flex',
-      ...theme.presets.column,
-    },
-    loader: {
-      alignSelf: 'center',
-      height: theme.values.width * 0.15,
-      width: theme.values.width * 0.15,
-    },
-  })),
-}

package/src/components/Drawer/index.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react'
-
-import { ComponentVariants, useDefaultComponentStyle } from '@codeleap/common'
-import { StyleSheet } from 'react-native'
-import Modal, { ModalProps } from '../Modal'
-import { DrawerStyles } from './styles'
-export * from './styles'
-export type DrawerProps = Omit<ModalProps, 'variants'> & ComponentVariants<typeof DrawerStyles>
-
-export const Drawer:React.FC<DrawerProps> = (props) => {
-  const { variants, styles, scrollProps, ...modalProps } = props
-
-  const variantStyles = useDefaultComponentStyle('u:Drawer', {
-    variants,
-    styles,
-    transform: StyleSheet.flatten,
-  })
-
-  return <Modal
-    styles={variantStyles}
-    scroll={false}
-
-    {...modalProps}
-    scrollProps={{
-      ...scrollProps,
-      keyboardAware: {
-
-        enabled: false,
-        ...scrollProps?.keyboardAware,
-      },
-    }}
-  />
-}

package/src/components/Drawer/styles.ts

@@ -1,43 +0,0 @@
-import { createDefaultVariantFactory } from '@codeleap/common'
-import { ModalComposition, ModalStyles } from '../Modal'
-
-export type DrawerComposition = ModalComposition
-const createDrawerStyle = createDefaultVariantFactory<DrawerComposition>()
-
-export const DrawerStyles = {
-  ...ModalStyles,
-  default: createDrawerStyle((theme) => {
-    const defaultStyle = ModalStyles.default(theme)
-
-    return {
-      ...defaultStyle,
-      box: {
-        width: '100%',
-        paddingBottom: 0,
-        paddingTop: 0,
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-        maxHeight: '100%',
-
-      },
-      innerWrapper: {
-        ...theme.presets.justifyEnd,
-
-      },
-
-      'box:hidden': {
-        translateY: theme.values.height,
-        opacity: 1,
-        scale: 1,
-      },
-      'box:visible': {
-        translateY: 0,
-        scale: 1,
-        opacity: 1,
-      },
-      'box:transition': {
-        translateY: theme.values.transitions.modal,
-      },
-    }
-  }),
-}

package/src/components/EmptyPlaceholder/index.tsx

@@ -1,88 +0,0 @@
-import React, { useMemo } from 'react'
-import { Icon } from '../Icon'
-import { View } from '../View'
-import { Text } from '../Text'
-import { ActivityIndicator, ActivityIndicatorComposition } from '../ActivityIndicator'
-import {
-  ComponentVariants,
-
-  getNestedStylesByKey,
-  IconPlaceholder,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-
-import {
-  EmptyPlaceholderComposition,
-  EmptyPlaceholderStyles,
-} from './styles'
-
-import { StyleSheet } from 'react-native'
-import { StylesOf } from '../../types'
-
-export * from './styles'
-
-export type EmptyPlaceholderProps = {
-  itemName?: string
-  title?: React.ReactElement
-  loading?: boolean
-  styles?: StylesOf<EmptyPlaceholderComposition>
-  variants?: ComponentVariants<typeof EmptyPlaceholderStyles>['variants']
-  emptyIconName?: IconPlaceholder
-  renderEmpty?: (props: {
-    emptyText:string | React.ReactElement
-    emptyIconName?: IconPlaceholder
-    styles: StylesOf<EmptyPlaceholderComposition> & {activityIndicatorStyles: StylesOf<ActivityIndicatorComposition>}
-  }) => React.ReactElement
-}
-
-export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPlaceholderProps) => {
-  const {
-    itemName,
-    title,
-    loading,
-    styles = {},
-    variants = [],
-    emptyIconName = 'placeholder',
-    renderEmpty,
-  } = 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>
-    )
-  }
-
-  if (renderEmpty) {
-    return (
-      <View style={componentStyles.wrapper}>
-        {renderEmpty({
-          emptyText,
-          emptyIconName: emptyIconName as IconPlaceholder,
-          styles: {
-            ...componentStyles,
-            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/EmptyPlaceholder/styles.ts

@@ -1,58 +0,0 @@
-import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { ActivityIndicatorComposition } from '../ActivityIndicator'
-
-export type EmptyPlaceholderComposition =
-  | 'wrapper:loading'
-  | `loader${Capitalize<ActivityIndicatorComposition>}`
-  | 'wrapper'
-  | 'text'
-  | 'icon'
-
-const createEmptyPlaceholderStyle = createDefaultVariantFactory<EmptyPlaceholderComposition>()
-
-const presets = includePresets((styles) => createEmptyPlaceholderStyle(() => ({ wrapper: styles })),
-)
-
-export const EmptyPlaceholderStyles = {
-  ...presets,
-  default: createEmptyPlaceholderStyle((theme) => ({
-    wrapper: {
-      ...theme.presets.center,
-      minHeight: theme.values.window.height / 2,
-      height: '100%',
-      flex: 1,
-    },
-    loaderWrapper: {
-
-      ...theme.spacing.marginVertical(8),
-      ...theme.presets.center,
-      ...theme.presets.flex,
-    },
-    icon: {
-      color: theme.colors.placeholder,
-      size: theme.spacing.value(24),
-    },
-    text: {
-      ...assignTextStyle('p1')(theme).text,
-      ...theme.presets.textCenter,
-    },
-  })),
-  compact: createEmptyPlaceholderStyle((theme) => ({
-    wrapper: {
-      ...theme.spacing.marginVertical(0),
-      marginBottom: theme.spacing.value(6),
-    },
-  })),
-  absolute: createEmptyPlaceholderStyle((theme) => ({
-    'wrapper:loading': {
-      ...theme.presets.absolute,
-      ...theme.presets.whole,
-      backgroundColor: theme.colors.background,
-    },
-    wrapper: {
-      ...theme.presets.absolute,
-      ...theme.presets.whole,
-      backgroundColor: theme.colors.background,
-    },
-  })),
-}

package/src/components/FileInput/index.tsx

@@ -1,181 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

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