@codeleap/web 3.12.3 → 3.12.5

package/package.json

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

package/src/components/Overlay/index.tsx

@@ -25,7 +25,7 @@ export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T
     responsiveVariants, 
     variants, 
     styles, 
-    scrollLocked = true, 
+    scrollLocked = false, 
     ...props 
   } = overlayProps
 

package/src/lib/ListMasonry.tsx

@@ -10,11 +10,8 @@ import {
   useResizeObserver,
   MasonryProps,
   RenderComponentProps,
-  MasonryScroller,
 } from 'masonic'
 
-import { EmptyPlaceholder } from '../components/EmptyPlaceholder'
-
 export type ItemMasonryProps<T> = RenderComponentProps<T>
 
 export type ListMasonryProps<T> = MasonryProps<T> & {
@@ -23,37 +20,30 @@ export type ListMasonryProps<T> = MasonryProps<T> & {
 }
 
 export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
-  const {
-    columnCount,
-    columnGutter,
-    rowGutter,
-    items,
-    render,
-  } = props
-
-  const data = items || []
+  const data = props?.items || []
 
   const [reloadingLayout, setReloadingLayout] = useState(false)
 
   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) {
+    console.log({
+      dataPreviousLength,
+      length: data?.length
+    })
+
+    if (dataPreviousLength > data?.length) {
       setReloadingLayout(true)
 
+      console.log({
+        reloaded: true,
+      })
+
       setTimeout(() => {
         setReloadingLayout(false)
       }, 3000)
     }
-  }, [masonryUpdater])
+  }, [data?.length, dataPreviousLength])
 
   const containerRef = React.useRef(null)
 
@@ -64,42 +54,40 @@ export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
 
   const containerPosition = useContainerPosition(containerRef, windowSize)
 
-  const listProps = {
-    offset: containerPosition?.offset,
-    width: containerPosition?.width || containerRef?.current?.clientWidth || windowSize?.[0],
-    height: windowSize?.[1],
-    containerRef,
-    scrollFps: props?.scrollFps || 12,
-  }
+  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
 
   const positioner = usePositioner({ 
     width: listProps?.width, 
-    columnGutter: columnGutter, 
-    columnCount: columnCount,
-    maxColumnCount: columnCount,
-    rowGutter: rowGutter
-  }, [masonryUpdater, reloadingLayout])
+    columnGutter: listProps?.columnGutter, 
+    columnWidth: listProps?.columnWidth,
+    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 (
-      <EmptyPlaceholder loading={true} />
-    )
+    return <div><p>Loading</p></div>
   }
 
-  return (
-    <MasonryScroller
-      // {...props}
-      positioner={positioner}
-      resizeObserver={resizeObserver}
-      containerRef={containerRef}
-      items={data}
-      height={listProps?.height}
-      offset={listProps?.offset}
-      overscanBy={6}
-      render={render}
-      scrollFps={listProps?.scrollFps}
-    />
-  )
+  return useMasonry({
+    ...listProps,
+    resizeObserver,
+    positioner,
+    scrollTop,
+    isScrolling,
+    items: data,
+  })
 }