fix: use transformY and exports some types (#78)

Signed-off-by: Innei <[email protected]>

package.json

@@ -14,7 +14,8 @@
     "prepare": "husky install",
     "version": "changeset version && pnpm install --no-frozen-lockfile",
     "publish": "pnpm publish -r --access public",
-    "clean-modules": "rm -rf node_modules && pnpm -r exec rm -rf node_modules"
+    "clean-modules": "rm -rf node_modules && pnpm -r exec rm -rf node_modules",
+    "dev:web": "nx storybook react"
   },
   "private": true,
   "lint-staged": {
@@ -118,4 +119,4 @@
   "nx": {
     "includedScripts": []
   }
-}
+}

packages/react/src/index.ts

@@ -1,4 +1,4 @@
-import List from './lib/list/List';
-import MasonryList from './lib/masonryList';
+export * from './lib/list/List';
+export * from './lib/masonryList';
 
-export { List, MasonryList };
+export * from './lib/types';

packages/react/src/lib/list/List.tsx

@@ -9,7 +9,7 @@ import RecycleItem from './RecycleItem';
 import SpaceItem from './SpaceItem';
 import ScrollTracker from '../events/ScrollTracker';
 
-const List = <ItemT extends GenericItemT>(props: ListProps<ItemT>) => {
+export const List = <ItemT extends GenericItemT>(props: ListProps<ItemT>) => {
   const { renderItem, id, data, recycleEnabled = true } = props;
   const listModel = useMemo(() => new ListDimensions<ItemT>(props), []);
   const [state, setState] = useState(listModel.getStateResult());
@@ -46,20 +46,21 @@ const List = <ItemT extends GenericItemT>(props: ListProps<ItemT>) => {
   );
 
   useEffect(() => {
-    scrollHandlerRef.current = new ScrollTracker({
+    const scrollTracker = new ScrollTracker({
       domNode: listRef.current!,
       onScroll: () => {
         listModel.updateScrollMetrics(
           scrollHandlerRef.current?.getScrollMetrics()
         );
       },
     });
+    scrollHandlerRef.current = scrollTracker;
 
-    scrollHandlerRef.current.addEventListeners();
+    scrollTracker.addEventListeners();
 
-    listModel.updateScrollMetrics(scrollHandlerRef.current.getScrollMetrics());
+    listModel.updateScrollMetrics(scrollTracker.getScrollMetrics());
 
-    return () => scrollHandlerRef.current?.dispose();
+    return () => scrollTracker.dispose();
   }, []);
 
   if (recycleEnabled) {
@@ -86,6 +87,7 @@ const List = <ItemT extends GenericItemT>(props: ListProps<ItemT>) => {
       </>
     );
   }
+  // TODO: implement static list
 };
 
 export default List;

packages/react/src/lib/list/RecycleItem.tsx

@@ -12,8 +12,9 @@ const RecycleItem = <ItemT extends GenericItemT>(
     if (typeof offset === 'number')
       return {
         position: 'absolute',
-        top: offset,
+        transform: `translateY(${offset}px)`,
         left: 0,
+        top: 0,
         right: 0,
       };
     return {};

packages/react/src/lib/masonryList/MasonryList.tsx

@@ -19,7 +19,7 @@ import ScrollTracker from '../events/ScrollTracker';
 
 let count = 0;
 
-const MasonryList = <ItemT extends GenericItemT>(
+export const MasonryList = <ItemT extends GenericItemT>(
   props: MasonryListProps<ItemT>
 ) => {
   const [state, setState] = useState<MasonryStateResults<ItemT>>();

packages/react/src/lib/masonryList/index.ts

@@ -1,3 +1,3 @@
 import MasonryList from './MasonryList';
 
-export default MasonryList;
+export { MasonryList };

packages/react/src/stories/List.stories.tsx

@@ -1,5 +1,8 @@
 import type { Meta } from '@storybook/react';
-import { defaultKeyExtractor } from '@infinite-list/data-model';
+import {
+  defaultKeyExtractor,
+  type KeyExtractor,
+} from '@infinite-list/data-model';
 import { List } from '../';
 
 const buildData = (count: number) =>
@@ -16,7 +19,7 @@ const meta: Meta<typeof List> = {
           height: '400px',
           width: '600px',
           backgroundColor: '#efefef',
-          position: 'relative'
+          position: 'relative',
         }}
       >
         <List
@@ -42,7 +45,7 @@ const meta: Meta<typeof List> = {
               </div>
             );
           }}
-          keyExtractor={defaultKeyExtractor}
+          keyExtractor={defaultKeyExtractor as KeyExtractor<{ key: number }>}
         />
       </div>
     );