@codeleap/web 3.25.0 → 3.25.2

package/src/components/List/index.tsx

@@ -1,41 +1,68 @@
 import React from 'react'
+import { useDefaultComponentStyle } from '@codeleap/common'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
-import { ListItem, ListProps } from './types'
-import { ItemMasonryProps, ListMasonry, useInfiniteScroll, useMasonryReload } from '../../lib'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { ListPresets } from './styles'
+import { useInfiniteScroll } from './useInfiniteScroll'
+import { ListProps } from './types'
 import { ListLayout } from './ListLayout'
+import { ItemMasonryProps, ListMasonry, useMasonryReload } from '../../lib'
 
 export * from './styles'
+export * from './PaginationIndicator'
+export * from './useInfiniteScroll'
 export * from './types'
 export * from './ListLayout'
 
-const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
-  return <View style={props?.separatorStyles} />
+const RenderSeparator = (props: { separatorStyles: ViewProps<'div'>['css'] }) => {
+  return (
+    <View css={[props?.separatorStyles]}></View>
+  )
+}
+
+const defaultProps: Partial<ListProps> = {
+  ListFooterComponent: null,
+  ListHeaderComponent: null,
+  ListLoadingIndicatorComponent: null,
+  ListEmptyComponent: EmptyPlaceholder,
+  ListSeparatorComponent: RenderSeparator,
+  refreshDebounce: 1500,
+  refreshSize: 40,
+  refreshThreshold: 0.1,
+  refreshPosition: 16,
+  refresh: true,
+  rowItemsSpacing: 8,
+  overscan: 2,
+  reloadTimeout: 350,
+  showFooter: true,
 }
 
