@legendapp/list 1.0.0-beta.30 → 1.0.0-beta.32
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.
- package/index.d.mts +3 -2
- package/index.d.ts +3 -2
- package/index.js +77 -73
- package/index.mjs +77 -73
- package/package.json +1 -1
package/index.d.mts
CHANGED
|
@@ -226,7 +226,7 @@ interface InternalState {
|
|
|
226
226
|
positions: Map<string, number>;
|
|
227
227
|
columns: Map<string, number>;
|
|
228
228
|
sizes: Map<string, number>;
|
|
229
|
-
|
|
229
|
+
sizesKnown: Map<string, number> | undefined;
|
|
230
230
|
pendingAdjust: number;
|
|
231
231
|
isStartReached: boolean;
|
|
232
232
|
isEndReached: boolean;
|
|
@@ -268,10 +268,11 @@ interface InternalState {
|
|
|
268
268
|
enableScrollForNextCalculateItemsInView: boolean;
|
|
269
269
|
minIndexSizeChanged: number | undefined;
|
|
270
270
|
numPendingInitialLayout: number;
|
|
271
|
+
queuedInitialLayout?: boolean | undefined;
|
|
271
272
|
queuedCalculateItemsInView: number | undefined;
|
|
272
273
|
lastBatchingAction: number;
|
|
273
274
|
ignoreScrollFromCalcTotal?: boolean;
|
|
274
|
-
|
|
275
|
+
scrollingToOffset?: number | undefined;
|
|
275
276
|
onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
|
|
276
277
|
}
|
|
277
278
|
interface ViewableRange<T> {
|
package/index.d.ts
CHANGED
|
@@ -226,7 +226,7 @@ interface InternalState {
|
|
|
226
226
|
positions: Map<string, number>;
|
|
227
227
|
columns: Map<string, number>;
|
|
228
228
|
sizes: Map<string, number>;
|
|
229
|
-
|
|
229
|
+
sizesKnown: Map<string, number> | undefined;
|
|
230
230
|
pendingAdjust: number;
|
|
231
231
|
isStartReached: boolean;
|
|
232
232
|
isEndReached: boolean;
|
|
@@ -268,10 +268,11 @@ interface InternalState {
|
|
|
268
268
|
enableScrollForNextCalculateItemsInView: boolean;
|
|
269
269
|
minIndexSizeChanged: number | undefined;
|
|
270
270
|
numPendingInitialLayout: number;
|
|
271
|
+
queuedInitialLayout?: boolean | undefined;
|
|
271
272
|
queuedCalculateItemsInView: number | undefined;
|
|
272
273
|
lastBatchingAction: number;
|
|
273
274
|
ignoreScrollFromCalcTotal?: boolean;
|
|
274
|
-
|
|
275
|
+
scrollingToOffset?: number | undefined;
|
|
275
276
|
onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
|
|
276
277
|
}
|
|
277
278
|
interface ViewableRange<T> {
|
package/index.js
CHANGED
|
@@ -264,7 +264,7 @@ var Container = ({
|
|
|
264
264
|
if (columnWrapperStyle && !horizontal && numColumns > 1) {
|
|
265
265
|
const { columnGap, rowGap, gap } = columnWrapperStyle;
|
|
266
266
|
verticalPaddingStyles = {
|
|
267
|
-
paddingBottom: !lastItemKeys.
|
|
267
|
+
paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
|
|
268
268
|
paddingHorizontal: (columnGap || gap || 0) / 2
|
|
269
269
|
};
|
|
270
270
|
}
|
|
@@ -328,7 +328,7 @@ var Container = ({
|
|
|
328
328
|
() => ({ containerId: id, itemKey, index, value: data }),
|
|
329
329
|
[id, itemKey, index, data]
|
|
330
330
|
);
|
|
331
|
-
const contentFragment = /* @__PURE__ */ React6__namespace.default.createElement(React6__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.
|
|
331
|
+
const contentFragment = /* @__PURE__ */ React6__namespace.default.createElement(React6__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React6__namespace.default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
|
|
332
332
|
if (maintainVisibleContentPosition) {
|
|
333
333
|
const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
|
|
334
334
|
if (ENABLE_DEVMODE) {
|
|
@@ -857,8 +857,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
857
857
|
return size;
|
|
858
858
|
};
|
|
859
859
|
const calculateOffsetForIndex = (index = initialScrollIndex) => {
|
|
860
|
+
var _a2;
|
|
860
861
|
const data = dataProp;
|
|
861
|
-
if (index) {
|
|
862
|
+
if (index !== void 0) {
|
|
862
863
|
let offset = 0;
|
|
863
864
|
const canGetSize = !!refState.current;
|
|
864
865
|
if (canGetSize || getEstimatedItemSize) {
|
|
@@ -874,7 +875,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
874
875
|
} else if (estimatedItemSize) {
|
|
875
876
|
offset = index * estimatedItemSize;
|
|
876
877
|
}
|
|
877
|
-
return offset / numColumnsProp;
|
|
878
|
+
return offset / numColumnsProp - (((_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.getAppliedAdjust()) || 0);
|
|
878
879
|
}
|
|
879
880
|
return 0;
|
|
880
881
|
};
|
|
@@ -910,7 +911,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
910
911
|
indexByKey: /* @__PURE__ */ new Map(),
|
|
911
912
|
scrollHistory: [],
|
|
912
913
|
scrollVelocity: 0,
|
|
913
|
-
|
|
914
|
+
sizesKnown: /* @__PURE__ */ new Map(),
|
|
914
915
|
timeoutSizeMessage: 0,
|
|
915
916
|
scrollTimer: void 0,
|
|
916
917
|
belowAnchorElementPositions: void 0,
|
|
@@ -955,6 +956,26 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
955
956
|
}
|
|
956
957
|
return void 0;
|
|
957
958
|
};
|
|
959
|
+
const setDidLayout = () => {
|
|
960
|
+
var _a2;
|
|
961
|
+
refState.current.queuedInitialLayout = true;
|
|
962
|
+
if (initialScrollIndex) {
|
|
963
|
+
const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
|
|
964
|
+
(_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(true);
|
|
965
|
+
queueMicrotask(() => {
|
|
966
|
+
scrollTo(updatedOffset, false);
|
|
967
|
+
requestAnimationFrame(() => {
|
|
968
|
+
var _a3;
|
|
969
|
+
set$(ctx, "containersDidLayout", true);
|
|
970
|
+
(_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler.setDisableAdjust(false);
|
|
971
|
+
});
|
|
972
|
+
});
|
|
973
|
+
} else {
|
|
974
|
+
queueMicrotask(() => {
|
|
975
|
+
set$(ctx, "containersDidLayout", true);
|
|
976
|
+
});
|
|
977
|
+
}
|
|
978
|
+
};
|
|
958
979
|
const addTotalSize = React6.useCallback((key, add, totalSizeBelowAnchor) => {
|
|
959
980
|
const state = refState.current;
|
|
960
981
|
const { indexByKey, anchorElement } = state;
|
|
@@ -983,7 +1004,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
983
1004
|
state.rowHeights.clear();
|
|
984
1005
|
if (applyAdjustValue !== void 0) {
|
|
985
1006
|
resultSize -= applyAdjustValue;
|
|
986
|
-
|
|
1007
|
+
state.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
|
|
987
1008
|
state.scroll -= diff;
|
|
988
1009
|
});
|
|
989
1010
|
}
|
|
@@ -1055,7 +1076,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1055
1076
|
const {
|
|
1056
1077
|
data,
|
|
1057
1078
|
scrollLength,
|
|
1058
|
-
scroll: scrollState,
|
|
1059
1079
|
startBufferedId: startBufferedIdOrig,
|
|
1060
1080
|
positions,
|
|
1061
1081
|
columns,
|
|
@@ -1065,11 +1085,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1065
1085
|
if (!data || scrollLength === 0) {
|
|
1066
1086
|
return;
|
|
1067
1087
|
}
|
|
1088
|
+
const totalSize = peek$(ctx, "totalSizeWithScrollAdjust");
|
|
1068
1089
|
const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
|
|
1069
1090
|
const numColumns = peek$(ctx, "numColumns");
|
|
1070
1091
|
const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
|
|
1071
1092
|
const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
|
|
1072
|
-
|
|
1093
|
+
let scrollState = state.scroll;
|
|
1094
|
+
if (!state.queuedInitialLayout && initialScrollIndex) {
|
|
1095
|
+
const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
|
|
1096
|
+
scrollState = updatedOffset;
|
|
1097
|
+
}
|
|
1098
|
+
let scroll = scrollState - previousScrollAdjust - topPad;
|
|
1099
|
+
if (scroll + scrollLength > totalSize) {
|
|
1100
|
+
scroll = totalSize - scrollLength;
|
|
1101
|
+
}
|
|
1073
1102
|
if (ENABLE_DEBUG_VIEW) {
|
|
1074
1103
|
set$(ctx, "debugRawScroll", scrollState);
|
|
1075
1104
|
set$(ctx, "debugComputedScroll", scroll);
|
|
@@ -1304,6 +1333,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1304
1333
|
if (state.numPendingInitialLayout === 0) {
|
|
1305
1334
|
state.numPendingInitialLayout = state.endBuffered - state.startBuffered + 1;
|
|
1306
1335
|
}
|
|
1336
|
+
if (!state.queuedInitialLayout && endBuffered !== null) {
|
|
1337
|
+
let areAllKnown = true;
|
|
1338
|
+
for (let i = startBuffered; areAllKnown && i <= endBuffered; i++) {
|
|
1339
|
+
const key = getId(i);
|
|
1340
|
+
areAllKnown && (areAllKnown = state.sizesKnown.has(key));
|
|
1341
|
+
}
|
|
1342
|
+
if (areAllKnown) {
|
|
1343
|
+
setDidLayout();
|
|
1344
|
+
}
|
|
1345
|
+
}
|
|
1307
1346
|
if (state.viewabilityConfigCallbackPairs) {
|
|
1308
1347
|
updateViewableItems(
|
|
1309
1348
|
state,
|
|
@@ -1334,7 +1373,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1334
1373
|
};
|
|
1335
1374
|
const doMaintainScrollAtEnd = (animated) => {
|
|
1336
1375
|
const state = refState.current;
|
|
1337
|
-
if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd) {
|
|
1376
|
+
if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
|
|
1338
1377
|
const paddingTop = peek$(ctx, "paddingTop") || 0;
|
|
1339
1378
|
if (paddingTop > 0) {
|
|
1340
1379
|
state.scroll = 0;
|
|
@@ -1530,11 +1569,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1530
1569
|
};
|
|
1531
1570
|
const isFirst = !refState.current.renderItem;
|
|
1532
1571
|
const memoizedLastItemKeys = React6.useMemo(() => {
|
|
1533
|
-
if (!dataProp.length) return
|
|
1534
|
-
return
|
|
1535
|
-
|
|
1572
|
+
if (!dataProp.length) return [];
|
|
1573
|
+
return Array.from(
|
|
1574
|
+
{ length: Math.min(numColumnsProp, dataProp.length) },
|
|
1575
|
+
(_, i) => getId(dataProp.length - 1 - i)
|
|
1536
1576
|
);
|
|
1537
|
-
}, [dataProp
|
|
1577
|
+
}, [dataProp, numColumnsProp]);
|
|
1578
|
+
const stylePaddingTop = (_d = (_c = (_a = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
|
|
1538
1579
|
const initalizeStateVars = () => {
|
|
1539
1580
|
set$(ctx, "lastItemKeys", memoizedLastItemKeys);
|
|
1540
1581
|
set$(ctx, "numColumns", numColumnsProp);
|
|
@@ -1564,8 +1605,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1564
1605
|
set$(ctx, "extraData", extraData);
|
|
1565
1606
|
}, [extraData]);
|
|
1566
1607
|
refState.current.renderItem = renderItem;
|
|
1567
|
-
|
|
1568
|
-
React6.useEffect(initalizeStateVars, [memoizedLastItemKeys, numColumnsProp, stylePaddingTop]);
|
|
1608
|
+
React6.useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTop]);
|
|
1569
1609
|
const getRenderedItem = React6.useCallback((key) => {
|
|
1570
1610
|
var _a2, _b2;
|
|
1571
1611
|
const state = refState.current;
|
|
@@ -1638,7 +1678,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1638
1678
|
});
|
|
1639
1679
|
const updateItemSize = React6.useCallback((itemKey, size) => {
|
|
1640
1680
|
const state = refState.current;
|
|
1641
|
-
const { sizes, indexByKey,
|
|
1681
|
+
const { sizes, indexByKey, sizesKnown, data, rowHeights } = state;
|
|
1642
1682
|
if (!data) {
|
|
1643
1683
|
return;
|
|
1644
1684
|
}
|
|
@@ -1647,15 +1687,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1647
1687
|
state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
|
|
1648
1688
|
const prevSize = getItemSize(itemKey, index, data);
|
|
1649
1689
|
let needsCalculate = false;
|
|
1650
|
-
let needsUpdateContainersDidLayout = false;
|
|
1651
1690
|
if (state.numPendingInitialLayout > 0) {
|
|
1652
1691
|
state.numPendingInitialLayout--;
|
|
1653
1692
|
if (state.numPendingInitialLayout === 0) {
|
|
1654
1693
|
needsCalculate = true;
|
|
1655
1694
|
state.numPendingInitialLayout = -1;
|
|
1656
|
-
needsUpdateContainersDidLayout = true;
|
|
1657
1695
|
}
|
|
1658
1696
|
}
|
|
1697
|
+
sizesKnown == null ? void 0 : sizesKnown.set(itemKey, size);
|
|
1659
1698
|
if (!prevSize || Math.abs(prevSize - size) > 0.5) {
|
|
1660
1699
|
let diff;
|
|
1661
1700
|
needsCalculate = true;
|
|
@@ -1671,7 +1710,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1671
1710
|
diff = size - prevSize;
|
|
1672
1711
|
}
|
|
1673
1712
|
if (__DEV__ && !estimatedItemSize && !getEstimatedItemSize) {
|
|
1674
|
-
sizesLaidOut.set(itemKey, size);
|
|
1675
1713
|
if (state.timeoutSizeMessage) {
|
|
1676
1714
|
clearTimeout(state.timeoutSizeMessage);
|
|
1677
1715
|
}
|
|
@@ -1679,7 +1717,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1679
1717
|
state.timeoutSizeMessage = void 0;
|
|
1680
1718
|
let total = 0;
|
|
1681
1719
|
let num = 0;
|
|
1682
|
-
for (const [
|
|
1720
|
+
for (const [_, size2] of sizesKnown) {
|
|
1683
1721
|
num++;
|
|
1684
1722
|
total += size2;
|
|
1685
1723
|
}
|
|
@@ -1703,46 +1741,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1703
1741
|
}
|
|
1704
1742
|
}
|
|
1705
1743
|
if (needsCalculate) {
|
|
1706
|
-
let fixingScroll = false;
|
|
1707
|
-
if (needsUpdateContainersDidLayout && initialScrollIndex && !state.didInitialScroll) {
|
|
1708
|
-
const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
|
|
1709
|
-
state.didInitialScroll = true;
|
|
1710
|
-
if (updatedOffset !== initialContentOffset) {
|
|
1711
|
-
fixingScroll = true;
|
|
1712
|
-
scrollTo(updatedOffset, false);
|
|
1713
|
-
requestAnimationFrame(() => {
|
|
1714
|
-
const updatedOffset2 = calculateOffsetForIndex(initialScrollIndex);
|
|
1715
|
-
scrollTo(updatedOffset2, false);
|
|
1716
|
-
});
|
|
1717
|
-
}
|
|
1718
|
-
}
|
|
1719
1744
|
const scrollVelocity = state.scrollVelocity;
|
|
1720
1745
|
if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
|
|
1721
|
-
const setDidLayout = () => {
|
|
1722
|
-
set$(ctx, "containersDidLayout", true);
|
|
1723
|
-
if (reactNative.Platform.OS === "web") {
|
|
1724
|
-
setTimeout(() => {
|
|
1725
|
-
state.scrollAdjustHandler.setDisableAdjust(false);
|
|
1726
|
-
}, 32);
|
|
1727
|
-
}
|
|
1728
|
-
};
|
|
1729
1746
|
if (Date.now() - state.lastBatchingAction < 500) {
|
|
1730
|
-
state.queuedCalculateItemsInView
|
|
1731
|
-
state.queuedCalculateItemsInView =
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
});
|
|
1747
|
+
if (!state.queuedCalculateItemsInView) {
|
|
1748
|
+
state.queuedCalculateItemsInView = requestAnimationFrame(() => {
|
|
1749
|
+
state.queuedCalculateItemsInView = void 0;
|
|
1750
|
+
calculateItemsInView();
|
|
1751
|
+
});
|
|
1752
|
+
}
|
|
1737
1753
|
} else {
|
|
1738
1754
|
calculateItemsInView();
|
|
1739
|
-
if (needsUpdateContainersDidLayout) {
|
|
1740
|
-
if (fixingScroll) {
|
|
1741
|
-
requestAnimationFrame(setDidLayout);
|
|
1742
|
-
} else {
|
|
1743
|
-
queueMicrotask(setDidLayout);
|
|
1744
|
-
}
|
|
1745
|
-
}
|
|
1746
1755
|
}
|
|
1747
1756
|
}
|
|
1748
1757
|
}
|
|
@@ -1849,28 +1858,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1849
1858
|
state.minIndexSizeChanged = index;
|
|
1850
1859
|
firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
|
|
1851
1860
|
}
|
|
1852
|
-
state.scrollAdjustHandler.setDisableAdjust(true);
|
|
1853
|
-
setTimeout(
|
|
1854
|
-
() => {
|
|
1855
|
-
state.scrollAdjustHandler.setDisableAdjust(false);
|
|
1856
|
-
calculateItemsInView();
|
|
1857
|
-
},
|
|
1858
|
-
animated ? 150 : 50
|
|
1859
|
-
);
|
|
1860
1861
|
if (viewPosition) {
|
|
1861
1862
|
firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
|
|
1862
1863
|
}
|
|
1864
|
+
state.scrollAdjustHandler.setDisableAdjust(true);
|
|
1865
|
+
state.scrollingToOffset = firstIndexScrollPostion;
|
|
1863
1866
|
scrollTo(firstIndexScrollPostion, animated);
|
|
1864
|
-
const totalSizeWithScrollAdjust = peek$(ctx, "totalSizeWithScrollAdjust");
|
|
1865
|
-
if (maintainVisibleContentPosition && totalSizeWithScrollAdjust - firstIndexScrollPostion < state.scrollLength) {
|
|
1866
|
-
const doScrollTo = () => {
|
|
1867
|
-
scrollTo(firstIndexScrollPostion, animated);
|
|
1868
|
-
};
|
|
1869
|
-
setTimeout(doScrollTo, animated ? 150 : 50);
|
|
1870
|
-
if (animated) {
|
|
1871
|
-
setTimeout(doScrollTo, 350);
|
|
1872
|
-
}
|
|
1873
|
-
}
|
|
1874
1867
|
};
|
|
1875
1868
|
const scrollIndexIntoView = (options) => {
|
|
1876
1869
|
if (refState.current) {
|
|
@@ -1953,6 +1946,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1953
1946
|
updateItemSize,
|
|
1954
1947
|
handleScroll,
|
|
1955
1948
|
onMomentumScrollEnd: (event) => {
|
|
1949
|
+
var _a2;
|
|
1950
|
+
const scrollingToOffset = (_a2 = refState.current) == null ? void 0 : _a2.scrollingToOffset;
|
|
1951
|
+
if (scrollingToOffset !== void 0) {
|
|
1952
|
+
requestAnimationFrame(() => {
|
|
1953
|
+
scrollTo(scrollingToOffset, false);
|
|
1954
|
+
refState.current.scrollingToOffset = void 0;
|
|
1955
|
+
requestAnimationFrame(() => {
|
|
1956
|
+
refState.current.scrollAdjustHandler.setDisableAdjust(false);
|
|
1957
|
+
});
|
|
1958
|
+
});
|
|
1959
|
+
}
|
|
1956
1960
|
const wasPaused = refState.current.scrollAdjustHandler.unPauseAdjust();
|
|
1957
1961
|
if (wasPaused) {
|
|
1958
1962
|
refState.current.scrollVelocity = 0;
|
package/index.mjs
CHANGED
|
@@ -243,7 +243,7 @@ var Container = ({
|
|
|
243
243
|
if (columnWrapperStyle && !horizontal && numColumns > 1) {
|
|
244
244
|
const { columnGap, rowGap, gap } = columnWrapperStyle;
|
|
245
245
|
verticalPaddingStyles = {
|
|
246
|
-
paddingBottom: !lastItemKeys.
|
|
246
|
+
paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
|
|
247
247
|
paddingHorizontal: (columnGap || gap || 0) / 2
|
|
248
248
|
};
|
|
249
249
|
}
|
|
@@ -307,7 +307,7 @@ var Container = ({
|
|
|
307
307
|
() => ({ containerId: id, itemKey, index, value: data }),
|
|
308
308
|
[id, itemKey, index, data]
|
|
309
309
|
);
|
|
310
|
-
const contentFragment = /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.
|
|
310
|
+
const contentFragment = /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React6__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
|
|
311
311
|
if (maintainVisibleContentPosition) {
|
|
312
312
|
const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
|
|
313
313
|
if (ENABLE_DEVMODE) {
|
|
@@ -836,8 +836,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
836
836
|
return size;
|
|
837
837
|
};
|
|
838
838
|
const calculateOffsetForIndex = (index = initialScrollIndex) => {
|
|
839
|
+
var _a2;
|
|
839
840
|
const data = dataProp;
|
|
840
|
-
if (index) {
|
|
841
|
+
if (index !== void 0) {
|
|
841
842
|
let offset = 0;
|
|
842
843
|
const canGetSize = !!refState.current;
|
|
843
844
|
if (canGetSize || getEstimatedItemSize) {
|
|
@@ -853,7 +854,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
853
854
|
} else if (estimatedItemSize) {
|
|
854
855
|
offset = index * estimatedItemSize;
|
|
855
856
|
}
|
|
856
|
-
return offset / numColumnsProp;
|
|
857
|
+
return offset / numColumnsProp - (((_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.getAppliedAdjust()) || 0);
|
|
857
858
|
}
|
|
858
859
|
return 0;
|
|
859
860
|
};
|
|
@@ -889,7 +890,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
889
890
|
indexByKey: /* @__PURE__ */ new Map(),
|
|
890
891
|
scrollHistory: [],
|
|
891
892
|
scrollVelocity: 0,
|
|
892
|
-
|
|
893
|
+
sizesKnown: /* @__PURE__ */ new Map(),
|
|
893
894
|
timeoutSizeMessage: 0,
|
|
894
895
|
scrollTimer: void 0,
|
|
895
896
|
belowAnchorElementPositions: void 0,
|
|
@@ -934,6 +935,26 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
934
935
|
}
|
|
935
936
|
return void 0;
|
|
936
937
|
};
|
|
938
|
+
const setDidLayout = () => {
|
|
939
|
+
var _a2;
|
|
940
|
+
refState.current.queuedInitialLayout = true;
|
|
941
|
+
if (initialScrollIndex) {
|
|
942
|
+
const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
|
|
943
|
+
(_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(true);
|
|
944
|
+
queueMicrotask(() => {
|
|
945
|
+
scrollTo(updatedOffset, false);
|
|
946
|
+
requestAnimationFrame(() => {
|
|
947
|
+
var _a3;
|
|
948
|
+
set$(ctx, "containersDidLayout", true);
|
|
949
|
+
(_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler.setDisableAdjust(false);
|
|
950
|
+
});
|
|
951
|
+
});
|
|
952
|
+
} else {
|
|
953
|
+
queueMicrotask(() => {
|
|
954
|
+
set$(ctx, "containersDidLayout", true);
|
|
955
|
+
});
|
|
956
|
+
}
|
|
957
|
+
};
|
|
937
958
|
const addTotalSize = useCallback((key, add, totalSizeBelowAnchor) => {
|
|
938
959
|
const state = refState.current;
|
|
939
960
|
const { indexByKey, anchorElement } = state;
|
|
@@ -962,7 +983,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
962
983
|
state.rowHeights.clear();
|
|
963
984
|
if (applyAdjustValue !== void 0) {
|
|
964
985
|
resultSize -= applyAdjustValue;
|
|
965
|
-
|
|
986
|
+
state.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
|
|
966
987
|
state.scroll -= diff;
|
|
967
988
|
});
|
|
968
989
|
}
|
|
@@ -1034,7 +1055,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1034
1055
|
const {
|
|
1035
1056
|
data,
|
|
1036
1057
|
scrollLength,
|
|
1037
|
-
scroll: scrollState,
|
|
1038
1058
|
startBufferedId: startBufferedIdOrig,
|
|
1039
1059
|
positions,
|
|
1040
1060
|
columns,
|
|
@@ -1044,11 +1064,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1044
1064
|
if (!data || scrollLength === 0) {
|
|
1045
1065
|
return;
|
|
1046
1066
|
}
|
|
1067
|
+
const totalSize = peek$(ctx, "totalSizeWithScrollAdjust");
|
|
1047
1068
|
const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
|
|
1048
1069
|
const numColumns = peek$(ctx, "numColumns");
|
|
1049
1070
|
const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
|
|
1050
1071
|
const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
|
|
1051
|
-
|
|
1072
|
+
let scrollState = state.scroll;
|
|
1073
|
+
if (!state.queuedInitialLayout && initialScrollIndex) {
|
|
1074
|
+
const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
|
|
1075
|
+
scrollState = updatedOffset;
|
|
1076
|
+
}
|
|
1077
|
+
let scroll = scrollState - previousScrollAdjust - topPad;
|
|
1078
|
+
if (scroll + scrollLength > totalSize) {
|
|
1079
|
+
scroll = totalSize - scrollLength;
|
|
1080
|
+
}
|
|
1052
1081
|
if (ENABLE_DEBUG_VIEW) {
|
|
1053
1082
|
set$(ctx, "debugRawScroll", scrollState);
|
|
1054
1083
|
set$(ctx, "debugComputedScroll", scroll);
|
|
@@ -1283,6 +1312,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1283
1312
|
if (state.numPendingInitialLayout === 0) {
|
|
1284
1313
|
state.numPendingInitialLayout = state.endBuffered - state.startBuffered + 1;
|
|
1285
1314
|
}
|
|
1315
|
+
if (!state.queuedInitialLayout && endBuffered !== null) {
|
|
1316
|
+
let areAllKnown = true;
|
|
1317
|
+
for (let i = startBuffered; areAllKnown && i <= endBuffered; i++) {
|
|
1318
|
+
const key = getId(i);
|
|
1319
|
+
areAllKnown && (areAllKnown = state.sizesKnown.has(key));
|
|
1320
|
+
}
|
|
1321
|
+
if (areAllKnown) {
|
|
1322
|
+
setDidLayout();
|
|
1323
|
+
}
|
|
1324
|
+
}
|
|
1286
1325
|
if (state.viewabilityConfigCallbackPairs) {
|
|
1287
1326
|
updateViewableItems(
|
|
1288
1327
|
state,
|
|
@@ -1313,7 +1352,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1313
1352
|
};
|
|
1314
1353
|
const doMaintainScrollAtEnd = (animated) => {
|
|
1315
1354
|
const state = refState.current;
|
|
1316
|
-
if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd) {
|
|
1355
|
+
if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
|
|
1317
1356
|
const paddingTop = peek$(ctx, "paddingTop") || 0;
|
|
1318
1357
|
if (paddingTop > 0) {
|
|
1319
1358
|
state.scroll = 0;
|
|
@@ -1509,11 +1548,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1509
1548
|
};
|
|
1510
1549
|
const isFirst = !refState.current.renderItem;
|
|
1511
1550
|
const memoizedLastItemKeys = useMemo(() => {
|
|
1512
|
-
if (!dataProp.length) return
|
|
1513
|
-
return
|
|
1514
|
-
|
|
1551
|
+
if (!dataProp.length) return [];
|
|
1552
|
+
return Array.from(
|
|
1553
|
+
{ length: Math.min(numColumnsProp, dataProp.length) },
|
|
1554
|
+
(_, i) => getId(dataProp.length - 1 - i)
|
|
1515
1555
|
);
|
|
1516
|
-
}, [dataProp
|
|
1556
|
+
}, [dataProp, numColumnsProp]);
|
|
1557
|
+
const stylePaddingTop = (_d = (_c = (_a = StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
|
|
1517
1558
|
const initalizeStateVars = () => {
|
|
1518
1559
|
set$(ctx, "lastItemKeys", memoizedLastItemKeys);
|
|
1519
1560
|
set$(ctx, "numColumns", numColumnsProp);
|
|
@@ -1543,8 +1584,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1543
1584
|
set$(ctx, "extraData", extraData);
|
|
1544
1585
|
}, [extraData]);
|
|
1545
1586
|
refState.current.renderItem = renderItem;
|
|
1546
|
-
|
|
1547
|
-
useEffect(initalizeStateVars, [memoizedLastItemKeys, numColumnsProp, stylePaddingTop]);
|
|
1587
|
+
useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTop]);
|
|
1548
1588
|
const getRenderedItem = useCallback((key) => {
|
|
1549
1589
|
var _a2, _b2;
|
|
1550
1590
|
const state = refState.current;
|
|
@@ -1617,7 +1657,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1617
1657
|
});
|
|
1618
1658
|
const updateItemSize = useCallback((itemKey, size) => {
|
|
1619
1659
|
const state = refState.current;
|
|
1620
|
-
const { sizes, indexByKey,
|
|
1660
|
+
const { sizes, indexByKey, sizesKnown, data, rowHeights } = state;
|
|
1621
1661
|
if (!data) {
|
|
1622
1662
|
return;
|
|
1623
1663
|
}
|
|
@@ -1626,15 +1666,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1626
1666
|
state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
|
|
1627
1667
|
const prevSize = getItemSize(itemKey, index, data);
|
|
1628
1668
|
let needsCalculate = false;
|
|
1629
|
-
let needsUpdateContainersDidLayout = false;
|
|
1630
1669
|
if (state.numPendingInitialLayout > 0) {
|
|
1631
1670
|
state.numPendingInitialLayout--;
|
|
1632
1671
|
if (state.numPendingInitialLayout === 0) {
|
|
1633
1672
|
needsCalculate = true;
|
|
1634
1673
|
state.numPendingInitialLayout = -1;
|
|
1635
|
-
needsUpdateContainersDidLayout = true;
|
|
1636
1674
|
}
|
|
1637
1675
|
}
|
|
1676
|
+
sizesKnown == null ? void 0 : sizesKnown.set(itemKey, size);
|
|
1638
1677
|
if (!prevSize || Math.abs(prevSize - size) > 0.5) {
|
|
1639
1678
|
let diff;
|
|
1640
1679
|
needsCalculate = true;
|
|
@@ -1650,7 +1689,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1650
1689
|
diff = size - prevSize;
|
|
1651
1690
|
}
|
|
1652
1691
|
if (__DEV__ && !estimatedItemSize && !getEstimatedItemSize) {
|
|
1653
|
-
sizesLaidOut.set(itemKey, size);
|
|
1654
1692
|
if (state.timeoutSizeMessage) {
|
|
1655
1693
|
clearTimeout(state.timeoutSizeMessage);
|
|
1656
1694
|
}
|
|
@@ -1658,7 +1696,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1658
1696
|
state.timeoutSizeMessage = void 0;
|
|
1659
1697
|
let total = 0;
|
|
1660
1698
|
let num = 0;
|
|
1661
|
-
for (const [
|
|
1699
|
+
for (const [_, size2] of sizesKnown) {
|
|
1662
1700
|
num++;
|
|
1663
1701
|
total += size2;
|
|
1664
1702
|
}
|
|
@@ -1682,46 +1720,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1682
1720
|
}
|
|
1683
1721
|
}
|
|
1684
1722
|
if (needsCalculate) {
|
|
1685
|
-
let fixingScroll = false;
|
|
1686
|
-
if (needsUpdateContainersDidLayout && initialScrollIndex && !state.didInitialScroll) {
|
|
1687
|
-
const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
|
|
1688
|
-
state.didInitialScroll = true;
|
|
1689
|
-
if (updatedOffset !== initialContentOffset) {
|
|
1690
|
-
fixingScroll = true;
|
|
1691
|
-
scrollTo(updatedOffset, false);
|
|
1692
|
-
requestAnimationFrame(() => {
|
|
1693
|
-
const updatedOffset2 = calculateOffsetForIndex(initialScrollIndex);
|
|
1694
|
-
scrollTo(updatedOffset2, false);
|
|
1695
|
-
});
|
|
1696
|
-
}
|
|
1697
|
-
}
|
|
1698
1723
|
const scrollVelocity = state.scrollVelocity;
|
|
1699
1724
|
if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
|
|
1700
|
-
const setDidLayout = () => {
|
|
1701
|
-
set$(ctx, "containersDidLayout", true);
|
|
1702
|
-
if (Platform.OS === "web") {
|
|
1703
|
-
setTimeout(() => {
|
|
1704
|
-
state.scrollAdjustHandler.setDisableAdjust(false);
|
|
1705
|
-
}, 32);
|
|
1706
|
-
}
|
|
1707
|
-
};
|
|
1708
1725
|
if (Date.now() - state.lastBatchingAction < 500) {
|
|
1709
|
-
state.queuedCalculateItemsInView
|
|
1710
|
-
state.queuedCalculateItemsInView =
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
});
|
|
1726
|
+
if (!state.queuedCalculateItemsInView) {
|
|
1727
|
+
state.queuedCalculateItemsInView = requestAnimationFrame(() => {
|
|
1728
|
+
state.queuedCalculateItemsInView = void 0;
|
|
1729
|
+
calculateItemsInView();
|
|
1730
|
+
});
|
|
1731
|
+
}
|
|
1716
1732
|
} else {
|
|
1717
1733
|
calculateItemsInView();
|
|
1718
|
-
if (needsUpdateContainersDidLayout) {
|
|
1719
|
-
if (fixingScroll) {
|
|
1720
|
-
requestAnimationFrame(setDidLayout);
|
|
1721
|
-
} else {
|
|
1722
|
-
queueMicrotask(setDidLayout);
|
|
1723
|
-
}
|
|
1724
|
-
}
|
|
1725
1734
|
}
|
|
1726
1735
|
}
|
|
1727
1736
|
}
|
|
@@ -1828,28 +1837,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1828
1837
|
state.minIndexSizeChanged = index;
|
|
1829
1838
|
firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
|
|
1830
1839
|
}
|
|
1831
|
-
state.scrollAdjustHandler.setDisableAdjust(true);
|
|
1832
|
-
setTimeout(
|
|
1833
|
-
() => {
|
|
1834
|
-
state.scrollAdjustHandler.setDisableAdjust(false);
|
|
1835
|
-
calculateItemsInView();
|
|
1836
|
-
},
|
|
1837
|
-
animated ? 150 : 50
|
|
1838
|
-
);
|
|
1839
1840
|
if (viewPosition) {
|
|
1840
1841
|
firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
|
|
1841
1842
|
}
|
|
1843
|
+
state.scrollAdjustHandler.setDisableAdjust(true);
|
|
1844
|
+
state.scrollingToOffset = firstIndexScrollPostion;
|
|
1842
1845
|
scrollTo(firstIndexScrollPostion, animated);
|
|
1843
|
-
const totalSizeWithScrollAdjust = peek$(ctx, "totalSizeWithScrollAdjust");
|
|
1844
|
-
if (maintainVisibleContentPosition && totalSizeWithScrollAdjust - firstIndexScrollPostion < state.scrollLength) {
|
|
1845
|
-
const doScrollTo = () => {
|
|
1846
|
-
scrollTo(firstIndexScrollPostion, animated);
|
|
1847
|
-
};
|
|
1848
|
-
setTimeout(doScrollTo, animated ? 150 : 50);
|
|
1849
|
-
if (animated) {
|
|
1850
|
-
setTimeout(doScrollTo, 350);
|
|
1851
|
-
}
|
|
1852
|
-
}
|
|
1853
1846
|
};
|
|
1854
1847
|
const scrollIndexIntoView = (options) => {
|
|
1855
1848
|
if (refState.current) {
|
|
@@ -1932,6 +1925,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1932
1925
|
updateItemSize,
|
|
1933
1926
|
handleScroll,
|
|
1934
1927
|
onMomentumScrollEnd: (event) => {
|
|
1928
|
+
var _a2;
|
|
1929
|
+
const scrollingToOffset = (_a2 = refState.current) == null ? void 0 : _a2.scrollingToOffset;
|
|
1930
|
+
if (scrollingToOffset !== void 0) {
|
|
1931
|
+
requestAnimationFrame(() => {
|
|
1932
|
+
scrollTo(scrollingToOffset, false);
|
|
1933
|
+
refState.current.scrollingToOffset = void 0;
|
|
1934
|
+
requestAnimationFrame(() => {
|
|
1935
|
+
refState.current.scrollAdjustHandler.setDisableAdjust(false);
|
|
1936
|
+
});
|
|
1937
|
+
});
|
|
1938
|
+
}
|
|
1935
1939
|
const wasPaused = refState.current.scrollAdjustHandler.unPauseAdjust();
|
|
1936
1940
|
if (wasPaused) {
|
|
1937
1941
|
refState.current.scrollVelocity = 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@legendapp/list",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.32",
|
|
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,
|