@legendapp/list 0.3.0 → 0.3.1

package/index.js

@@ -67,6 +67,15 @@ function $View({ $key, $style, ...rest }) {
   const style = $style();
   return /* @__PURE__ */ React2__namespace.createElement(LeanView, { style, ...rest });
 }
+function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
+  const itemIndex = use$(`containerIndex${id}`);
+  const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
+  if (itemIndex < 0) {
+    return null;
+  }
+  const renderedItem = getRenderedItem(itemIndex);
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
+}
 var Container = ({
   id,
   recycleItems,
@@ -76,11 +85,6 @@ var Container = ({
   ItemSeparatorComponent
 }) => {
   const ctx = useStateContext();
-  const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
-  const itemIndex = use$(`containerIndex${id}`);
-  if (itemIndex < 0) {
-    return null;
-  }
   const createStyle = () => {
     const position = peek$(`containerPosition${id}`, ctx);
     return horizontal ? {
@@ -98,7 +102,6 @@ var Container = ({
       opacity: position < 0 ? 0 : 1
     };
   };
-  const renderedItem = getRenderedItem(itemIndex);
   return /* @__PURE__ */ React2__namespace.createElement(
     $View,
     {
@@ -106,12 +109,21 @@ var Container = ({
       $style: createStyle,
       onLayout: (event) => {
         const index = peek$(`containerIndex${id}`, ctx);
-        const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
-        onLayout(index, length);
+        if (index >= 0) {
+          const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
+          onLayout(index, length);
+        }
       }
     },
-    recycleItems ? renderedItem : /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, { key: itemIndex }, renderedItem),
-    ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent
+    /* @__PURE__ */ React2__namespace.createElement(
+      InnerContainer,
+      {
+        id,
+        getRenderedItem,
+        recycleItems,
+        ItemSeparatorComponent
+      }
+    )
   );
 };
 
@@ -189,6 +201,7 @@ var ListComponent = React2__namespace.memo(function ListComponent2({
   return /* @__PURE__ */ React2__namespace.createElement(
     reactNative.ScrollView,
     {
+      ...rest,
       style,
       contentContainerStyle: [
         contentContainerStyle,
@@ -201,7 +214,6 @@ var ListComponent = React2__namespace.memo(function ListComponent2({
       scrollEventThrottle: 32,
       horizontal,
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
-      ...rest,
       ref: refScroller
     },
     alignItemsAtEnd && /* @__PURE__ */ React2__namespace.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$("paddingTop", ctx) }) }),
@@ -242,6 +254,7 @@ var LegendListInner = React2.forwardRef(
       maintainScrollAtEnd = false,
       maintainScrollAtEndThreshold = 0.1,
       alignItemsAtEnd = false,
+      onScroll: onScrollProp,
       keyExtractor,
       renderItem,
       estimatedItemLength,
@@ -521,19 +534,30 @@ var LegendListInner = React2.forwardRef(
       const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
       refState.current.scrollLength = scrollLength;
     }, []);
-    const handleScroll = React2.useCallback((event) => {
-      refState.current.hasScrolled = true;
-      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
-      refState.current.scroll = newScroll;
-      if (refState.current && !refState.current.animFrame) {
-        refState.current.animFrame = requestAnimationFrame(handleScrollDebounced);
-      }
-    }, []);
+    const handleScroll = React2.useCallback(
+      (event, fromSelf) => {
+        refState.current.hasScrolled = true;
+        const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+        refState.current.scroll = newScroll;
+        if (refState.current && !refState.current.animFrame) {
+          refState.current.animFrame = requestAnimationFrame(handleScrollDebounced);
+        }
+        if (!fromSelf) {
+          onScrollProp == null ? void 0 : onScrollProp(event);
+        }
+      },
+      []
+    );
     React2.useEffect(() => {
       if (initialContentOffset) {
-        handleScroll({
-          nativeEvent: { contentOffset: { y: initialContentOffset } }
-        });
+        const offset = horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset };
+        handleScroll(
+          {
+            nativeEvent: { contentOffset: offset }
+          },
+          /*fromSelf*/
+          true
+        );
         calculateItemsInView();
       }
     }, []);

package/index.mjs

@@ -46,6 +46,15 @@ function $View({ $key, $style, ...rest }) {
   const style = $style();
   return /* @__PURE__ */ React2.createElement(LeanView, { style, ...rest });
 }
+function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
+  const itemIndex = use$(`containerIndex${id}`);
+  const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
+  if (itemIndex < 0) {
+    return null;
+  }
+  const renderedItem = getRenderedItem(itemIndex);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
+}
 var Container = ({
   id,
   recycleItems,
@@ -55,11 +64,6 @@ var Container = ({
   ItemSeparatorComponent
 }) => {
   const ctx = useStateContext();
-  const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
-  const itemIndex = use$(`containerIndex${id}`);
-  if (itemIndex < 0) {
-    return null;
-  }
   const createStyle = () => {
     const position = peek$(`containerPosition${id}`, ctx);
     return horizontal ? {
@@ -77,7 +81,6 @@ var Container = ({
       opacity: position < 0 ? 0 : 1
     };
   };
-  const renderedItem = getRenderedItem(itemIndex);
   return /* @__PURE__ */ React2.createElement(
     $View,
     {
@@ -85,12 +88,21 @@ var Container = ({
       $style: createStyle,
       onLayout: (event) => {
         const index = peek$(`containerIndex${id}`, ctx);
-        const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
-        onLayout(index, length);
+        if (index >= 0) {
+          const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
+          onLayout(index, length);
+        }
       }
     },
-    recycleItems ? renderedItem : /* @__PURE__ */ React2.createElement(React2.Fragment, { key: itemIndex }, renderedItem),
-    ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent
+    /* @__PURE__ */ React2.createElement(
+      InnerContainer,
+      {
+        id,
+        getRenderedItem,
+        recycleItems,
+        ItemSeparatorComponent
+      }
+    )
   );
 };
 
@@ -168,6 +180,7 @@ var ListComponent = React2.memo(function ListComponent2({
   return /* @__PURE__ */ React2.createElement(
     ScrollView,
     {
+      ...rest,
       style,
       contentContainerStyle: [
         contentContainerStyle,
@@ -180,7 +193,6 @@ var ListComponent = React2.memo(function ListComponent2({
       scrollEventThrottle: 32,
       horizontal,
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
-      ...rest,
       ref: refScroller
     },
     alignItemsAtEnd && /* @__PURE__ */ React2.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$("paddingTop", ctx) }) }),
@@ -221,6 +233,7 @@ var LegendListInner = forwardRef(
       maintainScrollAtEnd = false,
       maintainScrollAtEndThreshold = 0.1,
       alignItemsAtEnd = false,
+      onScroll: onScrollProp,
       keyExtractor,
       renderItem,
       estimatedItemLength,
@@ -500,19 +513,30 @@ var LegendListInner = forwardRef(
       const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
       refState.current.scrollLength = scrollLength;
     }, []);
-    const handleScroll = useCallback((event) => {
-      refState.current.hasScrolled = true;
-      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
-      refState.current.scroll = newScroll;
-      if (refState.current && !refState.current.animFrame) {
-        refState.current.animFrame = requestAnimationFrame(handleScrollDebounced);
-      }
-    }, []);
+    const handleScroll = useCallback(
+      (event, fromSelf) => {
+        refState.current.hasScrolled = true;
+        const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+        refState.current.scroll = newScroll;
+        if (refState.current && !refState.current.animFrame) {
+          refState.current.animFrame = requestAnimationFrame(handleScrollDebounced);
+        }
+        if (!fromSelf) {
+          onScrollProp == null ? void 0 : onScrollProp(event);
+        }
+      },
+      []
+    );
     useEffect(() => {
       if (initialContentOffset) {
-        handleScroll({
-          nativeEvent: { contentOffset: { y: initialContentOffset } }
-        });
+        const offset = horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset };
+        handleScroll(
+          {
+            nativeEvent: { contentOffset: offset }
+          },
+          /*fromSelf*/
+          true
+        );
         calculateItemsInView();
       }
     }, []);

package/package.json

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