feat: update

red-armor · Jan 2, 2025 · f8216c1 · f8216c1
1 parent a86f373
commit f8216c1
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 25 deletions.
diff --git a/core/strategies/src/BaseImpl.ts b/core/strategies/src/BaseImpl.ts
@@ -271,9 +271,22 @@ abstract class BaseImpl<
     }
   }
 
+  /**
+   *
+   * @param scrollMetrics
+   * @returns
+   *
+   *
+   */
   dispatchMetrics(
     scrollMetrics: ScrollMetrics | undefined = this._scrollMetrics
   ): [ListStateResult<ItemT>, ListStateResult<ItemT>] {
+    /**
+     * due to masonryList use dispatchMetrics...this._scrollMetrics
+     * is null
+     */
+    this._scrollMetrics = scrollMetrics;
+
     if (!scrollMetrics)
       return [this._stateHub.getStateResult(), this._stateHub.getStateResult()];
     const state = this._store.dispatchMetrics({

diff --git a/core/strategies/src/RecycleStateImpl.ts b/core/strategies/src/RecycleStateImpl.ts
@@ -325,6 +325,8 @@ class RecycleStateImpl<
                   indexToOffsetMap[targetIndex] +
                   this.listContainer.getContainerOffset()
               );
+
+            // console.log('update =====', this.listContainer._scrollMetrics, indexToOffsetMap[targetIndex], itemMetaState)
           }
 
           itemMeta?.setItemMetaState(itemMetaState);

diff --git a/examples/react-playground/src/app/MasonryControlledList.stories.tsx b/examples/react-playground/src/app/MasonryControlledList.stories.tsx
@@ -26,12 +26,12 @@ const meta: Meta<typeof MasonryList> = {
           width: '600px',
           backgroundColor: '#efefef',
           position: 'relative',
-          // overflowY: 'auto',
+          overflowY: 'auto',
         }}
       >
         <MasonryList
           id="basic"
-          // scrollerRef={containerRef}
+          scrollerRef={containerRef}
           data={buildData(10000)}
           recyclerBufferSize={100}
           recyclerReservedBufferPerBatch={50}

diff --git a/examples/react-playground/src/app/MasonryControlledListWithContainer.stories.tsx b/examples/react-playground/src/app/MasonryControlledListWithContainer.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/react';
 import { defaultKeyExtractor } from '@infinite-list/utils';
 import { MasonryList } from '@infinite-list/masonry/react';
 import { KeyExtractor } from '@infinite-list/dimensions-model';