-export function List(props: ListProps) {
+export function List<T = any>(props: ListProps<T>) {
   const allProps = {
     ...List.defaultProps,
     ...props,
   } as ListProps
 
   const {
+    variants = [],
+    responsiveVariants = {},
+    styles = {},
     renderItem: RenderItem,
     rowItemsSpacing,
     ListSeparatorComponent,
     data,
     overscan,
     separators,
-    masonryProps,
+    masonryProps = {},
     reloadTimeout,
     showFooter,
-    style,
   } = allProps
 
-  const styles = useStylesFor(List.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
 
   const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
 
@@ -45,7 +72,7 @@ export function List(props: ListProps) {
   })
 
   const separator = React.useMemo(() => {
-    return separators ? <ListSeparatorComponent separatorStyles={styles.separator} /> : null
+    return separators ? <ListSeparatorComponent separatorStyles={variantStyles.separator} /> : null
   }, [])
 
   const renderItem = React.useCallback((_item: ItemMasonryProps<any>) => {
@@ -75,7 +102,7 @@ export function List(props: ListProps) {
     <ListLayout
       {...allProps}
       {...layoutProps}
-      styles={styles}
+      variantStyles={variantStyles}
       showFooter={reloadingLayout ? false : showFooter}
     >
       <ListMasonry
@@ -94,26 +121,4 @@ export function List(props: ListProps) {
   )
 }
 
-List.styleRegistryName = 'List'
-List.elements = ['wrapper', 'innerWrapper', 'separator', 'refreshControl', 'refreshControlIndicator']
-List.rootElement = 'wrapper'
-
-List.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return List as <T extends ListItem>(props: StyledComponentProps<ListProps<T>, typeof styles>) => IJSX
-}
-
-List.defaultProps = {
-  ListEmptyComponent: EmptyPlaceholder,
-  ListSeparatorComponent: RenderSeparator,
-  refreshDebounce: 1500,
-  refreshSize: 40,
-  refreshThreshold: 0.1,
-  refreshPosition: 16,
-  refresh: true,
-  rowItemsSpacing: 8,
-  overscan: 2,
-  reloadTimeout: 350,
-  showFooter: true,
-} as Partial<ListProps>
-
-WebStyleRegistry.registerComponent(List)
+List.defaultProps = defaultProps

package/src/components/List/styles.ts

@@ -1,11 +1,17 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ViewComposition } from '../View'
 
-type ListStates = 'empty' | 'loading'
+type ListStates = 'empty' | 'loading' 
 
-export type ListParts =
-  'wrapper' |
-  'innerWrapper' |
-  'separator' |
+export type ListParts = 
+  ViewComposition | 
+  'innerWrapper' | 
+  'separator' | 
   'refreshControl' |
   'refreshControlIndicator'
 
 export type ListComposition = `${ListParts}:${ListStates}` | ListParts
+
+const createListStyle = createDefaultVariantFactory<ListComposition>()
+
+export const ListPresets = includePresets(style => createListStyle(() => ({ wrapper: style })))

package/src/components/List/types.ts

@@ -1,22 +1,13 @@
-import { StylesOf } from '@codeleap/common'
+import { ComponentVariants, PropsOf, StylesOf } from '@codeleap/common'
 import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
-import { ViewProps } from '../View'
-import { MotionProps } from 'framer-motion'
+import { View, ViewProps } from '../View'
+import { ListComposition, ListPresets } from './styles'
+import { motion } from 'framer-motion'
 import { ActivityIndicatorProps } from '../ActivityIndicator'
 import { ComponentCommonProps } from '../../types'
-import { ItemMasonryProps, ListMasonryProps, UseInfiniteScrollArgs, UseInfiniteScrollReturn } from '../../lib'
-import { ListComposition } from './styles'
-import { StyledProp } from '@codeleap/styles'
-
-export type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollReturn['layoutProps'] & {
-  styles: StylesOf<ListComposition>
-  children?: React.ReactNode
-  showFooter?: boolean
-}
-
-export type ListRefreshControlComponent = Partial<ListLayoutProps> & {
-  styles: StylesOf<ListComposition>
-}
+import { UseInfiniteScrollArgs } from './useInfiniteScroll'
+import { ItemMasonryProps, ListMasonryProps } from '../../lib'
+import { ListLayoutProps } from './ListLayout'
 
 export type AugmentedRenderItemInfo<T> = ItemMasonryProps<T> & {
   item: T
@@ -25,27 +16,26 @@ export type AugmentedRenderItemInfo<T> = ItemMasonryProps<T> & {
   isOnly: boolean
 }
 
-export type ListItem = {
-  id: string | number
-}
-
-export type ListProps<T extends ListItem = ListItem> =
-  ComponentCommonProps &
-  UseInfiniteScrollArgs &
-  {
-    data: T[]
+export type ListProps<
+T = any[],
+Data = T extends Array<infer D> ? D : never
+> = 
+  ComponentVariants<typeof ListPresets> &
+  Omit<typeof View, 'variants' | 'styles'> & {
+    data: Data[]
     isFetching?: boolean
     hasNextPage?: boolean
     separators?: boolean
     onRefresh?: () => void
-    placeholder?: Omit<EmptyPlaceholderProps, 'debugName'>
+    placeholder?: EmptyPlaceholderProps
+    styles?: StylesOf<ListComposition>
     keyExtractor?: (item: T, index: number) => string
     renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
     ListFooterComponent?: (props: ListLayoutProps) => React.ReactElement
     ListLoadingIndicatorComponent?: () => React.ReactElement
     ListRefreshControlComponent?: () => React.ReactElement
     ListEmptyComponent?: React.FC | ((props: EmptyPlaceholderProps) => React.ReactElement)
-    ListSeparatorComponent?: React.FC | ((props: { separatorStyles: ViewProps['style'] }) => React.ReactElement)
+    ListSeparatorComponent?: React.FC | ((props: { separatorStyles: ViewProps<'div'>['css'] }) => React.ReactElement)
     isLoading?: boolean
     isFetchingNextPage?: boolean
     fetchNextPage?: () => void
@@ -55,13 +45,13 @@ export type ListProps<T extends ListItem = ListItem> =
     refreshThreshold?: number
     refreshPosition?: number
     refresh?: boolean
-    refreshControlProps?: Partial<MotionProps>
+    refreshControlProps?: PropsOf<typeof motion.div>
     refreshControlIndicatorProps?: Partial<ActivityIndicatorProps>
-    style?: StyledProp<ListComposition>
+    style?: React.CSSProperties
     ref?: React.MutableRefObject<undefined>
     rowItemsSpacing?: number
     overscan?: number
     masonryProps?: Partial<ListMasonryProps<T>>
     reloadTimeout?: number
     showFooter?: boolean
-  }
+} & ComponentCommonProps & UseInfiniteScrollArgs

package/src/components/List/useInfiniteScroll.ts

@@ -0,0 +1,159 @@
+import React from 'react'
+import { AnyFunction, TypeGuards, useEffect } from '@codeleap/common'
+import { ListProps } from '.'
+import { GridProps } from '../Grid'
+import { useInfiniteLoader, LoadMoreItemsCallback, UseInfiniteLoaderOptions } from 'masonic'
+
+export type UseInfiniteScrollArgs<Item extends Element = any> = {
+  threshold?: number
+  onLoadMore?: AnyFunction
+  loadMoreOptions?: Partial<UseInfiniteLoaderOptions<Item>>
+}
+
+export type UseInfiniteScrollProps<Item extends Element = any> =
+  Partial<ListProps> &
+  Partial<GridProps> & 
+  UseInfiniteScrollArgs<Item>
+
+export type UseInfiniteScrollReturn<Item extends Element = any> = {
+  onLoadMore: LoadMoreItemsCallback<Item>
+  isRefresh: boolean
+  layoutProps: {
+    isEmpty: boolean
+    refreshing: boolean
+    scrollableRef: React.MutableRefObject<undefined>
+  }
+  onRefreshItems: AnyFunction
+}
+
+type UseRefreshOptions = {
+  threshold: number
+  debounce: number
+  enabled: boolean
+}
+
+const scrollDebounce = (func, delay) => {
+  const timerRef = React.useRef(null)
+
+  const scrollDebounce = (...args) => {
+    clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => {
+      func(...args)
+    }, delay)
+  }
+
+  return scrollDebounce
+}
+
+export const useRefresh = (onRefresh = () => null, options: UseRefreshOptions) => {
+  const {
+    threshold,
+    debounce,
+    enabled,
+  } = options
+
+  const [refresh, setRefresh] = React.useState(false)
+
+  const pushToTopRef = React.useRef(0)
+
+  const refresher = React.useCallback(async (_onRefresh: AnyFunction) => {
+    setRefresh(true)
+    await _onRefresh?.()
+
+    setTimeout(() => {
+      setRefresh(false)
+      pushToTopRef.current = 0
+    }, 2500)
+  }, [])
+
+  const containerRef = React.useRef(null)
+
+  const onScroll = scrollDebounce(() => {
+    if (containerRef.current) {
+      const rect = containerRef.current?.getBoundingClientRect()
+      const scrollTop = window?.pageYOffset || document?.documentElement?.scrollTop
+      
+      const containerTop = rect.top + scrollTop
+      const containerHeight = rect.height
+
+      const distanceFromTop = Math.max(0, scrollTop - containerTop)
+      const distanceFromBottom = Math.max(0, containerTop + containerHeight - scrollTop)
+
+      const totalDistance = containerHeight + distanceFromTop + distanceFromBottom
+      const percentage = (distanceFromTop / totalDistance) * 100
+
+      if (percentage < threshold) {
+        if (pushToTopRef.current === 2) {
+          refresher(onRefresh)
+        }
+
+        pushToTopRef.current = pushToTopRef.current + 1
+      }
+    }
+  }, debounce)
+
+  useEffect(() => {
+    if (enabled) {
+      window.addEventListener('scroll', onScroll)
+
+      return () => {
+        window.removeEventListener('scroll', onScroll)
+      }
+    }
+  }, [enabled])
+
+  return {
+    refresh,
+    scrollableRef: containerRef,
+    refresher,
+  }
+}
+
+export function useInfiniteScroll<Item extends Element = any>(props: UseInfiniteScrollProps<Item>): UseInfiniteScrollReturn<Item> {
+  const {
+    onRefresh,
+    data,
+    hasNextPage,
+    refresh: refreshEnabled,
+    fetchNextPage,
+    refreshThreshold,
+    refreshDebounce,
+    loadMoreOptions = {},
+    onLoadMore,
+    threshold = 16,
+  } = props
+
+  const infiniteLoader = useInfiniteLoader(
+    async (args) => {
+      if (hasNextPage) await fetchNextPage?.()
+      if (TypeGuards.isFunction(onLoadMore)) await onLoadMore?.(args)
+    },
+    {
+      isItemLoaded: (index, items) => !!items?.[index],
+      threshold: threshold,
+      ...loadMoreOptions,
+    },
+  )
+
+  const refreshHookReturn = useRefresh(
+    onRefresh, 
+    { 
+      threshold: refreshThreshold, 
+      debounce: refreshDebounce,
+      enabled: refreshEnabled,
+    }
+  )
+
+  const isEmpty = React.useMemo(() => (!data || !data?.length), [data?.length])
+
+  return {
+    onLoadMore: infiniteLoader,
+    isRefresh: refreshHookReturn.refresh,
+    layoutProps: {
+      scrollableRef: refreshHookReturn.scrollableRef,
+      refreshing: refreshHookReturn.refresh,
+      isEmpty,
+    },
+    onRefreshItems: refreshHookReturn.refresher,
+  }
+}

package/src/components/LoadingOverlay/index.tsx

@@ -1,47 +1,49 @@
+import { ComponentVariants, getNestedStylesByKey, useDefaultComponentStyle } from '@codeleap/common'
 import React from 'react'
-import { View } from '../View'
-import { ActivityIndicator } from '../ActivityIndicator'
-import { LoadingOverlayProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-
-export * from './styles'
-export * from './types'
+import { StylesOf } from '../..'
+import { LoadingOverlayComposition, LoadingOverlayPresets } from './styles'
+import { View, ViewProps } from '../View'
+import { ActivityIndicator, ActivityIndicatorProps } from '../ActivityIndicator'
+import { ComponentCommonProps } from '../../types/utility'
+
+export type LoadingOverlayProps = Partial<ViewProps<'div'>> & {
+  visible?: boolean
+  styles?: StylesOf<LoadingOverlayComposition>
+  style?: React.CSSProperties
+  indicatorProps?: ActivityIndicatorProps
+  children?: React.ReactNode
+} & ComponentVariants<typeof LoadingOverlayPresets> & ComponentCommonProps
 
 export const LoadingOverlay = (props: LoadingOverlayProps) => {
-  const {
+  const { 
     visible,
     children,
-    style,
+    styles = {},
+    variants = [],
+    responsiveVariants = {},
+    style = {},
     indicatorProps,
     debugName,
-    ...rest
-  } = {
-    ...LoadingOverlay.defaultProps,
-    ...props,
-  }
+    ...rest 
+  } = props
 
-  const styles = useStylesFor(LoadingOverlay.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:LoadingOverlay', typeof LoadingOverlayPresets>('u:LoadingOverlay', {
+    variants, 
+    styles, 
+    responsiveVariants, 
+    rootElement: 'wrapper',
+  })
 
-  const indicatorStyles = useNestedStylesByKey('indicator', styles)
+  const indicatorStyles = React.useMemo(() => {
+    return getNestedStylesByKey('indicator', variantStyles)
+  }, [variantStyles])
 
   return (
-    <View {...rest} style={[styles.wrapper, visible && styles['wrapper:visible']]}>
-      <ActivityIndicator debugName={debugName} {...indicatorProps} style={indicatorStyles} />
+    <View css={[variantStyles.wrapper, visible && variantStyles['wrapper:visible'], style]} {...rest}>
+      <ActivityIndicator debugName={debugName} {...indicatorProps} styles={indicatorStyles} />
       {children}
     </View>
   )
 }
 
-LoadingOverlay.styleRegistryName = 'LoadingOverlay'
-LoadingOverlay.elements = ['wrapper', 'indicator']
-LoadingOverlay.rootElement = 'wrapper'
-
-LoadingOverlay.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return LoadingOverlay as (props: StyledComponentProps<LoadingOverlayProps, typeof styles>) => IJSX
-}
-
-LoadingOverlay.defaultProps = {} as Partial<LoadingOverlayProps>
-
-WebStyleRegistry.registerComponent(LoadingOverlay)
+export * from './styles'

package/src/components/LoadingOverlay/styles.ts

@@ -1,7 +1,12 @@
-import { ActivityIndicatorComposition } from '../ActivityIndicator'
-
-type LoadingOverlayStates = 'visible'
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
+import { ActivityIndicatorComposition } from "../ActivityIndicator";
 
+type LoadingOverlayStates = 'visible' 
+ 
 export type LoadingOverlayParts = 'wrapper' | `indicator${Capitalize<ActivityIndicatorComposition>}`
 
 export type LoadingOverlayComposition = `${LoadingOverlayParts}:${LoadingOverlayStates}` | LoadingOverlayParts
+
+export const createLoadingOverlayStyle = createDefaultVariantFactory<LoadingOverlayComposition>()
+
+export const LoadingOverlayPresets = includePresets(s => createLoadingOverlayStyle(() => ({wrapper: s})))