@codeleap/mobile 3.25.0 → 3.25.2

package/src/components/Grid/types.ts

@@ -1,20 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { FlatListProps, AugmentedRenderItemInfo, ListItem } from '../List'
-import { GridComposition } from './styles'
-
-export type GridAugmentedRenderItemInfo<T> =
-  AugmentedRenderItemInfo<T> &
-  {
-    isFirstInRow: boolean
-    isLastInRow: boolean
-    isOnlyInRow: boolean
-  }
-
-export type GridProps<T extends ListItem = ListItem> =
-  Omit<FlatListProps<T>, 'style' | 'renderItem'> &
-  {
-    spacing?: number
-    itemDimension?: number
-    renderItem: (data: GridAugmentedRenderItemInfo<T>) => React.ReactElement
-    style?: StyledProp<GridComposition>
-  }

package/src/components/Icon/types.ts

@@ -1,15 +0,0 @@
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { BadgeComponentProps } from '../Badge'
-import { ViewProps } from '../View'
-import { IconComposition } from './styles'
-
-export type IconProps =
-  BadgeComponentProps & 
-  {
-    name: AppIcon
-    style?: StyledProp<IconComposition>
-    color?: string
-    wrapperProps?: ViewProps
-    size?: number
-    source?: string
-  }

package/src/components/Image/types.ts

@@ -1,18 +0,0 @@
-import { LoadingOverlayProps } from '../LoadingOverlay'
-import FastImage, { Source } from 'react-native-fast-image'
-import { ImageProps as RNImageProps } from 'react-native'
-import { ImageComposition } from './styles'
-import { StyledProp } from '@codeleap/styles'
-import { FormTypes } from '@codeleap/common'
-
-export type ImageProps =
-  Omit<RNImageProps, 'source' | 'style'> &
-  {
-    fast?: boolean
-    style?: StyledProp<ImageComposition>
-    source: Source | FormTypes.AnyFile
-    resizeMode?: keyof typeof FastImage.resizeMode
-    spotlight?: string
-    maintainAspectRatio?: boolean
-    withLoadingOverlay?: boolean | ((props: LoadingOverlayProps) => JSX.Element)
-  }

package/src/components/List/types.ts

@@ -1,41 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { ListRenderItemInfo, FlatListProps as RNFlatListProps } from 'react-native'
-import { ListComposition } from './styles'
-import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
-import { RefreshControlProps } from '../RefreshControl'
-import { ViewProps } from '../View'
-
-export type DataboundFlatListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout' | 'style'
-
-export type AugmentedRenderItemInfo<T> = ListRenderItemInfo<T> & {
-  isFirst: boolean
-  isLast: boolean
-  isOnly: boolean
-}
-
-export type ReplaceFlatlistProps<P, T> =
-  Omit<P, DataboundFlatListPropsTypes> &
-  {
-    data: T[]
-    keyExtractor?: (item: T, index: number) => string
-    renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
-    onRefresh?: () => void
-    getItemLayout?: ((data: T, index: number) => { length: number; offset: number; index: number })
-    fakeEmpty?: boolean
-    loading?: boolean
-  }
-
-export type ListItem = any
-
-export type FlatListProps<T extends ListItem = ListItem> =
-  ReplaceFlatlistProps<RNFlatListProps<T>, T> &
-  Omit<ViewProps, 'style'> &
-  {
-    separators?: boolean
-    placeholder?: EmptyPlaceholderProps
-    refreshControlProps?: Partial<RefreshControlProps>
-    fakeEmpty?: boolean
-    loading?: boolean
-    keyboardAware?: boolean
-    style?: StyledProp<ListComposition>
-  }

package/src/components/LoadingOverlay/types.ts

@@ -1,9 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { ReactNode } from 'react'
-import { LoadingOverlayComposition } from './styles'
-
-export type LoadingOverlayProps = {
-  style?: StyledProp<LoadingOverlayComposition>
-  visible?: boolean
-  children?: ReactNode
-}

package/src/components/Modal/types.ts

