@codeleap/mobile 4.0.1 → 4.1.0

package/src/components/PlacesAutocomplete/index.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback } from 'react'
+import { AnyRecord, AppIcon, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
+import { useStylesFor } from '../../hooks'
+import { Text } from '../Text'
+import { View } from '../View'
+import { PlaceItem, PlacesAutocompleteProps } from './types'
+import { MobileStyleRegistry } from '../../Registry'
+import { TextInput } from '../TextInput'
+import { List } from '../List'
+import { Touchable } from '../Touchable'
+import { EmptyPlaceholder } from '../EmptyPlaceholder'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { usePlacesAutocompleteUtils } from '@codeleap/common'
+
+export * from './styles'
+export * from './types'
+
+const DefaultPlaceRow: PlacesAutocompleteProps['renderPlaceRow'] = (props) => {
+  const { item, onPress, styles } = props
+
+  if (item?.content) {
+    return item?.content
+  }
+
+  const isLatLng = !!item?.formatted_address
+
+  const mainTitle = isLatLng ? item?.formatted_address : item?.description
+
+  return (
+    <Touchable onPress={() => onPress(mainTitle, item)} debugName={`PlaceRow ${item?.place_id}`} style={styles.placeRowWrapper}>
+      <Text text={`${mainTitle}`} style={styles.placeRowText} />
+    </Touchable>
+  )
+}
+
+export const PlacesAutocomplete = (props: PlacesAutocompleteProps) => {
+  const {
+    style,
+    itemRow,
+    data = [],
+    customData = [],
+    onPress,
+    onValueChange,
+    showClearIcon,
+    showEmptyPlaceholder,
+    clearIcon,
+    textInputProps,
+    listProps,
+    emptyPlaceholderProps,
+    placeRow = null,
+    renderPlaceRow: PlaceRow,
+    activityIndicatorProps,
+    debounce,
+    isLoading,
+    persistResultsOnBlur,
+    ...rest
+  } = props
+
+  const [isFocused, setIsFocused] = React.useState(false)
+
+  const styles = useStylesFor(PlacesAutocomplete.styleRegistryName, style)
+  const compositionStyles = useCompositionStyles(['input', 'list', 'loader'], styles)
+
+  const {
+    handleChangeAddress,
+    handlePressAddress,
+    handleClearAddress,
+    address,
+    isTyping,
+    setIsTyping,
+  } = usePlacesAutocompleteUtils<PlaceItem>({
+    onValueChange,
+    onPress,
+  })
+
+  const _showEmptyPlaceholder = !!address && !isTyping && showEmptyPlaceholder && !isLoading
+
+  const showResults = isFocused || persistResultsOnBlur
+
+  const _showClearIcon = showClearIcon && !!address?.trim?.()
+
+  const rightIcon = _showClearIcon ? {
+    name: clearIcon,
+    onPress: handleClearAddress,
+  } : textInputProps?.rightIcon
+
+  const _data = customData?.length > 0 && address ? [...customData, ...data] : data
+  const hasCustomValue = !!textInputProps?.value
+
+  const renderItem = useCallback((props) => {
+    return (
+      placeRow ? placeRow : <PlaceRow onPress={handlePressAddress} styles={styles} {...props} />
+    )
+  }, [placeRow])
+
+  return (
+    <View style={styles.wrapper} {...rest}>
+      <TextInput
+        style={compositionStyles.input}
+        onChangeText={(value) => {
+          setIsTyping(true)
+          handleChangeAddress(value)
+        }}
+        onBlur={() => {
+          setIsFocused(false)
+        }}
+        onFocus={() => {
+          setIsFocused(true)
+        }}
+        {...textInputProps}
+        value={hasCustomValue ? textInputProps?.value : address}
+        rightIcon={rightIcon}
+      />
+      {isTyping ? (
+        <View style={styles.loadingWrapper}>
+          <ActivityIndicator style={compositionStyles.loader} {...activityIndicatorProps} />
+        </View>
+      ) : (
+        showResults ? (
+          <List
+            data={_data}
+            renderItem={renderItem}
+            ListEmptyComponent={
+              _showEmptyPlaceholder ? <EmptyPlaceholder {...emptyPlaceholderProps} /> : null
+            }
+            style={compositionStyles.list}
+            separators
+            {...listProps}
+          />
+        ) : null
+      )
+      }
+    </View>
+  )
+}
+
+PlacesAutocomplete.styleRegistryName = 'PlacesAutocomplete'
+PlacesAutocomplete.elements = ['wrapper', 'input', 'list', 'loader', 'placeRow', 'loadingWrapper']
+PlacesAutocomplete.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return PlacesAutocomplete as (props: StyledComponentProps<PlacesAutocompleteProps, typeof styles>) => IJSX
+}
+
+PlacesAutocomplete.defaultProps = {
+  showClearIcon: false,
+  showEmptyPlaceholder: true,
+  clearIcon: 'x' as AppIcon,
+  placeRowComponent: DefaultPlaceRow,
+  renderPlaceRow: DefaultPlaceRow,
+  debounce: 250,
+}
+
+MobileStyleRegistry.registerComponent(PlacesAutocomplete)

