@legendapp/list 1.0.0-beta.17 → 1.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/index.d.mts +1 -0
  2. package/index.d.ts +1 -0
  3. package/index.js +84 -46
  4. package/index.mjs +84 -46
  5. package/package.json +1 -1
package/index.d.mts CHANGED
@@ -127,6 +127,7 @@ interface InternalState {
127
127
  }>;
128
128
  scrollTimer: Timer | undefined;
129
129
  startReachedBlockedByTimer: boolean;
130
+ endReachedBlockedByTimer: boolean;
130
131
  scrollForNextCalculateItemsInView: {
131
132
  top: number;
132
133
  bottom: number;
package/index.d.ts CHANGED
@@ -127,6 +127,7 @@ interface InternalState {
127
127
  }>;
128
128
  scrollTimer: Timer | undefined;
129
129
  startReachedBlockedByTimer: boolean;
130
+ endReachedBlockedByTimer: boolean;
130
131
  scrollForNextCalculateItemsInView: {
131
132
  top: number;
132
133
  bottom: number;
package/index.js CHANGED
@@ -78,6 +78,14 @@ function set$(ctx, signalName, value) {
78
78
  }
79
79
  }
80
80
  }
81
+ function getContentSize(ctx) {
82
+ const { values } = ctx;
83
+ const stylePaddingTop = values.get("stylePaddingTop") || 0;
84
+ const headerSize = values.get("headerSize") || 0;
85
+ const footerSize = values.get("footerSize") || 0;
86
+ const totalSize = values.get("totalSize") || 0;
87
+ return headerSize + footerSize + totalSize + stylePaddingTop;
88
+ }
81
89
  var symbolFirst = Symbol();
82
90
  function useInit(cb) {
83
91
  const refValue = React6.useRef(symbolFirst);
@@ -164,7 +172,9 @@ function useRecyclingState(valueOrFun) {
164
172
  return stateInfo;
165
173
  }
166
174
  var DebugView = React6.memo(function DebugView2({ state }) {
167
- const paddingTop = use$("paddingTop");
175
+ const ctx = useStateContext();
176
+ const totalSize = use$("totalSize");
177
+ const contentSize = getContentSize(ctx);
168
178
  const [, forceUpdate] = React6.useReducer((x) => x + 1, 0);
169
179
  useInterval(() => {
170
180
  forceUpdate();
@@ -182,7 +192,8 @@ var DebugView = React6.memo(function DebugView2({ state }) {
182
192
  backgroundColor: "#FFFFFFCC"
183
193
  }
184
194
  },
185
- /* @__PURE__ */ React6__namespace.createElement(reactNative.Text, null, "PaddingTop: ", paddingTop),
195
+ /* @__PURE__ */ React6__namespace.createElement(reactNative.Text, null, "TotalSize: ", totalSize),
196
+ /* @__PURE__ */ React6__namespace.createElement(reactNative.Text, null, "ContentSize: ", contentSize),
186
197
  /* @__PURE__ */ React6__namespace.createElement(reactNative.Text, null, "At end: ", String(state.isAtBottom))
187
198
  );
188
199
  });
@@ -348,7 +359,7 @@ var Containers = typedMemo(function Containers2({
348
359
  }) {
349
360
  const numContainers = use$("numContainersPooled");
350
361
  const animSize = useValue$(
351
- "totalSize",
362
+ "totalSizeWithScrollAdjust",
352
363
  void 0,
353
364
  /*useMicrotask*/
354
365
  true
@@ -487,15 +498,12 @@ var ListComponent = typedMemo(function ListComponent2({
487
498
  },
488
499
  ENABLE_DEVMODE ? /* @__PURE__ */ React6__namespace.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6__namespace.createElement(PaddingAndAdjust, null),
489
500
  ListHeaderComponent && /* @__PURE__ */ React6__namespace.createElement(
490
- reactNative.Animated.View,
501
+ reactNative.View,
491
502
  {
492
503
  style: ListHeaderComponentStyle,
493
504
  onLayout: (event) => {
494
505
  const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
495
- const prevSize = peek$(ctx, "headerSize") || 0;
496
- if (size !== prevSize) {
497
- set$(ctx, "headerSize", size);
498
- }
506
+ set$(ctx, "headerSize", size);
499
507
  }
500
508
  },
501
509
  getComponent(ListHeaderComponent)
@@ -512,7 +520,17 @@ var ListComponent = typedMemo(function ListComponent2({
512
520
  updateItemSize
513
521
  }
514
522
  ),
515
- ListFooterComponent && /* @__PURE__ */ React6__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
523
+ ListFooterComponent && /* @__PURE__ */ React6__namespace.createElement(
524
+ reactNative.View,
525
+ {
526
+ style: ListFooterComponentStyle,
527
+ onLayout: (event) => {
528
+ const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
529
+ set$(ctx, "footerSize", size);
530
+ }
531
+ },
532
+ getComponent(ListFooterComponent)
533
+ )
516
534
  );
517
535
  });
518
536
 
@@ -855,6 +873,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
855
873
  belowAnchorElementPositions: void 0,
856
874
  rowHeights: /* @__PURE__ */ new Map(),
857
875
  startReachedBlockedByTimer: false,
876
+ endReachedBlockedByTimer: false,
858
877
  scrollForNextCalculateItemsInView: void 0,
859
878
  enableScrollForNextCalculateItemsInView: true,
860
879
  minIndexSizeChanged: 0,
@@ -922,7 +941,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
922
941
  });
923
942
  }
924
943
  }
925
- set$(ctx, "totalSize", resultSize);
944
+ set$(ctx, "totalSize", state.totalSize);
945
+ set$(ctx, "totalSizeWithScrollAdjust", resultSize);
926
946
  if (alignItemsAtEnd) {
927
947
  doUpdatePaddingTop();
928
948
  }
@@ -1242,9 +1262,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1242
1262
  }, []);
