@codeleap/web 3.12.6 → 3.12.8

package/package.json

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

package/src/components/Drawer/index.tsx

@@ -99,7 +99,7 @@ export const Drawer = (props: DrawerProps) => {
     closeIcon,
   } = allProps as DrawerProps
 
-  usePopState(open, toggle, scrollLocked)
+  // usePopState(open, toggle, scrollLocked)
 
   const [hiddenStyle, axis, positioning] = resolveHiddenDrawerPosition(position)
 

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'
@@ -31,6 +31,7 @@ const defaultProps: Partial<GridProps> = {
   rowItemsSpacing: 8,
   overscan: 2,
   reloadTimeout: 350,
+  showFooter: true,
 }
 
 export function Grid<T = any>(props: GridProps<T>) {
@@ -53,6 +54,7 @@ export function Grid<T = any>(props: GridProps<T>) {
     masonryProps = {},
     numColumns,
     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,6 +104,7 @@ export function Grid<T = any>(props: GridProps<T>) {
       {...allProps}
       {...layoutProps}
       variantStyles={variantStyles}
+      showFooter={reloadingLayout ? false : showFooter}
     >
       <ListMasonry
         items={data}
@@ -108,7 +116,8 @@ export function Grid<T = any>(props: GridProps<T>) {
         maxColumnCount={numColumns}
         onRender={onLoadMore}
         overscanBy={overscan}
-        reloadTimeout={reloadTimeout}
+        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'
@@ -34,6 +34,7 @@ const defaultProps: Partial<ListProps> = {
   rowItemsSpacing: 8,
   overscan: 2,
   reloadTimeout: 350,
+  showFooter: true,
 }
 
 export function List<T = any>(props: ListProps<T>) {
@@ -54,6 +55,7 @@ export function List<T = any>(props: ListProps<T>) {
     separators,
     masonryProps = {},
     reloadTimeout,
+    showFooter,
   } = allProps
 
   const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
@@ -64,6 +66,11 @@ export function List<T = any>(props: ListProps<T>) {
 
   const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
 
+  const { reloadingLayout, previousLength } = useMasonryReload({
+    data,
+    reloadTimeout,
+  })
+
   const separator = React.useMemo(() => {
     return separators ? <ListSeparatorComponent separatorStyles={variantStyles.separator} /> : null
   }, [])
@@ -96,6 +103,7 @@ export function List<T = any>(props: ListProps<T>) {
       {...allProps}
       {...layoutProps}
       variantStyles={variantStyles}
+      showFooter={reloadingLayout ? false : showFooter}
     >
       <ListMasonry
         items={data}
@@ -105,7 +113,8 @@ export function List<T = any>(props: ListProps<T>) {
         onRender={onLoadMore}
         overscanBy={overscan}
         columnCount={1}
-        reloadTimeout={reloadTimeout}
+        previousItemsLength={previousLength}
+        reloadingLayout={reloadingLayout}
         {...masonryProps}
       />
     </ListLayout>

package/src/components/List/types.ts

@@ -50,6 +50,7 @@ Data = T extends Array<infer D> ? D : never
     ref?: React.MutableRefObject<undefined>
     rowItemsSpacing?: number
     overscan?: number
-    masonryProps?: Partial<Omit<ListMasonryProps<T>, 'previousItemsLength'>>
+    masonryProps?: Partial<ListMasonryProps<T>>
     reloadTimeout?: number
+    showFooter?: boolean
 } & ComponentCommonProps & UseInfiniteScrollArgs

package/src/components/Overlay/index.tsx

@@ -35,7 +35,7 @@ export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T
     styles,
   })
 
-  usePopState(visible, props.onPress, scrollLocked)
+  // usePopState(visible, props.onPress, scrollLocked)
 
   const Component = props.onClick || props.onPress ? Touchable : View
 

package/src/lib/ListMasonry.tsx

@@ -72,7 +72,7 @@ export type ItemMasonryProps<T> = RenderComponentProps<T>
 
 export type ListMasonryProps<T> = MasonryProps<T> & {
   previousItemsLength: number
-  reloadTimeout: UseMasonryReloadArgs['reloadTimeout']
+  reloadingLayout: boolean
 }
 
 export function MasonryComponent<Item>(props: ListMasonryProps<Item>) {
@@ -119,15 +119,8 @@ export function MasonryComponent<Item>(props: ListMasonryProps<Item>) {
   })
 }
 
-export function ListMasonry<Item>(props: Omit<ListMasonryProps<Item>, 'previousItemsLength'>) {
-  const data = props?.items || []
-
-  const { reloadingLayout, previousLength } = useMasonryReload({
-    data,
-    reloadTimeout: props?.reloadTimeout,
-  })
-
-  if (reloadingLayout) {
+export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
+  if (props?.reloadingLayout) {
     return (
       <EmptyPlaceholder loading title={''} description={null} />
     )
@@ -135,8 +128,7 @@ export function ListMasonry<Item>(props: Omit<ListMasonryProps<Item>, 'previousI
     return (
       <MasonryComponent 
         {...props}
-        items={data}
-        previousItemsLength={previousLength}
+        items={props?.items || []}
       />
     )
   }