Feat 29

core/dimensions-model/src/types/ListDimensionsModel.types.ts

@@ -12,6 +12,7 @@ import {
   IMasonryDimensions,
   IMasonryDimensionsModel,
 } from '@infinite-list/types';
+import { RecyclerProps } from '@infinite-list/strategies';
 import { IDefaultKeyExtra } from '@infinite-list/utils';
 
 export type GetItemSeparatorLength<ItemT> = (
@@ -42,6 +43,7 @@ export type OnListDimensionsModelDataChanged<
 export interface ListDimensionsModelProps<
   ItemT extends GenericItemT = GenericItemT
 > extends ListBaseDimensionsProps,
+    RecyclerProps,
     BaseDimensionsProps {
   /**
    * @template ItemT the generic data item type
@@ -84,8 +86,6 @@ export interface ListDimensionsModelProps<
    */
   manuallyApplyInitialData?: boolean;
 
-  recyclerTypes?: Array<string>;
-
   onListDimensionsModelDataChanged?: OnListDimensionsModelDataChanged<ItemT>;
 }
 

core/strategies/src/RecycleStateImpl.ts

@@ -129,7 +129,8 @@ class RecycleStateImpl<
         .map((state) => {
           if (!state) return null;
           const copy = { ...state };
-          // @ts-expect-error
+
+          // @ts-expect-error [TODO]
           delete copy.viewable;
 
           return copy;

core/strategies/src/types/stateHub.types.ts

@@ -9,6 +9,13 @@ export type BaseStateImplProps<ItemT extends GenericItemT = GenericItemT> = {
 export type SpaceStateImplProps<ItemT extends GenericItemT = GenericItemT> =
   {} & BaseStateImplProps<ItemT>;
 
+export type RecyclerProps = {
+  recyclerTypes?: string[];
+  recyclerBufferSize?: number;
+  recyclerReservedBufferPerBatch?: number;
+  onRecyclerProcess?: (type?: string, index?: number) => boolean;
+};
+
 export type RecycleStateImplProps<ItemT extends GenericItemT = GenericItemT> = {
   recyclerTypes?: string[];
   recyclerBufferSize?: number;

examples/ReactNativeListPlayground/app/(tabs)/Group.tsx

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { View, Text, ScrollView as NativeScrollView } from 'react-native';
 
 import { ScrollView, ScrollViewContext } from '@infinite-list/scroller';
@@ -20,7 +20,40 @@ export default () => {
   const scrollViewRef = useRef<NativeScrollView>(null);
 
   const renderItem = useCallback((props: { item }) => {
-    const { item } = props;
+    const { item, itemMeta, ...rest } = props;
+
+    const initRef = useRef(true);
+    const itemMetaRef = useRef(itemMeta);
+
+    if (itemMetaRef.current !== itemMeta) {
+      itemMetaRef.current = itemMeta;
+    }
+
+    useEffect(() => {
+      return () => {
+        console.log('unmount ------------------');
+      };
+    }, []);
+
+    console.log('rest ---- ', rest);
+
+    useEffect(() => {
+      if (initRef.current) console.log('mount ', itemMeta.getKey());
+      else {
+        console.log('update to ', itemMeta.getKey());
+      }
+
+      initRef.current = false;
+
+      return () => {
+        console.log(
+          'unmount ',
+          itemMeta.getKey(),
+          itemMetaRef.current.getKey()
+        );
+      };
+    }, [itemMeta]);
+
     return (
       <View style={{ height: 80, width: '100%', backgroundColor: '#fff' }}>
         <Text>{item.value}</Text>
@@ -40,27 +73,30 @@ export default () => {
           backgroundColor: 'green',
         }}
       >
+        <View
+          style={{
+            height: 340,
+          }}
+        />
+
         <ListGroup
           id="basic"
           containerRef={scrollViewRef}
+          recyclerBufferSize={100}
+          recyclerReservedBufferPerBatch={50}
+          initialNumToRender={10}
           scrollComponentContext={ScrollViewContext}
         >
           <GroupList
             id="first"
             data={buildData(500)}
-            recyclerBufferSize={100}
-            recyclerReservedBufferPerBatch={50}
             renderItem={renderItem}
             keyExtractor={keyExtractor}
-            initialNumToRender={0}
           />
 
           <GroupList<Item>
             id="second"
-            initialNumToRender={0}
             data={buildData(500, 500)}
-            recyclerBufferSize={100}
-            recyclerReservedBufferPerBatch={50}
             renderItem={renderItem}
             keyExtractor={keyExtractor}
           />

examples/ReactNativeListPlayground/app/(tabs)/MasonryList.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef, useEffect } from 'react';
 import { ScrollView as NativeScrollView } from 'react-native';
 import { MasonryList } from '@infinite-list/masonry';
 import { ScrollView } from '@infinite-list/scroller';
@@ -14,10 +14,24 @@ export default () => {
   const data = useMemo(() => buildData(10000), []);
   const scrollViewRef = useRef<NativeScrollView>(null);
 
-  const renderItem = useCallback((props: { item }) => {
+  const renderItem = useCallback((props) => {
     const { item, itemMeta } = props;
     const index = itemMeta.getIndexInfo().index;
     const totalIndex = itemMeta.getIndexInfo().indexInTotal;
+    const initRef = useRef(true);
+
+    useEffect(() => {
+      if (initRef.current) console.log('mount ', itemMeta.getKey());
+      else {
+        console.log('update to ', itemMeta.getKey());
+      }
+
+      initRef.current = false;
+
+      return () => {
+        console.log('unmount ', itemMeta.getKey());
+      };
+    }, [itemMeta]);
 
     return (
       <View

examples/ReactNativeListPlayground/app/(tabs)/index.tsx

@@ -171,7 +171,7 @@ import Group from './Group';
 import HorizontalList from './HorizontalList';
 
 export default () => {
-  return <Group />;
+  // return <Group />;
   // return <MasonryList />;
   return <List />;
   return <HorizontalList />;

examples/react-playground/src/app/group.stories.tsx

@@ -27,13 +27,15 @@ const meta: Meta<typeof ListGroup> = {
           // overflowY: 'auto',
         }}
       >
-        <ListGroup id="basic">
+        <ListGroup
+          id="basic"
+          initialNumToRender={0}
+          recyclerBufferSize={100}
+          recyclerReservedBufferPerBatch={50}
+        >
           <GroupList
             id="first"
-            initialNumToRender={0}
             data={buildData(500)}
-            recyclerBufferSize={100}
-            recyclerReservedBufferPerBatch={50}
             renderItem={(props: RenderItemInfo<Item>) => {
               const { item } = props;
               return (
@@ -50,15 +52,12 @@ const meta: Meta<typeof ListGroup> = {
                 </div>
               );
             }}
-            keyExtractor={defaultKeyExtractor as KeyExtractor<Item>}
+            keyExtractor={defaultKeyExtractor}
           />
 
           <GroupList
             id="second"
-            initialNumToRender={0}
             data={buildData(500, 500)}
-            recyclerBufferSize={100}
-            recyclerReservedBufferPerBatch={50}
             renderItem={(props: RenderItemInfo<Item>) => {
               const { item } = props;
 
@@ -76,7 +75,7 @@ const meta: Meta<typeof ListGroup> = {
                 </div>
               );
             }}
-            keyExtractor={defaultKeyExtractor as KeyExtractor<Item>}
+            keyExtractor={defaultKeyExtractor}
           />
         </ListGroup>
       </div>

ui/group/src/common/PortalContent.tsx

@@ -112,7 +112,7 @@ const SpaceContent = <ItemT extends GenericItemT = GenericItemT>(
   return (
     <>
       {state.map((stateResult) => {
-        const { isSpace, key, item, length, isSticky, itemMeta } = stateResult;
+        const { isSpace, key, item, length, itemMeta } = stateResult;
 
         const metaOwner = itemMeta?.getOwner();
         const info = metaOwner?.extraInfo as ExtraInfo<ItemT>;

ui/group/src/react-native/CompatListItem.tsx

@@ -17,16 +17,14 @@ const CompatListItem = <ItemT extends GenericItemT>(
     style: _style = {},
     children,
     forwardRef,
-
-    dimensions,
     recycleItemContainerKey,
     CellRendererComponent,
     onMeasureLayout: _onMeasureLayout,
     setDimensionItemLayout,
     addItemChangedListener,
     containerRef,
     itemMeta,
-    ...rest
+    item,
   } = props;
   const containerStyle = useMemo(
     () => StyleSheet.flatten([_style, { elevation: 0 }]),
@@ -104,7 +102,6 @@ const CompatListItem = <ItemT extends GenericItemT>(
       onLayout={layoutHandler}
       key={recycleItemContainerKey}
       {...refProps}
-      {...rest}
       style={containerStyle}
     >
       {children}

ui/group/src/react-native/ListGroup.tsx

@@ -160,7 +160,7 @@ const ListGroup = <ItemT extends GenericItemT>(
    * like IOC, the specific logic placed on the topmost.
    */
   const ListItemWrapper = useCallback<TListItemWrapper<ItemT>>((props) => {
-    return <CompatListItem {...props} containerRef={containerRef} />;
+    return <CompatListItem {...props} containerRef={viewRef} />;
   }, []);
 
   return (

ui/group/src/react-native/index.ts

@@ -2,4 +2,3 @@ export { default as ListGroup } from './ListGroup';
 export { default as GroupList } from '../common/GroupList';
 export { default as ListGroupContext } from '../common/context';
 export { default as GroupListItem } from '../common/GroupDimensionItem';
-export * from './types';

ui/group/src/react-native/types/ListGroup.types.ts

@@ -1,13 +1,8 @@
-import {
-  OnEndReachedHelperProps,
-  ViewabilityConfig,
-  OnViewableItemsChanged,
-  ViewabilityConfigCallbackPairs,
-} from '@infinite-list/viewable';
-import { ComponentType, PropsWithChildren, MutableRefObject } from 'react';
+import { MutableRefObject } from 'react';
 import { View, ScrollView, LayoutChangeEvent } from 'react-native';
-import { GenericItemT } from '@infinite-list/item-meta';
+import { GenericItemT } from '@infinite-list/types';
 import { RefObject } from 'react';
+import { ListGroupProps as CommonListGroupProps } from '../../types';
 
 export type ScrollComponentUseMeasureLayout = (
   itemRef: MutableRefObject<View | null>,
@@ -24,19 +19,5 @@ export type ScrollComponentUseMeasureLayout = (
 
 export type ContainerRef = RefObject<ScrollView | View | any>;
 
-export type ListGroupProps<ItemT extends GenericItemT> = PropsWithChildren<{
-  id: string;
-  onViewableItemsChanged?: OnViewableItemsChanged;
-  viewabilityConfig?: ViewabilityConfig;
-  viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs;
-  initialNumToRender?: number;
-  windowSize?: number;
-  maxToRenderPerBatch?: number;
-  onRenderFinished?: () => void;
-  persistanceIndices?: number[];
-
-  scrollComponentContext: any;
-  containerRef: ContainerRef;
-  GroupListSeparatorComponent?: ComponentType<ItemT> | null | undefined;
-}> &
-  OnEndReachedHelperProps;
+export type ListGroupProps<ItemT extends GenericItemT> =
+  CommonListGroupProps<ItemT>;

ui/group/src/react/index.ts

@@ -2,4 +2,3 @@ export { default as ListGroup } from './ListGroup';
 export { default as GroupList } from '../common/GroupList';
 export { default as ListGroupContext } from '../common/context';
 export { default as GroupListItem } from '../common/GroupDimensionItem';
-export * from './types';

ui/group/src/react/types/ListGroup.types.ts

@@ -1,11 +1,7 @@
-import {
-  OnEndReachedHelperProps,
-  ViewabilityConfig,
-  OnViewableItemsChanged,
-  ViewabilityConfigCallbackPairs,
-} from '@infinite-list/viewable';
-import { ComponentType, PropsWithChildren, MutableRefObject } from 'react';
+import { MutableRefObject } from 'react';
 import { View, LayoutChangeEvent } from 'react-native';
+import { GenericItemT } from '@infinite-list/types';
+import { ListGroupProps as CommonListGroupProps } from '../../types';
 
 export type ScrollComponentUseMeasureLayout = (
   itemRef: MutableRefObject<View | null>,
@@ -20,18 +16,5 @@ export type ScrollComponentUseMeasureLayout = (
   layoutHandler: (e: LayoutChangeEvent) => void;
 };
 
-export type ListGroupProps = PropsWithChildren<{
-  GroupListSeparatorComponent?: ComponentType<any> | null | undefined;
-  id: string;
-  onViewableItemsChanged?: OnViewableItemsChanged;
-  viewabilityConfig?: ViewabilityConfig;
-  viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs;
-  initialNumToRender?: number;
-  windowSize?: number;
-  maxToRenderPerBatch?: number;
-  onRenderFinished?: () => void;
-  persistanceIndices?: number[];
-
-  scrollComponentContext: any;
-}> &
-  OnEndReachedHelperProps;
+export type ListGroupProps<ItemT extends GenericItemT> =
+  CommonListGroupProps<ItemT>;