1243
1263
  const doUpdatePaddingTop = () => {
1244
1264
  if (alignItemsAtEnd) {
1245
- const { scrollLength, totalSize } = refState.current;
1246
- const listPaddingTop = peek$(ctx, "stylePaddingTop") || 0;
1247
- const paddingTop = Math.max(0, Math.floor(scrollLength - totalSize - listPaddingTop));
1265
+ const { scrollLength } = refState.current;
1266
+ const contentSize = getContentSize(ctx);
1267
+ const paddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
1248
1268
  set$(ctx, "paddingTop", paddingTop);
1249
1269
  }
1250
1270
  };
@@ -1264,29 +1284,48 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1264
1284
  return true;
1265
1285
  }
1266
1286
  };
1287
+ const checkThreshold = (distance, threshold, isReached, isBlockedByTimer, onReached, blockTimer) => {
1288
+ const distanceAbs = Math.abs(distance);
1289
+ const isAtThreshold = distanceAbs < threshold;
1290
+ if (!isReached && !isBlockedByTimer) {
1291
+ if (isAtThreshold) {
1292
+ onReached == null ? void 0 : onReached(distance);
1293
+ blockTimer == null ? void 0 : blockTimer(true);
1294
+ setTimeout(() => {
1295
+ blockTimer == null ? void 0 : blockTimer(false);
1296
+ }, 700);
1297
+ return true;
1298
+ }
1299
+ } else {
1300
+ if (distance >= 1.3 * threshold) {
1301
+ return false;
1302
+ }
1303
+ }
1304
+ return isReached;
1305
+ };
1267
1306
  const checkAtBottom = () => {
1268
1307
  if (!refState.current) {
1269
1308
  return;
1270
1309
  }
1271
- const { scrollLength, scroll, totalSize, hasScrolled } = refState.current;
1272
- if (totalSize > 0 && hasScrolled) {
1273
- const distanceFromEnd = Math.abs(
1274
- totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0)
1275
- );
1276
- if (refState.current) {
1277
- refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
1278
- }
1279
- if (!refState.current.isEndReached) {
1280
- if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
1281
- refState.current.isEndReached = true;
1282
- const { onEndReached } = callbacks.current;
1283
- onEndReached == null ? void 0 : onEndReached({ distanceFromEnd });
1284
- }
1285
- } else {
1286
- if (distanceFromEnd >= onEndReachedThreshold * scrollLength) {
1287
- refState.current.isEndReached = false;
1310
+ const { scrollLength, scroll, hasScrolled } = refState.current;
1311
+ const contentSize = getContentSize(ctx);
1312
+ if (contentSize > 0 && hasScrolled) {
1313
+ const distanceFromEnd = contentSize - scroll - scrollLength;
1314
+ const distanceFromEndAbs = Math.abs(distanceFromEnd);
1315
+ refState.current.isAtBottom = distanceFromEndAbs < scrollLength * maintainScrollAtEndThreshold;
1316
+ refState.current.isEndReached = checkThreshold(
1317
+ distanceFromEnd,
1318
+ onEndReachedThreshold * scrollLength,
1319
+ refState.current.isEndReached,
1320
+ refState.current.endReachedBlockedByTimer,
1321
+ (distance) => {
1322
+ var _a2, _b2;
1323
+ return (_b2 = (_a2 = callbacks.current).onEndReached) == null ? void 0 : _b2.call(_a2, { distanceFromEnd: distance });
1324
+ },
1325
+ (block) => {
1326
+ refState.current.endReachedBlockedByTimer = block;
1288
1327
  }
1289
- }
1328
+ );
1290
1329
  }
1291
1330
  };
