@codeleap/mobile 4.0.1 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,8 +9,8 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/config": "*",
-    "@codeleap/common": "*"
+    "@codeleap/common": "*",
+    "@codeleap/config": "*"
   },
   "scripts": {
     "build": "tsc --build",
@@ -28,24 +28,27 @@
     "@react-navigation/stack": "6.3.11",
     "react": "18.1.0",
     "react-native": "0.73.8",
+    "react-native-avoid-softinput": "3.1.5",
     "react-native-calendars": "1.1293.0",
     "react-native-date-picker": "4.2.13",
     "react-native-device-info": "10.3.0",
     "react-native-fast-image": "8.6.3",
     "react-native-gesture-handler": "2.9.0",
     "react-native-image-crop-picker": "0.37.2",
-    "react-native-super-grid": "4.6.1",
     "react-native-image-viewing": "0.2.2",
     "react-native-keyboard-aware-scroll-view": "0.9.5",
-    "typescript": "5.0.4",
-    "react-native-avoid-softinput": "3.1.5",
-    "react-native-mmkv": "2.12.2"
+    "react-native-mmkv": "2.12.2",
+    "react-native-super-grid": "4.6.1",
+    "typescript": "5.0.4"
   },
   "dependencies": {
     "@gorhom/portal": "1.0.14",
     "@miblanchard/react-native-slider": "2.3.1",
     "date-fns": "2.29.3",
+    "react-native-currency-input": "^1.1.1",
+    "react-native-drag-sort": "^2.4.4",
     "react-native-masked-text": "1.13.0",
+    "react-native-reanimated-carousel": "^3.5.1",
     "react-native-uuid": "2.0.1"
   }
 }

package/src/components/DatePickerModal/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { TypeGuards, useBooleanToggle, useI18N } from '@codeleap/common'
+import { TypeGuards, useConditionalState, useI18N } from '@codeleap/common'
 import DatePicker from 'react-native-date-picker'
 import Modal from '../Modal'
 import { TextInput } from '../TextInput'
@@ -116,7 +116,8 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
 
   const styles = useStylesFor(DatePickerModal.styleRegistryName, style)
 
-  const [visible, toggle] = !TypeGuards.isNil(_visible) && !!_toggle ? [_visible, _toggle] : useBooleanToggle(false)
+  const [visible, toggle] = useConditionalState(_visible, _toggle, { initialValue: false, isBooleanToggle: true })
+
   const [value, setValue] = [_value, onValueChange]
 
   const Wrapper = isCustomModal ? ModalManager.Modal : React.Fragment

package/src/components/FileInput/index.tsx

@@ -95,12 +95,12 @@ const _FileInput = forwardRef<FileInputRef, FileInputProps>((fileInputProps, ref
     }
   }
 