package/src/components/PlacesAutocomplete/styles.ts

@@ -0,0 +1,12 @@
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+import { ListComposition } from '../List'
+import { TextInputComposition } from '../TextInput'
+
+export type PlacesAutocompleteComposition =
+  `input${Capitalize<TextInputComposition>}` |
+  `list${Capitalize<ListComposition>}` |
+  `loader${Capitalize<ActivityIndicatorComposition>}` |
+  'placeRowWrapper' |
+  'placeRowText' |
+  'wrapper' |
+  'loadingWrapper'

package/src/components/PlacesAutocomplete/types.ts

@@ -0,0 +1,42 @@
+import { AppIcon, ICSS, StyledProp } from '@codeleap/styles'
+import { PlacesAutocompleteComposition } from './styles'
+import { TextInputProps } from '../TextInput'
+import { FlatListProps } from '../List'
+import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { ActivityIndicatorProps } from '../ActivityIndicator'
+import { PlaceAddress, PlaceLatLng } from '@codeleap/common'
+
+export type CustomData = {
+  item?: Partial<PlaceAddress> & Partial<PlaceLatLng>
+  content?: JSX.Element
+}
+
+export type PlaceItem = PlaceAddress & PlaceLatLng & { content?: JSX.Element }
+
+export type PlaceRowProps = {
+  item?: PlaceItem
+  styles?: Record<PlacesAutocompleteComposition, ICSS>
+  onPress?: PlacesAutocompleteProps['onPress']
+}
+
+export type PlacesAutocompleteProps = {
+  style?: StyledProp<PlacesAutocompleteComposition>
+  itemRow?: (props: any) => JSX.Element
+  textInputProps?: TextInputProps
+  emptyPlaceholderProps?: EmptyPlaceholderProps
+  listProps?: FlatListProps
+  data: PlaceAddress[] | PlaceLatLng[]
+  customData?: CustomData[]
+  onPress?: (address: string, place: PlaceItem) => void
+  onValueChange?: (address: string) => void
+  showClearIcon?: boolean
+  showEmptyPlaceholder?: boolean
+  clearIcon?: AppIcon
+  placeRowComponent?: React.ComponentType<PlaceRowProps>
+  renderPlaceRow?: (props: PlaceRowProps) => React.ReactElement
+  placeRow?: React.ReactElement
+  debounce?: number
+  activityIndicatorProps?: ActivityIndicatorProps
+  persistResultsOnBlur?: boolean
+  isLoading?: boolean
+}

package/src/components/Select/index.tsx

@@ -6,7 +6,7 @@ import {
   onUpdate,
   usePrevious,
   useSearch,
-  useBooleanToggle,
+  useConditionalState,
 } from '@codeleap/common'
 import React, { useCallback, useMemo } from 'react'
 import { List } from '../List'