@@ -1,41 +0,0 @@
-import { PropsOf } from '@codeleap/common'
-import { AppIcon, ICSS, StyledProp } from '@codeleap/styles'
-import { ButtonProps } from '../Button'
-import { Scroll } from '../Scroll'
-import { ViewProps } from '../View'
-import { ModalComposition } from './styles'
-
-export type ModalProps =
-  Omit<ViewProps, 'style'> &
-  {
-    dismissOnBackdrop?: boolean
-    buttonProps?: ButtonProps
-    accessible?: boolean
-    showClose?: boolean
-    closable?: boolean
-    footer?: React.ReactNode
-    title?: React.ReactNode
-    debugName?: string
-    closeIconName?: AppIcon
-    visible?: boolean
-    toggle?: () => void
-    zIndex?: number
-    description?: React.ReactElement
-    scroll?: boolean
-    header?: React.ReactElement
-    closeOnHardwareBackPress?: boolean
-    renderHeader?: (props: ModalHeaderProps) => React.ReactElement
-    keyboardAware?: boolean
-    scrollProps?: PropsOf<typeof Scroll, 'ref'>
-    style?: StyledProp<ModalComposition>
-    id?: string
-    absolute?: boolean
-  }
-
-export type ModalHeaderProps =
-  Omit<ModalProps, 'renderHeader'> &
-  {
-    styles: Record<ModalComposition, ICSS>
-    buttonStyles: any
-    description?: React.ReactElement
-  }

package/src/components/Pager/types.ts

@@ -1,37 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { ReactNode } from 'react'
-import { NativeScrollEvent, NativeSyntheticEvent, ScrollViewProps } from 'react-native'
-import { PagerComposition } from './styles'
-
-export type PageProps = {
-  isLast: boolean
-  isFirst: boolean
-  isActive: 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>
-  }

package/src/components/PaginationIndicator/index.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { TypeGuards } from '@codeleap/common'
-import { ActivityIndicator } from '../ActivityIndicator'
-import { Text } from '../Text'
-import { AnyRecord, useNestedStylesByKey, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
-import { PaginationIndicatorProps } from './types'
-
-export const PaginationIndicator = (props: PaginationIndicatorProps) => {
-  const {
-    hasMore,
-    isFetching,
-    noMoreItemsText,
-    style,
-    activityIndicator,
-  } = {
-    ...PaginationIndicator.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(PaginationIndicator.styleRegistryName, style)
-
-  const loaderStyles = useNestedStylesByKey('loader', styles)
-
-  if (isFetching) {
-    return activityIndicator || <ActivityIndicator style={loaderStyles} />
-  }
-
-  if (!hasMore) {
-    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
-      return <Text style={styles.text} text={noMoreItemsText.toString()} />
-    }
-
-    return noMoreItemsText
-  }
-
-  return null
-}
-
-PaginationIndicator.styleRegistryName = 'PaginationIndicator'
-PaginationIndicator.elements = ['text', 'loader']
-PaginationIndicator.rootElement = 'text'
-
-PaginationIndicator.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return PaginationIndicator as (props: StyledComponentProps<PaginationIndicatorProps, typeof styles>) => IJSX
-}
-
-PaginationIndicator.defaultProps = {} as PaginationIndicatorProps
-
-MobileStyleRegistry.registerComponent(PaginationIndicator)

package/src/components/PaginationIndicator/styles.ts