1292
1331
  const checkAtTop = () => {
@@ -1295,22 +1334,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1295
1334
  }
1296
1335
  const { scrollLength, scroll } = refState.current;
1297
1336
  const distanceFromTop = scroll;
1298
- refState.current.isAtTop = distanceFromTop < 0;
1299
- if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
1300
- if (distanceFromTop < onStartReachedThreshold * scrollLength) {
1301
- refState.current.isStartReached = true;
1302
- const { onStartReached } = callbacks.current;
1303
- onStartReached == null ? void 0 : onStartReached({ distanceFromStart: scroll });
1304
- refState.current.startReachedBlockedByTimer = true;
1305
- setTimeout(() => {
1306
- refState.current.startReachedBlockedByTimer = false;
1307
- }, 700);
1308
- }
1309
- } else {
1310
- if (distanceFromTop >= 1.3 * onStartReachedThreshold * scrollLength) {
1311
- refState.current.isStartReached = false;
1337
+ const distanceFromTopAbs = Math.abs(distanceFromTop);
1338
+ refState.current.isAtTop = distanceFromTopAbs < 0;
1339
+ refState.current.isStartReached = checkThreshold(
1340
+ distanceFromTop,
1341
+ onStartReachedThreshold * scrollLength,
1342
+ refState.current.isStartReached,
1343
+ refState.current.startReachedBlockedByTimer,
1344
+ (distance) => {
1345
+ var _a2, _b2;
1346
+ return (_b2 = (_a2 = callbacks.current).onStartReached) == null ? void 0 : _b2.call(_a2, { distanceFromStart: distance });
1347
+ },
1348
+ (block) => {
1349
+ refState.current.startReachedBlockedByTimer = block;
1312
1350
  }
1313
- }
1351
+ );
1314
1352
  };
1315
1353
  const checkResetContainers = (isFirst2) => {
1316
1354
  const state = refState.current;
package/index.mjs CHANGED
@@ -57,6 +57,14 @@ function set$(ctx, signalName, value) {
57
57
  }
58
58
  }
59
59
  }
60
+ function getContentSize(ctx) {
61
+ const { values } = ctx;
62
+ const stylePaddingTop = values.get("stylePaddingTop") || 0;
63
+ const headerSize = values.get("headerSize") || 0;
64
+ const footerSize = values.get("footerSize") || 0;
65
+ const totalSize = values.get("totalSize") || 0;
66
+ return headerSize + footerSize + totalSize + stylePaddingTop;
67
+ }
60
68
  var symbolFirst = Symbol();
