@codeleap/web 7.0.2 → 7.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "7.0.2",
+  "version": "7.1.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -22,15 +22,15 @@
   },
   "license": "UNLICENSED",
   "devDependencies": {
-    "@codeleap/config": "7.0.1",
-    "@codeleap/form": "7.0.1",
-    "@codeleap/hooks": "7.0.1",
-    "@codeleap/logger": "7.0.1",
-    "@codeleap/query": "7.0.1",
-    "@codeleap/styles": "7.0.1",
-    "@codeleap/types": "7.0.1",
-    "@codeleap/utils": "7.0.1",
-    "@codeleap/store": "7.0.1",
+    "@codeleap/config": "7.0.2",
+    "@codeleap/form": "7.0.2",
+    "@codeleap/hooks": "7.0.2",
+    "@codeleap/logger": "7.0.2",
+    "@codeleap/query": "7.0.2",
+    "@codeleap/styles": "7.0.2",
+    "@codeleap/types": "7.0.2",
+    "@codeleap/utils": "7.0.2",
+    "@codeleap/store": "7.0.2",
     "@tanstack/react-query": "5.100.9"
   },
   "scripts": {
@@ -60,13 +60,13 @@
     "uuid": "13.0.0"
   },
   "peerDependencies": {
-    "@codeleap/types": "7.0.1",
-    "@codeleap/utils": "7.0.1",
-    "@codeleap/hooks": "7.0.1",
-    "@codeleap/query": "7.0.1",
-    "@codeleap/logger": "7.0.1",
-    "@codeleap/styles": "7.0.1",
-    "@codeleap/store": "7.0.1",
+    "@codeleap/types": "7.0.2",
+    "@codeleap/utils": "7.0.2",
+    "@codeleap/hooks": "7.0.2",
+    "@codeleap/query": "7.0.2",
+    "@codeleap/logger": "7.0.2",
+    "@codeleap/styles": "7.0.2",
+    "@codeleap/store": "7.0.2",
     "@emotion/react": "11.14.0",
     "@reach/router": "^1.3.4",
     "dayjs": "1.11.18",

package/src/components/List/elements.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useImperativeHandle, useMemo } from 'react'
+import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react'
 import {
   useMasonry,
   usePositioner,
@@ -11,6 +11,7 @@ import { TypeGuards } from '@codeleap/types'
 import { View, ViewProps } from '../View'
 import { useListContext } from './context'
 import { AugmentedRenderItemInfo, ListHandle, ListItem, ListItemsProps } from './types'
+import { useScrollEdgeDetection } from './useScrollEdgeDetection'
 
 /**
  * Outer `View` that measures its own dimensions for the Masonic positioner via a `ResizeObserver`.
@@ -28,16 +29,26 @@ export const ListWrapper = ({ children, ...viewProps }: ViewProps) => {
 function _ListItemsContent<T extends ListItem>({
   data,
   renderItem: providedRenderItem,
-  fetchNextPage: itemsFetchNextPage,
-  hasNextPage: itemsHasNextPage,
+  infiniteLoaderCallback: itemsInfiniteLoaderCallback,
+  hasMore: itemsHasMore,
+  onEndReached: itemsOnEndReached,
+  onEndReachedThreshold: itemsOnEndReachedThreshold,
+  onStartReached: itemsOnStartReached,
+  onStartReachedThreshold: itemsOnStartReachedThreshold,
   ref,
 }: ListItemsProps<T>) {
   const { wrapperRef, wrapperLayout, scrollHook, styles, props, padding } = useListContext()
 
-  const fetchNextPage = itemsFetchNextPage ?? props.fetchNextPage
-  const hasNextPage = itemsHasNextPage ?? props.hasNextPage
+  const infiniteLoaderCallback = itemsInfiniteLoaderCallback ?? props.infiniteLoaderCallback
+  const hasMore = itemsHasMore ?? props.hasMore
+  const onEndReached = itemsOnEndReached ?? props.onEndReached
+  const onEndReachedThreshold = itemsOnEndReachedThreshold ?? props.onEndReachedThreshold
+  const onStartReached = itemsOnStartReached ?? props.onStartReached
+  const onStartReachedThreshold = itemsOnStartReachedThreshold ?? props.onStartReachedThreshold
 
-  const { scrollTop, isScrolling, height, width, scrollElement } = scrollHook(wrapperRef, wrapperLayout)
+  const useScrollBasedLoading = !!onEndReached || !!onStartReached
+
+  const { scrollTop, scrollHeight, isScrolling, height, width, scrollElement } = scrollHook(wrapperRef, wrapperLayout)
   const innerWidth = width - padding.paddingLeft - padding.paddingRight
 
   const stylePositioner = (styles as any).positioner ?? {}
@@ -69,12 +80,24 @@ function _ListItemsContent<T extends ListItem>({
     },
   }), [scrollToIndexFn])
 
+  useScrollEdgeDetection({
+    scrollTop,
+    scrollHeight,
+    clientHeight: height,
+    onEndReached,
+    onEndReachedThreshold,
+    onStartReached,
+    onStartReachedThreshold,
+  })
+
   const maybeLoadMore = useInfiniteLoader(
-    async () => {
-      if (hasNextPage) fetchNextPage?.()
-    },
+    useScrollBasedLoading
+      ? async () => {}
+      : async () => { if (hasMore) infiniteLoaderCallback?.() },
     {
       isItemLoaded: (index, items) => !!items?.[index],
+      minimumBatchSize: 10,
+      threshold: 4,
       ...props.infiniteLoaderProps,
     }
   )
@@ -92,7 +115,7 @@ function _ListItemsContent<T extends ListItem>({
     const isFirst = index === 0
     const isLast = index === dataLength - 1
     const isOnly = dataLength === 1
-
+    
     return <>
       {isFirst ? null : separator}
       {providedRenderItem({
@@ -104,7 +127,7 @@ function _ListItemsContent<T extends ListItem>({
       } as AugmentedRenderItemInfo<T>)}
     </>
   }, [providedRenderItem, separator, dataLength])
-
+  
   return useMasonry({
     positioner,
     resizeObserver,
@@ -112,9 +135,8 @@ function _ListItemsContent<T extends ListItem>({
     scrollTop,
     isScrolling,
     items: data ?? [],
-  
     render: wrappedRenderItem,
-    onRender: maybeLoadMore,
+    onRender: useScrollBasedLoading ? undefined : maybeLoadMore,
   })
 }
 

package/src/components/List/index.tsx

@@ -19,8 +19,12 @@ export function List<T extends ListItem>(props: ListProps<T>) {
   const {
     data,
     renderItem,
-    fetchNextPage,
-    hasNextPage,
+    infiniteLoaderCallback,
+    hasMore,
+    onEndReached,
+    onEndReachedThreshold,
+    onStartReached,
+    onStartReachedThreshold,
     ...providerProps
   } = { ...List.defaultProps, ...props } as ListProps<T>
 
@@ -31,8 +35,12 @@ export function List<T extends ListItem>(props: ListProps<T>) {
         <ListItems
           data={data}
           renderItem={renderItem}
-          fetchNextPage={fetchNextPage}
-          hasNextPage={hasNextPage}
+          infiniteLoaderCallback={infiniteLoaderCallback}
+          hasMore={hasMore}
+          onEndReached={onEndReached}
+          onEndReachedThreshold={onEndReachedThreshold}
+          onStartReached={onStartReached}
+          onStartReachedThreshold={onStartReachedThreshold}
         />
         <ListFooter />
       </ListWrapper>

package/src/components/List/scroll.ts

@@ -8,9 +8,10 @@ import { useIsomorphicEffect } from '../../lib/hooks/useIsomorphicEffect'
 import { useWindowSize } from '../../lib/hooks/useWindowSize'
 import { UseListScrollHook, ListWrapperLayout } from './types'
 
-function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: number; isScrolling: boolean } {
+function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: number; scrollHeight: number; isScrolling: boolean } {
   const [isScrolling, setIsScrolling] = useState(false)
   const [scrollTop, setScrollTop] = useState(0)
+  const [scrollHeight, setScrollHeight] = useState(0)
 
   useIsomorphicEffect(() => {
     if (typeof window === 'undefined') return
@@ -22,6 +23,7 @@ function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: num
         if (tick) return
         tick = window.requestAnimationFrame(() => {
           setScrollTop(current.scrollTop)
+          setScrollHeight(current.scrollHeight)
           tick = void 0
         })
       }
@@ -44,7 +46,7 @@ function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: num
     return () => window.clearTimeout(to)
   }, [scrollTop])
 
-  return { scrollTop, isScrolling }
+  return { scrollTop, scrollHeight, isScrolling }
 }
 
 /**
@@ -53,9 +55,10 @@ function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: num
  * This is the default scroll hook; override via `ListProviderProps.scrollHook` or set `windowScroll` to switch to `useWindowScroll`.
  */
 export const useElementScroll: UseListScrollHook = (wrapperRef: React.RefObject<HTMLElement>, layout: ListWrapperLayout | null) => {
-  const { scrollTop, isScrolling } = useElementScroller(wrapperRef)
+  const { scrollTop, scrollHeight, isScrolling } = useElementScroller(wrapperRef)
   return {
     scrollTop,
+    scrollHeight,
     isScrolling,
     height: layout?.offsetHeight ?? 0,
     width: layout?.width ?? 0,
@@ -73,8 +76,10 @@ export const useWindowScroll: UseListScrollHook = (wrapperRef: React.RefObject<H
   const windowHeight = windowSize[1]
   const { offset } = useContainerPosition(wrapperRef, windowSize)
   const { scrollTop, isScrolling } = useMasonicScroller(offset)
+  const scrollHeight = typeof document !== 'undefined' ? document.documentElement.scrollHeight : 0
   return {
     scrollTop,
+    scrollHeight,
     isScrolling,
     height: windowHeight,
     width: layout?.width ?? 0,

package/src/components/List/types.ts

@@ -45,6 +45,7 @@ export type UseListScrollHook = (
   wrapperLayout: ListWrapperLayout | null
 ) => {
   scrollTop: number
+  scrollHeight: number
   isScrolling: boolean
   height: number
   width: number
@@ -66,9 +67,13 @@ export type ListHandle = {
 export type ListProviderProps = Partial<ListPositionerConfig> & ListPaddingProps & {
   scrollHook?: UseListScrollHook
   windowScroll?: boolean
-  fetchNextPage?: () => void
-  hasNextPage?: boolean
+  infiniteLoaderCallback?: () => void
+  hasMore?: boolean
   infiniteLoaderProps?: UseInfiniteLoaderOptions<unknown>
+  onEndReached?: () => void
+  onEndReachedThreshold?: number
+  onStartReached?: () => void
+  onStartReachedThreshold?: number
   separators?: boolean
   ItemSeparatorComponent?: React.ReactElement
   style?: StyleProp<ListComposition, keyof ListStyleDef>
@@ -83,8 +88,12 @@ export type ListProviderProps = Partial<ListPositionerConfig> & ListPaddingProps
 export type ListItemsProps<T extends ListItem> = {
   data: T[]
   renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
-  fetchNextPage?: () => void
-  hasNextPage?: boolean
+  infiniteLoaderCallback?: () => void
+  hasMore?: boolean
+  onEndReached?: () => void
+  onEndReachedThreshold?: number
+  onStartReached?: () => void
+  onStartReachedThreshold?: number
   ref?: React.Ref<ListHandle>
 }
 

package/src/components/List/useScrollEdgeDetection.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react'
+
+type UseScrollEdgeDetectionOptions = {
+  scrollTop: number
+  scrollHeight: number
+  clientHeight: number
+  onEndReached?: () => void
+  onEndReachedThreshold?: number
+  onStartReached?: () => void
+  onStartReachedThreshold?: number
+}
+
+const DEFAULT_THRESHOLD = 0.5
+
+export function useScrollEdgeDetection(options: UseScrollEdgeDetectionOptions) {
+  const {
+    scrollTop,
+    scrollHeight,
+    clientHeight,
+    onEndReached,
+    onEndReachedThreshold = DEFAULT_THRESHOLD,
+    onStartReached,
+    onStartReachedThreshold = DEFAULT_THRESHOLD,
+  } = options
+
+  const hasFiredEnd = useRef(false)
+  const hasFiredStart = useRef(false)
+
+  useEffect(() => {
+    if (clientHeight <= 0 || scrollHeight <= 0) return
+
+    if (onEndReached) {
+      const distanceFromEnd = scrollHeight - scrollTop - clientHeight
+      const endThreshold = clientHeight * onEndReachedThreshold
+
+      if (distanceFromEnd <= endThreshold) {
+        if (!hasFiredEnd.current) {
+          hasFiredEnd.current = true
+          onEndReached()
+        }
+      } else {
+        hasFiredEnd.current = false
+      }
+    }
+
+    if (onStartReached) {
+      const startThreshold = clientHeight * onStartReachedThreshold
+
+      if (scrollTop <= startThreshold) {
+        if (!hasFiredStart.current) {
+          hasFiredStart.current = true
+          onStartReached()
+        }
+      } else {
+        hasFiredStart.current = false
+      }
+    }
+  }, [scrollTop, scrollHeight, clientHeight, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold])
+}

package/src/components/PaginationIndicator/ImperativePaginationIndicator.tsx

@@ -0,0 +1,35 @@
+import React, { useState, useImperativeHandle } from 'react'
+import { PaginationIndicator } from './index'
+import { PaginationIndicatorHandle, PaginationIndicatorProps, PaginationIndicatorState } from './types'
+
+type ImperativePaginationIndicatorProps = Omit<PaginationIndicatorProps, 'isFetching' | 'hasMore' | 'noMoreItemsText'> & {
+  initialState?: PaginationIndicatorState
+  ref?: React.Ref<PaginationIndicatorHandle>
+}
+
+/**
+ * Self-contained pagination indicator that manages its own render state.
+ * The parent pushes updates via the ref handle instead of passing reactive props, avoiding full tree re-renders.
+ */
+export const ImperativePaginationIndicator = (props: ImperativePaginationIndicatorProps) => {
+  const { initialState, ref, ...rest } = props
+
+  const [state, setState] = useState<PaginationIndicatorState>({
+    isFetching: false,
+    hasMore: true,
+    ...initialState,
+  })
+
+  useImperativeHandle(ref, () => ({
+    update: (next) => setState(prev => ({ ...prev, ...next })),
+  }), [])
+
+  return (
+    <PaginationIndicator
+      {...rest}
+      isFetching={state.isFetching}
+      hasMore={state.hasMore}
+      noMoreItemsText={state.noMoreItemsText}
+    />
+  )
+}

package/src/components/PaginationIndicator/index.tsx

@@ -10,6 +10,7 @@ import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@co
 
 export * from './styles'
 export * from './types'
+export { ImperativePaginationIndicator } from './ImperativePaginationIndicator'
 
 /**
  * Status indicator placed at the bottom of a paginated or infinite-scroll list — shows a spinner while fetching, a "no more items" message when exhausted, or nothing otherwise.

package/src/components/PaginationIndicator/types.ts

@@ -5,6 +5,17 @@ import { ComponentCommonProps } from '../../types'
 import { PaginationIndicatorComposition } from './styles'
 import { StyleProp } from '@codeleap/styles'
 
+export type PaginationIndicatorState = {
+  isFetching?: boolean
+  hasMore?: boolean
+  noMoreItemsText?: React.ReactElement | string | number
+}
+
+/** Imperative handle for updating a `PaginationIndicator` without re-rendering its parent. */
+export type PaginationIndicatorHandle = {
+  update: (state: PaginationIndicatorState) => void
+}
+
 export interface PaginationIndicatorStyleDef {}
 
 /**

package/src/components/Touchable/index.tsx

@@ -118,7 +118,8 @@ Touchable.rootElement = 'wrapper'
 Touchable.defaultProps = {
   propagate: true,
   debounce: null,
-  component: 'button',
+  component: 'div',
+  role: 'button',
   analyticsEnabled: false,
   analyticsName: null,
   analyticsData: {},