@codeleap/mobile 2.3.7 → 2.3.10

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,81 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
+
+type CheckboxParts =
+  | 'wrapper'
+  | 'input'
+  | 'inputFeedback'
+  | 'checkmark'
+  | 'checkmarkWrapper'
+  | 'error'
+  | `label${Capitalize<InputLabelComposition>}`
+
+export type CheckboxComposition =
+  | CheckboxParts
+  | `${CheckboxParts}:checked`
+  | `${CheckboxParts}:disabled`
+  | `${CheckboxParts}:error`
+const createCheckboxStyle =
+  createDefaultVariantFactory<CheckboxComposition>()
+
+const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })),
+)
+
+export const CheckboxStyles = {
+  ...presets,
+  default: createCheckboxStyle((theme) => {
+    const size = theme.typography.baseFontSize * 1.2
+
+    const markHeight = size * 0.5
+    const markWidth = size * 0.25
+
+    const translateX = -(markWidth / 2)
+    const translateY = -(markHeight / 2)
+    return {
+      wrapper: {},
+      input: {
+        flexDirection: 'row',
+        ...theme.presets.alignCenter,
+
+      },
+      labelWrapper: {
+        // flex: 1,
+        ...theme.spacing.marginLeft(1),
+
+      },
+      inputFeedback: {
+        type: 'opacity',
+        value: 0.5,
+      },
+
+      checkmark: {
+        position: 'absolute',
+        top: '40%',
+        left: '50%',
+
+        height: markHeight,
+        width: markWidth,
+        transform: [{ translateX }, { translateY }, { rotate: '45deg' }],
+      },
+      'checkmark:checked': {
+        ...theme.border.white({
+          width: 2,
+          directions: ['right', 'bottom'],
+        }),
+      },
+      checkmarkWrapper: {
+        position: 'relative',
+        width: size,
+        borderRadius: theme.borderRadius.small,
+        height: size,
+        ...theme.border.neutral(1),
+      },
+      'checkmarkWrapper:checked': {
+        backgroundColor: theme.colors.primary,
+      },
+      error: {
+        color: theme.colors.negative,
+      },
+    }
+  }),
+}

package/src/components/ContentView/index.tsx

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

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

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

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

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

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

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