@infinite-list/data-model - npm Package Compare versions

Comparing version 0.2.31-stillness.1 to 0.2.31-stillness.2

dist/ListDimensions.d.ts

@@ -112,13 +112,2 @@ import Batchinator from '@x-oasis/batchinator';
     getPosition(rowIndex: number, startIndex: number, endIndex: number): number;
-    getRecycleReuseOffsetBuilder(props: {
-        minIndex: number;
-        topStartOffset: number;
-        topStartIndex: number;
-        bottomStartOffset: number;
-        bottomStartIndex: number;
-    }): (info: {
-        currentIndex: number;
-        length: number;
-        velocity: number;
-    }) => number;
     resolveSafeRange(props: {
@@ -125,0 +114,0 @@ visibleStartIndex: number;

package.json

 {
   "name": "@infinite-list/data-model",
-  "version": "0.2.31-stillness.1",
+  "version": "0.2.31-stillness.2",
   "files": [
@@ -5,0 +5,0 @@ "dist",

src/ListDimensions.ts

@@ -918,8 +918,11 @@ import noop from '@x-oasis/noop';
 
+      let maxIndex = 0;
+
       for (let index = 0; index < _stateResult.recycleState.length; index++) {
         // @ts-ignore
-        const { itemMeta } = _stateResult.recycleState[index];
+        const { itemMeta, targetIndex } = _stateResult.recycleState[index];
         if (!itemMeta || (itemMeta && itemMeta.getState().viewable)) {
           newRecycleState.push(_stateResult.recycleState[index]);
           oldRecycleState.push(_oldStateResult.recycleState[index]);
+          maxIndex = Math.max(targetIndex, index);
         } else {
@@ -931,10 +934,31 @@ newRecycleState.push(null);
 
-      shouldStateUpdate = !(
-        shallowArrayEqual(newRecycleState, oldRecycleState, shallowEqual) &&
-        shallowArrayEqual(
-          _stateResult.spaceState,
-          _oldStateResult.spaceState,
-          shallowEqual
-        )
-      );
+      let exists = true;
+
+      // To fix onEndReached condition, data is updated.
+      if (isClamped(0, maxIndex + 1, this._data.length - 1)) {
+        exists =
+          _oldStateResult.recycleState.findIndex(
+            (s) => s?.targetIndex === maxIndex + 1
+          ) !== -1;
+      }
+
+      // if (this.id === 'component-list-all') {
+      //   console.log(
+      //     'applyStateResult ',
+      //     minIndex,
+      //     maxIndex,
+      //     this._data.length,
+      //     exists
+      //   );
+      // }
+
+      shouldStateUpdate =
+        !(
+          shallowArrayEqual(newRecycleState, oldRecycleState, shallowEqual) &&
+          shallowArrayEqual(
+            _stateResult.spaceState,
+            _oldStateResult.spaceState,
+            shallowEqual
+          )
+        ) || !exists;
     }
@@ -1044,64 +1068,64 @@
 
-  getRecycleReuseOffsetBuilder(props: {
-    minIndex: number;
-    topStartOffset: number;
-    topStartIndex: number;
-    bottomStartOffset: number;
-    bottomStartIndex: number;
-  }) {
-    const {
-      minIndex,
-      topStartOffset: _topStartOffset,
-      topStartIndex: _topStartIndex,
-      bottomStartOffset: _bottomStartOffset,
-      bottomStartIndex: _bottomStartIndex,
-    } = props;
+  // getRecycleReuseOffsetBuilder(props: {
+  //   minIndex: number;
+  //   topStartOffset: number;
+  //   topStartIndex: number;
+  //   bottomStartOffset: number;
+  //   bottomStartIndex: number;
+  // }) {
+  //   const {
+  //     minIndex,
+  //     topStartOffset: _topStartOffset,
+  //     topStartIndex: _topStartIndex,
+  //     bottomStartOffset: _bottomStartOffset,
+  //     bottomStartIndex: _bottomStartIndex,
+  //   } = props;
 
-    let topStartIndex = _topStartIndex;
-    let topStartOffset = _topStartOffset;
-    let bottomStartIndex = _bottomStartIndex;
-    let bottomStartOffset = _bottomStartOffset;
+  //   let topStartIndex = _topStartIndex;
+  //   let topStartOffset = _topStartOffset;
+  //   let bottomStartIndex = _bottomStartIndex;
+  //   let bottomStartOffset = _bottomStartOffset;
 
-    const placeOnTop = (length: number) => {
-      let offset = 0;
-      if (topStartIndex < minIndex) {
-        offset = bottomStartOffset + length;
-        bottomStartIndex += 1;
-        bottomStartOffset = offset;
-      } else {
-        offset = topStartOffset - length;
-        if (offset >= 0) {
-          topStartIndex -= 1;
-          topStartOffset = offset;
-        }
-      }
-      return offset;
-    };
+  //   const placeOnTop = (length: number) => {
+  //     let offset = 0;
+  //     if (topStartIndex < minIndex) {
+  //       offset = bottomStartOffset + length;
+  //       bottomStartIndex += 1;
+  //       bottomStartOffset = offset;
+  //     } else {
+  //       offset = topStartOffset - length;
+  //       if (offset >= 0) {
+  //         topStartIndex -= 1;
+  //         topStartOffset = offset;
+  //       }
+  //     }
+  //     return offset;
+  //   };
 
-    const placeOnBottom = (length: number) => {
-      let offset = 0;
-      offset = bottomStartOffset + length;
-      bottomStartIndex += 1;
-      bottomStartOffset = offset;
-      return offset;
-    };
+  //   const placeOnBottom = (length: number) => {
+  //     let offset = 0;
+  //     offset = bottomStartOffset + length;
+  //     bottomStartIndex += 1;
+  //     bottomStartOffset = offset;
+  //     return offset;
+  //   };
 
-    return (info: {
-      currentIndex: number;
-      length: number;
-      velocity: number;
-    }) => {
-      const { velocity, currentIndex, length } = info;
-      // scroll up, preserve start
-      if (velocity < 0) {
-        return placeOnTop(length);
-      } else if (velocity > 0) {
-        return placeOnBottom(length);
-      }
-      if (currentIndex < _topStartIndex) {
-        return placeOnTop(length);
-      }
-      return placeOnBottom(length);
-    };
-  }
+  //   return (info: {
+  //     currentIndex: number;
+  //     length: number;
+  //     velocity: number;
+  //   }) => {
+  //     const { velocity, currentIndex, length } = info;
+  //     // scroll up, preserve start
+  //     if (velocity < 0) {
+  //       return placeOnTop(length);
+  //     } else if (velocity > 0) {
+  //       return placeOnBottom(length);
+  //     }
+  //     if (currentIndex < _topStartIndex) {
+  //       return placeOnTop(length);
+  //     }
+  //     return placeOnBottom(length);
+  //   };
+  // }
 
@@ -1170,6 +1194,7 @@ resolveSafeRange(props: {
       if (!item) continue;
-      const itemMeta = this.getItemMeta(item, index);
-      const itemLayout = itemMeta?.getLayout();
+      // const itemMeta = this.getItemMeta(item, index);
+      // const itemLayout = itemMeta?.getLayout();
 
-      if (count < maxCount || !itemLayout) {
+      // itemLayout should not be a condition, may cause too many unLayout item
+      if (count < maxCount) {
         const position = this.getPosition(
@@ -1199,2 +1224,3 @@ index,
     const velocity = this._scrollMetrics?.velocity || 0;
+    // const targetIndicesCopy = targetIndices.slice();
 
@@ -1277,2 +1303,6 @@ const visibleStartIndex = Math.max(
 
+    // if (this.id === 'component-list-all') {
+    //   console.log('targetIndices ', targetIndicesCopy, targetIndices.slice());
+    // }
+
     targetIndices.forEach((targetIndex, index) => {
@@ -1599,2 +1629,6 @@ // if (targetIndex == null) {
 
+    // if (this.id === 'component-list-all') {
+    //   console.log('dispatchStoreMetrics ', { ...state });
+    // }
+
     if (isEmpty(state)) return state;
@@ -1601,0 +1635,0 @@ this.updateState(state, scrollMetrics);

src/state/actions.ts

@@ -6,2 +6,8 @@ import ListDimensions from '../ListDimensions';
 
+// const resolvePseudoVelocity = (velocity: number) => {
+//   if (velocity > 0) return 1;
+//   if (velocity < 0) return -1;
+//   return 0;
+// };
+
 export const resolveAction = <State extends ReducerResult = ReducerResult>(
@@ -16,2 +22,3 @@ state: State,
   const { velocity } = scrollMetrics;
+  // const pseudoVelocity = resolvePseudoVelocity(velocity);
 
@@ -44,2 +51,3 @@ const _info = dimension.getOnEndReachedHelper().perform(scrollMetrics);
       payload: {
+        // pseudoVelocity,
         dimension,
@@ -61,2 +69,3 @@ scrollMetrics,
         distanceFromEnd,
+        // pseudoVelocity,
       },
@@ -70,2 +79,3 @@ };
       payload: {
+        // pseudoVelocity,
         dimension,
@@ -87,4 +97,5 @@ scrollMetrics,
       distanceFromEnd,
+      // pseudoVelocity,
     },
   };
 };

src/state/reducer.ts

@@ -62,2 +62,3 @@ import preCheck from './middleware/preCheck';
     distanceFromEnd,
+    // pseudoVelocity: payload.pseudoVelocity,
     actionType: 'hydrationWithBatchUpdate',
@@ -117,2 +118,3 @@ visibleStartIndex: visibleIndexRange.startIndex,
     distanceFromEnd,
+    // pseudoVelocity: payload.pseudoVelocity,
     actionType: 'recalculate',
@@ -175,2 +177,3 @@ visibleStartIndex: visibleIndexRange.startIndex,
     distanceFromEnd,
+    // pseudoVelocity: payload.pseudoVelocity,
     visibleStartIndex: visibleIndexRange.startIndex,
@@ -232,2 +235,3 @@ visibleEndIndex: Math.min(visibleIndexRange.endIndex, maxIndex),
     actionType: 'scrollUp',
+    // pseudoVelocity: payload.pseudoVelocity,
     visibleStartIndex: visibleIndexRange.startIndex,
@@ -234,0 +238,0 @@ visibleEndIndex: Math.min(visibleIndexRange.endIndex, maxIndex),

src/state/types.ts

@@ -20,2 +20,3 @@ import ListDimensions from '../ListDimensions';
   distanceFromEnd: number;
+  // pseudoVelocity: number;
 };
@@ -22,0 +23,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1772337

increased by0.1%

Worsened metrics

Lines of code

20899

decreased by-0.19%

No dependency changes