@legendapp/list 1.1.1 → 1.1.3

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.1.3
+- Fix: scrollToEnd was not always setting `viewPosition: 1` correctly
+
+## 1.1.2
+- Fix: Adding items in a list with item separators had a small layout jump as the previously last item re-rendered with a separator
+
 ## 1.1.1
 - Fix: scrollTo accuracy when paddingTop changes
 

package/index.js

@@ -376,17 +376,18 @@ var Container = ({
   const [layoutRenderCount, forceLayoutRender] = React2.useState(0);
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
+  const isALastItem = lastItemKeys.includes(itemKey);
   let paddingStyles;
   if (columnWrapperStyle) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     if (horizontal) {
       paddingStyles = {
-        paddingRight: !lastItemKeys.includes(itemKey) ? columnGap || gap || void 0 : void 0,
+        paddingRight: !isALastItem ? columnGap || gap || void 0 : void 0,
         paddingVertical: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
       };
     } else {
       paddingStyles = {
-        paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
+        paddingBottom: !isALastItem ? rowGap || gap || void 0 : void 0,
         paddingHorizontal: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
       };
     }
@@ -445,7 +446,7 @@ var Container = ({
           }
         }
       }
-    }, [itemKey, layoutRenderCount]);
+    }, [itemKey, layoutRenderCount, isALastItem]);
   } else {
     React2.useEffect(() => {
       if (!isNullOrUndefined(itemKey)) {
@@ -464,7 +465,7 @@ var Container = ({
     ctx.viewRefs.set(id, ref);
     return { containerId: id, itemKey, index, value: data, triggerLayout };
   }, [id, itemKey, index, data]);
-  const contentFragment = /* @__PURE__ */ React2__namespace.default.createElement(React2__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React2__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React2__namespace.default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
+  const contentFragment = /* @__PURE__ */ React2__namespace.default.createElement(React2__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React2__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !isALastItem && /* @__PURE__ */ React2__namespace.default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
     const anchorStyle = horizontal ? position.type === "top" ? { position: "absolute", left: 0, top: 0, bottom: 0, flexDirection: "row", alignItems: "stretch" } : { position: "absolute", right: 0, top: 0, bottom: 0, flexDirection: "row", alignItems: "stretch" } : position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
     if (__DEV__ && ENABLE_DEVMODE) {
@@ -1226,7 +1227,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     index,
     viewOffset = 0,
     animated = true,
-    viewPosition = 0
+    viewPosition
   }) => {
     var _a;
     const state = refState.current;
@@ -1255,7 +1256,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.minIndexSizeChanged = index;
       firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
     }
-    scrollTo({ offset: firstIndexScrollPostion, animated, index, viewPosition, viewOffset });
+    scrollTo({ offset: firstIndexScrollPostion, animated, index, viewPosition: viewPosition != null ? viewPosition : 0, viewOffset });
   };
   const setDidLayout = () => {
     refState.current.queuedInitialLayout = true;
@@ -2511,7 +2512,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           if (index !== -1) {
             const paddingBottom = stylePaddingBottom || 0;
             const footerSize = peek$(ctx, "footerSize") || 0;
-            scrollToIndex({ index, viewOffset: -paddingBottom - footerSize, ...options });
+            scrollToIndex({ index, viewPosition: 1, viewOffset: -paddingBottom - footerSize, ...options });
           }
         }
       };
@@ -2592,7 +2593,6 @@ var LazyLegendList = typedForwardRef2(function LazyLegendList2(props, forwardedR
   const { LegendList: LegendListProp, children, ...rest } = props;
   const LegendListComponent = LegendListProp != null ? LegendListProp : list.LegendList;
   const data = (isArray(children) ? children : React2__namespace.Children.toArray(children)).flat(1);
-  console.log({ data });
   return (
     // @ts-expect-error TODO: Fix this type
     /* @__PURE__ */ React2__namespace.createElement(LegendListComponent, { ...rest, data, renderItem, ref: forwardedRef })

package/index.mjs

@@ -355,17 +355,18 @@ var Container = ({
   const [layoutRenderCount, forceLayoutRender] = useState(0);
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
+  const isALastItem = lastItemKeys.includes(itemKey);
   let paddingStyles;
   if (columnWrapperStyle) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     if (horizontal) {
       paddingStyles = {
-        paddingRight: !lastItemKeys.includes(itemKey) ? columnGap || gap || void 0 : void 0,
+        paddingRight: !isALastItem ? columnGap || gap || void 0 : void 0,
         paddingVertical: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
       };
     } else {
       paddingStyles = {
-        paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
+        paddingBottom: !isALastItem ? rowGap || gap || void 0 : void 0,
         paddingHorizontal: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
       };
     }
@@ -424,7 +425,7 @@ var Container = ({
           }
         }
       }
-    }, [itemKey, layoutRenderCount]);
+    }, [itemKey, layoutRenderCount, isALastItem]);
   } else {
     useEffect(() => {
       if (!isNullOrUndefined(itemKey)) {
@@ -443,7 +444,7 @@ var Container = ({
     ctx.viewRefs.set(id, ref);
     return { containerId: id, itemKey, index, value: data, triggerLayout };
   }, [id, itemKey, index, data]);
-  const contentFragment = /* @__PURE__ */ React2__default.createElement(React2__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React2__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React2__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
+  const contentFragment = /* @__PURE__ */ React2__default.createElement(React2__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React2__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !isALastItem && /* @__PURE__ */ React2__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
     const anchorStyle = horizontal ? position.type === "top" ? { position: "absolute", left: 0, top: 0, bottom: 0, flexDirection: "row", alignItems: "stretch" } : { position: "absolute", right: 0, top: 0, bottom: 0, flexDirection: "row", alignItems: "stretch" } : position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
     if (__DEV__ && ENABLE_DEVMODE) {
@@ -1205,7 +1206,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     index,
     viewOffset = 0,
     animated = true,
-    viewPosition = 0
+    viewPosition
   }) => {
     var _a;
     const state = refState.current;
@@ -1234,7 +1235,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.minIndexSizeChanged = index;
       firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
     }
-    scrollTo({ offset: firstIndexScrollPostion, animated, index, viewPosition, viewOffset });
+    scrollTo({ offset: firstIndexScrollPostion, animated, index, viewPosition: viewPosition != null ? viewPosition : 0, viewOffset });
   };
   const setDidLayout = () => {
     refState.current.queuedInitialLayout = true;
@@ -2490,7 +2491,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           if (index !== -1) {
             const paddingBottom = stylePaddingBottom || 0;
             const footerSize = peek$(ctx, "footerSize") || 0;
-            scrollToIndex({ index, viewOffset: -paddingBottom - footerSize, ...options });
+            scrollToIndex({ index, viewPosition: 1, viewOffset: -paddingBottom - footerSize, ...options });
           }
         }
       };
@@ -2571,7 +2572,6 @@ var LazyLegendList = typedForwardRef2(function LazyLegendList2(props, forwardedR
   const { LegendList: LegendListProp, children, ...rest } = props;
   const LegendListComponent = LegendListProp != null ? LegendListProp : LegendList$1;
   const data = (isArray(children) ? children : React2.Children.toArray(children)).flat(1);
-  console.log({ data });
   return (
     // @ts-expect-error TODO: Fix this type
     /* @__PURE__ */ React2.createElement(LegendListComponent, { ...rest, data, renderItem, ref: forwardedRef })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,