@@ -35,10 +35,11 @@ const defaultFilterFunction = (search: string, options: FormTypes.Options<any>)
 
 const defaultGetLabel = (option) => {
   if (TypeGuards.isArray(option)) {
-    if (option.length === 0) return null
-
-    return option.map(o => o.label).join(', ')
+    if (option?.length === 0) return null
 
+    const labels = option?.map(option => option?.label)?.filter(value => !!value)
+    
+    return labels?.join(', ')
   } else {
     if (!option) return null
     return option?.label
@@ -140,7 +141,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
     onLoadOptionsError,
   })
 
-  const [visible, toggle] = TypeGuards.isBoolean(_visible) && !!_toggle ? [_visible, _toggle] : useBooleanToggle(false)
+  const [visible, toggle] = useConditionalState(_visible, _toggle, { initialValue: false, isBooleanToggle: true })
 
   const currentValueLabel = useMemo(() => {
     const _options = (multiple ? labelOptions : labelOptions?.[0]) as Multi extends true ? FormTypes.Options<T> : FormTypes.Options<T>[number]
@@ -174,19 +175,15 @@ export const Select = <T extends string | number = string, Multi extends boolean
 
   const select = useCallback((selectedValue) => {
     let newValue = null
-
     let newOption = null
     let removedIndex = null
 
     if (multiple && isValueArray) {
-
       if (value.includes(selectedValue)) {
         removedIndex = value.findIndex(v => v === selectedValue)
 
         newValue = value.filter((v, i) => i !== removedIndex)
-
       } else {
-
         if (TypeGuards.isNumber(limit) && value.length >= limit) {
           return
         }
@@ -195,7 +192,6 @@ export const Select = <T extends string | number = string, Multi extends boolean
 
         newValue = [...value, selectedValue]
       }
-
     } else {
       newValue = selectedValue
       newOption = currentOptions.find(o => o.value === selectedValue)
@@ -209,7 +205,8 @@ export const Select = <T extends string | number = string, Multi extends boolean
         newOptions.splice(removedIndex, 1)
         setLabelOptions(newOptions)
       } else {
-        setLabelOptions([...labelOptions, newOption])
+        const newLabels = [...labelOptions, newOption]
+        setLabelOptions(newLabels)
       }
     } else {
       setLabelOptions([newOption])
@@ -218,7 +215,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
     if (closeOnSelect) {
       close?.()
     }
-  }, [isValueArray, (isValueArray ? value : [value]), limit, multiple])
+  }, [isValueArray, (isValueArray ? value : [value]), limit, multiple, labelOptions, currentOptions])
 
   const renderListItem = useCallback(({ item, index }) => {
     let selected = false
@@ -335,7 +332,6 @@ export const Select = <T extends string | number = string, Multi extends boolean
   </>
 }
 
-
 Select.styleRegistryName = 'Select'
 Select.elements = [...Modal.elements, 'input', 'list', 'item', 'searchInput']
 Select.rootElement = 'inputWrapper'

package/src/components/SortablePhotos/index.tsx

@@ -0,0 +1,170 @@
+import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
+import { FileInput } from '../FileInput'
+import { Icon } from '../Icon'
+import { Image } from '../Image'
+import { Dimensions, View } from 'react-native'
+import { DragSortableView } from 'react-native-drag-sort'
+import { SortableItemProps, SortablePhoto, SortablePhotosProps } from './types'
+import { useSortablePhotos } from './useSortablePhotos'
+import { useStylesFor } from '../../hooks'
+import { MobileStyleRegistry } from '../../Registry'
+import { ActivityIndicator } from '../ActivityIndicator'
+
+export * from './styles'
+export * from './types'
+
+const DefaultItem = <T extends SortablePhoto>(props: SortableItemProps<T>) => {
+  const { photo, width, height, styles, emptyIcon } = props
+
+  return (
+    <View style={[{ width, height }, styles.photoWrapper]}>
+      {
+        !!photo?.filename
+          ? <Image resizeMode='cover' source={{ uri: photo?.file }} style={styles.photoImage} />
+          : <Icon name={emptyIcon} style={styles.photoEmptyIcon} />
+      }
+    </View>
+  )
+}
+
+const defaultGetFilename = (file: string) => {
+  if (!file) return null
+
+  const filenameWithExtension = file?.split?.('/').pop()
+
+  if (filenameWithExtension) {
+    return filenameWithExtension?.split('.').slice(0, -1).join('.')
+  }
+
+  return new Date().toISOString()
+}
+
+const screenWidth = Dimensions.get('screen').width
+
+export const SortablePhotos = <T extends SortablePhoto>(props: SortablePhotosProps<T>) => {
+  const allProps = {
+    ...SortablePhotos.defaultProps,
+    ...props,
+  }
+
+  const {
+    numColumns,
+    renderPhoto: RenderItem,
+    gap,
+    multiple,
+    pickerConfig,
+    emptyIcon,
+    disableDragDropEmptyItems,
+    itemWidth: _itemWidth,
+    itemHeight: _itemHeight,
+    width: _parentWidth,
+    style,
+    loading,
+    ...rest
+  } = allProps
+
+  const styles = useStylesFor(SortablePhotos.styleRegistryName, style)
+
+  const loaderStyles = useNestedStylesByKey('loader', styles)
+
+  const {
+    input,
+    handlePressPhoto,
+    numberPhotosMissing,
+    emptyIndexes,
+    onChangePhotosOrder,
+    data,
+  } = useSortablePhotos<T>(allProps)
+
+  const defaultParentWidth = screenWidth - (gap * 2)
+  const defaultItemWidth = (defaultParentWidth / numColumns) - gap
+
+  const itemWidth = _itemWidth ?? defaultItemWidth
+  const itemHeight = _itemHeight ?? itemWidth
+  const parentWidth = _parentWidth ?? defaultParentWidth
+
+  const childrenMargin = gap / 2
+
+  const fileInputPickerOptions = {
+    ...SortablePhotos.defaultProps.pickerConfig,
+    ...pickerConfig,
+    multiple,
+    maxFiles: numberPhotosMissing,
+  }
+
+  if (loading) {
+    return (
+      <View style={[styles.wrapper, styles['wrapper:loading']]}>
+        <ActivityIndicator style={loaderStyles} />
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.wrapper}>
+      <FileInput
+        mode='hidden'
+        ref={input.ref}
+        pickerOptions={fileInputPickerOptions}
+      />
+
+      <DragSortableView
+        dataSource={data}
+        childrenHeight={itemHeight}
+        childrenWidth={itemWidth}
+        parentWidth={parentWidth}
+        marginChildrenBottom={childrenMargin}
+        marginChildrenLeft={childrenMargin}
+        marginChildrenRight={childrenMargin}
+        marginChildrenTop={childrenMargin}
+        onDataChange={onChangePhotosOrder}
+        onClickItem={handlePressPhoto}
+        fixedItems={disableDragDropEmptyItems ? emptyIndexes : undefined}
+        {...rest}
+        renderItem={(item, order) => (
+          <RenderItem
+            width={itemWidth}
+            height={itemHeight}
+            photo={item}
+            order={order}
+            styles={styles}
+            emptyIcon={emptyIcon}
+          />
+        )}
+      />
+    </View>
+  )
+}
+
+SortablePhotos.styleRegistryName = 'SortablePhotos'
+SortablePhotos.elements = ['wrapper', 'photo', 'loader']
+SortablePhotos.rootElement = 'wrapper'
+
+SortablePhotos.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return SortablePhotos as <T extends SortablePhoto>(props: StyledComponentProps<SortablePhotosProps<T>, typeof styles>) => IJSX
+}
+
+SortablePhotos.defaultProps = {
+  numPhotos: 9,
+  numColumns: 3,
+  renderPhoto: DefaultItem,
+  multiple: true,
+  disableDragDropEmptyItems: true,
+  gap: 16,
+  emptyIcon: 'plus',
+  modalTitle: 'Photos',
+  modalBody: null,
+  modalLibraryText: 'Choose from gallery',
+  modalCameraText: 'Take a photo',
+  modalDeleteText: 'Remove photo',
+  getFilename: defaultGetFilename,
+  pickerConfig: {
+    cropping: true,
+    showCropFrame: true,
+    compressImageMaxHeight: 1700,
+    compressImageMaxWidth: 1700,
+    compressImageQuality: 0.8,
+  },
+} as Partial<SortablePhotosProps<any>>
+
+MobileStyleRegistry.registerComponent(SortablePhotos)

