@legendapp/list 0.1.1 → 0.1.2

package/README.md

@@ -70,3 +70,11 @@ There's not a lot of code here so hopefully it's easy to contribute. If you want
 -   Other important missing features from FlatList or other lists libraries
 -   Optimizations:
     -   Loop over only potentially changed items when adjusting heights rather than data array
+
+## Community
+
+Join us on [Discord](https://discord.gg/tuW2pAffjA) to get involved with the Legend community.
+
+## 👩‍⚖️ License
+
+[MIT](LICENSE)

package/index.d.mts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ComponentProps, ReactNode } from 'react';
-import { ScrollView } from 'react-native';
+import * as react_native from 'react-native';
+import { ScrollView, StyleProp, ViewStyle } from 'react-native';
 
 type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset'> & {
     data: ArrayLike<any> & T[];
@@ -19,6 +20,10 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     keyExtractor?: (item: T, index: number) => string;
     renderItem?: (props: LegendListRenderItemInfo<T>) => ReactNode;
     onViewableRangeChanged?: (range: ViewableRange<T>) => void;
+    ListHeaderComponent?: ReactNode;
+    ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
+    ListFooterComponent?: ReactNode;
+    ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
 };
 interface ViewableRange<T> {
     startBuffered: number;
@@ -32,6 +37,27 @@ interface LegendListRenderItemInfo<ItemT> {
     index: number;
 }
 
-declare function LegendList<T>(props: LegendListProps<T>): React.JSX.Element;
+declare const LegendList: React.ForwardRefExoticComponent<Omit<react_native.ScrollViewProps, "contentOffset"> & {
+    data: ArrayLike<any> & unknown[];
+    initialScrollOffset?: number;
+    initialScrollIndex?: number;
+    drawDistance?: number;
+    initialContainers?: number;
+    recycleItems?: boolean;
+    onEndReachedThreshold?: number | null | undefined;
+    autoScrollToBottom?: boolean;
+    autoScrollToBottomThreshold?: number;
+    estimatedItemLength: (index: number) => number;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    keyExtractor?: ((item: unknown, index: number) => string) | undefined;
+    renderItem?: ((props: LegendListRenderItemInfo<unknown>) => React.ReactNode) | undefined;
+    onViewableRangeChanged?: ((range: ViewableRange<unknown>) => void) | undefined;
+    ListHeaderComponent?: React.ReactNode;
+    ListHeaderComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    ListFooterComponent?: React.ReactNode;
+    ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+} & React.RefAttributes<ScrollView>>;
 
 export { LegendList, type LegendListProps, type LegendListRenderItemInfo, type ViewableRange };

package/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ComponentProps, ReactNode } from 'react';
-import { ScrollView } from 'react-native';
+import * as react_native from 'react-native';
+import { ScrollView, StyleProp, ViewStyle } from 'react-native';
 
 type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset'> & {
     data: ArrayLike<any> & T[];
@@ -19,6 +20,10 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     keyExtractor?: (item: T, index: number) => string;
     renderItem?: (props: LegendListRenderItemInfo<T>) => ReactNode;
     onViewableRangeChanged?: (range: ViewableRange<T>) => void;