61
69
  function useInit(cb) {
62
70
  const refValue = useRef(symbolFirst);
@@ -143,7 +151,9 @@ function useRecyclingState(valueOrFun) {
143
151
  return stateInfo;
144
152
  }
145
153
  var DebugView = memo(function DebugView2({ state }) {
146
- const paddingTop = use$("paddingTop");
154
+ const ctx = useStateContext();
155
+ const totalSize = use$("totalSize");
156
+ const contentSize = getContentSize(ctx);
147
157
  const [, forceUpdate] = useReducer((x) => x + 1, 0);
148
158
  useInterval(() => {
149
159
  forceUpdate();
@@ -161,7 +171,8 @@ var DebugView = memo(function DebugView2({ state }) {
161
171
  backgroundColor: "#FFFFFFCC"
162
172
  }
163
173
  },
164
- /* @__PURE__ */ React6.createElement(Text, null, "PaddingTop: ", paddingTop),
174
+ /* @__PURE__ */ React6.createElement(Text, null, "TotalSize: ", totalSize),
175
+ /* @__PURE__ */ React6.createElement(Text, null, "ContentSize: ", contentSize),
165
176
  /* @__PURE__ */ React6.createElement(Text, null, "At end: ", String(state.isAtBottom))
166
177
  );
167
178
  });
@@ -327,7 +338,7 @@ var Containers = typedMemo(function Containers2({
327
338
  }) {
328
339
  const numContainers = use$("numContainersPooled");
329
340
  const animSize = useValue$(
330
- "totalSize",
341
+ "totalSizeWithScrollAdjust",
331
342
  void 0,
332
343
  /*useMicrotask*/
333
344
  true
@@ -466,15 +477,12 @@ var ListComponent = typedMemo(function ListComponent2({
466
477
  },
467
478
  ENABLE_DEVMODE ? /* @__PURE__ */ React6.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6.createElement(PaddingAndAdjust, null),
468
479
  ListHeaderComponent && /* @__PURE__ */ React6.createElement(
469
- Animated.View,
480
+ View,
470
481
  {
471
482
  style: ListHeaderComponentStyle,
472
483
  onLayout: (event) => {
473
484
  const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
474
- const prevSize = peek$(ctx, "headerSize") || 0;
475
- if (size !== prevSize) {
476
- set$(ctx, "headerSize", size);
477
- }
485
+ set$(ctx, "headerSize", size);
478
486
  }
479
487
  },
480
488
  getComponent(ListHeaderComponent)
@@ -491,7 +499,17 @@ var ListComponent = typedMemo(function ListComponent2({
491
499
  updateItemSize
492
500
  }
493
501
  ),
494
- ListFooterComponent && /* @__PURE__ */ React6.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
502
+ ListFooterComponent && /* @__PURE__ */ React6.createElement(
503
+ View,
504
+ {
505
+ style: ListFooterComponentStyle,
506
+ onLayout: (event) => {
507
+ const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
508
+ set$(ctx, "footerSize", size);
509
+ }
510
+ },
511
+ getComponent(ListFooterComponent)
512
+ )
495
513
  );
496
514
  });
497
515
 
@@ -834,6 +852,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
834
852
  belowAnchorElementPositions: void 0,
835
853
  rowHeights: /* @__PURE__ */ new Map(),
836
854
  startReachedBlockedByTimer: false,
855
+ endReachedBlockedByTimer: false,
837
856
  scrollForNextCalculateItemsInView: void 0,
838
857
  enableScrollForNextCalculateItemsInView: true,
839
858
  minIndexSizeChanged: 0,
@@ -901,7 +920,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
901
920
  });
902
921
  }
903
922
  }
904
- set$(ctx, "totalSize", resultSize);
923
+ set$(ctx, "totalSize", state.totalSize);
924
+ set$(ctx, "totalSizeWithScrollAdjust", resultSize);
905
925
  if (alignItemsAtEnd) {
906
926
  doUpdatePaddingTop();
907
927
  }
@@ -1221,9 +1241,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1221
1241
  }, []);
1222
1242
  const doUpdatePaddingTop = () => {
1223
1243
  if (alignItemsAtEnd) {
1224
- const { scrollLength, totalSize } = refState.current;
1225
- const listPaddingTop = peek$(ctx, "stylePaddingTop") || 0;
1226
- const paddingTop = Math.max(0, Math.floor(scrollLength - totalSize - listPaddingTop));
1244
+ const { scrollLength } = refState.current;
1245
+ const contentSize = getContentSize(ctx);
1246
+ const paddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
1227
1247
  set$(ctx, "paddingTop", paddingTop);
1228
1248
  }
1229
1249
  };
@@ -1243,29 +1263,48 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1243
1263
  return true;
1244
1264
  }
1245
1265
  };