+import { useRef } from 'react';
 
 type Item = {
   key: string;
@@ -15,25 +16,37 @@ const buildData = (count: number) =>
 const meta: Meta<typeof MasonryList> = {
   component: MasonryList,
   render: () => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
     return (
       <div
+        ref={containerRef}
         style={{
           height: '400px',
           width: '600px',
           backgroundColor: '#efefef',
           position: 'relative',
+          overflowY: 'auto',
         }}
       >
+        <div style={{ height: '300px' }}></div>
+
         <MasonryList
           id="basic"
+          scrollerRef={containerRef}
           data={buildData(10000)}
           recyclerBufferSize={100}
           recyclerReservedBufferPerBatch={50}
           renderItem={(props) => {
             const { item, itemMeta } = props;
             const indexInfo = itemMeta.getIndexInfo();
             const index = indexInfo?.index || 0;
-
+            if (itemMeta.getState().viewable)
+              console.log(
+                'item meta ',
+                itemMeta.getKey(),
+                itemMeta.getState().viewable
+              );
             return (
               <div
                 style={{

diff --git a/examples/react-playground/src/app/MasonryUncontrolledList.stories.tsx b/examples/react-playground/src/app/MasonryUncontrolledList.stories.tsx
@@ -33,7 +33,12 @@ const meta: Meta<typeof MasonryList> = {
             const { item, itemMeta } = props;
             const indexInfo = itemMeta.getIndexInfo();
             const index = indexInfo?.index || 0;
-
+            if (itemMeta.getState().viewable)
+              console.log(
+                'item meta ',
+                itemMeta.getKey(),
+                itemMeta.getState().viewable
+              );
             return (
               <div
                 style={{

diff --git a/examples/react-playground/src/app/MasonryUncontrolledListWithContainer.stories.tsx b/examples/react-playground/src/app/MasonryUncontrolledListWithContainer.stories.tsx
@@ -24,6 +24,8 @@ const meta: Meta<typeof MasonryList> = {
           position: 'relative',
         }}
       >
+        <div style={{ height: '150px' }}></div>
+
         <MasonryList
           id="basic"
           data={buildData(10000)}
@@ -33,7 +35,12 @@ const meta: Meta<typeof MasonryList> = {
             const { item, itemMeta } = props;
             const indexInfo = itemMeta.getIndexInfo();
             const index = indexInfo?.index || 0;
-
+            if (itemMeta.getState().viewable)
+              console.log(
+                'item meta ',
+                itemMeta.getKey(),
+                itemMeta.getState().viewable
+              );
             return (
               <div
                 style={{

diff --git a/model/masonry-dimensions/src/MasonryDimensions.ts b/model/masonry-dimensions/src/MasonryDimensions.ts
@@ -181,6 +181,8 @@ class MasonryDimensions<ItemT extends GenericItemT = GenericItemT>
   ) {
     if (!scrollMetrics) return;
 
+    console.log('scrollMetrics ', scrollMetrics);
+
     if (typeof this.stateListener === 'function') {
       const stateResults = this._dataModel.getStrategies().map((strategy) => {
         const stateResult = strategy.dispatchMetrics(scrollMetrics);

diff --git a/ui/masonry/src/react/MasonryList.tsx b/ui/masonry/src/react/MasonryList.tsx
@@ -33,6 +33,7 @@ export const MasonryList = <ItemT extends GenericItemT>(
     getColumnWidth,
     scrollerRef,
     forwardRef,
+    horizontal,
     getContainerLayout,
     ...rest
   } = props;
@@ -74,24 +75,26 @@ export const MasonryList = <ItemT extends GenericItemT>(
     height: 0,
   });
 
-  const style: {
-    [key: string]: CSSProperties;
-  } = 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 containerStyle = useMemo<CSSProperties>(() => {
+    const style: CSSProperties = { position: 'relative' };
+    if (horizontal) {
+      style.display = 'flex';
+      style.flexDirection = 'column';
+      style.height = '100%';
+    }
+
+    if (!usingControlledScroller) {
+      style.width = '100%';
+      style.height = '100%';
+      if (horizontal) {
+        style.overflowX = 'auto';
+      } else {
+        style.overflowY = 'auto';
+      }
+    }
+
+    return style;
+  }, [usingControlledScroller]);
 
   useEffect(() => {
     if (containerRef.current && usingControlledScroller) {
@@ -167,14 +170,15 @@ export const MasonryList = <ItemT extends GenericItemT>(
   return (
     <div
       id={listId}
-      style={style.container}
+      style={containerStyle}
       ref={forwardRef || containerRef}
       className="masonry-list-container"
     >
       {state?.map((columnState, index) => (
         <ColumnStateRenderer
           {...rest}
           key={index}
+          horizontal={horizontal}
           state={columnState}
           columnIndex={index}
           dimensions={dimensionsModel}

diff --git a/ui/masonry/src/types/masonryList.ts b/ui/masonry/src/types/masonryList.ts
@@ -22,7 +22,7 @@ export type ColumnStateRendererProps<
   ItemT extends GenericItemT = GenericItemT
 > = Omit<MasonryListProps<ItemT>, 'id' | 'column' | 'data' | 'forwardRef'> & {
   columnIndex: number;
-  horizontal: boolean;
+  horizontal?: boolean;
   dimensions: MasonryDimension<ItemT>;
   state: MasonryColumnStateResults<ItemT>;
   columnDimensions: ColumnDimensionInfo[];