@codeleap/mobile 4.0.2 → 4.2.1

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,
+  }
+}

package/src/components/Text/index.tsx

@@ -104,7 +104,7 @@ Text.elements = ['text', 'pressFeedback']
 Text.rootElement = 'text'
 
 Text.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Text as (props: StyledComponentProps<TextProps & { ref?: React.MutableRefObject<NativeText> }, typeof styles>) => IJSX
+  return Text as (props: StyledComponentProps<TextProps, typeof styles>) => IJSX
 }
 
 Text.defaultProps = {

package/src/components/Text/types.ts

@@ -1,11 +1,11 @@
 import { StyledProp } from '@codeleap/styles'
 import { ReactNode } from 'react'
-import { TextProps as RNTextProps, Animated, ViewStyle, ImageStyle, TextStyle } from 'react-native'
+import { TextProps as RNTextProps, Animated, ViewStyle, ImageStyle, TextStyle, Text as NativeText } from 'react-native'
 import { AnimatedStyleProp } from 'react-native-reanimated'
 import { TextComposition } from './styles'
 
 export type TextProps =
-  Omit<RNTextProps, 'style'> &
+  Omit<RNTextProps, 'style' | 'ref'> &
   {
     text?: ReactNode
     animated?: boolean
@@ -15,4 +15,5 @@ export type TextProps =
     pressDisabled?: boolean
     style?: StyledProp<TextComposition>
     animatedStyle?: AnimatedStyleProp<ViewStyle | ImageStyle | TextStyle>
+    ref?: React.ForwardedRef<NativeText>
   }

package/src/components/TextInput/index.tsx

@@ -17,6 +17,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
   const innerInputRef = React.useRef<NativeTextInput>(null)
 
   const [isFocused, setIsFocused] = useState(false)
+  const [currentSelection, setCurrentSelection] = useState({ start: 0 })
 
   const {
     inputBaseProps,
@@ -38,6 +39,8 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
     visibleIcon,
     hiddenIcon,
     style,
+    autoAdjustSelection,
+    selectionStart,
     _error = null,
     ...textInputProps
   } = others
@@ -68,12 +71,14 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
   const handleBlur = React.useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     validation.onInputBlurred()
     setIsFocused(false)
+    if (autoAdjustSelection) setCurrentSelection({ start: selectionStart })
     props.onBlur?.(e)
   }, [validation.onInputBlurred, props.onBlur])
 
   const handleFocus = React.useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     validation.onInputFocused()
     setIsFocused(true)
+    if (autoAdjustSelection) setCurrentSelection(null)
     props.onFocus?.(e)
   }, [validation.onInputFocused, props.onFocus])
 
@@ -153,6 +158,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
       allowFontScaling={false}
       editable={!isPressable && !isDisabled}
       {...buttonModeProps}
+      selection={autoAdjustSelection ? currentSelection : undefined}
       placeholderTextColor={placeholderTextColor}
       value={value}
       selectionColor={selectionColor}
@@ -188,6 +194,8 @@ TextInput.defaultProps = {
   hiddenIcon: 'input-visiblity:hidden' as AppIcon,
   visibleIcon: 'input-visiblity:visible' as AppIcon,
   visibilityToggle: false,
+  autoAdjustSelection: false,
+  selectionStart: 0,
 } as Partial<TextInputProps>
 
 MobileStyleRegistry.registerComponent(TextInput)

package/src/components/TextInput/types.ts

@@ -12,6 +12,8 @@ export type TextInputProps =
     password?: boolean
     validate?: FormTypes.ValidatorFunctionWithoutForm | yup.SchemaOf<string>
     debugName: string
+    autoAdjustSelection?: boolean
+    selectionStart?: number
     visibilityToggle?: boolean
     masking?: FormTypes.TextField['masking']
     onChangeMask?: TextInputMaskProps['onChangeText']

package/src/components/components.ts

@@ -38,3 +38,5 @@ export * from './NumberIncrement'
 export * from './Badge'
 export * from './SearchInput'
 export * from './PaginationIndicator'
+export * from './PlacesAutocomplete'
+export * from './SortablePhotos'