feat: update masonry

red-armor · Jan 2, 2025 · 9ef82bf · 9ef82bf
1 parent d0b37d1
commit 9ef82bf
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 34 deletions.
diff --git a/ui/list/src/react-native/List.tsx b/ui/list/src/react-native/List.tsx
@@ -64,7 +64,7 @@ const List = <ItemT extends GenericItemT>(props: ListProps<ItemT>) => {
         display: 'flex',
         height: '100%',
         flexDirection: 'row',
-        backgroundColor: 'blue',
+        // backgroundColor: 'blue',
         position: 'relative',
       };
     return style;

diff --git a/ui/masonry/src/react-native/MasonryList.tsx b/ui/masonry/src/react-native/MasonryList.tsx
@@ -8,6 +8,7 @@ import {
   ForwardedRef,
   useContext,
 } from 'react';
+import { ItemLayout } from '@infinite-list/types';
 import {
   View,
   ViewStyle,
@@ -31,7 +32,16 @@ const MasonryList = <ItemT extends GenericItemT>(
   props: MasonryListProps<ItemT>
 ) => {
   const [state, setState] = useState<MasonryStateResults<ItemT>>();
-  const { id, data, column = 2, getColumnWidth, forwardRef, ...rest } = props;
+  const {
+    id,
+    data,
+    column = 2,
+    getColumnWidth,
+    horizontal = false,
+    getContainerLayout,
+    forwardRef,
+    ...rest
+  } = props;
   const contextValues = useContext(ScrollViewContext);
 
   const listId = useMemo(() => id || `__masonry_list${count++}__`, []);
@@ -50,29 +60,34 @@ const MasonryList = <ItemT extends GenericItemT>(
     nextResolveColumnInfo()
   );
 
+  const containerLayoutRef = useRef<ItemLayout>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
   const listRef = useRef<View>(null);
+  const containerStyle = useMemo<ViewStyle>(() => {
+    const style: ViewStyle = {
+      position: 'relative',
+      display: 'flex',
+      /**
+       * to make the backdrop div to render in column style
+       */
+      flexDirection: 'row',
+    };
+
+    return style;
+  }, []);
 
-  const style: {
-    [key: string]: ViewStyle;
-  } = useMemo(
-    () => ({
-      container: {
-        width: '100%',
-        height: '100%',
-        overflowY: 'auto',
-        position: 'relative',
-        display: 'flex',
-        /**
-         * to make the backdrop div to render in column style
-         */
-        flexDirection: 'row',
-      },
-    }),
-    []
-  );
+  const onLayoutHandler = useCallback((e: LayoutChangeEvent) => {
+    const scrollMetrics = contextValues.getScrollHelper().getScrollMetrics();
+    dimensionsModel.updateScrollMetrics(scrollMetrics);
+
+    const rect = e.nativeEvent.layout;
+    containerLayoutRef.current = rect;
 
-  const onLayoutHandler = useCallback((event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
+    const { width } = e.nativeEvent.layout;
     if (!getColumnWidth) {
       setColumnDimensions(nextResolveColumnInfo(width));
     }
@@ -92,6 +107,8 @@ const MasonryList = <ItemT extends GenericItemT>(
         data,
         column,
         ...rest,
+        getContainerLayout:
+          getContainerLayout || (() => containerLayoutRef.current),
         stateListener,
       }),
     []
@@ -146,7 +163,7 @@ const MasonryList = <ItemT extends GenericItemT>(
     <View
       id={listId}
       onLayout={onLayoutHandler}
-      style={style.container}
+      style={containerStyle}
       ref={forwardRef || listRef}
     >
       {state?.map((columnState, index) => (

diff --git a/ui/masonry/src/react-native/types/masonryList.ts b/ui/masonry/src/react-native/types/masonryList.ts
@@ -11,24 +11,24 @@ import {
 
 export { ColumnDimensionInfo };
 
-export type ContainerRef = RefObject<ScrollView | View | any>;
+export type ScrollerRef = RefObject<ScrollView | View | any>;
 export type MasonryListProps<ItemT extends GenericItemT = GenericItemT> =
   CommonMasonryListProps<ItemT> & {
-    containerRef: ContainerRef;
+    scrollerRef: ScrollerRef;
     forwardRef?: ForwardedRef<View>;
   };
 
 export type RecycleItemProps<ItemT extends GenericItemT = GenericItemT> =
   CommonRecycleItemProps<ItemT> & {
-    containerRef: ContainerRef;
+    scrollerRef: ScrollerRef;
   };
 
 export type SpaceItemProps<ItemT extends GenericItemT = GenericItemT> =
   CommonSpaceItemProps<ItemT> & {
-    containerRef: ContainerRef;
+    scrollerRef: ScrollerRef;
   };
 export type ColumnStateRendererProps<
   ItemT extends GenericItemT = GenericItemT
 > = CommonColumnStateRendererProps<ItemT> & {
-  containerRef: ContainerRef;
+  scrollerRef: ScrollerRef;
 };
diff --git a/ui/masonry/src/react/MasonryList.tsx b/ui/masonry/src/react/MasonryList.tsx
@@ -76,12 +76,19 @@ export const MasonryList = <ItemT extends GenericItemT>(
   });
 
   const containerStyle = useMemo<CSSProperties>(() => {
-    const style: CSSProperties = { position: 'relative' };
-    if (horizontal) {
-      style.display = 'flex';
-      style.flexDirection = 'column';
-      style.height = '100%';
-    }
+    const style: CSSProperties = {
+      position: 'relative',
+      display: 'flex',
+      /**
+       * to make the backdrop div to render in column style
+       */
+      flexDirection: 'row',
+    };
+    // if (horizontal) {
+    //   style.display = 'flex';
+    //   style.flexDirection = 'column';
+    //   style.height = '100%';
+    // }
 
     if (!usingControlledScroller) {
       style.width = '100%';