-  const openFilePicker = async (imageSource = null) => {
+  const openFilePicker = async (imageSource = null, options = {}) => {
     if (type === 'image') {
       if (imageSource === 'camera') {
-        onPress('camera')
+        onPress('camera', options)
       } else if (imageSource === 'library') {
-        onPress('library')
+        onPress('library', options)
       } else {
         OSAlert.ask({
           title: 'Change Image',
@@ -150,8 +150,8 @@ const _FileInput = forwardRef<FileInputRef, FileInputProps>((fileInputProps, ref
   }
 
   useImperativeHandle(ref, () => ({
-    openFilePicker: (imageSource: FileInputImageSource = null) => {
-      openFilePicker(imageSource)
+    openFilePicker: (imageSource: FileInputImageSource = null, options: Partial<Options> = {}) => {
+      openFilePicker(imageSource, options)
       return new Promise<FileResult[]>((resolve) => {
         resolveWithFile.current = resolve
       })
@@ -166,8 +166,8 @@ export const FileInput = _FileInput as unknown as ((props: FileInputProps) => JS
 export const useFileInput = () => {
   const inputRef = useRef<FileInputRef>(null)
 
-  const openFilePicker = (imageSource: FileInputImageSource = null): Promise<FileResult[]> => {
-    return inputRef.current?.openFilePicker(imageSource)
+  const openFilePicker = (imageSource: FileInputImageSource = null, options: Partial<Options> = {}): Promise<FileResult[]> => {
+    return inputRef.current?.openFilePicker(imageSource, options)
   }
 
   return {

package/src/components/FileInput/types.ts

@@ -8,7 +8,7 @@ export type FileInputImageSource = 'camera' | 'library' | 'fs'
 export type FileResult = FormTypes.AnyFile
 
 export type FileInputRef = {
-  openFilePicker: (string?: FileInputImageSource) => Promise<FileResult[]>
+  openFilePicker: (source?: FileInputImageSource, options?: Partial<Options>) => Promise<FileResult[]>
 }
 
 export type FileInputProps = {

package/src/components/NumberIncrement/index.tsx

@@ -11,6 +11,7 @@ import { NumberIncrementProps } from './types'
 import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import CurrencyInput from 'react-native-currency-input'
 
 export * from './styles'
 export * from './types'
@@ -58,6 +59,7 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     timeoutActionFocus,
     mask,
     actionDebounce,
+    precision,
     ...textInputProps
   } = others
 
@@ -73,11 +75,13 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
 
   const isFormatted = TypeGuards.isFunction(formatter)
 
-  const hasMaskProps = [masking, prefix, suffix, delimiter, separator, mask].some(v => !!v)
+  const hasMaskProps = [masking, mask].some(v => !!v)
+  const hasCurrencyProps = [prefix, suffix, delimiter, separator, precision].some(v => !!v)
 
-  const isMasked = hasMaskProps && !isFormatted
+  const isCurrency = hasCurrencyProps
+  const isMasked = hasMaskProps && !isFormatted && !isCurrency
 
-  const InputElement = isMasked ? MaskedTextInput : NativeTextInput
+  const InputElement: any = isMasked ? MaskedTextInput : isCurrency ? CurrencyInput : NativeTextInput
 
   // @ts-expect-error - React's ref type system is weird
   useImperativeHandle(inputRef, () => {
@@ -219,6 +223,19 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     },
   } : {}
 
+  const currencyExtraProps = isCurrency ? {
+    value,
+    onChangeText: null,
+    onChangeValue: onChange,
+    prefix: prefix,
+    separator: separator ?? '.',
+    suffix: suffix,
+    delimiter: delimiter ?? ',',
+    minValue: min,
+    maxValue: max,
+    precision,
+  } : {}
+
   const onPressInnerWrapper = () => {
     handleFocus()
     if (editable) innerInputRef.current?.focus?.()
@@ -270,6 +287,7 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
           style={inputTextStyle}
           ref={innerInputRef}
           {...maskingExtraProps}
+          {...currencyExtraProps}
         />
       ) : (
         <Text

package/src/components/NumberIncrement/types.ts

@@ -26,6 +26,7 @@ export type NumberIncrementProps =
     suffix?: MaskOptions['suffixUnit']
     separator?: MaskOptions['separator']
     delimiter?: MaskOptions['delimiter']
+    precision?: number
     mask?: MaskOptions['mask']
     formatter?: (value: string | number) => string
     parseValue?: (value: string) => number

package/src/components/Pager/PagerDots.tsx

@@ -0,0 +1,56 @@
+import { AnyFunction, StylesOf } from '@codeleap/common'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import { Touchable } from '../Touchable'
+import { View } from '../View'
+import { DotComposition } from './styles'
+
+export type PagerDot = {
+  onPress: AnyFunction
+  isActive: boolean
+  index: number
+  styles: StylesOf<DotComposition>
+}
+
+function Dot({ onPress, isActive, index, styles }: PagerDot) {
+  const animation = useAnimatedStyle(() => {
+    const scale = isActive ? 1 : 0.6
+    return {
+      transform: [{ scale }],
+      ...(isActive ? styles['dot:active'] : styles.dot),
+    }
+  })
+
+  return (
+    <Touchable
+      debugName={`default-pager-dot-touchable-${index}`}
+      onPress={onPress}
+      noFeedback
+      style={[styles.touchable, isActive && styles['touchable:active']]}
+    >
+      <Animated.View style={[animation, styles.dot]} />
+    </Touchable>
+  )
+}
+
+export type PagerDots = {
+  styles: StylesOf<DotComposition>
+  currentPage: number
+  setCurrentPage: (page: number) => void
+  pages: Array<any>
+}
+
+export function PagerDots({ styles, currentPage, setCurrentPage, pages }: PagerDots) {
+  return (
+    <View style={styles.wrapper}>
+      {pages?.map((_, i) => (
+        <Dot
+          key={`default-pager-dots-index-${i}`}
+          index={i}
+          onPress={() => setCurrentPage(i)}
+          isActive={i === currentPage}
+          styles={styles}
+        />
+      ))}
+    </View>
+  )
+}

package/src/components/Pager/index.tsx

@@ -1,207 +1,119 @@
-import React, { useCallback, useRef } from 'react'
-import { onUpdate, TypeGuards } from '@codeleap/common'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { Dimensions, ScrollView } from 'react-native'
+import React, { useCallback, useRef, useState } from 'react'
+import { ReduceMotion } from 'react-native-reanimated'
+import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel'
+import { CarouselRenderItemInfo, TCarouselProps } from 'react-native-reanimated-carousel/lib/typescript/types'
+import { Dimensions, LayoutChangeEvent } from 'react-native'
+import { onUpdate, TypeGuards, useConditionalState } from '@codeleap/common'
+import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
+import { useStylesFor } from '../../hooks'
 import { MobileStyleRegistry } from '../../Registry'
 import { View } from '../View'
-import { PageProps, PagerProps, ScrollEvent } from './types'
-import { useStylesFor } from '../../hooks'
+import { PageProps, PagerProps } from './types'
+import { PagerDots } from './PagerDots'
 
 export * from './styles'
 export * from './types'
+export * from './PagerDots'
+
+const window = Dimensions.get('window')
 
-export const Pager = (pagerProps: PagerProps) => {
+export const Pager = <T extends unknown>(props: PagerProps<T>) => {
   const {
-    width: widthProp,
+    pages,
     page,
+    onChangePage,
+    initialPage,
     style,
-    returnEarly,
-    renderPageWrapper,
-    pageWrapperProps = {},
-    children,
-    windowing,
-    setPage,
-    scrollEnabled,
-    scrollLeftEnabled,
-    scrollRightEnabled,
-    onScroll,
-    scrollDirectionThrottle,
-    onSwipeLastPage,
-    waitEventDispatchTimeout,
+    showDots,
+    renderItem: RenderItem,
+    footer,
+    width: carouselWidth,
+    height: carouselHeight,
+    autoCalculateFooterHeight,
+    ...rest
   } = {
     ...Pager.defaultProps,
-    ...pagerProps,
+    ...props,
   }
 
-  const childArr = React.Children.toArray(children)
-  const scrollRef = useRef<ScrollView>(null)
-  const [positionX, setPositionX] = React.useState(0)
-  const [scrollPositionX, setScrollPositionX] = React.useState(0)
-  const [_scrollEnabled, setScrollEnabled] = React.useState(true)
-  const waitEventDispatch = useRef(false)
+  const [currentPage, setCurrentPage] = useConditionalState(page, onChangePage, { initialValue: initialPage })
+  const carouselRef = useRef<ICarouselInstance>(null)
+  const [footerHeight, setFooterHeight] = useState(0)
 
   const styles = useStylesFor(Pager.styleRegistryName, style)
+  const dotStyles = useNestedStylesByKey('dot', styles)
 
-  const windowWidth = Dimensions.get('window').width
-
-  // @ts-expect-error
-  let width = widthProp ?? styles?.wrapper?.width
-
-  const validWidth = TypeGuards.isNumber(width)
-
-  if (!validWidth) {
-    width = windowWidth
-  }
-
-  const nChildren = React.Children.count(children)
-
-  const lastPage = nChildren - 1
-
-  const WrapperComponent = renderPageWrapper || View
-
-  const hasScrollDirectionDisabled = !scrollLeftEnabled || !scrollRightEnabled
-
-  const handleScrollEnd = useCallback((event: ScrollEvent) => {
-    if (!scrollEnabled) return null
-
-    if (waitEventDispatch.current === true) return null
-
-    waitEventDispatch.current = true
-
-    const x = event?.nativeEvent.contentOffset.x
-    const toPage = Math.floor(((Math.round(x)) / Math.round(width)))
-
-    const length = childArr.length - 1
-
-    if (toPage >= length && TypeGuards.isFunction(onSwipeLastPage) && page >= length) {
-      onSwipeLastPage?.(event)
-    } else if (toPage !== page && toPage <= length) {
-      setPage(toPage)
-      setPositionX(toPage * width)
-    }
-
-    setTimeout(() => {
-      waitEventDispatch.current = false
-    }, waitEventDispatchTimeout)
-  }, [childArr, page, setPage, waitEventDispatch.current])
-
-  const handleScroll = (event: ScrollEvent) => {
-    const scrollX = event?.nativeEvent?.contentOffset?.x
-
-    if (!scrollEnabled) {
-      if (TypeGuards.isFunction(onScroll)) onScroll?.(event, { x: scrollX })
-      return null
-    }
-
-    if (!_scrollEnabled) {
-      setScrollPositionX(scrollX)
-      return null
+  onUpdate(() => {
+    carouselRef.current?.scrollTo({ index: currentPage, animated: true })
+  }, [currentPage])
+
+  const renderItem = useCallback(({ item, index, animationValue }: CarouselRenderItemInfo<any>) => {
+    const itemProps: Omit<PageProps<T>, 'item'> = {
+      isFirst: index === 0,
+      isLast: index === pages?.length - 1,
+      isOnly: pages?.length === 1,
+      isActive: index === currentPage,
+      isNext: index === currentPage + 1,
+      isPrevious: index === currentPage - 1,
+      index,
+      animationValue,
     }
 
-    const isRight = scrollX < scrollPositionX
-    const isLeft = scrollX > scrollPositionX
-
-    if (TypeGuards.isFunction(onScroll)) onScroll?.(event, { isLeft, isRight, x: scrollX })
-
-    if (hasScrollDirectionDisabled) {
-      if (isRight && !scrollRightEnabled || isLeft && !scrollLeftEnabled) {
-        setScrollEnabled(false)
-
-        setTimeout(() => {
-          scrollRef.current.scrollTo({
-            x: positionX,
-            animated: true,
-          })
-
-          setTimeout(() => {
-            setScrollEnabled(true)
-          }, scrollDirectionThrottle)
-        })
-      }
+    if (TypeGuards.isFunction(item)) {
+      const ItemComponent = item
+      return <ItemComponent {...itemProps} />
     }
 
-    setScrollPositionX(scrollX)
-  }
-
-  onUpdate(() => {
-    const x = width * page
-    if (scrollRef.current && x !== positionX) {
-      scrollRef.current.scrollTo({
-        x,
-        animated: true,
-      })
-      setPositionX(x)
-    }
-  }, [page])
+    return <RenderItem {...itemProps} item={item} />
+  }, [RenderItem, pages?.length, currentPage])
 
   return (
-    <ScrollView
-      ref={scrollRef}
-      horizontal
-      pagingEnabled
-      onMomentumScrollEnd={handleScrollEnd}
-      scrollEventThrottle={hasScrollDirectionDisabled ? 2000 : 300}
-      showsHorizontalScrollIndicator={false}
-      {...pagerProps}
-      style={styles?.wrapper}
-      onScroll={handleScroll}
-      scrollEnabled={childArr.length > 1 && scrollEnabled && _scrollEnabled}
-    >
-      {childArr.map((child: PagerProps['children'][number], index) => {
-        const isActive = index === page
-        const isLast = index === lastPage
-        const isFirst = index === 0
-        const isNext = index === page + 1
-        const isPrevious = index === page - 1
-
-        const shouldRender = windowing ? (isActive || isNext || isPrevious) : true
-
-        if (!shouldRender && returnEarly) {
-          return <View style={{ height: '100%', width }} />
-        }
-
-        const pageProps: PageProps = {
-          isLast,
-          isActive,
-          isFirst,
-          isNext,
-          isPrevious,
-          index,
-          page,
-        }
-
-        const content = typeof child === 'function' ? child(pageProps) : child
-
-        const wrapperProps = {
-          key: index,
-          ...pageWrapperProps,
-          style: [{ height: '100%', width }, styles?.page],
-        }
-
-        return <WrapperComponent {...wrapperProps}>{content}</WrapperComponent>
-      })}
-    </ScrollView>
+    <View style={styles.wrapper}>
+      <Carousel
+        data={pages}
+        withAnimation={{
+          type: 'timing',
+          config: {
+            reduceMotion: ReduceMotion.Never
+          },
+        }}
+        autoPlay={false}
+        ref={carouselRef}
+        loop={false}
+        defaultIndex={initialPage}
+        onSnapToItem={setCurrentPage}
+        maxScrollDistancePerSwipe={carouselWidth}
+        width={carouselWidth}
+        height={carouselHeight - (autoCalculateFooterHeight ? footerHeight : 0)}
+        renderItem={renderItem}
+        {...rest as TCarouselProps<T>}
+        style={styles.carousel}
+      />
+
+      <View onLayout={(event: LayoutChangeEvent) => setFooterHeight(event.nativeEvent.layout.height)} style={styles.footerWrapper}>
+        {footer}
+        {showDots ? (
+          <PagerDots currentPage={currentPage} pages={pages} setCurrentPage={setCurrentPage} styles={dotStyles} />
+        ) : null}
+      </View>
+    </View>
   )
 }
 
 Pager.styleRegistryName = 'Pager'
-Pager.elements = ['page', 'wrapper']
+Pager.elements = ['carousel', 'wrapper', 'footerWrapper', 'dot']
 Pager.rootElement = 'wrapper'
 
 Pager.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Pager as (props: StyledComponentProps<PagerProps, typeof styles>) => IJSX
+  return Pager as <T extends unknown>(props: StyledComponentProps<PagerProps<T>, typeof styles>) => IJSX
 }
 
 Pager.defaultProps = {
-  page: 0,
-  returnEarly: true,
-  windowing: false,
-  keyboardShouldPersistTaps: 'handled',
-  scrollEnabled: true,
-  scrollRightEnabled: true,
-  scrollLeftEnabled: true,
-  scrollDirectionThrottle: 650,
-  waitEventDispatchTimeout: 250,
-} as Partial<PagerProps>
+  width: window.width,
+  height: window.height,
+  showDots: true,
+  autoCalculateFooterHeight: true,
+  initialPage: 0,
+} as Partial<PagerProps<unknown>>
 
 MobileStyleRegistry.registerComponent(Pager)

package/src/components/Pager/styles.ts

@@ -1,2 +1,7 @@
+export type DotStates = '' | 'active'
 
-export type PagerComposition = 'page' | 'wrapper'
+export type DotParts = 'wrapper' | `touchable` | `dot`
+
+export type DotComposition = DotParts | `${DotParts}:${DotStates}`
+
+export type PagerComposition = 'carousel' | 'wrapper' | 'footerWrapper' | `dot${Capitalize<DotParts>}`

package/src/components/Pager/types.ts

@@ -1,37 +1,27 @@
+import React, { ReactNode } from 'react'
 import { StyledProp } from '@codeleap/styles'
-import { ReactNode } from 'react'
-import { NativeScrollEvent, NativeSyntheticEvent, ScrollViewProps } from 'react-native'
 import { PagerComposition } from './styles'
+import { TCarouselProps } from 'react-native-reanimated-carousel'
+import { CarouselRenderItemInfo } from 'react-native-reanimated-carousel/lib/typescript/types'
 
-export type PageProps = {
+export type PageProps<T extends unknown> = CarouselRenderItemInfo<T> & {
   isLast: boolean
   isFirst: boolean
   isActive: boolean
+  isOnly: boolean
   isNext: boolean
-  page: number
   index: number
   isPrevious: boolean
 }
 
-export type ScrollEvent = NativeSyntheticEvent<NativeScrollEvent>
-
-export type PagerProps =
-  Omit<ScrollViewProps, 'style'> &
-  {
-    children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
-    page?: number
-    setPage?: (page: number) => void
-    returnEarly?: boolean
-    renderPageWrapper?: React.FC<PageProps>
-    pageWrapperProps?: any
-    width?: number
-    onScroll?: (event: ScrollEvent, args: { isLeft?: boolean; isRight?: boolean; x?: number }) => void
-    /** If TRUE render page, nextPage and prevPage only */
-    windowing?: boolean
-    scrollRightEnabled?: boolean
-    scrollLeftEnabled?: boolean
-    scrollDirectionThrottle?: number
-    onSwipeLastPage?: (event: ScrollEvent) => void
-    waitEventDispatchTimeout?: number
-    style?: StyledProp<PagerComposition>
-  }
+export type PagerProps<T extends unknown> = Partial<Omit<TCarouselProps<T>, 'data' | 'renderItem'>> & {
+  pages: TCarouselProps<T>['data']
+  renderItem?: (props: PageProps<T>) => JSX.Element
+  page?: number
+  onChangePage?: (page: number) => void
+  initialPage?: number
+  style?: StyledProp<PagerComposition>
+  showDots?: boolean
+  footer?: ReactNode
+  autoCalculateFooterHeight?: boolean
+}