@@ -1,3 +0,0 @@
-import { ActivityIndicatorComposition } from '../ActivityIndicator'
-
-export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}`

package/src/components/PaginationIndicator/types.ts

@@ -1,10 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { PaginationIndicatorComposition } from './styles'
-
-export type PaginationIndicatorProps = {
-  isFetching?: boolean
-  noMoreItemsText: JSX.Element | string | number
-  hasMore?: boolean
-  activityIndicator?: JSX.Element
-  style?: StyledProp<PaginationIndicatorComposition>
-}

package/src/components/RadioInput/types.ts

@@ -1,31 +0,0 @@
-import { FormTypes, StylesOf } from '@codeleap/common'
-import { StyledProp } from '@codeleap/styles'
-import { ReactNode } from 'react'
-import { RadioInputComposition } from './styles'
-import { InputBaseProps } from '../InputBase'
-
-type RadioOption<T> = FormTypes.Options<T>[number] & {
-  disabled?: boolean
-}
-
-export type RadioGroupProps<T extends string | number> =
-  Omit<InputBaseProps, 'style'> &
-  {
-    options: RadioOption<T>[]
-    value: T
-    onValueChange(value: T): void
-    label: ReactNode
-    radioOnRight?: boolean
-    style?: StyledProp<RadioInputComposition>
-  }
-
-export type RadioOptionProps<T extends string | number> = {
-  item: RadioOption<T>
-  selected: boolean
-  onSelect(): void
-  debugName?: string
-  disabled?: boolean
-  separator?: boolean
-  reverseOrder?: boolean
-  styles?: StylesOf<RadioInputComposition>
-}

package/src/components/RefreshControl/types.ts

@@ -1,9 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { RefreshControlProps as RNRefreshControlProps } from 'react-native'
-import { RefreshControlComposition } from './styles'
-
-export type RefreshControlProps =
-  Omit<RNRefreshControlProps, 'style'> &
-  {
-    style?: StyledProp<RefreshControlComposition>
-  }

package/src/components/Scroll/types.ts

@@ -1,21 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from 'react-native-keyboard-aware-scroll-view'
-import { ScrollComposition } from './styles'
-import { RefreshControlProps } from '../RefreshControl'
-import { ViewProps } from '../View'
-
-export type ScrollProps =
-  Omit<KeyboardAwareScrollViewProps, 'style'> &
-  Omit<ViewProps, 'style'> &
-  {
-    onRefresh?: () => void
-    refreshTimeout?: number
-    changeData?: any
-    keyboardAware?: boolean
-    refreshing?: boolean
-    refreshControlProps?: Partial<RefreshControlProps>
-    debugName?: string
-    style?: StyledProp<ScrollComposition>
-  }
-
-export type ScrollRef = KeyboardAwareScrollView

package/src/components/SearchInput/index.tsx

@@ -1,90 +0,0 @@
-import React, { useState } from 'react'
-import { AppIcon } from '@codeleap/styles'
-import { ComponentWithDefaultProps } from '../../types'
-import { TextInputProps, TextInput } from '../TextInput'
-import { TypeGuards } from '@codeleap/common'
-
-export type SearchInputProps = {
-  onTypingChange: (isTyping: boolean) => void
-  onSearchChange: (search: string) => void
-  onValueChange?: (search: string) => void
-  onClear?: () => void
-  debugName: string
-  debounce?: number
-  clearIcon?: AppIcon
-  searchIcon?: AppIcon
-  placeholder: string
-} & Partial<TextInputProps>
-
-export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props) => {
-  const {
-    debugName,
-    onClear,
-    onSearchChange,
-    onTypingChange,
-    clearIcon,
-    searchIcon,
-    debounce,
-    placeholder,
-    value,
-    onValueChange,
-    ...others
-  } = {
-    ...SearchInput.defaultProps,
-    ...props,
-  }
-
-  const [search, setSearch] = !TypeGuards.isNil(value) && !!onValueChange ? [value, onValueChange] : useState('')
-
-  const setSearchTimeout = React.useRef<NodeJS.Timeout | null>(null)
-
-  const handleChangeSearch = (value: string) => {
-    setSearch(value)
-
-    if (TypeGuards.isNil(debounce)) {
-      onSearchChange?.(value)
-    } else {
-      if (setSearchTimeout.current) {
-        clearTimeout(setSearchTimeout.current)
-      }
-
-      setSearchTimeout.current = setTimeout(() => {
-
-        onSearchChange(value)
-        onTypingChange?.(false)
-      }, debounce ?? 0)
-    }
-  }
-
-  const handleClear = () => {
-    setSearch('')
-    onSearchChange?.('')
-    onClear?.()
-  }
-
-  return (
-    <TextInput
-      value={search}
-      onChangeText={(value) => {
-        onTypingChange?.(true)
-        handleChangeSearch(value)
-      }}
-      placeholder={placeholder}
-      debugName={`Search ${debugName}`}
-      rightIcon={!!search?.trim?.() && {
-        name: clearIcon,
-        onPress: handleClear,
-      }}
-      leftIcon={{
-        name: searchIcon,
-      }}
-      {...others}
-    />
-  )
-}
-
-SearchInput.defaultProps = {
-  debounce: null,
-  clearIcon: 'x' as AppIcon,
-  searchIcon: 'search' as AppIcon,
-} as Partial<SearchInputProps>

package/src/components/Sections/types.ts

@@ -1,39 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { SectionListRenderItemInfo } from 'react-native'
-import { SectionsComposition } from './styles'
-import { SectionListProps as RNSectionListProps } from 'react-native'
-import { ViewProps } from '../View'
-import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
-import { RefreshControlProps } from '../RefreshControl'
-
-export type DataboundSectionListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout' | 'style'
-
-export type AugmentedSectionRenderItemInfo<T> = SectionListRenderItemInfo<T> & {
-  isFirst: boolean
-  isLast: boolean
-  isOnly: boolean
-}
-
-export type ReplaceSectionListProps<P, T> = Omit<P, DataboundSectionListPropsTypes> & {
-  sections: T[]
-  keyExtractor?: (item: T, index: number) => string
-  renderItem: (data: AugmentedSectionRenderItemInfo<T>) => React.ReactElement
-  onRefresh?: () => void
-  getItemLayout?: ((data: T, index: number) => { length: number; offset: number; index: number })
-  fakeEmpty?: boolean
-}
-
-export type SectionListProps<
-  T = any[],
-  Data = T extends Array<infer D> ? D : never
-> =
-  ReplaceSectionListProps<RNSectionListProps<Data>, Data> &
-  Omit<ViewProps, 'style'> &
-  {
-    separators?: boolean
-    placeholder?: EmptyPlaceholderProps
-    refreshControlProps?: Partial<RefreshControlProps>
-    fakeEmpty?: boolean
-    keyboardAware?: boolean
-    style?: StyledProp<SectionsComposition>
-  }

package/src/components/SegmentedControl/types.ts

@@ -1,31 +0,0 @@
-import { ScrollProps, ScrollRef } from '../Scroll'
-import { SegmentedControlOptionProps } from './Option'
-import { TransitionConfig } from '../../utils'
-import { TextProps } from '../Text'
-import { TouchableProps } from '../Touchable'
-import { FormTypes } from '@codeleap/common'
-import { StyledProp } from '@codeleap/styles'
-import { SegmentedControlComposition } from '../components'
-
-export type SegmentedControlRef = ScrollRef & {
-  scrollTo: (index: number) => void
-  scrollToCurrent: () => void
-}
-
-export type SegmentedControlProps<T = string> =
-  Omit<ScrollProps, 'style'> &
-  {
-    options: SegmentedControlOptionProps[]
-    onValueChange: (value: T) => any
-    value: T
-    debugName: string
-    animation?: TransitionConfig
-    textProps?: Partial<TextProps>
-    touchableProps?: Partial<TouchableProps>
-    label?: FormTypes.Label
-    renderOption?: (props: SegmentedControlOptionProps) => JSX.Element
-    renderBubble?: (props: Partial<SegmentedControlProps>) => JSX.Element
-    getItemWidth?: (item: { label: string; value: T }, idx: number, arr: { label: string; value: T }[]) => number
-    scrollToCurrentOptionOnMount?: boolean
-    style?: StyledProp<SegmentedControlComposition>
-  }

package/src/components/Switch/types.ts

@@ -1,12 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { InputBaseProps } from '../InputBase'
-import { SwitchComposition } from './styles'
-
-export type SwitchProps =
-  Omit<InputBaseProps, 'style'> &
-  {
-    value: boolean
-    onValueChange: (value: boolean) => void
-    style?: StyledProp<SwitchComposition>
-    switchOnLeft?: boolean
-  }

package/src/components/Text/types.ts

@@ -1,18 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { ReactNode } from 'react'
-import { TextProps as RNTextProps, Animated, ViewStyle, ImageStyle, TextStyle } from 'react-native'
-import { AnimatedStyleProp } from 'react-native-reanimated'
-import { TextComposition } from './styles'
-
-export type TextProps =
-  Omit<RNTextProps, 'style'> &
-  {
-    text?: ReactNode
-    animated?: boolean
-    colorChangeConfig?: Partial<Animated.TimingAnimationConfig>
-    debugName?: string
-    debounce?: number
-    pressDisabled?: boolean
-    style?: StyledProp<TextComposition>
-    animatedStyle?: AnimatedStyleProp<ViewStyle | ImageStyle | TextStyle>
-  }

package/src/components/TextInput/types.ts

@@ -1,23 +0,0 @@
-import { InputBaseProps } from '../InputBase'
-import { TextInputProps as RNTextInputProps } from 'react-native'
-import { AnyFunction, FormTypes, yup } from '@codeleap/common'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { TextInputMaskProps } from '../../modules/textInputMask'
-import { TextInputComposition } from './styles'
-
-export type TextInputProps =
-  Omit<InputBaseProps, 'style'> &
-  Omit<RNTextInputProps, 'style'> &
-  {
-    password?: boolean
-    validate?: FormTypes.ValidatorFunctionWithoutForm | yup.SchemaOf<string>
-    debugName: string
-    visibilityToggle?: boolean
-    masking?: FormTypes.TextField['masking']
-    onChangeMask?: TextInputMaskProps['onChangeText']
-    visibleIcon?: AppIcon
-    hiddenIcon?: AppIcon
-    _error?: string
-    onPress?: AnyFunction
-    style?: StyledProp<TextInputComposition>
-  }

package/src/components/Touchable/types.ts

@@ -1,27 +0,0 @@
-import { AnyFunction } from '@codeleap/common'
-import { StyledProp } from '@codeleap/styles'
-import { View as RNView, PressableProps } from 'react-native'
-import { TouchableComposition } from './styles'
-
-export type TouchableProps =
-  Omit<PressableProps, 'onPress' | 'children' | 'style'> &
-  {
-    component?: any
-    ref?: React.Ref<RNView>
-    debugName: string
-    activeOpacity?: number
-    debugComponent?: string
-    onPress?: AnyFunction
-    noFeedback?: boolean
-    debounce?: number
-    leadingDebounce?: boolean
-    setPressed?: (param: boolean) => void
-    rippleDisabled?: boolean
-    children?: React.ReactNode
-    style?: StyledProp<TouchableComposition>
-    analyticsEnabled?: boolean
-    analyticsName?: string
-    analyticsData?: Record<string, any>
-    dismissKeyboard?: boolean
-    disabled?: boolean
-  }

package/src/components/View/types.ts

@@ -1,13 +0,0 @@
-import { PropsOf } from '@codeleap/common'
-import { StyledProp } from '@codeleap/styles'
-import { ImageStyle, TextStyle, View as RNView, ViewStyle } from 'react-native'
-import { AnimatedStyleProp } from 'react-native-reanimated'
-import { ViewComposition } from './styles'
-
-export type ViewProps<T extends React.ComponentType = typeof RNView> = {
-  component?: T
-  style?: StyledProp<ViewComposition>
-  animated?: boolean
-  children?: React.ReactNode
-  animatedStyle?: AnimatedStyleProp<ViewStyle | ImageStyle | TextStyle>
-} & PropsOf<T>

package/src/hooks/index.ts

@@ -1,13 +0,0 @@
-import { StyleProp, useStyleObserver } from '@codeleap/styles'
-import { useMemo } from 'react'
-import { MobileStyleRegistry } from '../Registry'
-
-export const useStylesFor = <T = unknown>(componentName: string, style: StyleProp<T, string>): T => {
-  const styleObserver = useStyleObserver(style)
-
-  const styles = useMemo(() => {
-    return MobileStyleRegistry.current.styleFor(componentName, style)
-  }, [styleObserver])
-
-  return styles
-}