@codeleap/web 3.12.5 → 3.12.7

package/package.json

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

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 { ItemMasonryProps, ListMasonry } from '../../lib'
+import { ItemMasonryProps, ListMasonry, useMasonryReload } from '../../lib'
 
 export * from './styles'
 export * from './types'
@@ -30,7 +30,8 @@ const defaultProps: Partial<GridProps> = {
   columnItemsSpacing: 8,
   rowItemsSpacing: 8,
   overscan: 2,
-  enabledItemsRehydrateIndicator: true
+  reloadTimeout: 350,
+  showFooter: true,
 }
 
 export function Grid<T = any>(props: GridProps<T>) {
@@ -52,7 +53,8 @@ export function Grid<T = any>(props: GridProps<T>) {
     separators,
     masonryProps = {},
     numColumns,
-    enabledItemsRehydrateIndicator,
+    reloadTimeout,
+    showFooter,
   } = allProps
 
   const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridPresets>('u:Grid', {
@@ -61,7 +63,12 @@ export function Grid<T = any>(props: GridProps<T>) {
     styles,
   })
 
-  const { layoutProps, onLoadMore, onRefreshItems } = useInfiniteScroll(allProps)
+  const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
+
+  const { reloadingLayout, previousLength } = useMasonryReload({
+    data,
+    reloadTimeout,
+  })
 
   const separator = React.useMemo(() => {
     return separators ? <ListSeparatorComponent separatorStyles={variantStyles.separator} /> : null
@@ -97,19 +104,20 @@ export function Grid<T = any>(props: GridProps<T>) {
       {...allProps}
       {...layoutProps}
       variantStyles={variantStyles}
+      showFooter={reloadingLayout ? false : showFooter}
     >
       <ListMasonry
         items={data}
         render={renderItem}
-        itemKey={item => item?.id}
+        itemKey={(item, _index) => (item?.id ?? _index)}
         columnGutter={columnItemsSpacing}
         rowGutter={rowItemsSpacing}
         columnCount={numColumns}
         maxColumnCount={numColumns}
         onRender={onLoadMore}
         overscanBy={overscan}
-        onRefreshItems={onRefreshItems}
-        itemsRehydrateIndicator={enabledItemsRehydrateIndicator}
+        previousItemsLength={previousLength}
+        reloadingLayout={reloadingLayout}
         {...masonryProps}
       />
     </ListLayout>

package/src/components/List/ListLayout.tsx

@@ -10,6 +10,7 @@ import { motion } from 'framer-motion'
 type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollReturn['layoutProps'] & {
   variantStyles: StylesOf<ListComposition>
   children?: React.ReactNode
+  showFooter?: boolean
 }
 
 type ListRefreshControlComponent = Partial<ListLayoutProps> & {
@@ -65,6 +66,7 @@ export const ListLayout = (props: ListLayoutProps) => {
     isFetchingNextPage,
     ListLoadingIndicatorComponent,
     scrollableRef,
+    showFooter = true,
   } = props
 
   const getKeyStyle = React.useCallback((key: ListParts) => ([
@@ -94,7 +96,7 @@ export const ListLayout = (props: ListLayoutProps) => {
         ? <ListLoadingIndicatorComponent />
         : null}
 
-      {!!ListFooterComponent ? <ListFooterComponent /> : null}
+      {(!!ListFooterComponent && showFooter) ? <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 { ItemMasonryProps, ListMasonry } from '../../lib'
+import { ItemMasonryProps, ListMasonry, useMasonryReload } from '../../lib'
 
 export * from './styles'
 export * from './PaginationIndicator'
@@ -33,7 +33,8 @@ const defaultProps: Partial<ListProps> = {
   refresh: true,
   rowItemsSpacing: 8,
   overscan: 2,
-  enabledItemsRehydrateIndicator: true,
+  reloadTimeout: 350,
+  showFooter: true,
 }
 
 export function List<T = any>(props: ListProps<T>) {
@@ -53,7 +54,8 @@ export function List<T = any>(props: ListProps<T>) {
     overscan,
     separators,
     masonryProps = {},
-    enabledItemsRehydrateIndicator,
+    reloadTimeout,
+    showFooter,
   } = allProps
 
   const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
@@ -62,7 +64,12 @@ export function List<T = any>(props: ListProps<T>) {
     styles,
   })
 
-  const { layoutProps, onLoadMore, onRefreshItems } = useInfiniteScroll(allProps)
+  const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
+
+  const { reloadingLayout, previousLength } = useMasonryReload({
+    data,
+    reloadTimeout,
+  })
 
   const separator = React.useMemo(() => {
     return separators ? <ListSeparatorComponent separatorStyles={variantStyles.separator} /> : null
@@ -96,17 +103,18 @@ export function List<T = any>(props: ListProps<T>) {
       {...allProps}
       {...layoutProps}
       variantStyles={variantStyles}
+      showFooter={reloadingLayout ? false : showFooter}
     >
       <ListMasonry
         items={data}
         render={renderItem}
-        itemKey={item => item?.id}
+        itemKey={(item, _index) => (item?.id ?? _index)}
         rowGutter={rowItemsSpacing}
         onRender={onLoadMore}
         overscanBy={overscan}
         columnCount={1}
-        onRefreshItems={onRefreshItems}
-        itemsRehydrateIndicator={enabledItemsRehydrateIndicator}
+        previousItemsLength={previousLength}
+        reloadingLayout={reloadingLayout}
         {...masonryProps}
       />
     </ListLayout>

package/src/components/List/types.ts

@@ -5,10 +5,10 @@ import { ListComposition, ListPresets } from './styles'
 import { motion } from 'framer-motion'
 import { ActivityIndicatorProps } from '../ActivityIndicator'
 import { ComponentCommonProps } from '../../types'
-import { RenderComponentProps, ListProps as ListMasonryProps } from 'masonic'
 import { UseInfiniteScrollArgs } from './useInfiniteScroll'
+import { ItemMasonryProps, ListMasonryProps } from '../../lib'
 
-export type AugmentedRenderItemInfo<T> = RenderComponentProps<T> & {
+export type AugmentedRenderItemInfo<T> = ItemMasonryProps<T> & {
   item: T
   isFirst: boolean
   isLast: boolean
@@ -51,5 +51,6 @@ Data = T extends Array<infer D> ? D : never
     rowItemsSpacing?: number
     overscan?: number
     masonryProps?: Partial<ListMasonryProps<T>>
-    enabledItemsRehydrateIndicator?: boolean
+    reloadTimeout?: number
+    showFooter?: boolean
 } & ComponentCommonProps & UseInfiniteScrollArgs

package/src/lib/ListMasonry.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useWindowSize } from '@react-hook/window-size'
-import { AnyFunction, onUpdate, usePrevious, useState } from '@codeleap/common'
+import { TypeGuards } from '@codeleap/common'
+import { EmptyPlaceholder } from '../components/EmptyPlaceholder'
 
 import {
   useMasonry,
@@ -12,39 +13,69 @@ import {
   RenderComponentProps,
 } from 'masonic'
 
-export type ItemMasonryProps<T> = RenderComponentProps<T>
+function fillItems(arr: Array<any>, toCount: number, fillContent = {}) {
+  if (!arr || !TypeGuards.isArray(arr)) return []
 
-export type ListMasonryProps<T> = MasonryProps<T> & {
-  onRefreshItems: AnyFunction
-  itemsRehydrateIndicator: boolean
+  if (toCount === arr?.length) return arr
+
+  const diff = toCount - arr?.length
+
+  if (diff < 0) return arr
+
+  const right = Array(diff).fill(fillContent)
+
+  return arr.concat(right)
 }
 
-export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
-  const data = props?.items || []
+type UseMasonryReloadArgs = {
+  data: Array<any>
+  reloadTimeout: number
+}
 
-  const [reloadingLayout, setReloadingLayout] = useState(false)
+export const useMasonryReload = (args: UseMasonryReloadArgs) => {
+  const {
+    data,
+    reloadTimeout = 350,
+  } = args
 
-  const dataPreviousLength = usePrevious(data?.length)
+  const [reloadingLayout, setReloadingLayout] = React.useState(false)
+  const previousLengthRef = React.useRef(data?.length ?? 0)
 
-  onUpdate(() => {
-    console.log({
-      dataPreviousLength,
-      length: data?.length
-    })
+  const updater = () => {
+    previousLengthRef.current = (data?.length ?? 0)
+  }
 
-    if (dataPreviousLength > data?.length) {
+  React.useEffect(() => {
+    if (previousLengthRef.current > data?.length) {
       setReloadingLayout(true)
 
-      console.log({
-        reloaded: true,
-      })
-
       setTimeout(() => {
-        setReloadingLayout(false)
-      }, 3000)
+        updater()
+
+        setTimeout(() => {
+          setReloadingLayout(false)
+        }, reloadTimeout)
+      }, reloadTimeout)
+    } else {
+      updater()
     }
-  }, [data?.length, dataPreviousLength])
+  }, [data?.length])
+
+  return {
+    reloadingLayout,
+    setReloadingLayout,
+    previousLength: previousLengthRef.current,
+  }
+}
 
+export type ItemMasonryProps<T> = RenderComponentProps<T>
+
+export type ListMasonryProps<T> = MasonryProps<T> & {
+  previousItemsLength: number
+  reloadingLayout: boolean
+}
+
+export function MasonryComponent<Item>(props: ListMasonryProps<Item>) {
   const containerRef = React.useRef(null)
 
   const windowSize = useWindowSize({
@@ -72,22 +103,33 @@ export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
     columnCount: listProps?.columnCount,
     maxColumnCount: listProps?.columnCount,
     rowGutter: listProps?.rowGutter
-  }, [reloadingLayout])
+  })
 
   const { scrollTop, isScrolling } = useScroller(listProps?.offset, listProps?.scrollFps)
 
   const resizeObserver = useResizeObserver(positioner)
 
-  if (reloadingLayout) {
-    return <div><p>Loading</p></div>
-  }
-
   return useMasonry({
     ...listProps,
     resizeObserver,
     positioner,
     scrollTop,
     isScrolling,
-    items: data,
+    items: fillItems(props?.items, props?.previousItemsLength)
   })
 }
+
+export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
+  if (props?.reloadingLayout) {
+    return (
+      <EmptyPlaceholder loading title={''} description={null} />
+    )
+  } else {
+    return (
+      <MasonryComponent 
+        {...props}
+        items={props?.items || []}
+      />
+    )
+  }
+}