@legendapp/list 0.6.0 → 0.6.2

package/README.md

@@ -67,12 +67,7 @@ There's not a lot of code here so hopefully it's easy to contribute. If you want
 
 ## TODO list
 
--   onViewableItemsChanged
--   Adjust scroll when item heights change above the viewable area so they don't jump
--   A prop to start with items at the bottom like a chat interface, just needs to pad the top with screen height - items height
--   Other important missing features from FlatList or other lists libraries
--   Optimizations:
-    -   Loop over only potentially changed items when adjusting heights rather than data array
+See [Road to v1](https://github.com/LegendApp/legend-list/issues/28)
 
 ## Community
 

package/animated.d.mts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as _legendapp_list from '@legendapp/list';
+import { Animated } from 'react-native';
+
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: _legendapp_list.LegendListProps<T> & {
+    ref?: React.ForwardedRef<_legendapp_list.LegendListRef>;
+}) => React.ReactElement)>;
+
+export { AnimatedLegendList };

package/animated.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as _legendapp_list from '@legendapp/list';
+import { Animated } from 'react-native';
+
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: _legendapp_list.LegendListProps<T> & {
+    ref?: React.ForwardedRef<_legendapp_list.LegendListRef>;
+}) => React.ReactElement)>;
+
+export { AnimatedLegendList };

package/animated.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var list = require('@legendapp/list');
+var reactNative = require('react-native');
+
+// src/animated.tsx
+var AnimatedLegendList = reactNative.Animated.createAnimatedComponent(list.LegendList);
+
+exports.AnimatedLegendList = AnimatedLegendList;

package/animated.mjs

@@ -0,0 +1,7 @@
+import { LegendList } from '@legendapp/list';
+import { Animated } from 'react-native';
+
+// src/animated.tsx
+var AnimatedLegendList = Animated.createAnimatedComponent(LegendList);
+
+export { AnimatedLegendList };

package/index.d.mts

@@ -1,5 +1,6 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
 import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
