@legendapp/list 2.0.6 → 2.0.8

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.0.8
+- Fix: Data changing sometimes left blank spaces because it was ignoring scroll
+- Fix: Toggling between empty and non-empty causing maintainVisibleContentPosition issues
+
+## 2.0.7
+- Fix: Layout not working on react-native-macos because of transform instead of position
+
 ## 2.0.6
 - Fix: updateItemPositions edge case with items multiple screen heights long was breaking the loop too early
 

package/index.d.mts

@@ -331,6 +331,7 @@ interface InternalState {
     minIndexSizeChanged: number | undefined;
     queuedInitialLayout?: boolean | undefined;
     queuedCalculateItemsInView: number | undefined;
+    dataChangeNeedsScrollUpdate: boolean;
     lastBatchingAction: number;
     ignoreScrollFromMVCP?: {
         lt?: number;

package/index.d.ts

@@ -331,6 +331,7 @@ interface InternalState {
     minIndexSizeChanged: number | undefined;
     queuedInitialLayout?: boolean | undefined;
     queuedCalculateItemsInView: number | undefined;
+    dataChangeNeedsScrollUpdate: boolean;
     lastBatchingAction: number;
     ignoreScrollFromMVCP?: {
         lt?: number;

package/index.js

@@ -266,17 +266,13 @@ var PositionViewAnimated = typedMemo(function PositionView2({
   const position$ = useValue$(`containerPosition${id}`, {
     getValue: (v) => v != null ? v : POSITION_OUT_OF_VIEW
   });
-  return /* @__PURE__ */ React2__namespace.createElement(
-    reactNative.Animated.View,
-    {
-      ref: refView,
-      style: [
-        style,
-        horizontal ? { transform: [{ translateX: position$ }] } : { transform: [{ translateY: position$ }] }
-      ],
-      ...rest
-    }
-  );
+  let position;
+  if (reactNative.Platform.OS === "ios" || reactNative.Platform.OS === "android") {
+    position = horizontal ? { transform: [{ translateX: position$ }] } : { transform: [{ translateY: position$ }] };
+  } else {
+    position = horizontal ? { left: position$ } : { top: position$ };
+  }
+  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { ref: refView, style: [style, position], ...rest });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
   id,
@@ -824,7 +820,7 @@ var ListComponent = typedMemo(function ListComponent2({
       ],
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       horizontal,
-      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
       onLayout,
       onScroll: onScroll2,
       ref: refScrollView,
@@ -835,7 +831,7 @@ var ListComponent = typedMemo(function ListComponent2({
     ENABLE_DEVMODE ? /* @__PURE__ */ React2__namespace.createElement(PaddingDevMode, null) : /* @__PURE__ */ React2__namespace.createElement(Padding, null),
     ListHeaderComponent && /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { onLayout: onLayoutHeaderSync, ref: refHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
     ListEmptyComponent && getComponent(ListEmptyComponent),
-    canRender && /* @__PURE__ */ React2__namespace.createElement(
+    canRender && !ListEmptyComponent && /* @__PURE__ */ React2__namespace.createElement(
       Containers,
       {
         getRenderedItem: getRenderedItem2,
@@ -1869,7 +1865,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     const scrollTopBuffered = scroll - scrollBufferTop;
     const scrollBottom = scroll + scrollLength + (scroll < 0 ? -scroll : 0);
     const scrollBottomBuffered = scrollBottom + scrollBufferBottom;
-    if (scrollForNextCalculateItemsInView) {
+    if (!dataChanged && scrollForNextCalculateItemsInView) {
       const { top, bottom } = scrollForNextCalculateItemsInView;
       if (scrollTopBuffered > top && scrollBottomBuffered < bottom) {
         return;
@@ -1892,7 +1888,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    let loopStart = startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    let loopStart = !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
     for (let i = loopStart; i >= 0; i--) {
       const id = (_b = idCache.get(i)) != null ? _b : getId(state, i);
       const top = positions.get(id);
@@ -2371,10 +2367,11 @@ function updateScroll(ctx, state, newScroll) {
   state.scrollPrevTime = state.scrollTime;
   state.scroll = newScroll;
   state.scrollTime = currentTime;
-  if (Math.abs(state.scroll - state.scrollPrev) > 2) {
+  if (state.dataChangeNeedsScrollUpdate || Math.abs(state.scroll - state.scrollPrev) > 2) {
     calculateItemsInView(ctx, state);
     checkAtBottom(ctx, state);
     checkAtTop(state);
+    state.dataChangeNeedsScrollUpdate = false;
   }
 }
 
@@ -2695,6 +2692,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       columns: /* @__PURE__ */ new Map(),
       containerItemKeys: /* @__PURE__ */ new Set(),
       containerItemTypes: /* @__PURE__ */ new Map(),
+      dataChangeNeedsScrollUpdate: false,
       enableScrollForNextCalculateItemsInView: true,
       endBuffered: -1,
       endNoBuffer: -1,
@@ -2745,6 +2743,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const state = refState.current;
   const isFirst = !state.props.renderItem;
   const didDataChange = state.props.data !== dataProp;
+  if (didDataChange) {
+    state.dataChangeNeedsScrollUpdate = true;
+  }
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? useThrottledOnScroll(onScrollProp, scrollEventThrottle) : onScrollProp;
   state.props = {
     alignItemsAtEnd,

package/index.mjs

@@ -245,17 +245,13 @@ var PositionViewAnimated = typedMemo(function PositionView2({
   const position$ = useValue$(`containerPosition${id}`, {
     getValue: (v) => v != null ? v : POSITION_OUT_OF_VIEW
   });
-  return /* @__PURE__ */ React2.createElement(
-    Animated.View,
-    {
-      ref: refView,
-      style: [
-        style,
-        horizontal ? { transform: [{ translateX: position$ }] } : { transform: [{ translateY: position$ }] }
-      ],
-      ...rest
-    }
-  );
+  let position;
+  if (Platform.OS === "ios" || Platform.OS === "android") {
+    position = horizontal ? { transform: [{ translateX: position$ }] } : { transform: [{ translateY: position$ }] };
+  } else {
+    position = horizontal ? { left: position$ } : { top: position$ };
+  }
+  return /* @__PURE__ */ React2.createElement(Animated.View, { ref: refView, style: [style, position], ...rest });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
   id,
@@ -803,7 +799,7 @@ var ListComponent = typedMemo(function ListComponent2({
       ],
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       horizontal,
-      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
       onLayout,
       onScroll: onScroll2,
       ref: refScrollView,
@@ -814,7 +810,7 @@ var ListComponent = typedMemo(function ListComponent2({
     ENABLE_DEVMODE ? /* @__PURE__ */ React2.createElement(PaddingDevMode, null) : /* @__PURE__ */ React2.createElement(Padding, null),
     ListHeaderComponent && /* @__PURE__ */ React2.createElement(View, { onLayout: onLayoutHeaderSync, ref: refHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
     ListEmptyComponent && getComponent(ListEmptyComponent),
-    canRender && /* @__PURE__ */ React2.createElement(
+    canRender && !ListEmptyComponent && /* @__PURE__ */ React2.createElement(
       Containers,
       {
         getRenderedItem: getRenderedItem2,
@@ -1848,7 +1844,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     const scrollTopBuffered = scroll - scrollBufferTop;
     const scrollBottom = scroll + scrollLength + (scroll < 0 ? -scroll : 0);
     const scrollBottomBuffered = scrollBottom + scrollBufferBottom;
-    if (scrollForNextCalculateItemsInView) {
+    if (!dataChanged && scrollForNextCalculateItemsInView) {
       const { top, bottom } = scrollForNextCalculateItemsInView;
       if (scrollTopBuffered > top && scrollBottomBuffered < bottom) {
         return;
@@ -1871,7 +1867,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    let loopStart = startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    let loopStart = !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
     for (let i = loopStart; i >= 0; i--) {
       const id = (_b = idCache.get(i)) != null ? _b : getId(state, i);
       const top = positions.get(id);
@@ -2350,10 +2346,11 @@ function updateScroll(ctx, state, newScroll) {
   state.scrollPrevTime = state.scrollTime;
   state.scroll = newScroll;
   state.scrollTime = currentTime;
-  if (Math.abs(state.scroll - state.scrollPrev) > 2) {
+  if (state.dataChangeNeedsScrollUpdate || Math.abs(state.scroll - state.scrollPrev) > 2) {
     calculateItemsInView(ctx, state);
     checkAtBottom(ctx, state);
     checkAtTop(state);
+    state.dataChangeNeedsScrollUpdate = false;
   }
 }
 
@@ -2674,6 +2671,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       columns: /* @__PURE__ */ new Map(),
       containerItemKeys: /* @__PURE__ */ new Set(),
       containerItemTypes: /* @__PURE__ */ new Map(),
+      dataChangeNeedsScrollUpdate: false,
       enableScrollForNextCalculateItemsInView: true,
       endBuffered: -1,
       endNoBuffer: -1,
@@ -2724,6 +2722,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const state = refState.current;
   const isFirst = !state.props.renderItem;
   const didDataChange = state.props.data !== dataProp;
+  if (didDataChange) {
+    state.dataChangeNeedsScrollUpdate = true;
+  }
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? useThrottledOnScroll(onScrollProp, scrollEventThrottle) : onScrollProp;
   state.props = {
     alignItemsAtEnd,

package/package.json

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