@codeleap/mobile 3.24.2 → 3.25.0

package/src/components/List/index.tsx

@@ -1,171 +1,119 @@
-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 React, { forwardRef } from 'react'
+import { useCallback, TypeGuards } from '@codeleap/common'
+import { ListRenderItemInfo, FlatList } from 'react-native'
 import { View, ViewProps } from '../View'
-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 { EmptyPlaceholder } from '../EmptyPlaceholder'
+import { RefreshControl } from '../RefreshControl'
 import { useKeyboardPaddingStyle } from '../../utils'
-
-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
-}
+import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { FlatListProps, ListItem } from './types'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
-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>
+export * from './types'
 
 const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
-  return (
-    <View style={props.separatorStyles}></View>
-  )
+  return <View style={props.separatorStyles} />
 }
 
-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,
+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 variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
-      variants,
-      styles,
-      transform: StyleSheet.flatten,
-
-    })
+    return <RenderItem {...itemProps} />
+  }, [dataLength, RenderItem])
 
-    // const isEmpty = !props.data || !props.data.length
-    const separator = props?.separators && <RenderSeparator separatorStyles={variantStyles.separator} />
+  const isEmpty = !data || !data?.length
 
-    const renderItem = useCallback((data: ListRenderItemInfo<any>) => {
-      if (!props?.renderItem) return null
-      const listLength = props?.data?.length || 0
+  const _placeholder = {
+    ...placeholder,
+    loading: TypeGuards.isBoolean(placeholder?.loading) ? placeholder.loading : loading,
+  }
 
-      const isFirst = data.index === 0
-      const isLast = data.index === listLength - 1
+  const keyboardStyle = useKeyboardPaddingStyle([
+    styles.content,
+    contentContainerStyle,
+    isEmpty && styles['content:empty'],
+    loading && styles['content:loading'],
+  ], keyboardAware && !props.horizontal)
 
-      const isOnly = isFirst && isLast
+  const wrapperStyle = [styles.wrapper, isEmpty && styles['wrapper:empty'], loading && styles['wrapper:loading']]
 
-      return props?.renderItem({
-        ...data,
-        isFirst,
-        isLast,
-        isOnly,
-      })
-    }, [props?.renderItem, props?.data?.length])
+  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 isEmpty = !props.data || !props.data.length
+List.styleRegistryName = 'List'
+List.elements = ['wrapper', 'content', 'separator', 'header', 'refreshControl']
+List.rootElement = 'wrapper'
 
-    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>
+List.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return List as <T extends ListItem>(props: StyledComponentProps<FlatListProps<T>, typeof styles>) => IJSX
 }
-export const List = ListCP as unknown as ListComponentType
 
-List.defaultProps = defaultProps
+List.defaultProps = {
+  keyboardShouldPersistTaps: 'handled',
+  fakeEmpty: false,
+  loading: false,
+  keyboardAware: true,
+} as Partial<FlatListProps>
 
+MobileStyleRegistry.registerComponent(List)

package/src/components/List/styles.ts

@@ -1,13 +1,7 @@
-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/List/types.ts

@@ -0,0 +1,41 @@
+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/index.tsx

@@ -1,55 +1,68 @@
 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 type LoadingOverlayProps = React.PropsWithChildren<{
-    variants?: ComponentVariants<typeof LoadingOverlayPresets>['variants']
-    styles?: StylesOf<LoadingOverlayComposition>
-    visible?: boolean
-} >
+export * from './types'
 
 export const LoadingOverlay = (props: LoadingOverlayProps) => {
   const {
     children,
-    styles,
-    variants,
     visible,
-  } = props
+    style,
+  } = {
+    ...LoadingOverlay.defaultProps,
+    ...props
+  }
 
-  const variantStyles = useDefaultComponentStyle<'u:LoadingOverlay', typeof LoadingOverlayPresets>('u:LoadingOverlay', {
-    variants,
-    rootElement: 'wrapper',
-    styles,
-    transform: StyleSheet.flatten,
-  })
+  const transition = useRef(null)
+
+  const styles = useStylesFor(LoadingOverlay.styleRegistryName, style)
 
-  const loaderStyles = useMemo(() => getNestedStylesByKey('loader', variantStyles), [variantStyles])
+  const loaderStyles = useNestedStylesByKey('loader', styles)
 
   const wrapperAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: ['wrapper:visible', 'wrapper:hidden'],
     updater: (s) => {
       'worklet'
       return visible ? s['wrapper:visible'] : s['wrapper:hidden']
     },
-    transition: variantStyles.transition,
+    transition: styles.transition,
     dependencies: [visible],
   })
- 
 
-  const transition = useRef(null)
   if (!transition.current) {
-    transition.current = JSON.parse(JSON.stringify(variantStyles['wrapper:transition']))
+    transition.current = JSON.parse(JSON.stringify(styles['wrapper:transition']))
   }
-  return <View style={[variantStyles.wrapper, wrapperAnimation]} animated  transition={transition.current}>
-    <ActivityIndicator styles={loaderStyles}/>
-    {children}
-  </View>
+
+  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
 }
+
+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'
-
-const createLoadingOverlayStyle = createDefaultVariantFactory<LoadingOverlayComposition>()
-
-export const LoadingOverlayPresets = includePresets((styles) => createLoadingOverlayStyle(() => ({ wrapper: styles })))
+export type LoadingOverlayComposition =
+  'wrapper' |
+  `wrapper:${WrapperStates}` |
+  'wrapper:transition' |
+  `loader${Capitalize<ActivityIndicatorComposition>}` |
+  'transition'

package/src/components/LoadingOverlay/types.ts

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