+    ListHeaderComponent?: ReactNode;
+    ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
+    ListFooterComponent?: ReactNode;
+    ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
 };
 interface ViewableRange<T> {
     startBuffered: number;
@@ -32,6 +37,27 @@ interface LegendListRenderItemInfo<ItemT> {
     index: number;
 }
 
-declare function LegendList<T>(props: LegendListProps<T>): React.JSX.Element;
+declare const LegendList: React.ForwardRefExoticComponent<Omit<react_native.ScrollViewProps, "contentOffset"> & {
+    data: ArrayLike<any> & unknown[];
+    initialScrollOffset?: number;
+    initialScrollIndex?: number;
+    drawDistance?: number;
+    initialContainers?: number;
+    recycleItems?: boolean;
+    onEndReachedThreshold?: number | null | undefined;
+    autoScrollToBottom?: boolean;
+    autoScrollToBottomThreshold?: number;
+    estimatedItemLength: (index: number) => number;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    keyExtractor?: ((item: unknown, index: number) => string) | undefined;
+    renderItem?: ((props: LegendListRenderItemInfo<unknown>) => React.ReactNode) | undefined;
+    onViewableRangeChanged?: ((range: ViewableRange<unknown>) => void) | undefined;
+    ListHeaderComponent?: React.ReactNode;
+    ListHeaderComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    ListFooterComponent?: React.ReactNode;
+    ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+} & React.RefAttributes<ScrollView>>;
 
 export { LegendList, type LegendListProps, type LegendListRenderItemInfo, type ViewableRange };

package/index.js

@@ -71,7 +71,7 @@ var Container = ({
 enableReactNativeComponents.enableReactNativeComponents();
 var DEFAULT_SCROLL_BUFFER = 0;
 var POSITION_OUT_OF_VIEW = -1e4;
-function LegendList(props) {
+var LegendList = React2.forwardRef((props, forwardedRef) => {
   const {
     data,
     initialScrollIndex,
@@ -81,7 +81,7 @@ function LegendList(props) {
     contentContainerStyle,
     initialContainers,
     drawDistance,
-    recycleItems = false,
+    recycleItems = true,
     onEndReachedThreshold,
     autoScrollToBottom = false,
     autoScrollToBottomThreshold = 0.1,
@@ -90,11 +90,14 @@ function LegendList(props) {
     estimatedItemLength,
     onEndReached,
     onViewableRangeChanged,
-    children,
+    ListHeaderComponent,
+    ListHeaderComponentStyle,
+    ListFooterComponent,
+    ListFooterComponentStyle,
     ...rest
   } = props;
-  const childrenArray = children && !data ? React2__namespace.Children.toArray(children) : void 0;
-  const refScroller = React2.useRef(null);
+  const internalRef = React2.useRef(null);
+  const refScroller = forwardedRef || internalRef;
   const containers$ = react.useObservable(() => []);
   const visibleRange$ = react.useObservable(() => ({
     start: 0,
@@ -111,7 +114,7 @@ function LegendList(props) {
     if (!data2) {
       return "";
     }
-    const ret = index < (data2 || childrenArray).length ? data2 ? keyExtractor ? keyExtractor(data2[index], index) : index : index : null;
+    const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
     return ret + "";
   };
   if (!refPositions.current) {
@@ -125,13 +128,11 @@ function LegendList(props) {
       isAtBottom: false,
       data,
       idsInFirstRender: void 0,
-      hasScrolled: false,
-      childrenArray
+      hasScrolled: false
     };
-    refPositions.current.idsInFirstRender = new Set((data || childrenArray).map((_, i) => getId(i)));
+    refPositions.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
   }
   refPositions.current.data = data;
-  refPositions.current.childrenArray = childrenArray;
   const SCREEN_LENGTH = reactNative.Dimensions.get("window")[horizontal ? "width" : "height"];
   const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : initialScrollIndex ? initialScrollIndex * estimatedItemLength(initialScrollIndex) : void 0;
   const allocateContainers = React2.useCallback(() => {
@@ -148,15 +149,10 @@ function LegendList(props) {
   }, []);
   const getRenderedItem = React2.useCallback(
     (index) => {
-      var _a, _b;
+      var _a;
       const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
       if (!data2) {
-        const childrenArray2 = (_b = refPositions.current) == null ? void 0 : _b.childrenArray;
-        if (childrenArray2) {
-          return childrenArray2[index];
-        } else {
-          return null;
-        }
+        return null;
       }
       const renderedItem = renderItem == null ? void 0 : renderItem({
         item: data2[index],
@@ -375,6 +371,7 @@ function LegendList(props) {
       ...rest,
       ref: refScroller
     },
+    ListHeaderComponent && /* @__PURE__ */ React2__namespace.createElement(react.Reactive.View, { $style: ListHeaderComponentStyle }, ListHeaderComponent),
     /* @__PURE__ */ React2__namespace.createElement(
       react.Reactive.View,
       {
@@ -395,8 +392,9 @@ function LegendList(props) {
           onLayout: updateItemLength
         }
       ))
-    )
+    ),
+    ListFooterComponent && /* @__PURE__ */ React2__namespace.createElement(react.Reactive.View, { $style: ListFooterComponentStyle }, ListFooterComponent)
   );
-}
+});
 
 exports.LegendList = LegendList;

package/index.mjs

@@ -1,5 +1,5 @@
 import * as React2 from 'react';
-import { useRef, useCallback, useMemo, useEffect } from 'react';
+import { forwardRef, useRef, useCallback, useMemo, useEffect } from 'react';
 import { beginBatch, endBatch } from '@legendapp/state';
 import { enableReactNativeComponents } from '@legendapp/state/config/enableReactNativeComponents';
 import { useObservable, use$, Reactive } from '@legendapp/state/react';
@@ -50,7 +50,7 @@ var Container = ({
 enableReactNativeComponents();
 var DEFAULT_SCROLL_BUFFER = 0;
 var POSITION_OUT_OF_VIEW = -1e4;
-function LegendList(props) {
+var LegendList = forwardRef((props, forwardedRef) => {
   const {
     data,
     initialScrollIndex,
@@ -60,7 +60,7 @@ function LegendList(props) {
     contentContainerStyle,
     initialContainers,
     drawDistance,
-    recycleItems = false,
+    recycleItems = true,
     onEndReachedThreshold,
     autoScrollToBottom = false,
     autoScrollToBottomThreshold = 0.1,
@@ -69,11 +69,14 @@ function LegendList(props) {
     estimatedItemLength,
     onEndReached,
     onViewableRangeChanged,
-    children,
+    ListHeaderComponent,
+    ListHeaderComponentStyle,
+    ListFooterComponent,
+    ListFooterComponentStyle,
     ...rest
   } = props;
-  const childrenArray = children && !data ? React2.Children.toArray(children) : void 0;
-  const refScroller = useRef(null);
+  const internalRef = useRef(null);
+  const refScroller = forwardedRef || internalRef;
   const containers$ = useObservable(() => []);
   const visibleRange$ = useObservable(() => ({
     start: 0,
@@ -90,7 +93,7 @@ function LegendList(props) {
     if (!data2) {
       return "";
     }
-    const ret = index < (data2 || childrenArray).length ? data2 ? keyExtractor ? keyExtractor(data2[index], index) : index : index : null;
+    const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
     return ret + "";
   };
   if (!refPositions.current) {
@@ -104,13 +107,11 @@ function LegendList(props) {
       isAtBottom: false,
       data,
       idsInFirstRender: void 0,
-      hasScrolled: false,
-      childrenArray
+      hasScrolled: false
     };
-    refPositions.current.idsInFirstRender = new Set((data || childrenArray).map((_, i) => getId(i)));
+    refPositions.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
   }
   refPositions.current.data = data;
-  refPositions.current.childrenArray = childrenArray;
   const SCREEN_LENGTH = Dimensions.get("window")[horizontal ? "width" : "height"];
   const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : initialScrollIndex ? initialScrollIndex * estimatedItemLength(initialScrollIndex) : void 0;
   const allocateContainers = useCallback(() => {
@@ -127,15 +128,10 @@ function LegendList(props) {
   }, []);
   const getRenderedItem = useCallback(
     (index) => {
-      var _a, _b;
+      var _a;
       const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
       if (!data2) {
-        const childrenArray2 = (_b = refPositions.current) == null ? void 0 : _b.childrenArray;
-        if (childrenArray2) {
-          return childrenArray2[index];
-        } else {
-          return null;
-        }
+        return null;
       }
       const renderedItem = renderItem == null ? void 0 : renderItem({
         item: data2[index],
@@ -354,6 +350,7 @@ function LegendList(props) {
       ...rest,
       ref: refScroller
     },
+    ListHeaderComponent && /* @__PURE__ */ React2.createElement(Reactive.View, { $style: ListHeaderComponentStyle }, ListHeaderComponent),
     /* @__PURE__ */ React2.createElement(
       Reactive.View,
       {
@@ -374,8 +371,9 @@ function LegendList(props) {
           onLayout: updateItemLength
         }
       ))
-    )
+    ),
+    ListFooterComponent && /* @__PURE__ */ React2.createElement(Reactive.View, { $style: ListFooterComponentStyle }, ListFooterComponent)
   );
-}
+});
 
 export { LegendList };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,