@codeleap/web 3.12.0 → 3.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.12.0",
+  "version": "3.12.1",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/EmptyPlaceholder/index.tsx

@@ -75,6 +75,19 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
     return getNestedStylesByKey('loader', variantStyles)
   }, [variantStyles])
 
+  const _Image = React.useMemo(() => {
+    if (TypeGuards.isNil(IconEmpty)) return null
+
+    if (TypeGuards.isString(IconEmpty)) {
+      return <Icon debugName={debugName} name={IconEmpty as IconPlaceholder} forceStyle={variantStyles.icon} />
+    } else if (React.isValidElement(IconEmpty)) {
+      // @ts-ignore
+      return <IconEmpty {...props} />
+    } else {
+      return <IconEmpty {...props} />
+    }
+  }, [IconEmpty])
+
   if (loading) {
     return (
       <View css={[variantStyles.wrapper, variantStyles['wrapper:loading']]}>
@@ -99,20 +112,7 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
       </View>
     )
   }
-
-  const _Image = React.useMemo(() => {
-    if (TypeGuards.isNil(IconEmpty)) return null
-
-    if (TypeGuards.isString(IconEmpty)) {
-      return <Icon debugName={debugName} name={IconEmpty as IconPlaceholder} forceStyle={variantStyles.icon} />
-    } else if (React.isValidElement(IconEmpty)) {
-      // @ts-ignore
-      return <IconEmpty {...props} />
-    } else {
-      return <IconEmpty {...props} />
-    }
-  }, [])
-
+  
   return (
     <View {...wrapperProps} css={[variantStyles.wrapper, style]}>
       <View {...imageWrapperProps} css={variantStyles.imageWrapper}>

package/src/components/Grid/index.tsx

@@ -5,7 +5,7 @@ import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { GridPresets } from './styles'
 import { GridProps } from './types'
 import { ListLayout, useInfiniteScroll } from '../List'
-import { RenderComponentProps as MasonryItemProps, Masonry as GridMasonry } from 'masonic'
+import { ItemMasonryProps, ListMasonry } from '../../lib'
 
 export * from './styles'
 export * from './types'
@@ -30,6 +30,7 @@ const defaultProps: Partial<GridProps> = {
   columnItemsSpacing: 8,
   rowItemsSpacing: 8,
   overscan: 2,
+  enabledItemsRehydrateIndicator: true
 }
 
 export function Grid<T = any>(props: GridProps<T>) {
@@ -51,6 +52,7 @@ export function Grid<T = any>(props: GridProps<T>) {
     separators,
     masonryProps = {},
     numColumns,
+    enabledItemsRehydrateIndicator,
   } = allProps
 
   const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridPresets>('u:Grid', {
@@ -59,13 +61,13 @@ export function Grid<T = any>(props: GridProps<T>) {
     styles,
   })
 
-  const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
+  const { layoutProps, onLoadMore, onRefreshItems } = useInfiniteScroll(allProps)
 
   const separator = React.useMemo(() => {
     return separators ? <ListSeparatorComponent separatorStyles={variantStyles.separator} /> : null
   }, [])
 
-  const renderItem = React.useCallback((_item: MasonryItemProps<any>) => {
+  const renderItem = React.useCallback((_item: ItemMasonryProps<any>) => {
     if (!RenderItem) return null
 
     const gridLength = data?.length || 0
@@ -96,15 +98,18 @@ export function Grid<T = any>(props: GridProps<T>) {
       {...layoutProps}
       variantStyles={variantStyles}
     >
-      <GridMasonry
-        items={data || []}
+      <ListMasonry
+        items={data}
         render={renderItem}
         itemKey={item => item?.id}
         columnGutter={columnItemsSpacing}
         rowGutter={rowItemsSpacing}
         columnCount={numColumns}
+        maxColumnCount={numColumns}
         onRender={onLoadMore}
         overscanBy={overscan}
+        onRefreshItems={onRefreshItems}
+        itemsRehydrateIndicator={enabledItemsRehydrateIndicator}
         {...masonryProps}
       />
     </ListLayout>

package/src/components/List/ListLayout.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StylesOf } from '@codeleap/common'
+import { StylesOf, TypeGuards } from '@codeleap/common'
 import { ListComposition, ListParts } from './styles'
 import { ListProps } from './types'
 import { View } from '../View'
@@ -17,13 +17,13 @@ type ListRefreshControlComponent = Partial<ListLayoutProps> & {
 }
 
 const DefaultRefreshIndicator = (props: ListRefreshControlComponent) => {
-  const { 
-    refreshing, 
-    variantStyles, 
-    refreshPosition, 
-    refreshControlProps, 
-    debugName, 
-    refreshSize, 
+  const {
+    refreshing,
+    variantStyles,
+    refreshPosition,
+    refreshControlProps,
+    debugName,
+    refreshSize,
     refreshControlIndicatorProps,
   } = props
 
@@ -77,22 +77,22 @@ export const ListLayout = (props: ListLayoutProps) => {
     <View css={[getKeyStyle('wrapper'), style]} ref={scrollableRef}>
       {!!ListHeaderComponent ? <ListHeaderComponent /> : null}
 
-      {isEmpty
-        ? <ListEmptyComponent debugName={debugName} {...placeholder} />
-        : (
-          <View css={[getKeyStyle('innerWrapper')]}>
-            {(!ListRefreshControlComponent || !refresh) ? null : (
-              <ListRefreshControlComponent
-                {...props}
-                variantStyles={variantStyles}
-              />
-            )}
+      {isEmpty ? <ListEmptyComponent debugName={debugName} {...placeholder} /> : null}
 
-            {children}
-          </View>
+      <View css={[getKeyStyle('innerWrapper'), isEmpty && { display: 'none' }]}>
+        {(!ListRefreshControlComponent || !refresh) ? null : (
+          <ListRefreshControlComponent
+            {...props}
+            variantStyles={variantStyles}
+          />
         )}
 
-      {(isFetching || isFetchingNextPage) ? <ListLoadingIndicatorComponent /> : null}
+        {children}
+      </View>
+
+      {((isFetching || isFetchingNextPage) && !TypeGuards.isNil(ListLoadingIndicatorComponent))
+        ? <ListLoadingIndicatorComponent />
+        : null}
 
       {!!ListFooterComponent ? <ListFooterComponent /> : null}
     </View>

package/src/components/List/index.tsx

@@ -6,7 +6,7 @@ import { ListPresets } from './styles'
 import { useInfiniteScroll } from './useInfiniteScroll'
 import { ListProps } from './types'
 import { ListLayout } from './ListLayout'
-import { RenderComponentProps as MasonryItemProps, List as ListMasonry } from 'masonic'
+import { ItemMasonryProps, ListMasonry } from '../../lib'
 
 export * from './styles'
 export * from './PaginationIndicator'
@@ -33,6 +33,7 @@ const defaultProps: Partial<ListProps> = {
   refresh: true,
   rowItemsSpacing: 8,
   overscan: 2,
+  enabledItemsRehydrateIndicator: true,
 }
 
 export function List<T = any>(props: ListProps<T>) {
@@ -52,6 +53,7 @@ export function List<T = any>(props: ListProps<T>) {
     overscan,
     separators,
     masonryProps = {},
+    enabledItemsRehydrateIndicator,
   } = allProps
 
   const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
@@ -60,13 +62,13 @@ export function List<T = any>(props: ListProps<T>) {
     styles,
   })
 
-  const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
+  const { layoutProps, onLoadMore, onRefreshItems } = useInfiniteScroll(allProps)
 
   const separator = React.useMemo(() => {
     return separators ? <ListSeparatorComponent separatorStyles={variantStyles.separator} /> : null
   }, [])
 
-  const renderItem = React.useCallback((_item: MasonryItemProps<any>) => {
+  const renderItem = React.useCallback((_item: ItemMasonryProps<any>) => {
     if (!RenderItem) return null
 
     const listLength = data?.length || 0
@@ -96,12 +98,15 @@ export function List<T = any>(props: ListProps<T>) {
       variantStyles={variantStyles}
     >
       <ListMasonry
-        items={data || []}
+        items={data}
         render={renderItem}
         itemKey={item => item?.id}
         rowGutter={rowItemsSpacing}
         onRender={onLoadMore}
         overscanBy={overscan}
+        columnCount={1}
+        onRefreshItems={onRefreshItems}
+        itemsRehydrateIndicator={enabledItemsRehydrateIndicator}
         {...masonryProps}
       />
     </ListLayout>

package/src/components/List/types.ts

@@ -51,4 +51,5 @@ Data = T extends Array<infer D> ? D : never
     rowItemsSpacing?: number
     overscan?: number
     masonryProps?: Partial<ListMasonryProps<T>>
+    enabledItemsRehydrateIndicator?: boolean
 } & ComponentCommonProps & UseInfiniteScrollArgs

package/src/components/List/useInfiniteScroll.ts

@@ -23,6 +23,7 @@ export type UseInfiniteScrollReturn<Item extends Element = any> = {
     refreshing: boolean
     scrollableRef: React.MutableRefObject<undefined>
   }
+  onRefreshItems: AnyFunction
 }
 
 type UseRefreshOptions = {
@@ -51,26 +52,22 @@ export const useRefresh = (onRefresh = () => null, options: UseRefreshOptions) =
     enabled,
   } = options
 
-  if (!enabled) return {
-    refresh: false,
-    scrollableRef: null,
-  }
-
   const [refresh, setRefresh] = React.useState(false)
 
   const pushToTopRef = React.useRef(0)
-  const containerRef = React.useRef(null)
 
-  const refresher = React.useCallback(async () => {
+  const refresher = React.useCallback(async (_onRefresh: AnyFunction) => {
     setRefresh(true)
-    await onRefresh?.()
+    await _onRefresh?.()
 
     setTimeout(() => {
       setRefresh(false)
       pushToTopRef.current = 0
-    }, 2000)
+    }, 2500)
   }, [])
 
+  const containerRef = React.useRef(null)
+
   const onScroll = scrollDebounce(() => {
     if (containerRef.current) {
       const rect = containerRef.current?.getBoundingClientRect()
@@ -87,7 +84,7 @@ export const useRefresh = (onRefresh = () => null, options: UseRefreshOptions) =
 
       if (percentage < threshold) {
         if (pushToTopRef.current === 2) {
-          refresher()
+          refresher(onRefresh)
         }
 
         pushToTopRef.current = pushToTopRef.current + 1
@@ -96,16 +93,19 @@ export const useRefresh = (onRefresh = () => null, options: UseRefreshOptions) =
   }, debounce)
 
   useEffect(() => {
-    window.addEventListener('scroll', onScroll)
+    if (enabled) {
+      window.addEventListener('scroll', onScroll)
 
-    return () => {
-      window.removeEventListener('scroll', onScroll)
+      return () => {
+        window.removeEventListener('scroll', onScroll)
+      }
     }
-  }, [])
+  }, [enabled])
 
   return {
     refresh,
     scrollableRef: containerRef,
+    refresher,
   }
 }
 
@@ -120,7 +120,7 @@ export function useInfiniteScroll<Item extends Element = any>(props: UseInfinite
     refreshDebounce,
     loadMoreOptions = {},
     onLoadMore,
-    threshold = 3,
+    threshold = 16,
   } = props
 
   const infiniteLoader = useInfiniteLoader(
@@ -130,13 +130,12 @@ export function useInfiniteScroll<Item extends Element = any>(props: UseInfinite
     },
     {
       isItemLoaded: (index, items) => !!items?.[index],
-      minimumBatchSize: 32,
       threshold: threshold,
       ...loadMoreOptions,
     },
   )
 
-  const { refresh, scrollableRef } = useRefresh(
+  const refreshHookReturn = useRefresh(
     onRefresh, 
     { 
       threshold: refreshThreshold, 
@@ -149,11 +148,12 @@ export function useInfiniteScroll<Item extends Element = any>(props: UseInfinite
 
   return {
     onLoadMore: infiniteLoader,
-    isRefresh: refresh,
+    isRefresh: refreshHookReturn.refresh,
     layoutProps: {
-      scrollableRef,
-      refreshing: refresh,
+      scrollableRef: refreshHookReturn.scrollableRef,
+      refreshing: refreshHookReturn.refresh,
       isEmpty,
-    }
+    },
+    onRefreshItems: refreshHookReturn.refresher,
   }
 }

package/src/lib/ListMasonry.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { useWindowSize } from '@react-hook/window-size'
+import { AnyFunction, onUpdate, usePrevious } from '@codeleap/common'
+
+import {
+  useMasonry,
+  usePositioner,
+  useScroller,
+  useContainerPosition,
+  useResizeObserver,
+  MasonryProps,
+  RenderComponentProps,
+} from 'masonic'
+
+export type ItemMasonryProps<T> = RenderComponentProps<T>
+
+export type ListMasonryProps<T> = MasonryProps<T> & {
+  onRefreshItems: AnyFunction
+  itemsRehydrateIndicator: boolean
+}
+
+export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
+  const data = props?.items || []
+
+  const dataPreviousLength = usePrevious(data?.length)
+
+  const masonryUpdater = React.useMemo(() => {
+    if (data?.length < dataPreviousLength) {
+      return data?.length
+    } else {
+      return false
+    }
+  }, [dataPreviousLength, data?.length])
+
+  onUpdate(() => {
+    if (!!masonryUpdater && !!props?.itemsRehydrateIndicator) {
+      props?.onRefreshItems?.(() => null)
+    }
+  }, [masonryUpdater])
+
+  const containerRef = React.useRef(null)
+
+  const windowSize = useWindowSize({
+    initialWidth: props?.ssrWidth,
+    initialHeight: props?.ssrHeight,
+  })
+
+  const containerPosition = useContainerPosition(containerRef, windowSize)
+
+  const listProps = Object.assign(
+    {
+      offset: containerPosition?.offset,
+      width: containerPosition?.width || containerRef?.current?.clientWidth || windowSize?.[0],
+      height: windowSize?.[1],
+      containerRef,
+      scrollFps: props?.scrollFps || 12,
+    },
+    props
+  ) as any
+
+  listProps.positioner = usePositioner({ 
+    width: listProps?.width, 
+    columnGutter: listProps?.columnGutter, 
+    columnWidth: listProps?.columnWidth,
+    columnCount: listProps?.columnCount,
+    maxColumnCount: listProps?.columnCount,
+    rowGutter: listProps?.rowGutter
+  }, [masonryUpdater])
+
+  const { scrollTop, isScrolling } = useScroller(listProps?.offset, listProps?.scrollFps)
+
+  listProps.resizeObserver = useResizeObserver(listProps.positioner)
+
+  return useMasonry({
+    ...listProps,
+    scrollTop,
+    isScrolling,
+    items: data,
+  })
+}

package/src/lib/index.ts

@@ -4,3 +4,4 @@ export * from './useSearchParams'
 export * from './usePopState'
 export * from './useBreakpointMatch'
 export * from './useClick'
+export * from './ListMasonry'