Feat horizontal (#92)

* feat: add horizontal support

* feat: add react native group support

* feat: add Group

* feat: update examples

* feat: update doc

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,25 +1,3 @@
 ## 🌟 PR
 
-This PR contains:
-- [ ] bugfix
-- [ ] feature
-- [ ] refactor
-- [ ] documentation
-- [ ] other
-
-Are tests included?
-- [ ] yes (*bugfixes and features will not be merged without tests*)
-- [ ] no
-
-Breaking Changes?
-- [ ] yes (*breaking changes will not be merged unless absolutely necessary*)
-- [ ] no
-
-List any relevant issue numbers:
-- closes #1
-- closed #1
-- fixes #1
-- resolve #1
-<!-- remove before rewrite this part -->
-
 ### Description

core/strategies/src/BaseImpl.ts

@@ -15,7 +15,6 @@ import {
   StateListener,
   ListBaseDimensionsStore,
   GenericItemT,
-  // IndexInfo,
   IndexToOffsetMap,
   ListStateResult,
   ReducerResult,
@@ -32,13 +31,7 @@ import {
   ViewabilityConfigTuples,
 } from '@infinite-list/viewable';
 import { BaseLayout } from '@infinite-list/base-dimensions';
-// import ListSpyUtils from '../utils/ListSpyUtils';
-// import OnEndReachedHelper from '../viewable/OnEndReachedHelper';
-// import EnabledSelector from '../utils/EnabledSelector';
-// import StillnessHelper from '../utils/StillnessHelper';
-// import ViewabilityConfigTuples from '../viewable/ViewabilityConfigTuples';
 
-// import BaseLayout from '../BaseLayout';
 import StateHub from './StateHub';
 
 /**

core/strategies/src/RecycleStateImpl.ts

@@ -1,6 +1,5 @@
 import Recycler, { OnRecyclerProcess } from '@x-oasis/recycler';
 import { ItemMeta } from '@infinite-list/item-meta';
-// import memoizeOne from 'memoize-one';
 import {
   buildStateTokenIndexKey,
   DEFAULT_RECYCLER_TYPE,
@@ -21,7 +20,6 @@ import { ListGroupIndexInfo } from '@infinite-list/types';
 import { resolveToken } from './utils';
 import BaseState from './BaseState';
 import { log } from '@infinite-list/utils';
-// import * as log from '../utils/logger';
 import defaultValue from '@x-oasis/default-value';
 /**
  * item should be first class data model; item's value reference change will

examples/ReactNativeListPlayground/README.md

@@ -1,50 +1,9 @@
-# Welcome to your Expo app 👋
+# ReactNativeListPlayground
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
-
-## Get started
-
-1. Install dependencies
-
-   ```bash
-   npm install
-   ```
-
-2. Start the app
-
-   ```bash
-    npx expo start
-   ```
-
-In the output, you'll find options to open the app in a
-
-- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
-- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
-- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
-- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
-
-You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
-
-## Get a fresh project
-
-When you're ready, run:
+## Getting Start
 
 ```bash
-npm run reset-project
-```
-
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
-
-## Learn more
-
-To learn more about developing your project with Expo, look at the following resources:
-
-- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
-- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
-
-## Join the community
-
-Join our community of developers creating universal apps.
-
-- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
+$ cd ./examples/ReactNativeListPlayground
+$ yarn 
+$ yarn start
+```

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

@@ -0,0 +1,71 @@
+import { useRef, useCallback } from 'react';
+import { View, Text, ScrollView as NativeScrollView } from 'react-native';
+
+import { ScrollView, ScrollViewContext } from '@infinite-list/scroller';
+
+import { ListGroup, GroupList } from '@infinite-list/group';
+
+type Item = {
+  key: string;
+  value: string;
+};
+
+const buildData = (count: number, startIndex = 0) =>
+  new Array(count).fill(1).map((v, index) => ({
+    key: `_key_${index + startIndex}`,
+    value: `${index + startIndex}`,
+  }));
+
+export default () => {
+  const scrollViewRef = useRef<NativeScrollView>(null);
+
+  const renderItem = useCallback((props: { item }) => {
+    const { item } = props;
+    return (
+      <View style={{ height: 80, width: '100%', backgroundColor: '#fff' }}>
+        <Text>{item.value}</Text>
+      </View>
+    );
+  }, []);
+
+  const keyExtractor = useCallback((item) => {
+    return item.key;
+  }, []);
+
+  return (
+    <View>
+      <ScrollView
+        ref={scrollViewRef}
+        contentContainerStyle={{
+          backgroundColor: 'green',
+        }}
+      >
+        <ListGroup
+          id="basic"
+          containerRef={scrollViewRef}
+          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}
+          />
+        </ListGroup>
+      </ScrollView>
+    </View>
+  );
+};

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

@@ -0,0 +1,58 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { List } from '@infinite-list/list';
+import { ScrollView } from '@infinite-list/scroller';
+import {
+  Dimensions,
+  ScrollView as NativeScrollView,
+  Text,
+  View,
+} from 'react-native';
+
+const buildData = (count: number, startIndex = 0) =>
+  new Array(count).fill(1).map((v, index) => ({
+    key: `_key_${index + startIndex}`,
+    value: index + startIndex,
+  }));
+
+export default () => {
+  const data = useMemo(() => buildData(100), []);
+  const scrollViewRef = useRef<NativeScrollView>(null);
+
+  const renderItem = useCallback((props: { item }) => {
+    const { item } = props;
+    return (
+      <View style={{ height: '100%', width: 200, backgroundColor: 'yellow' }}>
+        <Text>{item.value}</Text>
+      </View>
+    );
+  }, []);
+
+  const keyExtractor = useCallback((item) => {
+    return item.key;
+  }, []);
+
+  return (
+    <View style={{ width: Dimensions.get('window').width }}>
+      <ScrollView
+        ref={scrollViewRef}
+        contentContainerStyle={{
+          backgroundColor: 'green',
+          height: 300,
+        }}
+        style={{
+          marginTop: 100,
+        }}
+        horizontal
+      >
+        <List
+          data={data}
+          id="basic"
+          horizontal
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          containerRef={scrollViewRef}
+        />
+      </ScrollView>
+    </View>
+  );
+};

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

@@ -1,17 +1,11 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { List } from '@infinite-list/list';
 import { ScrollView } from '@infinite-list/scroller';
-import {
-  // NativeScrollEvent,
-  // NativeSyntheticEvent,
-  ScrollView as NativeScrollView,
-  Text,
-  View,
-} from 'react-native';
+import { ScrollView as NativeScrollView, Text, View } from 'react-native';
 
 const buildData = (count: number, startIndex = 0) =>
   new Array(count).fill(1).map((v, index) => ({
-    key: index + startIndex,
+    key: `__Key_${index + startIndex}`,
     value: index + startIndex,
   }));
 
@@ -35,7 +29,6 @@ export default () => {
   return (
     <ScrollView
       ref={scrollViewRef}
-      // onScroll={onScroll}
       contentContainerStyle={{
         backgroundColor: '#fff',
       }}

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

@@ -167,8 +167,12 @@
 import List from './List';
 import MasonryList from './MasonryList';
 import { Text } from 'react-native';
+import Group from './Group';
+import HorizontalList from './HorizontalList';
 
 export default () => {
+  return <Group />;
   // return <MasonryList />;
   return <List />;
+  return <HorizontalList />;
 };