@legendapp/list 0.1.0 → 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,
@@ -90,9 +90,14 @@ function LegendList(props) {
     estimatedItemLength,
     onEndReached,
     onViewableRangeChanged,
+    ListHeaderComponent,
+    ListHeaderComponentStyle,
+    ListFooterComponent,
+    ListFooterComponentStyle,
     ...rest
   } = props;
-  const refScroller = React2.useRef(null);
+  const internalRef = React2.useRef(null);
+  const refScroller = forwardedRef || internalRef;
   const containers$ = react.useObservable(() => []);
   const visibleRange$ = react.useObservable(() => ({
     start: 0,
@@ -366,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,
       {
@@ -386,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,
@@ -69,9 +69,14 @@ function LegendList(props) {
     estimatedItemLength,
     onEndReached,
     onViewableRangeChanged,
+    ListHeaderComponent,
+    ListHeaderComponentStyle,
+    ListFooterComponent,
+    ListFooterComponentStyle,
     ...rest
   } = props;
-  const refScroller = useRef(null);
+  const internalRef = useRef(null);
+  const refScroller = forwardedRef || internalRef;
   const containers$ = useObservable(() => []);
   const visibleRange$ = useObservable(() => ({
     start: 0,
@@ -345,6 +350,7 @@ function LegendList(props) {
       ...rest,
       ref: refScroller
     },
+    ListHeaderComponent && /* @__PURE__ */ React2.createElement(Reactive.View, { $style: ListHeaderComponentStyle }, ListHeaderComponent),
     /* @__PURE__ */ React2.createElement(
       Reactive.View,
       {
@@ -365,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.0",
+  "version": "0.1.2",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,