package/src/components/SortablePhotos/styles.ts

@@ -0,0 +1,9 @@
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+
+export type SortablePhotosComposition =
+  'wrapper' |
+  'wrapper:loading' |
+  'photoWrapper' |
+  'photoEmptyIcon' |
+  'photoImage' |
+  `loader${Capitalize<ActivityIndicatorComposition>}`

package/src/components/SortablePhotos/types.ts

@@ -0,0 +1,58 @@
+import { AppIcon, ICSS, StyledProp } from '@codeleap/styles'
+import { ReactElement } from 'react'
+import { SortablePhotosComposition } from './styles'
+
+export type SortablePhoto = {
+  filename: string | null
+  file: string | null
+}
+
+export type SortableItemProps<T extends SortablePhoto> = {
+  photo: T
+  order: number
+  height: number
+  width: number
+  styles: Record<SortablePhotosComposition, ICSS>
+  emptyIcon: AppIcon
+}
+
+export type SortablePhotosPickerConfig = {
+  cropping?: boolean
+  compressImageMaxHeight?: number
+  compressImageMaxWidth?: number
+  compressImageQuality?: number
+  showCropFrame?: boolean
+}
+
+export type SortablePhotosProps<T extends SortablePhoto> = {
+  numColumns?: number
+  numPhotos?: number
+  renderPhoto?: (props: SortableItemProps<T>) => ReactElement
+  photos: T[]
+  onChangePhotos: (newPhotos: T[]) => void
+  gap?: number
+  itemHeight?: number
+  itemWidth?: number
+  width?: number
+  onPressPhoto?: (data: T[], photo: T, order: number) => void
+  onDragStart?: (fromIndex: number) => void
+  onDragEnd?: (fromIndex: number, toIndex: number) => void
+  keyExtractor?: (photo: T, order: number) => any
+  delayLongPress?: number
+  pickerConfig?: SortablePhotosPickerConfig
+  multiple?: boolean
+  maxScale?: number
+  minOpacity?: number
+  scaleDuration?: number
+  slideDuration?: number
+  emptyIcon?: AppIcon
+  disableDragDropEmptyItems?: boolean
+  style?: StyledProp<SortablePhotosComposition>
+  modalTitle?: string
+  modalBody?: string
+  modalLibraryText?: string
+  modalCameraText?: string
+  modalDeleteText?: string
+  getFilename?: (file: string) => string
+  loading?: boolean
+}