1266
+ const checkThreshold = (distance, threshold, isReached, isBlockedByTimer, onReached, blockTimer) => {
1267
+ const distanceAbs = Math.abs(distance);
1268
+ const isAtThreshold = distanceAbs < threshold;
1269
+ if (!isReached && !isBlockedByTimer) {
1270
+ if (isAtThreshold) {
1271
+ onReached == null ? void 0 : onReached(distance);
1272
+ blockTimer == null ? void 0 : blockTimer(true);
1273
+ setTimeout(() => {
1274
+ blockTimer == null ? void 0 : blockTimer(false);
1275
+ }, 700);
1276
+ return true;
1277
+ }
1278
+ } else {
1279
+ if (distance >= 1.3 * threshold) {
1280
+ return false;
1281
+ }
1282
+ }
1283
+ return isReached;
1284
+ };
1246
1285
  const checkAtBottom = () => {
1247
1286
  if (!refState.current) {
1248
1287
  return;
1249
1288
  }
1250
- const { scrollLength, scroll, totalSize, hasScrolled } = refState.current;
1251
- if (totalSize > 0 && hasScrolled) {
1252
- const distanceFromEnd = Math.abs(
1253
- totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0)
1254
- );
1255
- if (refState.current) {
1256
- refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
1257
- }
1258
- if (!refState.current.isEndReached) {
1259
- if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
1260
- refState.current.isEndReached = true;
1261
- const { onEndReached } = callbacks.current;
1262
- onEndReached == null ? void 0 : onEndReached({ distanceFromEnd });
1263
- }
1264
- } else {
1265
- if (distanceFromEnd >= onEndReachedThreshold * scrollLength) {
1266
- refState.current.isEndReached = false;
1289
+ const { scrollLength, scroll, hasScrolled } = refState.current;
1290
+ const contentSize = getContentSize(ctx);
1291
+ if (contentSize > 0 && hasScrolled) {
1292
+ const distanceFromEnd = contentSize - scroll - scrollLength;
1293
+ const distanceFromEndAbs = Math.abs(distanceFromEnd);
1294
+ refState.current.isAtBottom = distanceFromEndAbs < scrollLength * maintainScrollAtEndThreshold;
1295
+ refState.current.isEndReached = checkThreshold(
1296
+ distanceFromEnd,
1297
+ onEndReachedThreshold * scrollLength,
1298
+ refState.current.isEndReached,
1299
+ refState.current.endReachedBlockedByTimer,
1300
+ (distance) => {
1301
+ var _a2, _b2;
1302
+ return (_b2 = (_a2 = callbacks.current).onEndReached) == null ? void 0 : _b2.call(_a2, { distanceFromEnd: distance });
1303
+ },
1304
+ (block) => {
1305
+ refState.current.endReachedBlockedByTimer = block;
1267
1306
  }
1268
- }
1307
+ );
1269
1308
  }
1270
1309
  };
1271
1310
  const checkAtTop = () => {
@@ -1274,22 +1313,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1274
1313
  }
1275
1314
  const { scrollLength, scroll } = refState.current;
1276
1315
  const distanceFromTop = scroll;
1277
- refState.current.isAtTop = distanceFromTop < 0;
1278
- if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
1279
- if (distanceFromTop < onStartReachedThreshold * scrollLength) {
1280
- refState.current.isStartReached = true;
1281
- const { onStartReached } = callbacks.current;
1282
- onStartReached == null ? void 0 : onStartReached({ distanceFromStart: scroll });
1283
- refState.current.startReachedBlockedByTimer = true;
1284
- setTimeout(() => {
1285
- refState.current.startReachedBlockedByTimer = false;
1286
- }, 700);
1287
- }
1288
- } else {
1289
- if (distanceFromTop >= 1.3 * onStartReachedThreshold * scrollLength) {
1290
- refState.current.isStartReached = false;
1316
+ const distanceFromTopAbs = Math.abs(distanceFromTop);
1317
+ refState.current.isAtTop = distanceFromTopAbs < 0;
1318
+ refState.current.isStartReached = checkThreshold(
1319
+ distanceFromTop,
1320
+ onStartReachedThreshold * scrollLength,
1321
+ refState.current.isStartReached,
1322
+ refState.current.startReachedBlockedByTimer,
1323
+ (distance) => {
1324
+ var _a2, _b2;
1325
+ return (_b2 = (_a2 = callbacks.current).onStartReached) == null ? void 0 : _b2.call(_a2, { distanceFromStart: distance });
1326
+ },
1327
+ (block) => {
1328
+ refState.current.startReachedBlockedByTimer = block;
1291
1329
  }
1292
- }
1330
+ );
1293
1331
  };
1294
1332
  const checkResetContainers = (isFirst2) => {
1295
1333
  const state = refState.current;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@legendapp/list",
3
- "version": "1.0.0-beta.17",
3
+ "version": "1.0.0-beta.18",
4
4
  "description": "Legend List aims to be a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
5
5
  "sideEffects": false,
6
6
  "private": false,