+import Animated from 'react-native-reanimated';
 
 declare class ScrollAdjustHandler {
     private ctx;
@@ -13,7 +14,7 @@ declare class ScrollAdjustHandler {
     getAppliedAdjust(): number;
 }
 
-type LegendListProps<ItemT> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
+type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView>> = Omit<TScrollView, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
     data: ArrayLike<any> & ItemT[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;
@@ -27,6 +28,7 @@ type LegendListProps<ItemT> = Omit<ComponentProps<typeof ScrollView>, 'contentOf
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    refScrollView?: React.Ref<ScrollView>;
     estimatedItemSize?: number;
     getEstimatedItemSize?: (index: number, item: ItemT) => number;
     onStartReached?: ((info: {
@@ -48,6 +50,7 @@ type LegendListProps<ItemT> = Omit<ComponentProps<typeof ScrollView>, 'contentOf
     viewabilityConfig?: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged | undefined;
 };
+type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {
     anchorElement?: {
         id: string;
@@ -214,4 +217,4 @@ declare const LegendList: <T>(props: LegendListProps<T> & {
     ref?: ForwardedRef<LegendListRef>;
 }) => ReactElement;
 
-export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };
+export { type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };

package/index.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
 import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
+import Animated from 'react-native-reanimated';
 
 declare class ScrollAdjustHandler {
     private ctx;
@@ -13,7 +14,7 @@ declare class ScrollAdjustHandler {
     getAppliedAdjust(): number;
 }
 
-type LegendListProps<ItemT> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
+type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView>> = Omit<TScrollView, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
     data: ArrayLike<any> & ItemT[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;
@@ -27,6 +28,7 @@ type LegendListProps<ItemT> = Omit<ComponentProps<typeof ScrollView>, 'contentOf
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    refScrollView?: React.Ref<ScrollView>;
     estimatedItemSize?: number;
     getEstimatedItemSize?: (index: number, item: ItemT) => number;
     onStartReached?: ((info: {
@@ -48,6 +50,7 @@ type LegendListProps<ItemT> = Omit<ComponentProps<typeof ScrollView>, 'contentOf
     viewabilityConfig?: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged | undefined;
 };
+type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {
     anchorElement?: {
         id: string;
@@ -214,4 +217,4 @@ declare const LegendList: <T>(props: LegendListProps<T> & {
     ref?: ForwardedRef<LegendListRef>;
 }) => ReactElement;
 
-export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };
+export { type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };

package/index.js

@@ -107,7 +107,8 @@ var Container = ({
   }
   const lastItemKey = use$("lastItemKey");
   const itemKey = use$(`containerItemKey${id}`);
-  const renderedItem = React4.useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey]);
+  const data = use$(`containerItemData${id}`);
+  const renderedItem = React4.useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey, data]);
   return /* @__PURE__ */ React4__namespace.default.createElement(
     reactNative.View,
     {
@@ -203,7 +204,7 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
   ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
-  refScroller,
+  refScrollView,
   maintainVisibleContentPosition,
   ...rest
 }) {
@@ -227,7 +228,7 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
       onLayout,
       horizontal,
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
-      ref: refScroller
+      ref: refScrollView
     },
     /* @__PURE__ */ React4__namespace.createElement(reactNative.Animated.View, { style: additionalSize }),
     ListHeaderComponent && /* @__PURE__ */ React4__namespace.createElement(
@@ -483,12 +484,12 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     onEndReached,
     onStartReached,
     ListEmptyComponent,
+    refScrollView,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
   const ctx = useStateContext();
-  const internalRef = React4.useRef(null);
-  const refScroller = internalRef;
+  const refScroller = React4.useRef(null);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
   const refState = React4.useRef();
@@ -688,7 +689,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     return res;
   };
   const calculateItemsInView = React4.useCallback((speed) => {
-    var _a2, _b2;
+    var _a2, _b2, _c2, _d2;
     const state = refState.current;
     const {
       data: data2,
@@ -838,10 +839,14 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           }
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
+            const index = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(id);
+            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
+            const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
+            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
@@ -861,7 +866,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
-        const itemIndex = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(itemKey);
+        const itemIndex = (_d2 = refState.current) == null ? void 0 : _d2.indexByKey.get(itemKey);
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
@@ -877,12 +882,16 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
             const column2 = columns.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
             const prevColumn = peek$(ctx, `containerColumn${i}`);
+            const prevData = peek$(ctx, `containerItemData${i}`);
             if (pos > POSITION_OUT_OF_VIEW && pos !== prevPos) {
               set$(ctx, `containerPosition${i}`, pos);
             }
             if (column2 >= 0 && column2 !== prevColumn) {
               set$(ctx, `containerColumn${i}`, column2);
             }
+            if (prevData !== item) {
+              set$(ctx, `containerItemData${i}`, data2[itemIndex]);
+            }
           }
         }
       }
@@ -1002,6 +1011,10 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
     if (!isFirst) {
+      if (data.length > refState.current.data.length) {
+        refState.current.isEndReached = false;
+      }
+      refState.current.data = data;
       const numContainers = peek$(ctx, "numContainers");
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
@@ -1305,7 +1318,16 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     {
       ...rest,
       horizontal,
-      refScroller,
+      refScrollView: (r) => {
+        refScroller.current = r;
+        if (refScrollView) {
+          if (typeof refScrollView === "function") {
+            refScrollView(r);
+          } else {
+            refScrollView.current = r;
+          }
+        }
+      },
       initialContentOffset,
       getRenderedItem,
       updateItemSize,

package/index.mjs

@@ -86,7 +86,8 @@ var Container = ({
   }
   const lastItemKey = use$("lastItemKey");
   const itemKey = use$(`containerItemKey${id}`);
-  const renderedItem = useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey]);
+  const data = use$(`containerItemData${id}`);
+  const renderedItem = useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey, data]);
   return /* @__PURE__ */ React4__default.createElement(
     View,
     {
@@ -182,7 +183,7 @@ var ListComponent = React4.memo(function ListComponent2({
   ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
-  refScroller,
+  refScrollView,
   maintainVisibleContentPosition,
   ...rest
 }) {
@@ -206,7 +207,7 @@ var ListComponent = React4.memo(function ListComponent2({
       onLayout,
       horizontal,
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
-      ref: refScroller
+      ref: refScrollView
     },
     /* @__PURE__ */ React4.createElement(Animated.View, { style: additionalSize }),
     ListHeaderComponent && /* @__PURE__ */ React4.createElement(
@@ -462,12 +463,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     onEndReached,
     onStartReached,
     ListEmptyComponent,
+    refScrollView,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
   const ctx = useStateContext();
-  const internalRef = useRef(null);
-  const refScroller = internalRef;
+  const refScroller = useRef(null);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
   const refState = useRef();
@@ -667,7 +668,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     return res;
   };
   const calculateItemsInView = useCallback((speed) => {
-    var _a2, _b2;
+    var _a2, _b2, _c2, _d2;
     const state = refState.current;
     const {
       data: data2,
@@ -817,10 +818,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           }
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
+            const index = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(id);
+            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
+            const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
+            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
@@ -840,7 +845,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
-        const itemIndex = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(itemKey);
+        const itemIndex = (_d2 = refState.current) == null ? void 0 : _d2.indexByKey.get(itemKey);
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
@@ -856,12 +861,16 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             const column2 = columns.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
             const prevColumn = peek$(ctx, `containerColumn${i}`);
+            const prevData = peek$(ctx, `containerItemData${i}`);
             if (pos > POSITION_OUT_OF_VIEW && pos !== prevPos) {
               set$(ctx, `containerPosition${i}`, pos);
             }
             if (column2 >= 0 && column2 !== prevColumn) {
               set$(ctx, `containerColumn${i}`, column2);
             }
+            if (prevData !== item) {
+              set$(ctx, `containerItemData${i}`, data2[itemIndex]);
+            }
           }
         }
       }
@@ -981,6 +990,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
     if (!isFirst) {
+      if (data.length > refState.current.data.length) {
+        refState.current.isEndReached = false;
+      }
+      refState.current.data = data;
       const numContainers = peek$(ctx, "numContainers");
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
@@ -1284,7 +1297,16 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     {
       ...rest,
       horizontal,
-      refScroller,
+      refScrollView: (r) => {
+        refScroller.current = r;
+        if (refScrollView) {
+          if (typeof refScrollView === "function") {
+            refScrollView(r);
+          } else {
+            refScrollView.current = r;
+          }
+        }
+      },
       initialContentOffset,
       getRenderedItem,
       updateItemSize,

package/package.json

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

package/reanimated.d.mts

@@ -0,0 +1,13 @@
+import { LegendListRef, LegendListPropsBase } from '@legendapp/list';
+import React__default, { ComponentProps } from 'react';
+import Animated from 'react-native-reanimated';
+
+type KeysToOmit = "getEstimatedItemSize" | "keyExtractor" | "animatedProps" | "renderItem";
+type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Animated.ScrollView>>;
+interface AnimatedLegendListProps<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
+    refScrollView?: React__default.Ref<Animated.ScrollView>;
+}
+type OtherAnimatedLegendListProps<ItemT> = Pick<PropsBase<ItemT>, KeysToOmit>;
+declare const AnimatedLegendList: React__default.ForwardRefExoticComponent<Omit<Omit<AnimatedLegendListProps<unknown>, "refLegendList"> & OtherAnimatedLegendListProps<unknown>, "ref"> & React__default.RefAttributes<LegendListRef>>;
+
+export { AnimatedLegendList };

package/reanimated.d.ts

@@ -0,0 +1,13 @@
+import { LegendListRef, LegendListPropsBase } from '@legendapp/list';
+import React__default, { ComponentProps } from 'react';
+import Animated from 'react-native-reanimated';
+
+type KeysToOmit = "getEstimatedItemSize" | "keyExtractor" | "animatedProps" | "renderItem";
+type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Animated.ScrollView>>;
+interface AnimatedLegendListProps<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
+    refScrollView?: React__default.Ref<Animated.ScrollView>;
+}
+type OtherAnimatedLegendListProps<ItemT> = Pick<PropsBase<ItemT>, KeysToOmit>;
+declare const AnimatedLegendList: React__default.ForwardRefExoticComponent<Omit<Omit<AnimatedLegendListProps<unknown>, "refLegendList"> & OtherAnimatedLegendListProps<unknown>, "ref"> & React__default.RefAttributes<LegendListRef>>;
+
+export { AnimatedLegendList };

package/reanimated.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var list = require('@legendapp/list');
+var React = require('react');
+var Animated = require('react-native-reanimated');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+
+// src/reanimated.tsx
+var LegendListForwardedRef = React__default.default.forwardRef(function LegendListForwardedRef2(props, ref) {
+  const { refLegendList, ...rest } = props;
+  return /* @__PURE__ */ React__default.default.createElement(
+    list.LegendList,
+    {
+      refScrollView: ref,
+      ref: (r) => {
+        refLegendList(r);
+      },
+      ...rest
+    }
+  );
+});
+var AnimatedLegendListComponent = Animated__default.default.createAnimatedComponent(LegendListForwardedRef);
+var AnimatedLegendList = React__default.default.forwardRef(function AnimatedLegendList2(props, ref) {
+  const { refScrollView, ...rest } = props;
+  return /* @__PURE__ */ React__default.default.createElement(
+    AnimatedLegendListComponent,
+    {
+      refLegendList: (r) => {
+        if (ref) {
+          if (typeof ref === "function") {
+            ref(r);
+          } else {
+            ref.current = r;
+          }
+        }
+      },
+      ref: refScrollView,
+      ...rest
+    }
+  );
+});
+
+exports.AnimatedLegendList = AnimatedLegendList;

package/reanimated.mjs

@@ -0,0 +1,40 @@
+import { LegendList } from '@legendapp/list';
+import React from 'react';
+import Animated from 'react-native-reanimated';
+
+// src/reanimated.tsx
+var LegendListForwardedRef = React.forwardRef(function LegendListForwardedRef2(props, ref) {
+  const { refLegendList, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(
+    LegendList,
+    {
+      refScrollView: ref,
+      ref: (r) => {
+        refLegendList(r);
+      },
+      ...rest
+    }
+  );
+});
+var AnimatedLegendListComponent = Animated.createAnimatedComponent(LegendListForwardedRef);
+var AnimatedLegendList = React.forwardRef(function AnimatedLegendList2(props, ref) {
+  const { refScrollView, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(
+    AnimatedLegendListComponent,
+    {
+      refLegendList: (r) => {
+        if (ref) {
+          if (typeof ref === "function") {
+            ref(r);
+          } else {
+            ref.current = r;
+          }
+        }
+      },
+      ref: refScrollView,
+      ...rest
+    }
+  );
+});
+
+export { AnimatedLegendList };