package/src/components/SortablePhotos/useSortablePhotos.ts

@@ -0,0 +1,174 @@
+import { CreateOSAlert, useEffect, useGlobalContext, useMemo, useState } from '@codeleap/common'
+import { FileInputImageSource, useFileInput } from '../FileInput'
+import { SortablePhoto, SortablePhotosProps } from './types'
+
+const SortableAlert = CreateOSAlert()
+
+export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotosProps<T>) => {
+  const {
+    onChangePhotos,
+    onPressPhoto,
+    modalBody,
+    modalTitle,
+    modalCameraText,
+    modalDeleteText,
+    modalLibraryText,
+    getFilename,
+    numPhotos,
+    loading,
+    photos: currentPhotos
+  } = props
+
+  const input = useFileInput()
+  const { logger } = useGlobalContext()
+
+  const [data, setData] = useState<T[]>([])
+
+  const onChange = (photos: T[]) => {
+    const { newPhotos, sortedPhotos } = sortPhotos(photos)
+
+    setData(sortedPhotos)
+    onChangePhotos(newPhotos)
+  }
+
+  useEffect(() => {
+    if (!loading && data?.length < numPhotos) {
+      const currentLength = currentPhotos?.length ?? 0
+      const length = Math.abs(numPhotos - currentLength)
+      const fillPhotos = Array(length).fill({ filename: null, file: null }) as T[]
+
+      const newPhotos = currentPhotos.concat(fillPhotos)
+
+      setData(newPhotos)
+      onChangePhotos(currentPhotos)
+    }
+  }, [loading])
+
+  const { emptyIndexes, numberPhotosMissing } = useMemo(() => {
+    const copyPhotos = [...data]
+
+    const emptyIndexes = copyPhotos.reduce((indexes, photo, index) => {
+      if (!photo?.filename) {
+        indexes.push(index)
+      }
+      return indexes
+    }, [])
+
+    const numberPhotosMissing = emptyIndexes?.length
+
+    return {
+      emptyIndexes,
+      numberPhotosMissing,
+    }
+  }, [JSON.stringify(data)])
+
+  const sortPhotos = (_unorderedPhotos: T[]) => {
+    const unorderedPhotos = [..._unorderedPhotos]
+
+    const [newPhotos, emptyPhotos] = unorderedPhotos.reduce(
+      ([newPhotos, emptyPhotos], photo) => {
+        !!photo?.filename ? newPhotos.push(photo) : emptyPhotos.push(photo)
+        return [newPhotos, emptyPhotos]
+      },
+      [[], []] as [T[], T[]]
+    )
+
+    const sortedPhotos: T[] = newPhotos.concat(emptyPhotos)
+
+    return {
+      sortedPhotos,
+      newPhotos,
+    }
+  }
+
+  const handleOpenPicker = async (pickerType: FileInputImageSource, photo: T, order: number) => {
+    let files = []
+
+    const isEdit = !!photo?.filename
+
+    try {
+      files = await input?.openFilePicker(pickerType, {
+        multiple: isEdit ? false : props?.multiple
+      })
+    } catch (error) {
+      logger.error('Error opening file picker:', error)
+    }
+
+    if (files?.length <= 0) return null
+
+    const isMultiple = files?.length > 1 && !isEdit
+
+    const newPhotos = [...data]
+
+    if (isMultiple) {
+      for (const fileIndex in files) {
+        const file = files?.[fileIndex]
+        const order = emptyIndexes[fileIndex]
+        const uri = file?.file?.uri
+        const filename = getFilename(uri)
+
+        newPhotos[order] = {
+          ...newPhotos[order],
+          filename,
+          file: uri,
+        } as T
+      }
+    } else {
+      const file = files?.[0]
+      const uri = file?.file?.uri
+      const filename = getFilename(uri)
+
+      newPhotos[order] = {
+        ...newPhotos[order],
+        filename,
+        file: uri,
+      } as T
+    }
+
+    onChange(newPhotos)
+  }
+
+  const handleDeletePhoto = (photo: T, order: number) => {
+    const newPhotos = [...data]
+
+    newPhotos[order] = {
+      ...newPhotos[order],
+      filename: null,
+      file: null,
+    } as T
+
+    onChange(newPhotos)
+  }
+
+  const handlePressPhoto = (currentData: T[], photo: T, order: number) => {
+    SortableAlert.custom({
+      title: modalTitle,
+      body: modalBody,
+      options: [
+        { text: modalLibraryText, onPress: () => handleOpenPicker('library', photo, order) },
+        { text: modalCameraText, onPress: () => handleOpenPicker('camera', photo, order) },
+        !!photo?.filename && { text: modalDeleteText, onPress: () => handleDeletePhoto(photo, order) },
+      ],
+      // @ts-expect-error
+      isRow: false,
+    })
+
+    onPressPhoto?.(currentData, photo, order)
+  }
+
+  const onChangePhotosOrder = (newData: T[]) => {
+    onChange(newData)
+  }
+
+  return {
+    input,
+    handlePressPhoto,
+    handleDeletePhoto,
+    handleOpenPicker,
+    sortPhotos,
+    numberPhotosMissing,
+    onChangePhotosOrder,
+    emptyIndexes,
+    data,
+  }
+}