@codeleap/mobile 3.25.0 → 3.25.2

package/src/components/List/PaginationIndicator.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import {
+  ComponentVariants,
+  createDefaultVariantFactory,
+  getNestedStylesByKey,
+  includePresets,
+  TypeGuards,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { StyleSheet, ViewStyle } from 'react-native'
+import { StylesOf } from '../../types'
+import { ActivityIndicator, ActivityIndicatorComposition } from '../ActivityIndicator'
+import { Text } from '../Text'
+
+export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}`
+
+const createPaginationIndicatorStyle = createDefaultVariantFactory<PaginationIndicatorComposition>()
+
+export const PaginationIndicatorPresets = includePresets((style) => createPaginationIndicatorStyle(() => ({ loaderWrapper: style, text: style })))
+
+export type PaginationIndicatorProps = {
+  isFetching?: boolean
+  noMoreItemsText: React.ReactChild
+  hasMore?: boolean
+  activityIndicator?: JSX.Element
+  styles?: StylesOf<PaginationIndicatorComposition>
+  style?: ViewStyle
+} & ComponentVariants<typeof PaginationIndicatorPresets>
+
+export const PaginationIndicator = (props: PaginationIndicatorProps) => {
+  const { hasMore, isFetching, noMoreItemsText, style, activityIndicator, styles = {}, variants = [] } = props
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:PaginationIndicator',
+    typeof PaginationIndicatorPresets
+    >('u:PaginationIndicator', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+    })
+
+  const loaderStyles = getNestedStylesByKey('loader', variantStyles)
+
+  if (isFetching) {
+    return activityIndicator || <ActivityIndicator style={style} styles={loaderStyles}/>
+  }
+  if (!hasMore) {
+    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
+      return <Text style={[variantStyles.text, style]} text={noMoreItemsText.toString()}/>
+    }
+    return noMoreItemsText
+  }
+  return null
+}

package/src/components/List/index.tsx

@@ -1,119 +1,171 @@
-import React, { forwardRef } from 'react'
-import { useCallback, TypeGuards } from '@codeleap/common'
-import { ListRenderItemInfo, FlatList } from 'react-native'
+import * as React from 'react'
+import { forwardRef } from 'react'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+  useCallback,
+  TypeGuards,
+} from '@codeleap/common'
+
+import { FlatListProps as RNFlatListProps, ListRenderItemInfo, StyleSheet, FlatList } from 'react-native'
 import { View, ViewProps } from '../View'
-import { EmptyPlaceholder } from '../EmptyPlaceholder'
-import { RefreshControl } from '../RefreshControl'
+import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { RefreshControl, RefreshControlProps } from '../RefreshControl'
+import { ListComposition, ListPresets } from './styles'
+import { StylesOf } from '../../types'
+
+import { KeyboardAwareFlatList } from 'react-native-keyboard-aware-scroll-view'
 import { useKeyboardPaddingStyle } from '../../utils'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { FlatListProps, ListItem } from './types'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
+
+export type DataboundFlatListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
+
+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 * from './styles'
-export * from './types'
+export * from './PaginationIndicator'
+
+export type FlatListProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> = ReplaceFlatlistProps<RNFlatListProps<Data>, Data> &
+  Omit<ViewProps, 'variants'> & {
+    separators?: boolean
+    placeholder?: EmptyPlaceholderProps
+    styles?: StylesOf<ListComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+    fakeEmpty?: boolean
+    loading?: boolean
+    keyboardAware?: boolean
+  } & ComponentVariants<typeof ListPresets>
 
 const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
-  return <View style={props.separatorStyles} />
+  return (
+    <View style={props.separatorStyles}></View>
+  )
 }
 
-export const List = forwardRef<FlatList, FlatListProps>((flatListProps, ref) => {
-  const {
-    style,
-    onRefresh,
-    component,
-    refreshing,
-    placeholder,
-    refreshControlProps,
-    loading,
-    keyboardAware,
-    fakeEmpty = loading,
-    contentContainerStyle,
-    renderItem: RenderItem,
-    data,
-    ...props
-  } = {
-    ...List.defaultProps,
-    ...flatListProps,
-  }
-
-  const styles = useStylesFor(List.styleRegistryName, style)
-
-  const separator = props?.separators && <RenderSeparator separatorStyles={styles.separator} />
-
-  const dataLength = data?.length || 0
-
-  const renderItem = useCallback((data: ListRenderItemInfo<any>) => {
-    if (!RenderItem) return null
-
-    const isFirst = data.index === 0
-    const isLast = data.index === dataLength - 1
-
-    const isOnly = isFirst && isLast
-
-    const itemProps = {
-      ...data,
-      isFirst,
-      isLast,
-      isOnly,
+const defaultProps: Partial<FlatListProps> = {
+  keyboardShouldPersistTaps: 'handled',
+  styles: {},
+  variants: [],
+  refreshControlProps: {},
+  fakeEmpty: false,
+  loading: false,
+  keyboardAware: true,
+}
+
+const ListCP = forwardRef<FlatList, FlatListProps>(
+  (flatListProps, ref) => {
+    const {
+      variants,
+      style,
+      styles,
+      onRefresh,
+      component,
+      refreshing,
+      placeholder,
+      refreshControlProps,
+      loading,
+      keyboardAware,
+      fakeEmpty = loading,
+      contentContainerStyle,
+      ...props
+    } = {
+      ...defaultProps,
+      ...flatListProps,
     }
 
-    return <RenderItem {...itemProps} />
-  }, [dataLength, RenderItem])
+    const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
 
-  const isEmpty = !data || !data?.length
+    })
 
-  const _placeholder = {
-    ...placeholder,
-    loading: TypeGuards.isBoolean(placeholder?.loading) ? placeholder.loading : loading,
-  }
+    // const isEmpty = !props.data || !props.data.length
+    const separator = props?.separators && <RenderSeparator separatorStyles={variantStyles.separator} />
 
-  const keyboardStyle = useKeyboardPaddingStyle([
-    styles.content,
-    contentContainerStyle,
-    isEmpty && styles['content:empty'],
-    loading && styles['content:loading'],
-  ], keyboardAware && !props.horizontal)
+    const renderItem = useCallback((data: ListRenderItemInfo<any>) => {
+      if (!props?.renderItem) return null
+      const listLength = props?.data?.length || 0
 
-  const wrapperStyle = [styles.wrapper, isEmpty && styles['wrapper:empty'], loading && styles['wrapper:loading']]
+      const isFirst = data.index === 0
+      const isLast = data.index === listLength - 1
 
-  return (
-    <FlatList
-      ItemSeparatorComponent={separator as unknown as React.ComponentType}
-      refreshControl={!!onRefresh && (
-        <RefreshControl
-          refreshing={refreshing}
-          onRefresh={onRefresh}
-          {...refreshControlProps}
-        />
-      )}
-      ListEmptyComponent={<EmptyPlaceholder {..._placeholder} />}
-      showsVerticalScrollIndicator={false}
-      showsHorizontalScrollIndicator={false}
-      {...props}
-      ListHeaderComponentStyle={styles.header}
-      style={wrapperStyle}
-      contentContainerStyle={keyboardStyle}
-      data={fakeEmpty ? [] : data}
-      ref={ref}
-      renderItem={renderItem}
-    />
-  )
-}) as StyledComponentWithProps<FlatListProps>
+      const isOnly = isFirst && isLast
+
+      return props?.renderItem({
+        ...data,
+        isFirst,
+        isLast,
+        isOnly,
+      })
+    }, [props?.renderItem, props?.data?.length])
 
-List.styleRegistryName = 'List'
-List.elements = ['wrapper', 'content', 'separator', 'header', 'refreshControl']
-List.rootElement = 'wrapper'
+    const isEmpty = !props.data || !props.data.length
 
-List.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return List as <T extends ListItem>(props: StyledComponentProps<FlatListProps<T>, typeof styles>) => IJSX
+    const _placeholder = {
+      ...placeholder,
+      loading: TypeGuards.isBoolean(placeholder?.loading) ? placeholder.loading : loading,
+    }
+
+    const keyboardStyle = useKeyboardPaddingStyle([
+      variantStyles.content,
+      contentContainerStyle,
+      isEmpty && variantStyles['content:empty'],
+    ], keyboardAware && !props.horizontal)
+
+    return (
+      <FlatList
+        style={[
+          variantStyles.wrapper,
+          style,
+          isEmpty && variantStyles['wrapper:empty'],
+        ]}
+        contentContainerStyle={keyboardStyle}
+        // @ts-expect-error This works
+        ItemSeparatorComponent={separator}
+        ListHeaderComponentStyle={variantStyles.header}
+        refreshControl={!!onRefresh && (
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            {...refreshControlProps}
+          />
+        )}
+
+        ListEmptyComponent={<EmptyPlaceholder {..._placeholder} />}
+        {...props}
+        data={fakeEmpty ? [] : props.data}
+        ref={ref}
+        renderItem={renderItem}
+
+      />
+    )
+  },
+)
+
+export type ListComponentType = (<T extends any[] = any[]>(props: FlatListProps<T>) => JSX.Element) & {
+  defaultProps: Partial<FlatListProps>
 }
+export const List = ListCP as unknown as ListComponentType
 
-List.defaultProps = {
-  keyboardShouldPersistTaps: 'handled',
-  fakeEmpty: false,
-  loading: false,
-  keyboardAware: true,
-} as Partial<FlatListProps>
+List.defaultProps = defaultProps
 
-MobileStyleRegistry.registerComponent(List)

package/src/components/List/styles.ts

@@ -1,7 +1,13 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ScrollComposition } from '../Scroll/styles'
 
+
 type ListStates = 'empty' | 'loading' 
 
 type ListParts = ScrollComposition | 'separator' | 'header' | 'refreshControl'
 
 export type ListComposition = `${ListParts}:${ListStates}` | ListParts
+
+const createListStyle = createDefaultVariantFactory<ListComposition>()
+
+export const ListPresets = includePresets(style => createListStyle(() => ({ content: style })))

package/src/components/LoadingOverlay/index.tsx

@@ -1,68 +1,55 @@
 import React, { useRef } from 'react'
+import { ComponentVariants, getNestedStylesByKey, onUpdate, useDefaultComponentStyle, useMemo } from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types'
 import { ActivityIndicator } from '../ActivityIndicator'
 import { View } from '../View'
+import { LoadingOverlayComposition, LoadingOverlayPresets } from './styles'
 import { useAnimatedVariantStyles } from '../../utils'
-import { LoadingOverlayProps } from './types'
-import { MobileStyleRegistry } from '../../Registry'
-import { AnyRecord, useNestedStylesByKey, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { useStylesFor } from '../../hooks'
 
 export * from './styles'
-export * from './types'
+
+export type LoadingOverlayProps = React.PropsWithChildren<{
+    variants?: ComponentVariants<typeof LoadingOverlayPresets>['variants']
+    styles?: StylesOf<LoadingOverlayComposition>
+    visible?: boolean
+} >
 
 export const LoadingOverlay = (props: LoadingOverlayProps) => {
   const {
     children,
+    styles,
+    variants,
     visible,
-    style,
-  } = {
-    ...LoadingOverlay.defaultProps,
-    ...props
-  }
-
-  const transition = useRef(null)
+  } = props
 
-  const styles = useStylesFor(LoadingOverlay.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:LoadingOverlay', typeof LoadingOverlayPresets>('u:LoadingOverlay', {
+    variants,
+    rootElement: 'wrapper',
+    styles,
+    transform: StyleSheet.flatten,
+  })
 
-  const loaderStyles = useNestedStylesByKey('loader', styles)
+  const loaderStyles = useMemo(() => getNestedStylesByKey('loader', variantStyles), [variantStyles])
 
   const wrapperAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
+    variantStyles,
     animatedProperties: ['wrapper:visible', 'wrapper:hidden'],
     updater: (s) => {
       'worklet'
       return visible ? s['wrapper:visible'] : s['wrapper:hidden']
     },
-    transition: styles.transition,
+    transition: variantStyles.transition,
     dependencies: [visible],
   })
+ 
 
+  const transition = useRef(null)
   if (!transition.current) {
-    transition.current = JSON.parse(JSON.stringify(styles['wrapper:transition']))
+    transition.current = JSON.parse(JSON.stringify(variantStyles['wrapper:transition']))
   }
-
-  return (
-    <View
-      animated
-      animatedStyle={wrapperAnimation}
-      style={styles.wrapper}
-      // @ts-expect-error
-      transition={transition.current}
-    >
-      <ActivityIndicator style={loaderStyles} />
-      {children}
-    </View>
-  )
-}
-
-LoadingOverlay.styleRegistryName = 'LoadingOverlay'
-LoadingOverlay.elements = ['wrapper', 'loader', 'transition']
-LoadingOverlay.rootElement = 'wrapper'
-
-LoadingOverlay.defaultProps = {} as Partial<LoadingOverlayProps>
-
-LoadingOverlay.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return LoadingOverlay as (props: StyledComponentProps<LoadingOverlayProps, typeof styles>) => IJSX
+  return <View style={[variantStyles.wrapper, wrapperAnimation]} animated  transition={transition.current}>
+    <ActivityIndicator styles={loaderStyles}/>
+    {children}
+  </View>
 }
-
-MobileStyleRegistry.registerComponent(LoadingOverlay)

package/src/components/LoadingOverlay/styles.ts

@@ -1,10 +1,10 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
 
-type WrapperStates = 'hidden' | 'visible'
+type WrapperStates = 'hidden'| 'visible'
 
-export type LoadingOverlayComposition =
-  'wrapper' |
-  `wrapper:${WrapperStates}` |
-  'wrapper:transition' |
-  `loader${Capitalize<ActivityIndicatorComposition>}` |
-  'transition'
+export type LoadingOverlayComposition = 'wrapper' | `wrapper:${WrapperStates}` | 'wrapper:transition' | `loader${Capitalize<ActivityIndicatorComposition>}` | 'transition'
+
+const createLoadingOverlayStyle = createDefaultVariantFactory<LoadingOverlayComposition>()
+
+export const LoadingOverlayPresets = includePresets((styles) => createLoadingOverlayStyle(() => ({ wrapper: styles })))