@codeleap/mobile 4.0.2 → 4.2.1

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 function Pager<T>(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 >(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> = 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> = 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
+}

package/src/components/PlacesAutocomplete/index.tsx

@@ -0,0 +1,154 @@
+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 hasCustomValue = !!textInputProps?.value
+
+  const {
+    handleChangeAddress,
+    handlePressAddress,
+    handleClearAddress,
+    address,
+    isTyping,
+    setIsTyping,
+  } = usePlacesAutocompleteUtils<PlaceItem>({
+    onValueChange,
+    onPress,
+    debounce: hasCustomValue ? null : 250
+  })
+
+  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 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'