@legendapp/list 2.0.0-next.0 → 2.0.0-next.2
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/.claude/settings.local.json +8 -0
- package/.cursor/rules/changelog.mdc +60 -0
- package/.github/FUNDING.yml +15 -0
- package/.gitignore +5 -0
- package/.prettierrc.json +5 -0
- package/.vscode/settings.json +14 -0
- package/CLAUDE.md +126 -0
- package/biome.json +46 -0
- package/bun.lock +1289 -0
- package/bunfig.toml +2 -0
- package/dist/CHANGELOG.md +119 -0
- package/dist/LICENSE +21 -0
- package/dist/README.md +139 -0
- package/{animated.d.mts → dist/animated.d.mts} +1 -1
- package/{animated.d.ts → dist/animated.d.ts} +1 -1
- package/{index.d.mts → dist/index.d.mts} +63 -15
- package/{index.d.ts → dist/index.d.ts} +63 -15
- package/dist/index.js +2525 -0
- package/dist/index.mjs +2497 -0
- package/{keyboard-controller.d.mts → dist/keyboard-controller.d.mts} +4 -4
- package/{keyboard-controller.d.ts → dist/keyboard-controller.d.ts} +4 -4
- package/dist/package.json +35 -0
- package/example/README.md +40 -0
- package/example/api/data/genres.json +23 -0
- package/example/api/data/playlist/10402-10749.json +1 -0
- package/example/api/data/playlist/10402-10770.json +1 -0
- package/example/api/data/playlist/10402-37.json +1 -0
- package/example/api/data/playlist/10749-10752.json +1 -0
- package/example/api/data/playlist/10749-10770.json +1 -0
- package/example/api/data/playlist/10749-37.json +1 -0
- package/example/api/data/playlist/10749-878.json +1 -0
- package/example/api/data/playlist/10751-10402.json +1 -0
- package/example/api/data/playlist/10751-10752.json +1 -0
- package/example/api/data/playlist/10751-37.json +1 -0
- package/example/api/data/playlist/10751-53.json +1 -0
- package/example/api/data/playlist/10751-878.json +1 -0
- package/example/api/data/playlist/10751-9648.json +1 -0
- package/example/api/data/playlist/10752-37.json +1 -0
- package/example/api/data/playlist/12-10402.json +1 -0
- package/example/api/data/playlist/12-10749.json +1 -0
- package/example/api/data/playlist/12-18.json +1 -0
- package/example/api/data/playlist/12-27.json +1 -0
- package/example/api/data/playlist/12-35.json +1 -0
- package/example/api/data/playlist/14-36.json +1 -0
- package/example/api/data/playlist/14-878.json +1 -0
- package/example/api/data/playlist/16-10751.json +1 -0
- package/example/api/data/playlist/16-10770.json +1 -0
- package/example/api/data/playlist/16-35.json +1 -0
- package/example/api/data/playlist/16-36.json +1 -0
- package/example/api/data/playlist/16-53.json +1 -0
- package/example/api/data/playlist/18-10751.json +1 -0
- package/example/api/data/playlist/18-10752.json +1 -0
- package/example/api/data/playlist/18-37.json +1 -0
- package/example/api/data/playlist/18-53.json +1 -0
- package/example/api/data/playlist/18-878.json +1 -0
- package/example/api/data/playlist/27-10749.json +1 -0
- package/example/api/data/playlist/27-10770.json +1 -0
- package/example/api/data/playlist/28-10749.json +1 -0
- package/example/api/data/playlist/28-10751.json +1 -0
- package/example/api/data/playlist/28-10770.json +1 -0
- package/example/api/data/playlist/28-16.json +1 -0
- package/example/api/data/playlist/28-18.json +1 -0
- package/example/api/data/playlist/28-36.json +1 -0
- package/example/api/data/playlist/28-37.json +1 -0
- package/example/api/data/playlist/28-53.json +1 -0
- package/example/api/data/playlist/28-80.json +1 -0
- package/example/api/data/playlist/28-99.json +1 -0
- package/example/api/data/playlist/35-10749.json +1 -0
- package/example/api/data/playlist/35-10751.json +1 -0
- package/example/api/data/playlist/35-10752.json +1 -0
- package/example/api/data/playlist/35-27.json +1 -0
- package/example/api/data/playlist/35-36.json +1 -0
- package/example/api/data/playlist/35-53.json +1 -0
- package/example/api/data/playlist/35-80.json +1 -0
- package/example/api/data/playlist/36-37.json +1 -0
- package/example/api/data/playlist/36-878.json +1 -0
- package/example/api/data/playlist/36-9648.json +1 -0
- package/example/api/data/playlist/53-10752.json +1 -0
- package/example/api/data/playlist/80-10770.json +1 -0
- package/example/api/data/playlist/80-14.json +1 -0
- package/example/api/data/playlist/80-18.json +1 -0
- package/example/api/data/playlist/80-37.json +1 -0
- package/example/api/data/playlist/878-37.json +1 -0
- package/example/api/data/playlist/9648-10770.json +1 -0
- package/example/api/data/playlist/9648-37.json +1 -0
- package/example/api/data/playlist/9648-53.json +1 -0
- package/example/api/data/playlist/9648-878.json +1 -0
- package/example/api/data/playlist/99-10749.json +1 -0
- package/example/api/data/playlist/99-14.json +1 -0
- package/example/api/data/playlist/99-18.json +1 -0
- package/example/api/data/playlist/99-27.json +1 -0
- package/example/api/data/playlist/99-53.json +1 -0
- package/example/api/data/playlist/99-9648.json +1 -0
- package/example/api/data/playlist/index.ts +73 -0
- package/example/api/data/rows.json +1 -0
- package/example/api/index.ts +36 -0
- package/example/app/(tabs)/_layout.tsx +60 -0
- package/example/app/(tabs)/cards.tsx +81 -0
- package/example/app/(tabs)/index.tsx +205 -0
- package/example/app/(tabs)/moviesL.tsx +7 -0
- package/example/app/(tabs)/moviesLR.tsx +7 -0
- package/example/app/+not-found.tsx +32 -0
- package/example/app/_layout.tsx +34 -0
- package/example/app/accurate-scrollto/index.tsx +125 -0
- package/example/app/accurate-scrollto-2/index.tsx +52 -0
- package/example/app/accurate-scrollto-huge/index.tsx +128 -0
- package/example/app/add-to-end/index.tsx +82 -0
- package/example/app/ai-chat/index.tsx +236 -0
- package/example/app/bidirectional-infinite-list/index.tsx +133 -0
- package/example/app/cards-columns/index.tsx +37 -0
- package/example/app/cards-flashlist/index.tsx +122 -0
- package/example/app/cards-flatlist/index.tsx +94 -0
- package/example/app/cards-no-recycle/index.tsx +110 -0
- package/example/app/cards-renderItem.tsx +354 -0
- package/example/app/chat-example/index.tsx +167 -0
- package/example/app/chat-infinite/index.tsx +239 -0
- package/example/app/chat-keyboard/index.tsx +248 -0
- package/example/app/chat-resize-outer/index.tsx +247 -0
- package/example/app/columns/index.tsx +78 -0
- package/example/app/countries/index.tsx +182 -0
- package/example/app/countries-flashlist/index.tsx +163 -0
- package/example/app/countries-reorder/index.tsx +187 -0
- package/example/app/extra-data/index.tsx +86 -0
- package/example/app/filter-elements/filter-data-provider.tsx +55 -0
- package/example/app/filter-elements/index.tsx +118 -0
- package/example/app/initial-scroll-index/index.tsx +106 -0
- package/example/app/initial-scroll-index/renderFixedItem.tsx +215 -0
- package/example/app/initial-scroll-index-free-height/index.tsx +70 -0
- package/example/app/initial-scroll-index-keyed/index.tsx +62 -0
- package/example/app/lazy-list/index.tsx +123 -0
- package/example/app/movies-flashlist/index.tsx +7 -0
- package/example/app/mutable-cells/index.tsx +104 -0
- package/example/app/video-feed/index.tsx +119 -0
- package/example/app.config.js +22 -0
- package/example/app.json +45 -0
- package/example/assets/fonts/SpaceMono-Regular.ttf +0 -0
- package/example/assets/images/adaptive-icon.png +0 -0
- package/example/assets/images/favicon.png +0 -0
- package/example/assets/images/icon.png +0 -0
- package/example/assets/images/partial-react-logo.png +0 -0
- package/example/assets/images/react-logo.png +0 -0
- package/example/assets/images/react-logo@2x.png +0 -0
- package/example/assets/images/react-logo@3x.png +0 -0
- package/example/assets/images/splash-icon.png +0 -0
- package/example/autoscroll.sh +101 -0
- package/example/bun.lock +2266 -0
- package/example/bunfig.toml +2 -0
- package/example/components/Breathe.tsx +54 -0
- package/example/components/Circle.tsx +69 -0
- package/example/components/Collapsible.tsx +44 -0
- package/example/components/ExternalLink.tsx +24 -0
- package/example/components/HapticTab.tsx +18 -0
- package/example/components/HelloWave.tsx +37 -0
- package/example/components/Movies.tsx +179 -0
- package/example/components/ParallaxScrollView.tsx +81 -0
- package/example/components/ThemedText.tsx +60 -0
- package/example/components/ThemedView.tsx +14 -0
- package/example/components/__tests__/ThemedText-test.tsx +10 -0
- package/example/components/__tests__/__snapshots__/ThemedText-test.tsx.snap +24 -0
- package/example/components/ui/IconSymbol.ios.tsx +32 -0
- package/example/components/ui/IconSymbol.tsx +43 -0
- package/example/components/ui/TabBarBackground.ios.tsx +22 -0
- package/example/components/ui/TabBarBackground.tsx +6 -0
- package/example/constants/Colors.ts +26 -0
- package/example/constants/constants.ts +5 -0
- package/example/constants/useScrollTest.ts +19 -0
- package/example/hooks/useColorScheme.ts +1 -0
- package/example/hooks/useColorScheme.web.ts +8 -0
- package/example/hooks/useThemeColor.ts +22 -0
- package/example/ios/.xcode.env +11 -0
- package/example/ios/Podfile +64 -0
- package/example/ios/Podfile.lock +2767 -0
- package/example/ios/Podfile.properties.json +5 -0
- package/example/ios/listtest/AppDelegate.swift +70 -0
- package/example/ios/listtest/Images.xcassets/AppIcon.appiconset/App-Icon-1024x1024@1x.png +0 -0
- package/example/ios/listtest/Images.xcassets/AppIcon.appiconset/Contents.json +14 -0
- package/example/ios/listtest/Images.xcassets/Contents.json +6 -0
- package/example/ios/listtest/Images.xcassets/SplashScreenBackground.colorset/Contents.json +20 -0
- package/example/ios/listtest/Images.xcassets/SplashScreenLogo.imageset/Contents.json +23 -0
- package/example/ios/listtest/Images.xcassets/SplashScreenLogo.imageset/image.png +0 -0
- package/example/ios/listtest/Images.xcassets/SplashScreenLogo.imageset/image@2x.png +0 -0
- package/example/ios/listtest/Images.xcassets/SplashScreenLogo.imageset/image@3x.png +0 -0
- package/example/ios/listtest/Info.plist +85 -0
- package/example/ios/listtest/PrivacyInfo.xcprivacy +48 -0
- package/example/ios/listtest/SplashScreen.storyboard +42 -0
- package/example/ios/listtest/Supporting/Expo.plist +12 -0
- package/example/ios/listtest/listtest-Bridging-Header.h +3 -0
- package/example/ios/listtest/listtest.entitlements +5 -0
- package/example/ios/listtest.xcodeproj/project.pbxproj +547 -0
- package/example/ios/listtest.xcodeproj/xcshareddata/xcschemes/listtest.xcscheme +88 -0
- package/example/ios/listtest.xcworkspace/contents.xcworkspacedata +10 -0
- package/example/metro.config.js +16 -0
- package/example/package.json +73 -0
- package/example/scripts/reset-project.js +84 -0
- package/example/tsconfig.json +26 -0
- package/package.json +88 -34
- package/posttsup.ts +24 -0
- package/src/Container.tsx +176 -0
- package/src/Containers.tsx +85 -0
- package/src/ContextContainer.ts +145 -0
- package/src/DebugView.tsx +83 -0
- package/src/LazyLegendList.tsx +41 -0
- package/src/LeanView.tsx +18 -0
- package/src/LegendList.tsx +558 -0
- package/src/ListComponent.tsx +191 -0
- package/src/ScrollAdjust.tsx +24 -0
- package/src/ScrollAdjustHandler.ts +26 -0
- package/src/Separator.tsx +14 -0
- package/src/animated.tsx +6 -0
- package/src/calculateItemsInView.ts +363 -0
- package/src/calculateOffsetForIndex.ts +23 -0
- package/src/calculateOffsetWithOffsetPosition.ts +26 -0
- package/src/checkAllSizesKnown.ts +17 -0
- package/src/checkAtBottom.ts +36 -0
- package/src/checkAtTop.ts +27 -0
- package/src/checkThreshold.ts +30 -0
- package/src/constants.ts +11 -0
- package/src/createColumnWrapperStyle.ts +16 -0
- package/src/doInitialAllocateContainers.ts +40 -0
- package/src/doMaintainScrollAtEnd.ts +34 -0
- package/src/findAvailableContainers.ts +98 -0
- package/src/finishScrollTo.ts +8 -0
- package/src/getId.ts +21 -0
- package/src/getItemSize.ts +52 -0
- package/src/getRenderedItem.ts +34 -0
- package/src/getScrollVelocity.ts +47 -0
- package/src/handleLayout.ts +70 -0
- package/src/helpers.ts +39 -0
- package/src/index.ts +11 -0
- package/src/keyboard-controller.tsx +63 -0
- package/src/onScroll.ts +66 -0
- package/src/prepareMVCP.ts +50 -0
- package/src/reanimated.tsx +63 -0
- package/src/requestAdjust.ts +41 -0
- package/src/scrollTo.ts +40 -0
- package/src/scrollToIndex.ts +34 -0
- package/src/setDidLayout.ts +25 -0
- package/src/setPaddingTop.ts +28 -0
- package/src/state.tsx +304 -0
- package/src/types.ts +610 -0
- package/src/updateAlignItemsPaddingTop.ts +18 -0
- package/src/updateAllPositions.ts +130 -0
- package/src/updateItemSize.ts +203 -0
- package/src/updateTotalSize.ts +44 -0
- package/src/useAnimatedValue.ts +6 -0
- package/src/useCombinedRef.ts +22 -0
- package/src/useInit.ts +17 -0
- package/src/useSyncLayout.tsx +68 -0
- package/src/useValue$.ts +53 -0
- package/src/viewability.ts +279 -0
- package/tsconfig.json +59 -0
- package/tsup.config.ts +21 -0
- package/index.js +0 -2348
- package/index.mjs +0 -2320
- /package/{animated.js → dist/animated.js} +0 -0
- /package/{animated.mjs → dist/animated.mjs} +0 -0
- /package/{keyboard-controller.js → dist/keyboard-controller.js} +0 -0
- /package/{keyboard-controller.mjs → dist/keyboard-controller.mjs} +0 -0
- /package/{reanimated.d.mts → dist/reanimated.d.mts} +0 -0
- /package/{reanimated.d.ts → dist/reanimated.d.ts} +0 -0
- /package/{reanimated.js → dist/reanimated.js} +0 -0
- /package/{reanimated.mjs → dist/reanimated.mjs} +0 -0
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,2497 @@
|
|
|
1
|
+
import * as React3 from 'react';
|
|
2
|
+
import React3__default, { useReducer, useEffect, createContext, useMemo, useState, useRef, useLayoutEffect, useCallback, useImperativeHandle, useContext, forwardRef, memo } from 'react';
|
|
3
|
+
import { View, Text, Platform, Animated, ScrollView, StyleSheet, Dimensions, RefreshControl } from 'react-native';
|
|
4
|
+
import { useSyncExternalStore } from 'use-sync-external-store/shim';
|
|
5
|
+
|
|
6
|
+
// src/LegendList.tsx
|
|
7
|
+
var ContextState = React3.createContext(null);
|
|
8
|
+
function StateProvider({ children }) {
|
|
9
|
+
const [value] = React3.useState(() => ({
|
|
10
|
+
listeners: /* @__PURE__ */ new Map(),
|
|
11
|
+
values: /* @__PURE__ */ new Map([
|
|
12
|
+
["alignItemsPaddingTop", 0],
|
|
13
|
+
["stylePaddingTop", 0],
|
|
14
|
+
["headerSize", 0]
|
|
15
|
+
]),
|
|
16
|
+
mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
|
|
17
|
+
mapViewabilityValues: /* @__PURE__ */ new Map(),
|
|
18
|
+
mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
|
|
19
|
+
mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
|
|
20
|
+
columnWrapperStyle: void 0,
|
|
21
|
+
viewRefs: /* @__PURE__ */ new Map()
|
|
22
|
+
}));
|
|
23
|
+
return /* @__PURE__ */ React3.createElement(ContextState.Provider, { value }, children);
|
|
24
|
+
}
|
|
25
|
+
function useStateContext() {
|
|
26
|
+
return React3.useContext(ContextState);
|
|
27
|
+
}
|
|
28
|
+
function createSelectorFunctionsArr(ctx, signalNames) {
|
|
29
|
+
let lastValues = [];
|
|
30
|
+
let lastSignalValues = [];
|
|
31
|
+
return {
|
|
32
|
+
subscribe: (cb) => {
|
|
33
|
+
const listeners = [];
|
|
34
|
+
for (const signalName of signalNames) {
|
|
35
|
+
listeners.push(listen$(ctx, signalName, cb));
|
|
36
|
+
}
|
|
37
|
+
return () => {
|
|
38
|
+
for (const listener of listeners) {
|
|
39
|
+
listener();
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
},
|
|
43
|
+
get: () => {
|
|
44
|
+
const currentValues = [];
|
|
45
|
+
let hasChanged = false;
|
|
46
|
+
for (let i = 0; i < signalNames.length; i++) {
|
|
47
|
+
const value = peek$(ctx, signalNames[i]);
|
|
48
|
+
currentValues.push(value);
|
|
49
|
+
if (value !== lastSignalValues[i]) {
|
|
50
|
+
hasChanged = true;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
lastSignalValues = currentValues;
|
|
54
|
+
if (hasChanged) {
|
|
55
|
+
lastValues = currentValues;
|
|
56
|
+
}
|
|
57
|
+
return lastValues;
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
function listen$(ctx, signalName, cb) {
|
|
62
|
+
const { listeners } = ctx;
|
|
63
|
+
let setListeners = listeners.get(signalName);
|
|
64
|
+
if (!setListeners) {
|
|
65
|
+
setListeners = /* @__PURE__ */ new Set();
|
|
66
|
+
listeners.set(signalName, setListeners);
|
|
67
|
+
}
|
|
68
|
+
setListeners.add(cb);
|
|
69
|
+
return () => setListeners.delete(cb);
|
|
70
|
+
}
|
|
71
|
+
function peek$(ctx, signalName) {
|
|
72
|
+
const { values } = ctx;
|
|
73
|
+
return values.get(signalName);
|
|
74
|
+
}
|
|
75
|
+
function set$(ctx, signalName, value) {
|
|
76
|
+
const { listeners, values } = ctx;
|
|
77
|
+
if (values.get(signalName) !== value) {
|
|
78
|
+
values.set(signalName, value);
|
|
79
|
+
const setListeners = listeners.get(signalName);
|
|
80
|
+
if (setListeners) {
|
|
81
|
+
for (const listener of setListeners) {
|
|
82
|
+
listener(value);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
function getContentSize(ctx) {
|
|
88
|
+
const { values } = ctx;
|
|
89
|
+
const stylePaddingTop = values.get("stylePaddingTop") || 0;
|
|
90
|
+
const headerSize = values.get("headerSize") || 0;
|
|
91
|
+
const footerSize = values.get("footerSize") || 0;
|
|
92
|
+
const totalSize = values.get("totalSize") || 0;
|
|
93
|
+
return headerSize + footerSize + totalSize + stylePaddingTop;
|
|
94
|
+
}
|
|
95
|
+
function useArr$(signalNames) {
|
|
96
|
+
const ctx = React3.useContext(ContextState);
|
|
97
|
+
const { subscribe, get } = React3.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
|
|
98
|
+
const value = useSyncExternalStore(subscribe, get);
|
|
99
|
+
return value;
|
|
100
|
+
}
|
|
101
|
+
function useSelector$(signalName, selector) {
|
|
102
|
+
const ctx = React3.useContext(ContextState);
|
|
103
|
+
const { subscribe, get } = React3.useMemo(() => createSelectorFunctionsArr(ctx, [signalName]), [ctx, signalName]);
|
|
104
|
+
const value = useSyncExternalStore(subscribe, () => selector(get()[0]));
|
|
105
|
+
return value;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// src/DebugView.tsx
|
|
109
|
+
var DebugRow = ({ children }) => {
|
|
110
|
+
return /* @__PURE__ */ React3.createElement(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" } }, children);
|
|
111
|
+
};
|
|
112
|
+
var DebugView = React3.memo(function DebugView2({ state }) {
|
|
113
|
+
const ctx = useStateContext();
|
|
114
|
+
const [totalSize = 0, scrollAdjust = 0, rawScroll = 0, scroll = 0, numContainers = 0, numContainersPooled = 0] = useArr$([
|
|
115
|
+
"totalSize",
|
|
116
|
+
"scrollAdjust",
|
|
117
|
+
"debugRawScroll",
|
|
118
|
+
"debugComputedScroll",
|
|
119
|
+
"numContainers",
|
|
120
|
+
"numContainersPooled"
|
|
121
|
+
]);
|
|
122
|
+
const contentSize = getContentSize(ctx);
|
|
123
|
+
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
|
124
|
+
useInterval(() => {
|
|
125
|
+
forceUpdate();
|
|
126
|
+
}, 100);
|
|
127
|
+
return /* @__PURE__ */ React3.createElement(
|
|
128
|
+
View,
|
|
129
|
+
{
|
|
130
|
+
style: {
|
|
131
|
+
position: "absolute",
|
|
132
|
+
top: 0,
|
|
133
|
+
right: 0,
|
|
134
|
+
paddingLeft: 4,
|
|
135
|
+
paddingBottom: 4,
|
|
136
|
+
// height: 100,
|
|
137
|
+
backgroundColor: "#FFFFFFCC",
|
|
138
|
+
padding: 4,
|
|
139
|
+
borderRadius: 4
|
|
140
|
+
},
|
|
141
|
+
pointerEvents: "none"
|
|
142
|
+
},
|
|
143
|
+
/* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React3.createElement(Text, null, totalSize.toFixed(2))),
|
|
144
|
+
/* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React3.createElement(Text, null, contentSize.toFixed(2))),
|
|
145
|
+
/* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "At end:"), /* @__PURE__ */ React3.createElement(Text, null, String(state.isAtEnd))),
|
|
146
|
+
/* @__PURE__ */ React3.createElement(Text, null),
|
|
147
|
+
/* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "ScrollAdjust:"), /* @__PURE__ */ React3.createElement(Text, null, scrollAdjust.toFixed(2))),
|
|
148
|
+
/* @__PURE__ */ React3.createElement(Text, null),
|
|
149
|
+
/* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "RawScroll: "), /* @__PURE__ */ React3.createElement(Text, null, rawScroll.toFixed(2))),
|
|
150
|
+
/* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "ComputedScroll: "), /* @__PURE__ */ React3.createElement(Text, null, scroll.toFixed(2)))
|
|
151
|
+
);
|
|
152
|
+
});
|
|
153
|
+
function useInterval(callback, delay) {
|
|
154
|
+
useEffect(() => {
|
|
155
|
+
const interval = setInterval(callback, delay);
|
|
156
|
+
return () => clearInterval(interval);
|
|
157
|
+
}, [delay]);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
// src/helpers.ts
|
|
161
|
+
function isFunction(obj) {
|
|
162
|
+
return typeof obj === "function";
|
|
163
|
+
}
|
|
164
|
+
function isArray(obj) {
|
|
165
|
+
return Array.isArray(obj);
|
|
166
|
+
}
|
|
167
|
+
var warned = /* @__PURE__ */ new Set();
|
|
168
|
+
function warnDevOnce(id, text) {
|
|
169
|
+
if (__DEV__ && !warned.has(id)) {
|
|
170
|
+
warned.add(id);
|
|
171
|
+
console.warn(`[legend-list] ${text}`);
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
function roundSize(size) {
|
|
175
|
+
return Math.floor(size * 8) / 8;
|
|
176
|
+
}
|
|
177
|
+
function isNullOrUndefined(value) {
|
|
178
|
+
return value === null || value === void 0;
|
|
179
|
+
}
|
|
180
|
+
function comparatorDefault(a, b) {
|
|
181
|
+
return a - b;
|
|
182
|
+
}
|
|
183
|
+
function getPadding(s, type) {
|
|
184
|
+
var _a, _b, _c;
|
|
185
|
+
return (_c = (_b = (_a = s[`padding${type}`]) != null ? _a : s.paddingVertical) != null ? _b : s.padding) != null ? _c : 0;
|
|
186
|
+
}
|
|
187
|
+
function extractPadding(style, contentContainerStyle, type) {
|
|
188
|
+
return getPadding(style, type) + getPadding(contentContainerStyle, type);
|
|
189
|
+
}
|
|
190
|
+
var symbolFirst = Symbol();
|
|
191
|
+
function useInit(cb) {
|
|
192
|
+
const refValue = useRef(symbolFirst);
|
|
193
|
+
if (refValue.current === symbolFirst) {
|
|
194
|
+
refValue.current = cb();
|
|
195
|
+
}
|
|
196
|
+
return refValue.current;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
// src/ContextContainer.ts
|
|
200
|
+
var ContextContainer = createContext(null);
|
|
201
|
+
function useViewability(callback, configId) {
|
|
202
|
+
const ctx = useStateContext();
|
|
203
|
+
const { containerId } = useContext(ContextContainer);
|
|
204
|
+
const key = containerId + (configId != null ? configId : "");
|
|
205
|
+
useInit(() => {
|
|
206
|
+
const value = ctx.mapViewabilityValues.get(key);
|
|
207
|
+
if (value) {
|
|
208
|
+
callback(value);
|
|
209
|
+
}
|
|
210
|
+
});
|
|
211
|
+
ctx.mapViewabilityCallbacks.set(key, callback);
|
|
212
|
+
useEffect(
|
|
213
|
+
() => () => {
|
|
214
|
+
ctx.mapViewabilityCallbacks.delete(key);
|
|
215
|
+
},
|
|
216
|
+
[]
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
function useViewabilityAmount(callback) {
|
|
220
|
+
const ctx = useStateContext();
|
|
221
|
+
const { containerId } = useContext(ContextContainer);
|
|
222
|
+
useInit(() => {
|
|
223
|
+
const value = ctx.mapViewabilityAmountValues.get(containerId);
|
|
224
|
+
if (value) {
|
|
225
|
+
callback(value);
|
|
226
|
+
}
|
|
227
|
+
});
|
|
228
|
+
ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
|
|
229
|
+
useEffect(
|
|
230
|
+
() => () => {
|
|
231
|
+
ctx.mapViewabilityAmountCallbacks.delete(containerId);
|
|
232
|
+
},
|
|
233
|
+
[]
|
|
234
|
+
);
|
|
235
|
+
}
|
|
236
|
+
function useRecyclingEffect(effect) {
|
|
237
|
+
const { index, value } = useContext(ContextContainer);
|
|
238
|
+
const prevValues = useRef({
|
|
239
|
+
prevIndex: void 0,
|
|
240
|
+
prevItem: void 0
|
|
241
|
+
});
|
|
242
|
+
useEffect(() => {
|
|
243
|
+
let ret = void 0;
|
|
244
|
+
if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
|
|
245
|
+
ret = effect({
|
|
246
|
+
index,
|
|
247
|
+
item: value,
|
|
248
|
+
prevIndex: prevValues.current.prevIndex,
|
|
249
|
+
prevItem: prevValues.current.prevItem
|
|
250
|
+
});
|
|
251
|
+
}
|
|
252
|
+
prevValues.current = {
|
|
253
|
+
prevIndex: index,
|
|
254
|
+
prevItem: value
|
|
255
|
+
};
|
|
256
|
+
return ret;
|
|
257
|
+
}, [index, value]);
|
|
258
|
+
}
|
|
259
|
+
function useRecyclingState(valueOrFun) {
|
|
260
|
+
const { index, value, itemKey, triggerLayout } = useContext(ContextContainer);
|
|
261
|
+
const refState = useRef({
|
|
262
|
+
itemKey: null,
|
|
263
|
+
value: null
|
|
264
|
+
});
|
|
265
|
+
const [_, setRenderNum] = useState(0);
|
|
266
|
+
const state = refState.current;
|
|
267
|
+
if (state.itemKey !== itemKey) {
|
|
268
|
+
state.itemKey = itemKey;
|
|
269
|
+
state.value = isFunction(valueOrFun) ? valueOrFun({
|
|
270
|
+
index,
|
|
271
|
+
item: value,
|
|
272
|
+
prevIndex: void 0,
|
|
273
|
+
prevItem: void 0
|
|
274
|
+
}) : valueOrFun;
|
|
275
|
+
}
|
|
276
|
+
const setState = useCallback(
|
|
277
|
+
(newState) => {
|
|
278
|
+
state.value = isFunction(newState) ? newState(state.value) : newState;
|
|
279
|
+
setRenderNum((v) => v + 1);
|
|
280
|
+
triggerLayout();
|
|
281
|
+
},
|
|
282
|
+
[triggerLayout, state]
|
|
283
|
+
);
|
|
284
|
+
return [state.value, setState];
|
|
285
|
+
}
|
|
286
|
+
function useIsLastItem() {
|
|
287
|
+
const { itemKey } = useContext(ContextContainer);
|
|
288
|
+
const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
|
|
289
|
+
return isLast;
|
|
290
|
+
}
|
|
291
|
+
function useListScrollSize() {
|
|
292
|
+
const [scrollSize] = useArr$(["scrollSize"]);
|
|
293
|
+
return scrollSize;
|
|
294
|
+
}
|
|
295
|
+
var LeanViewComponent = React3.forwardRef((props, ref) => {
|
|
296
|
+
return React3.createElement("RCTView", { ...props, ref });
|
|
297
|
+
});
|
|
298
|
+
LeanViewComponent.displayName = "RCTView";
|
|
299
|
+
var LeanView = Platform.OS === "android" || Platform.OS === "ios" ? LeanViewComponent : View;
|
|
300
|
+
|
|
301
|
+
// src/Separator.tsx
|
|
302
|
+
function Separator({ ItemSeparatorComponent, itemKey, leadingItem }) {
|
|
303
|
+
const [lastItemKeys] = useArr$(["lastItemKeys"]);
|
|
304
|
+
const isALastItem = lastItemKeys.includes(itemKey);
|
|
305
|
+
return isALastItem ? null : /* @__PURE__ */ React.createElement(ItemSeparatorComponent, { leadingItem });
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
// src/constants.ts
|
|
309
|
+
var POSITION_OUT_OF_VIEW = -1e7;
|
|
310
|
+
var ENABLE_DEVMODE = __DEV__ && false;
|
|
311
|
+
var ENABLE_DEBUG_VIEW = __DEV__ && false;
|
|
312
|
+
var IsNewArchitecture = global.nativeFabricUIManager != null;
|
|
313
|
+
|
|
314
|
+
// src/Container.tsx
|
|
315
|
+
var Container = ({
|
|
316
|
+
id,
|
|
317
|
+
recycleItems,
|
|
318
|
+
horizontal,
|
|
319
|
+
getRenderedItem: getRenderedItem2,
|
|
320
|
+
updateItemSize: updateItemSize2,
|
|
321
|
+
ItemSeparatorComponent
|
|
322
|
+
}) => {
|
|
323
|
+
const ctx = useStateContext();
|
|
324
|
+
const columnWrapperStyle = ctx.columnWrapperStyle;
|
|
325
|
+
const [column = 0, data, itemKey, position = POSITION_OUT_OF_VIEW, numColumns, extraData] = useArr$([
|
|
326
|
+
`containerColumn${id}`,
|
|
327
|
+
`containerItemData${id}`,
|
|
328
|
+
`containerItemKey${id}`,
|
|
329
|
+
`containerPosition${id}`,
|
|
330
|
+
"numColumns",
|
|
331
|
+
"extraData"
|
|
332
|
+
]);
|
|
333
|
+
const refLastSize = useRef();
|
|
334
|
+
const ref = useRef(null);
|
|
335
|
+
const [layoutRenderCount, forceLayoutRender] = useState(0);
|
|
336
|
+
const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
|
|
337
|
+
const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
|
|
338
|
+
let didLayout = false;
|
|
339
|
+
let paddingStyles;
|
|
340
|
+
if (columnWrapperStyle) {
|
|
341
|
+
const { columnGap, rowGap, gap } = columnWrapperStyle;
|
|
342
|
+
if (horizontal) {
|
|
343
|
+
paddingStyles = {
|
|
344
|
+
paddingRight: columnGap || gap || void 0,
|
|
345
|
+
paddingVertical: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
|
|
346
|
+
};
|
|
347
|
+
} else {
|
|
348
|
+
paddingStyles = {
|
|
349
|
+
paddingBottom: rowGap || gap || void 0,
|
|
350
|
+
paddingHorizontal: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
|
|
351
|
+
};
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
const style = horizontal ? {
|
|
355
|
+
flexDirection: ItemSeparatorComponent ? "row" : void 0,
|
|
356
|
+
position: "absolute",
|
|
357
|
+
top: otherAxisPos,
|
|
358
|
+
height: otherAxisSize,
|
|
359
|
+
left: position,
|
|
360
|
+
...paddingStyles || {}
|
|
361
|
+
} : {
|
|
362
|
+
position: "absolute",
|
|
363
|
+
left: otherAxisPos,
|
|
364
|
+
right: numColumns > 1 ? null : 0,
|
|
365
|
+
width: otherAxisSize,
|
|
366
|
+
top: position,
|
|
367
|
+
...paddingStyles || {}
|
|
368
|
+
};
|
|
369
|
+
const renderedItemInfo = useMemo(
|
|
370
|
+
() => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
|
|
371
|
+
[itemKey, data, extraData]
|
|
372
|
+
);
|
|
373
|
+
const { index, renderedItem } = renderedItemInfo || {};
|
|
374
|
+
const triggerLayout = useCallback(() => {
|
|
375
|
+
forceLayoutRender((v) => v + 1);
|
|
376
|
+
}, []);
|
|
377
|
+
const contextValue = useMemo(() => {
|
|
378
|
+
ctx.viewRefs.set(id, ref);
|
|
379
|
+
return { containerId: id, itemKey, index, value: data, triggerLayout };
|
|
380
|
+
}, [id, itemKey, index, data]);
|
|
381
|
+
const onLayout = (event) => {
|
|
382
|
+
var _a, _b;
|
|
383
|
+
if (!isNullOrUndefined(itemKey)) {
|
|
384
|
+
didLayout = true;
|
|
385
|
+
let layout = event.nativeEvent.layout;
|
|
386
|
+
const size = layout[horizontal ? "width" : "height"];
|
|
387
|
+
const doUpdate = () => {
|
|
388
|
+
refLastSize.current = { width: layout.width, height: layout.height };
|
|
389
|
+
updateItemSize2(itemKey, layout);
|
|
390
|
+
};
|
|
391
|
+
if (IsNewArchitecture || size > 0) {
|
|
392
|
+
doUpdate();
|
|
393
|
+
} else {
|
|
394
|
+
(_b = (_a = ref.current) == null ? void 0 : _a.measure) == null ? void 0 : _b.call(_a, (x, y, width, height) => {
|
|
395
|
+
layout = { width, height };
|
|
396
|
+
doUpdate();
|
|
397
|
+
});
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
};
|
|
401
|
+
if (IsNewArchitecture) {
|
|
402
|
+
useLayoutEffect(() => {
|
|
403
|
+
var _a, _b;
|
|
404
|
+
if (!isNullOrUndefined(itemKey)) {
|
|
405
|
+
const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
|
|
406
|
+
if (measured) {
|
|
407
|
+
const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
|
|
408
|
+
if (size) {
|
|
409
|
+
updateItemSize2(itemKey, measured);
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
}, [itemKey, layoutRenderCount]);
|
|
414
|
+
} else {
|
|
415
|
+
useEffect(() => {
|
|
416
|
+
if (!isNullOrUndefined(itemKey)) {
|
|
417
|
+
const timeout = setTimeout(() => {
|
|
418
|
+
if (!didLayout && refLastSize.current) {
|
|
419
|
+
updateItemSize2(itemKey, refLastSize.current);
|
|
420
|
+
}
|
|
421
|
+
}, 16);
|
|
422
|
+
return () => {
|
|
423
|
+
clearTimeout(timeout);
|
|
424
|
+
};
|
|
425
|
+
}
|
|
426
|
+
}, [itemKey]);
|
|
427
|
+
}
|
|
428
|
+
return /* @__PURE__ */ React3.createElement(LeanView, { style, onLayout, ref, key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React3.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React3.createElement(
|
|
429
|
+
Separator,
|
|
430
|
+
{
|
|
431
|
+
itemKey,
|
|
432
|
+
ItemSeparatorComponent,
|
|
433
|
+
leadingItem: renderedItemInfo.item
|
|
434
|
+
}
|
|
435
|
+
)));
|
|
436
|
+
};
|
|
437
|
+
var typedForwardRef = forwardRef;
|
|
438
|
+
var typedMemo = memo;
|
|
439
|
+
var useAnimatedValue = (initialValue) => {
|
|
440
|
+
return useRef(new Animated.Value(initialValue)).current;
|
|
441
|
+
};
|
|
442
|
+
|
|
443
|
+
// src/useValue$.ts
|
|
444
|
+
function useValue$(key, params) {
|
|
445
|
+
var _a;
|
|
446
|
+
const { getValue, delay } = params || {};
|
|
447
|
+
const ctx = useStateContext();
|
|
448
|
+
const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
|
|
449
|
+
useMemo(() => {
|
|
450
|
+
let newValue = void 0;
|
|
451
|
+
let prevValue = void 0;
|
|
452
|
+
let didQueueTask = false;
|
|
453
|
+
listen$(ctx, key, (v) => {
|
|
454
|
+
newValue = getValue ? getValue(v) : v;
|
|
455
|
+
if (delay !== void 0) {
|
|
456
|
+
const fn = () => {
|
|
457
|
+
didQueueTask = false;
|
|
458
|
+
if (newValue !== void 0) {
|
|
459
|
+
animValue.setValue(newValue);
|
|
460
|
+
}
|
|
461
|
+
};
|
|
462
|
+
const delayValue = typeof delay === "function" ? delay(newValue, prevValue) : delay;
|
|
463
|
+
prevValue = newValue;
|
|
464
|
+
if (!didQueueTask) {
|
|
465
|
+
didQueueTask = true;
|
|
466
|
+
if (delayValue === 0) {
|
|
467
|
+
queueMicrotask(fn);
|
|
468
|
+
} else {
|
|
469
|
+
setTimeout(fn, delayValue);
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
} else {
|
|
473
|
+
animValue.setValue(newValue);
|
|
474
|
+
}
|
|
475
|
+
});
|
|
476
|
+
}, []);
|
|
477
|
+
return animValue;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
// src/Containers.tsx
|
|
481
|
+
var Containers = typedMemo(function Containers2({
|
|
482
|
+
horizontal,
|
|
483
|
+
recycleItems,
|
|
484
|
+
ItemSeparatorComponent,
|
|
485
|
+
waitForInitialLayout,
|
|
486
|
+
updateItemSize: updateItemSize2,
|
|
487
|
+
getRenderedItem: getRenderedItem2
|
|
488
|
+
}) {
|
|
489
|
+
const ctx = useStateContext();
|
|
490
|
+
const columnWrapperStyle = ctx.columnWrapperStyle;
|
|
491
|
+
const [numContainers, numColumns] = useArr$(["numContainersPooled", "numColumns"]);
|
|
492
|
+
const animSize = useValue$("totalSize", {
|
|
493
|
+
// Use a microtask if increasing the size significantly, otherwise use a timeout
|
|
494
|
+
delay: (value, prevValue) => !prevValue || value - prevValue > 20 ? 0 : 200
|
|
495
|
+
});
|
|
496
|
+
const animOpacity = waitForInitialLayout && !IsNewArchitecture ? useValue$("containersDidLayout", { getValue: (value) => value ? 1 : 0 }) : void 0;
|
|
497
|
+
const otherAxisSize = useValue$("otherAxisSize", { delay: 0 });
|
|
498
|
+
const containers = [];
|
|
499
|
+
for (let i = 0; i < numContainers; i++) {
|
|
500
|
+
containers.push(
|
|
501
|
+
/* @__PURE__ */ React3.createElement(
|
|
502
|
+
Container,
|
|
503
|
+
{
|
|
504
|
+
id: i,
|
|
505
|
+
key: i,
|
|
506
|
+
recycleItems,
|
|
507
|
+
horizontal,
|
|
508
|
+
getRenderedItem: getRenderedItem2,
|
|
509
|
+
updateItemSize: updateItemSize2,
|
|
510
|
+
ItemSeparatorComponent
|
|
511
|
+
}
|
|
512
|
+
)
|
|
513
|
+
);
|
|
514
|
+
}
|
|
515
|
+
const style = horizontal ? { width: animSize, opacity: animOpacity, minHeight: otherAxisSize } : { height: animSize, opacity: animOpacity, minWidth: otherAxisSize };
|
|
516
|
+
if (columnWrapperStyle && numColumns > 1) {
|
|
517
|
+
const { columnGap, rowGap, gap } = columnWrapperStyle;
|
|
518
|
+
const gapX = columnGap || gap || 0;
|
|
519
|
+
const gapY = rowGap || gap || 0;
|
|
520
|
+
if (horizontal) {
|
|
521
|
+
if (gapY) {
|
|
522
|
+
style.marginVertical = -gapY / 2;
|
|
523
|
+
}
|
|
524
|
+
if (gapX) {
|
|
525
|
+
style.marginRight = -gapX;
|
|
526
|
+
}
|
|
527
|
+
} else {
|
|
528
|
+
if (gapX) {
|
|
529
|
+
style.marginHorizontal = -gapX;
|
|
530
|
+
}
|
|
531
|
+
if (gapY) {
|
|
532
|
+
style.marginBottom = -gapY;
|
|
533
|
+
}
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
return /* @__PURE__ */ React3.createElement(Animated.View, { style }, containers);
|
|
537
|
+
});
|
|
538
|
+
function ScrollAdjust() {
|
|
539
|
+
const bias = 1e7;
|
|
540
|
+
const [scrollAdjust, scrollAdjustUserOffset] = useArr$(["scrollAdjust", "scrollAdjustUserOffset"]);
|
|
541
|
+
const scrollOffset = (scrollAdjust || 0) + (scrollAdjustUserOffset || 0) + bias;
|
|
542
|
+
return /* @__PURE__ */ React3.createElement(
|
|
543
|
+
View,
|
|
544
|
+
{
|
|
545
|
+
style: {
|
|
546
|
+
position: "absolute",
|
|
547
|
+
height: 0,
|
|
548
|
+
width: 0,
|
|
549
|
+
top: scrollOffset,
|
|
550
|
+
left: 0
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
);
|
|
554
|
+
}
|
|
555
|
+
function useSyncLayout({
|
|
556
|
+
onChange
|
|
557
|
+
}) {
|
|
558
|
+
const ref = useRef(null);
|
|
559
|
+
const onLayout = useCallback(
|
|
560
|
+
(event) => {
|
|
561
|
+
onChange(event.nativeEvent.layout, false);
|
|
562
|
+
},
|
|
563
|
+
[onChange]
|
|
564
|
+
);
|
|
565
|
+
useLayoutEffect(() => {
|
|
566
|
+
if (ref.current) {
|
|
567
|
+
ref.current.measure((x, y, width, height) => {
|
|
568
|
+
onChange({ x, y, width, height }, true);
|
|
569
|
+
});
|
|
570
|
+
}
|
|
571
|
+
}, []);
|
|
572
|
+
return { onLayout, ref };
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
// src/ListComponent.tsx
|
|
576
|
+
var getComponent = (Component) => {
|
|
577
|
+
if (React3.isValidElement(Component)) {
|
|
578
|
+
return Component;
|
|
579
|
+
}
|
|
580
|
+
if (Component) {
|
|
581
|
+
return /* @__PURE__ */ React3.createElement(Component, null);
|
|
582
|
+
}
|
|
583
|
+
return null;
|
|
584
|
+
};
|
|
585
|
+
var Padding = () => {
|
|
586
|
+
const animPaddingTop = useValue$("alignItemsPaddingTop", { delay: 0 });
|
|
587
|
+
return /* @__PURE__ */ React3.createElement(Animated.View, { style: { paddingTop: animPaddingTop } });
|
|
588
|
+
};
|
|
589
|
+
var PaddingDevMode = () => {
|
|
590
|
+
const animPaddingTop = useValue$("alignItemsPaddingTop", { delay: 0 });
|
|
591
|
+
return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React3.createElement(
|
|
592
|
+
Animated.View,
|
|
593
|
+
{
|
|
594
|
+
style: {
|
|
595
|
+
position: "absolute",
|
|
596
|
+
top: 0,
|
|
597
|
+
height: animPaddingTop,
|
|
598
|
+
left: 0,
|
|
599
|
+
right: 0,
|
|
600
|
+
backgroundColor: "green"
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
));
|
|
604
|
+
};
|
|
605
|
+
var ListComponent = typedMemo(function ListComponent2({
|
|
606
|
+
canRender,
|
|
607
|
+
style,
|
|
608
|
+
contentContainerStyle,
|
|
609
|
+
horizontal,
|
|
610
|
+
initialContentOffset,
|
|
611
|
+
recycleItems,
|
|
612
|
+
ItemSeparatorComponent,
|
|
613
|
+
alignItemsAtEnd,
|
|
614
|
+
waitForInitialLayout,
|
|
615
|
+
onScroll: onScroll2,
|
|
616
|
+
onLayout,
|
|
617
|
+
ListHeaderComponent,
|
|
618
|
+
ListHeaderComponentStyle,
|
|
619
|
+
ListFooterComponent,
|
|
620
|
+
ListFooterComponentStyle,
|
|
621
|
+
ListEmptyComponent,
|
|
622
|
+
getRenderedItem: getRenderedItem2,
|
|
623
|
+
updateItemSize: updateItemSize2,
|
|
624
|
+
refScrollView,
|
|
625
|
+
maintainVisibleContentPosition,
|
|
626
|
+
renderScrollComponent,
|
|
627
|
+
scrollAdjustHandler,
|
|
628
|
+
onLayoutHeader,
|
|
629
|
+
...rest
|
|
630
|
+
}) {
|
|
631
|
+
const ctx = useStateContext();
|
|
632
|
+
const { onLayout: onLayoutHeaderSync, ref: refHeader } = useSyncLayout({
|
|
633
|
+
onChange: onLayoutHeader
|
|
634
|
+
});
|
|
635
|
+
const ScrollComponent = renderScrollComponent ? useMemo(
|
|
636
|
+
() => React3.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
|
|
637
|
+
[renderScrollComponent]
|
|
638
|
+
) : ScrollView;
|
|
639
|
+
React3.useEffect(() => {
|
|
640
|
+
if (canRender) {
|
|
641
|
+
setTimeout(() => {
|
|
642
|
+
scrollAdjustHandler.setMounted();
|
|
643
|
+
}, 0);
|
|
644
|
+
}
|
|
645
|
+
}, [canRender]);
|
|
646
|
+
return /* @__PURE__ */ React3.createElement(
|
|
647
|
+
ScrollComponent,
|
|
648
|
+
{
|
|
649
|
+
...rest,
|
|
650
|
+
style,
|
|
651
|
+
maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
|
|
652
|
+
contentContainerStyle: [
|
|
653
|
+
contentContainerStyle,
|
|
654
|
+
horizontal ? {
|
|
655
|
+
height: "100%"
|
|
656
|
+
} : {}
|
|
657
|
+
],
|
|
658
|
+
onScroll: onScroll2,
|
|
659
|
+
onLayout,
|
|
660
|
+
horizontal,
|
|
661
|
+
contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
|
|
662
|
+
ref: refScrollView
|
|
663
|
+
},
|
|
664
|
+
maintainVisibleContentPosition && /* @__PURE__ */ React3.createElement(ScrollAdjust, null),
|
|
665
|
+
ENABLE_DEVMODE ? /* @__PURE__ */ React3.createElement(PaddingDevMode, null) : /* @__PURE__ */ React3.createElement(Padding, null),
|
|
666
|
+
ListHeaderComponent && /* @__PURE__ */ React3.createElement(View, { style: ListHeaderComponentStyle, onLayout: onLayoutHeaderSync, ref: refHeader }, getComponent(ListHeaderComponent)),
|
|
667
|
+
ListEmptyComponent && getComponent(ListEmptyComponent),
|
|
668
|
+
canRender && /* @__PURE__ */ React3.createElement(
|
|
669
|
+
Containers,
|
|
670
|
+
{
|
|
671
|
+
horizontal,
|
|
672
|
+
recycleItems,
|
|
673
|
+
waitForInitialLayout,
|
|
674
|
+
getRenderedItem: getRenderedItem2,
|
|
675
|
+
ItemSeparatorComponent,
|
|
676
|
+
updateItemSize: updateItemSize2
|
|
677
|
+
}
|
|
678
|
+
),
|
|
679
|
+
ListFooterComponent && /* @__PURE__ */ React3.createElement(
|
|
680
|
+
View,
|
|
681
|
+
{
|
|
682
|
+
style: ListFooterComponentStyle,
|
|
683
|
+
onLayout: (event) => {
|
|
684
|
+
const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
|
|
685
|
+
set$(ctx, "footerSize", size);
|
|
686
|
+
}
|
|
687
|
+
},
|
|
688
|
+
getComponent(ListFooterComponent)
|
|
689
|
+
)
|
|
690
|
+
);
|
|
691
|
+
});
|
|
692
|
+
|
|
693
|
+
// src/ScrollAdjustHandler.ts
|
|
694
|
+
var ScrollAdjustHandler = class {
|
|
695
|
+
constructor(ctx) {
|
|
696
|
+
this.appliedAdjust = 0;
|
|
697
|
+
this.mounted = false;
|
|
698
|
+
this.context = ctx;
|
|
699
|
+
}
|
|
700
|
+
requestAdjust(add) {
|
|
701
|
+
const oldAdjustTop = peek$(this.context, "scrollAdjust") || 0;
|
|
702
|
+
this.appliedAdjust = add + oldAdjustTop;
|
|
703
|
+
const set = () => set$(this.context, "scrollAdjust", this.appliedAdjust);
|
|
704
|
+
if (this.mounted) {
|
|
705
|
+
set();
|
|
706
|
+
} else {
|
|
707
|
+
requestAnimationFrame(set);
|
|
708
|
+
}
|
|
709
|
+
}
|
|
710
|
+
setMounted() {
|
|
711
|
+
this.mounted = true;
|
|
712
|
+
}
|
|
713
|
+
};
|
|
714
|
+
|
|
715
|
+
// src/getId.ts
|
|
716
|
+
function getId(state, index) {
|
|
717
|
+
const { data, keyExtractor } = state.props;
|
|
718
|
+
if (!data) {
|
|
719
|
+
return "";
|
|
720
|
+
}
|
|
721
|
+
const ret = index < data.length ? keyExtractor ? keyExtractor(data[index], index) : index : null;
|
|
722
|
+
const id = ret;
|
|
723
|
+
state.idCache.set(index, id);
|
|
724
|
+
return id;
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
// src/calculateOffsetForIndex.ts
|
|
728
|
+
function calculateOffsetForIndex(ctx, state, index) {
|
|
729
|
+
let position = 0;
|
|
730
|
+
if (index !== void 0) {
|
|
731
|
+
position = (state == null ? void 0 : state.positions.get(getId(state, index))) || 0;
|
|
732
|
+
}
|
|
733
|
+
const paddingTop = peek$(ctx, "stylePaddingTop");
|
|
734
|
+
if (paddingTop) {
|
|
735
|
+
position += paddingTop;
|
|
736
|
+
}
|
|
737
|
+
const headerSize = peek$(ctx, "headerSize");
|
|
738
|
+
if (headerSize) {
|
|
739
|
+
position += headerSize;
|
|
740
|
+
}
|
|
741
|
+
return position;
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
// src/getItemSize.ts
|
|
745
|
+
function getItemSize(state, key, index, data, useAverageSize) {
|
|
746
|
+
const {
|
|
747
|
+
sizesKnown,
|
|
748
|
+
sizes,
|
|
749
|
+
scrollingTo,
|
|
750
|
+
props: { estimatedItemSize, getEstimatedItemSize }
|
|
751
|
+
} = state;
|
|
752
|
+
const sizeKnown = sizesKnown.get(key);
|
|
753
|
+
if (sizeKnown !== void 0) {
|
|
754
|
+
return sizeKnown;
|
|
755
|
+
}
|
|
756
|
+
let size;
|
|
757
|
+
if (IsNewArchitecture && useAverageSize !== void 0 && sizeKnown === void 0 && !getEstimatedItemSize && !scrollingTo) {
|
|
758
|
+
size = useAverageSize;
|
|
759
|
+
}
|
|
760
|
+
if (size === void 0) {
|
|
761
|
+
size = sizes.get(key);
|
|
762
|
+
if (size !== void 0) {
|
|
763
|
+
return size;
|
|
764
|
+
}
|
|
765
|
+
}
|
|
766
|
+
if (size === void 0) {
|
|
767
|
+
size = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize;
|
|
768
|
+
}
|
|
769
|
+
sizes.set(key, size);
|
|
770
|
+
return size;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
// src/calculateOffsetWithOffsetPosition.ts
|
|
774
|
+
function calculateOffsetWithOffsetPosition(state, offsetParam, params) {
|
|
775
|
+
const { index, viewOffset, viewPosition } = params;
|
|
776
|
+
let offset = offsetParam;
|
|
777
|
+
if (viewOffset) {
|
|
778
|
+
offset -= viewOffset;
|
|
779
|
+
}
|
|
780
|
+
if (viewPosition !== void 0 && index !== void 0) {
|
|
781
|
+
offset -= viewPosition * (state.scrollLength - getItemSize(state, getId(state, index), index, state.props.data[index]));
|
|
782
|
+
}
|
|
783
|
+
return offset;
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
// src/checkAllSizesKnown.ts
|
|
787
|
+
function checkAllSizesKnown(state) {
|
|
788
|
+
const { startBuffered, endBuffered, sizesKnown } = state;
|
|
789
|
+
if (endBuffered !== null) {
|
|
790
|
+
let areAllKnown = true;
|
|
791
|
+
for (let i = startBuffered; areAllKnown && i <= endBuffered; i++) {
|
|
792
|
+
const key = getId(state, i);
|
|
793
|
+
areAllKnown && (areAllKnown = sizesKnown.has(key));
|
|
794
|
+
}
|
|
795
|
+
return areAllKnown;
|
|
796
|
+
}
|
|
797
|
+
return false;
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
// src/findAvailableContainers.ts
|
|
801
|
+
function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffered, pendingRemoval) {
|
|
802
|
+
const numContainers = peek$(ctx, "numContainers");
|
|
803
|
+
const result = [];
|
|
804
|
+
const availableContainers = [];
|
|
805
|
+
for (let u = 0; u < numContainers; u++) {
|
|
806
|
+
const key = peek$(ctx, `containerItemKey${u}`);
|
|
807
|
+
let isOk = key === void 0;
|
|
808
|
+
if (!isOk) {
|
|
809
|
+
const index = pendingRemoval.indexOf(u);
|
|
810
|
+
if (index !== -1) {
|
|
811
|
+
pendingRemoval.splice(index, 1);
|
|
812
|
+
isOk = true;
|
|
813
|
+
}
|
|
814
|
+
}
|
|
815
|
+
if (isOk) {
|
|
816
|
+
result.push(u);
|
|
817
|
+
if (result.length >= numNeeded) {
|
|
818
|
+
return result;
|
|
819
|
+
}
|
|
820
|
+
}
|
|
821
|
+
}
|
|
822
|
+
for (let u = 0; u < numContainers; u++) {
|
|
823
|
+
const key = peek$(ctx, `containerItemKey${u}`);
|
|
824
|
+
if (key === void 0) continue;
|
|
825
|
+
const index = state.indexByKey.get(key);
|
|
826
|
+
if (index < startBuffered) {
|
|
827
|
+
availableContainers.push({ index: u, distance: startBuffered - index });
|
|
828
|
+
} else if (index > endBuffered) {
|
|
829
|
+
availableContainers.push({ index: u, distance: index - endBuffered });
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
const remaining = numNeeded - result.length;
|
|
833
|
+
if (remaining > 0) {
|
|
834
|
+
if (availableContainers.length > 0) {
|
|
835
|
+
if (availableContainers.length > remaining) {
|
|
836
|
+
availableContainers.sort(comparatorByDistance);
|
|
837
|
+
availableContainers.length = remaining;
|
|
838
|
+
}
|
|
839
|
+
for (const container of availableContainers) {
|
|
840
|
+
result.push(container.index);
|
|
841
|
+
}
|
|
842
|
+
}
|
|
843
|
+
const stillNeeded = numNeeded - result.length;
|
|
844
|
+
if (stillNeeded > 0) {
|
|
845
|
+
for (let i = 0; i < stillNeeded; i++) {
|
|
846
|
+
result.push(numContainers + i);
|
|
847
|
+
}
|
|
848
|
+
if (__DEV__ && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
|
|
849
|
+
console.warn(
|
|
850
|
+
"[legend-list] No unused container available, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio.",
|
|
851
|
+
{
|
|
852
|
+
debugInfo: {
|
|
853
|
+
numContainers,
|
|
854
|
+
numNeeded,
|
|
855
|
+
stillNeeded,
|
|
856
|
+
numContainersPooled: peek$(ctx, "numContainersPooled")
|
|
857
|
+
}
|
|
858
|
+
}
|
|
859
|
+
);
|
|
860
|
+
}
|
|
861
|
+
}
|
|
862
|
+
}
|
|
863
|
+
return result.sort(comparatorDefault);
|
|
864
|
+
}
|
|
865
|
+
function comparatorByDistance(a, b) {
|
|
866
|
+
return b.distance - a.distance;
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
// src/getScrollVelocity.ts
|
|
870
|
+
var getScrollVelocity = (state) => {
|
|
871
|
+
const { scrollHistory } = state;
|
|
872
|
+
let velocity = 0;
|
|
873
|
+
if (scrollHistory.length >= 1) {
|
|
874
|
+
const newest = scrollHistory[scrollHistory.length - 1];
|
|
875
|
+
let oldest;
|
|
876
|
+
let start = 0;
|
|
877
|
+
for (let i = 0; i < scrollHistory.length - 1; i++) {
|
|
878
|
+
const entry = scrollHistory[i];
|
|
879
|
+
const nextEntry = scrollHistory[i + 1];
|
|
880
|
+
if (i > 0) {
|
|
881
|
+
const prevEntry = scrollHistory[i - 1];
|
|
882
|
+
const prevDirection = entry.scroll - prevEntry.scroll;
|
|
883
|
+
const currentDirection = nextEntry.scroll - entry.scroll;
|
|
884
|
+
if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
|
|
885
|
+
start = i;
|
|
886
|
+
break;
|
|
887
|
+
}
|
|
888
|
+
}
|
|
889
|
+
}
|
|
890
|
+
for (let i = start; i < scrollHistory.length - 1; i++) {
|
|
891
|
+
const entry = scrollHistory[i];
|
|
892
|
+
if (newest.time - entry.time <= 1e3) {
|
|
893
|
+
oldest = entry;
|
|
894
|
+
break;
|
|
895
|
+
}
|
|
896
|
+
}
|
|
897
|
+
if (oldest) {
|
|
898
|
+
const scrollDiff = newest.scroll - oldest.scroll;
|
|
899
|
+
const timeDiff = newest.time - oldest.time;
|
|
900
|
+
velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
|
|
901
|
+
}
|
|
902
|
+
}
|
|
903
|
+
return velocity;
|
|
904
|
+
};
|
|
905
|
+
|
|
906
|
+
// src/requestAdjust.ts
|
|
907
|
+
function requestAdjust(ctx, state, positionDiff) {
|
|
908
|
+
if (Math.abs(positionDiff) > 0.1) {
|
|
909
|
+
const doit = () => {
|
|
910
|
+
state.scrollAdjustHandler.requestAdjust(positionDiff);
|
|
911
|
+
};
|
|
912
|
+
state.scroll += positionDiff;
|
|
913
|
+
state.scrollForNextCalculateItemsInView = void 0;
|
|
914
|
+
const didLayout = peek$(ctx, "containersDidLayout");
|
|
915
|
+
if (didLayout) {
|
|
916
|
+
doit();
|
|
917
|
+
const threshold = state.scroll - positionDiff / 2;
|
|
918
|
+
if (!state.ignoreScrollFromMVCP) {
|
|
919
|
+
state.ignoreScrollFromMVCP = {};
|
|
920
|
+
}
|
|
921
|
+
if (positionDiff > 0) {
|
|
922
|
+
state.ignoreScrollFromMVCP.lt = threshold;
|
|
923
|
+
} else {
|
|
924
|
+
state.ignoreScrollFromMVCP.gt = threshold;
|
|
925
|
+
}
|
|
926
|
+
if (state.ignoreScrollFromMVCPTimeout) {
|
|
927
|
+
clearTimeout(state.ignoreScrollFromMVCPTimeout);
|
|
928
|
+
}
|
|
929
|
+
state.ignoreScrollFromMVCPTimeout = setTimeout(() => {
|
|
930
|
+
state.ignoreScrollFromMVCP = void 0;
|
|
931
|
+
}, 100);
|
|
932
|
+
} else {
|
|
933
|
+
requestAnimationFrame(doit);
|
|
934
|
+
}
|
|
935
|
+
}
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
// src/prepareMVCP.ts
|
|
939
|
+
function prepareMVCP(ctx, state) {
|
|
940
|
+
const {
|
|
941
|
+
positions,
|
|
942
|
+
scrollingTo,
|
|
943
|
+
props: { maintainVisibleContentPosition }
|
|
944
|
+
} = state;
|
|
945
|
+
let prevPosition;
|
|
946
|
+
let targetId;
|
|
947
|
+
let targetIndex;
|
|
948
|
+
const scrollTarget = scrollingTo == null ? void 0 : scrollingTo.index;
|
|
949
|
+
if (maintainVisibleContentPosition) {
|
|
950
|
+
const indexByKey = state.indexByKey;
|
|
951
|
+
if (scrollTarget !== void 0) {
|
|
952
|
+
targetId = getId(state, scrollTarget);
|
|
953
|
+
targetIndex = scrollTarget;
|
|
954
|
+
} else if (state.idsInView.length > 0 && peek$(ctx, "containersDidLayout")) {
|
|
955
|
+
targetId = state.idsInView.find((id) => indexByKey.get(id) !== void 0);
|
|
956
|
+
targetIndex = indexByKey.get(targetId);
|
|
957
|
+
}
|
|
958
|
+
if (targetId !== void 0 && targetIndex !== void 0) {
|
|
959
|
+
prevPosition = positions.get(targetId);
|
|
960
|
+
}
|
|
961
|
+
}
|
|
962
|
+
return () => {
|
|
963
|
+
if (targetId !== void 0 && prevPosition !== void 0) {
|
|
964
|
+
const newPosition = positions.get(targetId);
|
|
965
|
+
if (newPosition !== void 0) {
|
|
966
|
+
const positionDiff = newPosition - prevPosition;
|
|
967
|
+
if (Math.abs(positionDiff) > 0.1) {
|
|
968
|
+
requestAdjust(ctx, state, positionDiff);
|
|
969
|
+
}
|
|
970
|
+
}
|
|
971
|
+
}
|
|
972
|
+
};
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
// src/checkThreshold.ts
|
|
976
|
+
var checkThreshold = (distance, atThreshold, threshold, isReached, isBlockedByTimer, onReached, blockTimer) => {
|
|
977
|
+
const distanceAbs = Math.abs(distance);
|
|
978
|
+
const isAtThreshold = atThreshold || distanceAbs < threshold;
|
|
979
|
+
if (!isReached && !isBlockedByTimer) {
|
|
980
|
+
if (isAtThreshold) {
|
|
981
|
+
onReached == null ? void 0 : onReached(distance);
|
|
982
|
+
blockTimer == null ? void 0 : blockTimer(true);
|
|
983
|
+
setTimeout(() => {
|
|
984
|
+
blockTimer == null ? void 0 : blockTimer(false);
|
|
985
|
+
}, 700);
|
|
986
|
+
return true;
|
|
987
|
+
}
|
|
988
|
+
} else {
|
|
989
|
+
if (distance >= 1.3 * threshold) {
|
|
990
|
+
return false;
|
|
991
|
+
}
|
|
992
|
+
}
|
|
993
|
+
return isReached;
|
|
994
|
+
};
|
|
995
|
+
|
|
996
|
+
// src/checkAtBottom.ts
|
|
997
|
+
function checkAtBottom(ctx, state) {
|
|
998
|
+
if (!state) {
|
|
999
|
+
return;
|
|
1000
|
+
}
|
|
1001
|
+
const {
|
|
1002
|
+
queuedInitialLayout,
|
|
1003
|
+
scrollLength,
|
|
1004
|
+
scroll,
|
|
1005
|
+
maintainingScrollAtEnd,
|
|
1006
|
+
props: { maintainScrollAtEndThreshold, onEndReachedThreshold }
|
|
1007
|
+
} = state;
|
|
1008
|
+
const contentSize = getContentSize(ctx);
|
|
1009
|
+
if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
|
|
1010
|
+
const distanceFromEnd = contentSize - scroll - scrollLength;
|
|
1011
|
+
const isContentLess = contentSize < scrollLength;
|
|
1012
|
+
state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
|
|
1013
|
+
state.isEndReached = checkThreshold(
|
|
1014
|
+
distanceFromEnd,
|
|
1015
|
+
isContentLess,
|
|
1016
|
+
onEndReachedThreshold * scrollLength,
|
|
1017
|
+
state.isEndReached,
|
|
1018
|
+
state.endReachedBlockedByTimer,
|
|
1019
|
+
(distance) => {
|
|
1020
|
+
var _a, _b;
|
|
1021
|
+
return (_b = (_a = state.props).onEndReached) == null ? void 0 : _b.call(_a, { distanceFromEnd: distance });
|
|
1022
|
+
},
|
|
1023
|
+
(block) => {
|
|
1024
|
+
state.endReachedBlockedByTimer = block;
|
|
1025
|
+
}
|
|
1026
|
+
);
|
|
1027
|
+
}
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
// src/finishScrollTo.ts
|
|
1031
|
+
var finishScrollTo = (state) => {
|
|
1032
|
+
if (state) {
|
|
1033
|
+
state.scrollingTo = void 0;
|
|
1034
|
+
state.scrollHistory.length = 0;
|
|
1035
|
+
}
|
|
1036
|
+
};
|
|
1037
|
+
|
|
1038
|
+
// src/scrollTo.ts
|
|
1039
|
+
function scrollTo(state, params = {}) {
|
|
1040
|
+
var _a;
|
|
1041
|
+
const { animated } = params;
|
|
1042
|
+
const {
|
|
1043
|
+
refScroller,
|
|
1044
|
+
props: { horizontal }
|
|
1045
|
+
} = state;
|
|
1046
|
+
const offset = calculateOffsetWithOffsetPosition(state, params.offset, params);
|
|
1047
|
+
state.scrollHistory.length = 0;
|
|
1048
|
+
state.scrollingTo = params;
|
|
1049
|
+
state.scrollPending = offset;
|
|
1050
|
+
(_a = refScroller.current) == null ? void 0 : _a.scrollTo({
|
|
1051
|
+
x: horizontal ? offset : 0,
|
|
1052
|
+
y: horizontal ? 0 : offset,
|
|
1053
|
+
animated: !!animated
|
|
1054
|
+
});
|
|
1055
|
+
if (!animated) {
|
|
1056
|
+
state.scroll = offset;
|
|
1057
|
+
setTimeout(() => finishScrollTo(state), 100);
|
|
1058
|
+
}
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1061
|
+
// src/scrollToIndex.ts
|
|
1062
|
+
function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, viewPosition }) {
|
|
1063
|
+
if (index >= state.props.data.length) {
|
|
1064
|
+
index = state.props.data.length - 1;
|
|
1065
|
+
} else if (index < 0) {
|
|
1066
|
+
index = 0;
|
|
1067
|
+
}
|
|
1068
|
+
const firstIndexOffset = calculateOffsetForIndex(ctx, state, index);
|
|
1069
|
+
const isLast = index === state.props.data.length - 1;
|
|
1070
|
+
if (isLast && viewPosition === void 0) {
|
|
1071
|
+
viewPosition = 1;
|
|
1072
|
+
}
|
|
1073
|
+
const firstIndexScrollPostion = firstIndexOffset - viewOffset;
|
|
1074
|
+
state.scrollForNextCalculateItemsInView = void 0;
|
|
1075
|
+
scrollTo(state, {
|
|
1076
|
+
offset: firstIndexScrollPostion,
|
|
1077
|
+
animated,
|
|
1078
|
+
index,
|
|
1079
|
+
viewPosition: viewPosition != null ? viewPosition : 0,
|
|
1080
|
+
viewOffset
|
|
1081
|
+
});
|
|
1082
|
+
}
|
|
1083
|
+
|
|
1084
|
+
// src/setDidLayout.ts
|
|
1085
|
+
function setDidLayout(ctx, state) {
|
|
1086
|
+
const {
|
|
1087
|
+
loadStartTime,
|
|
1088
|
+
initialScroll,
|
|
1089
|
+
props: { onLoad }
|
|
1090
|
+
} = state;
|
|
1091
|
+
state.queuedInitialLayout = true;
|
|
1092
|
+
checkAtBottom(ctx, state);
|
|
1093
|
+
if (!IsNewArchitecture && initialScroll) {
|
|
1094
|
+
scrollToIndex(ctx, state, { ...initialScroll, animated: false });
|
|
1095
|
+
}
|
|
1096
|
+
set$(ctx, "containersDidLayout", true);
|
|
1097
|
+
if (onLoad) {
|
|
1098
|
+
onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
|
|
1099
|
+
}
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
// src/setPaddingTop.ts
|
|
1103
|
+
function setPaddingTop(ctx, { stylePaddingTop, alignItemsPaddingTop }) {
|
|
1104
|
+
if (stylePaddingTop !== void 0) {
|
|
1105
|
+
const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
|
|
1106
|
+
if (stylePaddingTop < prevStylePaddingTop) {
|
|
1107
|
+
const prevTotalSize = peek$(ctx, "totalSize") || 0;
|
|
1108
|
+
set$(ctx, "totalSize", prevTotalSize + prevStylePaddingTop);
|
|
1109
|
+
setTimeout(() => {
|
|
1110
|
+
set$(ctx, "totalSize", prevTotalSize);
|
|
1111
|
+
}, 16);
|
|
1112
|
+
}
|
|
1113
|
+
set$(ctx, "stylePaddingTop", stylePaddingTop);
|
|
1114
|
+
}
|
|
1115
|
+
if (alignItemsPaddingTop !== void 0) {
|
|
1116
|
+
set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
|
|
1117
|
+
}
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
// src/updateAlignItemsPaddingTop.ts
|
|
1121
|
+
function updateAlignItemsPaddingTop(ctx, state) {
|
|
1122
|
+
const {
|
|
1123
|
+
scrollLength,
|
|
1124
|
+
props: { alignItemsAtEnd, data }
|
|
1125
|
+
} = state;
|
|
1126
|
+
if (alignItemsAtEnd) {
|
|
1127
|
+
let alignItemsPaddingTop = 0;
|
|
1128
|
+
if ((data == null ? void 0 : data.length) > 0) {
|
|
1129
|
+
const contentSize = getContentSize(ctx);
|
|
1130
|
+
alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
|
|
1131
|
+
}
|
|
1132
|
+
setPaddingTop(ctx, { alignItemsPaddingTop });
|
|
1133
|
+
}
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
// src/updateTotalSize.ts
|
|
1137
|
+
function updateTotalSize(ctx, state) {
|
|
1138
|
+
const {
|
|
1139
|
+
positions,
|
|
1140
|
+
props: { data }
|
|
1141
|
+
} = state;
|
|
1142
|
+
if (data.length === 0) {
|
|
1143
|
+
addTotalSize(ctx, state, null, 0);
|
|
1144
|
+
} else {
|
|
1145
|
+
const lastId = getId(state, data.length - 1);
|
|
1146
|
+
if (lastId !== void 0) {
|
|
1147
|
+
const lastPosition = positions.get(lastId);
|
|
1148
|
+
if (lastPosition !== void 0) {
|
|
1149
|
+
const lastSize = getItemSize(state, lastId, data.length - 1, data[data.length - 1]);
|
|
1150
|
+
if (lastSize !== void 0) {
|
|
1151
|
+
const totalSize = lastPosition + lastSize;
|
|
1152
|
+
addTotalSize(ctx, state, null, totalSize);
|
|
1153
|
+
}
|
|
1154
|
+
}
|
|
1155
|
+
}
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
function addTotalSize(ctx, state, key, add) {
|
|
1159
|
+
const { alignItemsAtEnd } = state.props;
|
|
1160
|
+
{
|
|
1161
|
+
state.totalSize = add;
|
|
1162
|
+
}
|
|
1163
|
+
set$(ctx, "totalSize", state.totalSize);
|
|
1164
|
+
if (alignItemsAtEnd) {
|
|
1165
|
+
updateAlignItemsPaddingTop(ctx, state);
|
|
1166
|
+
}
|
|
1167
|
+
}
|
|
1168
|
+
|
|
1169
|
+
// src/updateAllPositions.ts
|
|
1170
|
+
function updateAllPositions(ctx, state, dataChanged) {
|
|
1171
|
+
var _a, _b, _c, _d, _e;
|
|
1172
|
+
const { averageSizes, columns, indexByKey, positions, firstFullyOnScreenIndex, idCache, sizesKnown } = state;
|
|
1173
|
+
const data = state.props.data;
|
|
1174
|
+
const numColumns = peek$(ctx, "numColumns");
|
|
1175
|
+
const indexByKeyForChecking = __DEV__ ? /* @__PURE__ */ new Map() : void 0;
|
|
1176
|
+
const scrollVelocity = getScrollVelocity(state);
|
|
1177
|
+
if (dataChanged) {
|
|
1178
|
+
indexByKey.clear();
|
|
1179
|
+
idCache.clear();
|
|
1180
|
+
}
|
|
1181
|
+
const itemType = "";
|
|
1182
|
+
let averageSize = (_a = averageSizes[itemType]) == null ? void 0 : _a.avg;
|
|
1183
|
+
if (averageSize !== void 0) {
|
|
1184
|
+
averageSize = roundSize(averageSize);
|
|
1185
|
+
}
|
|
1186
|
+
const shouldUseBackwards = !dataChanged && scrollVelocity < 0 && firstFullyOnScreenIndex > 5 && firstFullyOnScreenIndex < data.length;
|
|
1187
|
+
if (shouldUseBackwards && firstFullyOnScreenIndex !== void 0) {
|
|
1188
|
+
const anchorId = getId(state, firstFullyOnScreenIndex);
|
|
1189
|
+
const anchorPosition = positions.get(anchorId);
|
|
1190
|
+
if (anchorPosition !== void 0) {
|
|
1191
|
+
let currentRowTop2 = anchorPosition;
|
|
1192
|
+
let maxSizeInRow2 = 0;
|
|
1193
|
+
let bailout = false;
|
|
1194
|
+
for (let i = firstFullyOnScreenIndex - 1; i >= 0; i--) {
|
|
1195
|
+
const id = (_b = idCache.get(i)) != null ? _b : getId(state, i);
|
|
1196
|
+
const size = (_c = sizesKnown.get(id)) != null ? _c : getItemSize(state, id, i, data[i], averageSize);
|
|
1197
|
+
const itemColumn = columns.get(id);
|
|
1198
|
+
maxSizeInRow2 = Math.max(maxSizeInRow2, size);
|
|
1199
|
+
if (itemColumn === 1) {
|
|
1200
|
+
currentRowTop2 -= maxSizeInRow2;
|
|
1201
|
+
maxSizeInRow2 = 0;
|
|
1202
|
+
}
|
|
1203
|
+
if (currentRowTop2 < -2e3) {
|
|
1204
|
+
bailout = true;
|
|
1205
|
+
break;
|
|
1206
|
+
}
|
|
1207
|
+
positions.set(id, currentRowTop2);
|
|
1208
|
+
}
|
|
1209
|
+
if (!bailout) {
|
|
1210
|
+
updateTotalSize(ctx, state);
|
|
1211
|
+
return;
|
|
1212
|
+
}
|
|
1213
|
+
}
|
|
1214
|
+
}
|
|
1215
|
+
let currentRowTop = 0;
|
|
1216
|
+
let column = 1;
|
|
1217
|
+
let maxSizeInRow = 0;
|
|
1218
|
+
const hasColumns = numColumns > 1;
|
|
1219
|
+
const needsIndexByKey = dataChanged || indexByKey.size === 0;
|
|
1220
|
+
const dataLength = data.length;
|
|
1221
|
+
for (let i = 0; i < dataLength; i++) {
|
|
1222
|
+
const id = (_d = idCache.get(i)) != null ? _d : getId(state, i);
|
|
1223
|
+
const size = (_e = sizesKnown.get(id)) != null ? _e : getItemSize(state, id, i, data[i], averageSize);
|
|
1224
|
+
if (__DEV__ && needsIndexByKey) {
|
|
1225
|
+
if (indexByKeyForChecking.has(id)) {
|
|
1226
|
+
console.error(
|
|
1227
|
+
`[legend-list] Error: Detected overlapping key (${id}) which causes missing items and gaps and other terrrible things. Check that keyExtractor returns unique values.`
|
|
1228
|
+
);
|
|
1229
|
+
}
|
|
1230
|
+
indexByKeyForChecking.set(id, i);
|
|
1231
|
+
}
|
|
1232
|
+
positions.set(id, currentRowTop);
|
|
1233
|
+
if (needsIndexByKey) {
|
|
1234
|
+
indexByKey.set(id, i);
|
|
1235
|
+
}
|
|
1236
|
+
columns.set(id, column);
|
|
1237
|
+
if (hasColumns) {
|
|
1238
|
+
if (size > maxSizeInRow) {
|
|
1239
|
+
maxSizeInRow = size;
|
|
1240
|
+
}
|
|
1241
|
+
column++;
|
|
1242
|
+
if (column > numColumns) {
|
|
1243
|
+
currentRowTop += maxSizeInRow;
|
|
1244
|
+
column = 1;
|
|
1245
|
+
maxSizeInRow = 0;
|
|
1246
|
+
}
|
|
1247
|
+
} else {
|
|
1248
|
+
currentRowTop += size;
|
|
1249
|
+
}
|
|
1250
|
+
}
|
|
1251
|
+
updateTotalSize(ctx, state);
|
|
1252
|
+
}
|
|
1253
|
+
|
|
1254
|
+
// src/viewability.ts
|
|
1255
|
+
var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
|
|
1256
|
+
function setupViewability(props) {
|
|
1257
|
+
let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
|
|
1258
|
+
if (viewabilityConfig || onViewableItemsChanged) {
|
|
1259
|
+
viewabilityConfigCallbackPairs = [
|
|
1260
|
+
...viewabilityConfigCallbackPairs || [],
|
|
1261
|
+
{
|
|
1262
|
+
viewabilityConfig: viewabilityConfig || {
|
|
1263
|
+
viewAreaCoveragePercentThreshold: 0
|
|
1264
|
+
},
|
|
1265
|
+
onViewableItemsChanged
|
|
1266
|
+
}
|
|
1267
|
+
];
|
|
1268
|
+
}
|
|
1269
|
+
if (viewabilityConfigCallbackPairs) {
|
|
1270
|
+
for (const pair of viewabilityConfigCallbackPairs) {
|
|
1271
|
+
mapViewabilityConfigCallbackPairs.set(pair.viewabilityConfig.id, {
|
|
1272
|
+
viewableItems: [],
|
|
1273
|
+
start: -1,
|
|
1274
|
+
end: -1,
|
|
1275
|
+
previousStart: -1,
|
|
1276
|
+
previousEnd: -1
|
|
1277
|
+
});
|
|
1278
|
+
}
|
|
1279
|
+
}
|
|
1280
|
+
return viewabilityConfigCallbackPairs;
|
|
1281
|
+
}
|
|
1282
|
+
function updateViewableItems(state, ctx, viewabilityConfigCallbackPairs, scrollSize, start, end) {
|
|
1283
|
+
for (const viewabilityConfigCallbackPair of viewabilityConfigCallbackPairs) {
|
|
1284
|
+
const viewabilityState = mapViewabilityConfigCallbackPairs.get(
|
|
1285
|
+
viewabilityConfigCallbackPair.viewabilityConfig.id
|
|
1286
|
+
);
|
|
1287
|
+
viewabilityState.start = start;
|
|
1288
|
+
viewabilityState.end = end;
|
|
1289
|
+
if (viewabilityConfigCallbackPair.viewabilityConfig.minimumViewTime) {
|
|
1290
|
+
const timer = setTimeout(() => {
|
|
1291
|
+
state.timeouts.delete(timer);
|
|
1292
|
+
updateViewableItemsWithConfig(state.data, viewabilityConfigCallbackPair, state, ctx, scrollSize);
|
|
1293
|
+
}, viewabilityConfigCallbackPair.viewabilityConfig.minimumViewTime);
|
|
1294
|
+
state.timeouts.add(timer);
|
|
1295
|
+
} else {
|
|
1296
|
+
updateViewableItemsWithConfig(state.data, viewabilityConfigCallbackPair, state, ctx, scrollSize);
|
|
1297
|
+
}
|
|
1298
|
+
}
|
|
1299
|
+
}
|
|
1300
|
+
function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, state, ctx, scrollSize) {
|
|
1301
|
+
const { viewabilityConfig, onViewableItemsChanged } = viewabilityConfigCallbackPair;
|
|
1302
|
+
const configId = viewabilityConfig.id;
|
|
1303
|
+
const viewabilityState = mapViewabilityConfigCallbackPairs.get(configId);
|
|
1304
|
+
const { viewableItems: previousViewableItems, start, end } = viewabilityState;
|
|
1305
|
+
const viewabilityTokens = /* @__PURE__ */ new Map();
|
|
1306
|
+
for (const [containerId, value] of ctx.mapViewabilityAmountValues) {
|
|
1307
|
+
viewabilityTokens.set(
|
|
1308
|
+
containerId,
|
|
1309
|
+
computeViewability(
|
|
1310
|
+
state,
|
|
1311
|
+
ctx,
|
|
1312
|
+
viewabilityConfig,
|
|
1313
|
+
containerId,
|
|
1314
|
+
value.key,
|
|
1315
|
+
scrollSize,
|
|
1316
|
+
value.item,
|
|
1317
|
+
value.index
|
|
1318
|
+
)
|
|
1319
|
+
);
|
|
1320
|
+
}
|
|
1321
|
+
const changed = [];
|
|
1322
|
+
if (previousViewableItems) {
|
|
1323
|
+
for (const viewToken of previousViewableItems) {
|
|
1324
|
+
const containerId = findContainerId(ctx, viewToken.key);
|
|
1325
|
+
if (!isViewable(
|
|
1326
|
+
state,
|
|
1327
|
+
ctx,
|
|
1328
|
+
viewabilityConfig,
|
|
1329
|
+
containerId,
|
|
1330
|
+
viewToken.key,
|
|
1331
|
+
scrollSize,
|
|
1332
|
+
viewToken.item,
|
|
1333
|
+
viewToken.index
|
|
1334
|
+
)) {
|
|
1335
|
+
viewToken.isViewable = false;
|
|
1336
|
+
changed.push(viewToken);
|
|
1337
|
+
}
|
|
1338
|
+
}
|
|
1339
|
+
}
|
|
1340
|
+
const viewableItems = [];
|
|
1341
|
+
for (let i = start; i <= end; i++) {
|
|
1342
|
+
const item = data[i];
|
|
1343
|
+
if (item) {
|
|
1344
|
+
const key = getId(state, i);
|
|
1345
|
+
const containerId = findContainerId(ctx, key);
|
|
1346
|
+
if (isViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, i)) {
|
|
1347
|
+
const viewToken = {
|
|
1348
|
+
item,
|
|
1349
|
+
key,
|
|
1350
|
+
index: i,
|
|
1351
|
+
isViewable: true,
|
|
1352
|
+
containerId
|
|
1353
|
+
};
|
|
1354
|
+
viewableItems.push(viewToken);
|
|
1355
|
+
if (!(previousViewableItems == null ? void 0 : previousViewableItems.find((v) => v.key === viewToken.key))) {
|
|
1356
|
+
changed.push(viewToken);
|
|
1357
|
+
}
|
|
1358
|
+
}
|
|
1359
|
+
}
|
|
1360
|
+
}
|
|
1361
|
+
Object.assign(viewabilityState, {
|
|
1362
|
+
viewableItems,
|
|
1363
|
+
previousStart: start,
|
|
1364
|
+
previousEnd: end
|
|
1365
|
+
});
|
|
1366
|
+
if (changed.length > 0) {
|
|
1367
|
+
viewabilityState.viewableItems = viewableItems;
|
|
1368
|
+
for (let i = 0; i < changed.length; i++) {
|
|
1369
|
+
const change = changed[i];
|
|
1370
|
+
maybeUpdateViewabilityCallback(ctx, configId, change.containerId, change);
|
|
1371
|
+
}
|
|
1372
|
+
if (onViewableItemsChanged) {
|
|
1373
|
+
onViewableItemsChanged({ viewableItems, changed });
|
|
1374
|
+
}
|
|
1375
|
+
}
|
|
1376
|
+
for (const [containerId, value] of ctx.mapViewabilityAmountValues) {
|
|
1377
|
+
if (value.sizeVisible < 0) {
|
|
1378
|
+
ctx.mapViewabilityAmountValues.delete(containerId);
|
|
1379
|
+
}
|
|
1380
|
+
}
|
|
1381
|
+
}
|
|
1382
|
+
function computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
|
|
1383
|
+
const { sizes, positions, scroll: scrollState } = state;
|
|
1384
|
+
const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
|
|
1385
|
+
const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
|
|
1386
|
+
const viewAreaMode = viewAreaCoveragePercentThreshold != null;
|
|
1387
|
+
const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
|
|
1388
|
+
const scroll = scrollState - topPad;
|
|
1389
|
+
const top = positions.get(key) - scroll;
|
|
1390
|
+
const size = sizes.get(key) || 0;
|
|
1391
|
+
const bottom = top + size;
|
|
1392
|
+
const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
|
|
1393
|
+
const sizeVisible = isEntirelyVisible ? size : Math.min(bottom, scrollSize) - Math.max(top, 0);
|
|
1394
|
+
const percentVisible = size ? isEntirelyVisible ? 100 : 100 * (sizeVisible / size) : 0;
|
|
1395
|
+
const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
|
|
1396
|
+
const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
|
|
1397
|
+
const isViewable2 = percent >= viewablePercentThreshold;
|
|
1398
|
+
const value = {
|
|
1399
|
+
index,
|
|
1400
|
+
isViewable: isViewable2,
|
|
1401
|
+
item,
|
|
1402
|
+
key,
|
|
1403
|
+
percentVisible,
|
|
1404
|
+
percentOfScroller,
|
|
1405
|
+
sizeVisible,
|
|
1406
|
+
size,
|
|
1407
|
+
scrollSize,
|
|
1408
|
+
containerId
|
|
1409
|
+
};
|
|
1410
|
+
if (JSON.stringify(value) !== JSON.stringify(ctx.mapViewabilityAmountValues.get(containerId))) {
|
|
1411
|
+
ctx.mapViewabilityAmountValues.set(containerId, value);
|
|
1412
|
+
const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
|
|
1413
|
+
if (cb) {
|
|
1414
|
+
cb(value);
|
|
1415
|
+
}
|
|
1416
|
+
}
|
|
1417
|
+
return value;
|
|
1418
|
+
}
|
|
1419
|
+
function isViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
|
|
1420
|
+
const value = ctx.mapViewabilityAmountValues.get(containerId) || computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index);
|
|
1421
|
+
return value.isViewable;
|
|
1422
|
+
}
|
|
1423
|
+
function findContainerId(ctx, key) {
|
|
1424
|
+
const numContainers = peek$(ctx, "numContainers");
|
|
1425
|
+
for (let i = 0; i < numContainers; i++) {
|
|
1426
|
+
const itemKey = peek$(ctx, `containerItemKey${i}`);
|
|
1427
|
+
if (itemKey === key) {
|
|
1428
|
+
return i;
|
|
1429
|
+
}
|
|
1430
|
+
}
|
|
1431
|
+
return -1;
|
|
1432
|
+
}
|
|
1433
|
+
function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
|
|
1434
|
+
const key = containerId + configId;
|
|
1435
|
+
ctx.mapViewabilityValues.set(key, viewToken);
|
|
1436
|
+
const cb = ctx.mapViewabilityCallbacks.get(key);
|
|
1437
|
+
cb == null ? void 0 : cb(viewToken);
|
|
1438
|
+
}
|
|
1439
|
+
|
|
1440
|
+
// src/calculateItemsInView.ts
|
|
1441
|
+
function calculateItemsInView(ctx, state, params = {}) {
|
|
1442
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1443
|
+
const {
|
|
1444
|
+
scrollLength,
|
|
1445
|
+
startBufferedId: startBufferedIdOrig,
|
|
1446
|
+
positions,
|
|
1447
|
+
columns,
|
|
1448
|
+
containerItemKeys,
|
|
1449
|
+
idCache,
|
|
1450
|
+
sizes,
|
|
1451
|
+
indexByKey,
|
|
1452
|
+
scrollForNextCalculateItemsInView,
|
|
1453
|
+
enableScrollForNextCalculateItemsInView,
|
|
1454
|
+
minIndexSizeChanged
|
|
1455
|
+
} = state;
|
|
1456
|
+
const data = state.props.data;
|
|
1457
|
+
if (!data || scrollLength === 0) {
|
|
1458
|
+
return;
|
|
1459
|
+
}
|
|
1460
|
+
const totalSize = peek$(ctx, "totalSize");
|
|
1461
|
+
const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
|
|
1462
|
+
const numColumns = peek$(ctx, "numColumns");
|
|
1463
|
+
const previousScrollAdjust = 0;
|
|
1464
|
+
const { dataChanged, doMVCP } = params;
|
|
1465
|
+
const speed = getScrollVelocity(state);
|
|
1466
|
+
if (doMVCP || dataChanged) {
|
|
1467
|
+
const checkMVCP = doMVCP ? prepareMVCP(ctx, state) : void 0;
|
|
1468
|
+
updateAllPositions(ctx, state, dataChanged);
|
|
1469
|
+
checkMVCP == null ? void 0 : checkMVCP();
|
|
1470
|
+
}
|
|
1471
|
+
const scrollExtra = 0;
|
|
1472
|
+
const { queuedInitialLayout } = state;
|
|
1473
|
+
let { scroll: scrollState } = state;
|
|
1474
|
+
const initialScroll = state.props.initialScroll;
|
|
1475
|
+
if (!queuedInitialLayout && initialScroll) {
|
|
1476
|
+
const updatedOffset = calculateOffsetWithOffsetPosition(
|
|
1477
|
+
state,
|
|
1478
|
+
calculateOffsetForIndex(ctx, state, initialScroll.index),
|
|
1479
|
+
initialScroll
|
|
1480
|
+
);
|
|
1481
|
+
scrollState = updatedOffset;
|
|
1482
|
+
}
|
|
1483
|
+
const scrollAdjustPad = -previousScrollAdjust - topPad;
|
|
1484
|
+
let scroll = scrollState + scrollExtra + scrollAdjustPad;
|
|
1485
|
+
if (scroll + scrollLength > totalSize) {
|
|
1486
|
+
scroll = totalSize - scrollLength;
|
|
1487
|
+
}
|
|
1488
|
+
if (ENABLE_DEBUG_VIEW) {
|
|
1489
|
+
set$(ctx, "debugRawScroll", scrollState);
|
|
1490
|
+
set$(ctx, "debugComputedScroll", scroll);
|
|
1491
|
+
}
|
|
1492
|
+
const scrollBuffer = state.props.scrollBuffer;
|
|
1493
|
+
let scrollBufferTop = scrollBuffer;
|
|
1494
|
+
let scrollBufferBottom = scrollBuffer;
|
|
1495
|
+
if (speed > 0) {
|
|
1496
|
+
scrollBufferTop = scrollBuffer * 0.5;
|
|
1497
|
+
scrollBufferBottom = scrollBuffer * 1.5;
|
|
1498
|
+
} else {
|
|
1499
|
+
scrollBufferTop = scrollBuffer * 1.5;
|
|
1500
|
+
scrollBufferBottom = scrollBuffer * 0.5;
|
|
1501
|
+
}
|
|
1502
|
+
const scrollTopBuffered = scroll - scrollBufferTop;
|
|
1503
|
+
const scrollBottom = scroll + scrollLength;
|
|
1504
|
+
const scrollBottomBuffered = scrollBottom + scrollBufferBottom;
|
|
1505
|
+
if (scrollForNextCalculateItemsInView) {
|
|
1506
|
+
const { top, bottom } = scrollForNextCalculateItemsInView;
|
|
1507
|
+
if (scrollTopBuffered > top && scrollBottomBuffered < bottom) {
|
|
1508
|
+
return;
|
|
1509
|
+
}
|
|
1510
|
+
}
|
|
1511
|
+
let startNoBuffer = null;
|
|
1512
|
+
let startBuffered = null;
|
|
1513
|
+
let startBufferedId = null;
|
|
1514
|
+
let endNoBuffer = null;
|
|
1515
|
+
let endBuffered = null;
|
|
1516
|
+
let loopStart = startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
|
|
1517
|
+
if (minIndexSizeChanged !== void 0) {
|
|
1518
|
+
loopStart = Math.min(minIndexSizeChanged, loopStart);
|
|
1519
|
+
state.minIndexSizeChanged = void 0;
|
|
1520
|
+
}
|
|
1521
|
+
for (let i = loopStart; i >= 0; i--) {
|
|
1522
|
+
const id = (_a = idCache.get(i)) != null ? _a : getId(state, i);
|
|
1523
|
+
const top = positions.get(id);
|
|
1524
|
+
const size = (_b = sizes.get(id)) != null ? _b : getItemSize(state, id, i, data[i]);
|
|
1525
|
+
const bottom = top + size;
|
|
1526
|
+
if (bottom > scroll - scrollBuffer) {
|
|
1527
|
+
loopStart = i;
|
|
1528
|
+
} else {
|
|
1529
|
+
break;
|
|
1530
|
+
}
|
|
1531
|
+
}
|
|
1532
|
+
const loopStartMod = loopStart % numColumns;
|
|
1533
|
+
if (loopStartMod > 0) {
|
|
1534
|
+
loopStart -= loopStartMod;
|
|
1535
|
+
}
|
|
1536
|
+
let foundEnd = false;
|
|
1537
|
+
let nextTop;
|
|
1538
|
+
let nextBottom;
|
|
1539
|
+
const prevNumContainers = ctx.values.get("numContainers");
|
|
1540
|
+
let maxIndexRendered = 0;
|
|
1541
|
+
for (let i = 0; i < prevNumContainers; i++) {
|
|
1542
|
+
const key = peek$(ctx, `containerItemKey${i}`);
|
|
1543
|
+
if (key !== void 0) {
|
|
1544
|
+
const index = indexByKey.get(key);
|
|
1545
|
+
maxIndexRendered = Math.max(maxIndexRendered, index);
|
|
1546
|
+
}
|
|
1547
|
+
}
|
|
1548
|
+
let firstFullyOnScreenIndex;
|
|
1549
|
+
const dataLength = data.length;
|
|
1550
|
+
for (let i = Math.max(0, loopStart); i < dataLength && (!foundEnd || i <= maxIndexRendered); i++) {
|
|
1551
|
+
const id = (_c = idCache.get(i)) != null ? _c : getId(state, i);
|
|
1552
|
+
const size = (_d = sizes.get(id)) != null ? _d : getItemSize(state, id, i, data[i]);
|
|
1553
|
+
const top = positions.get(id);
|
|
1554
|
+
if (!foundEnd) {
|
|
1555
|
+
if (startNoBuffer === null && top + size > scroll) {
|
|
1556
|
+
startNoBuffer = i;
|
|
1557
|
+
}
|
|
1558
|
+
if (firstFullyOnScreenIndex === void 0 && top >= scroll - 10) {
|
|
1559
|
+
firstFullyOnScreenIndex = i;
|
|
1560
|
+
}
|
|
1561
|
+
if (startBuffered === null && top + size > scrollTopBuffered) {
|
|
1562
|
+
startBuffered = i;
|
|
1563
|
+
startBufferedId = id;
|
|
1564
|
+
nextTop = top;
|
|
1565
|
+
}
|
|
1566
|
+
if (startNoBuffer !== null) {
|
|
1567
|
+
if (top <= scrollBottom) {
|
|
1568
|
+
endNoBuffer = i;
|
|
1569
|
+
}
|
|
1570
|
+
if (top <= scrollBottomBuffered) {
|
|
1571
|
+
endBuffered = i;
|
|
1572
|
+
nextBottom = top + size;
|
|
1573
|
+
} else {
|
|
1574
|
+
foundEnd = true;
|
|
1575
|
+
}
|
|
1576
|
+
}
|
|
1577
|
+
}
|
|
1578
|
+
}
|
|
1579
|
+
const idsInView = [];
|
|
1580
|
+
for (let i = firstFullyOnScreenIndex; i <= endNoBuffer; i++) {
|
|
1581
|
+
const id = (_e = idCache.get(i)) != null ? _e : getId(state, i);
|
|
1582
|
+
idsInView.push(id);
|
|
1583
|
+
}
|
|
1584
|
+
Object.assign(state, {
|
|
1585
|
+
startBuffered,
|
|
1586
|
+
startBufferedId,
|
|
1587
|
+
startNoBuffer,
|
|
1588
|
+
endBuffered,
|
|
1589
|
+
endNoBuffer,
|
|
1590
|
+
idsInView,
|
|
1591
|
+
firstFullyOnScreenIndex
|
|
1592
|
+
});
|
|
1593
|
+
if (enableScrollForNextCalculateItemsInView && nextTop !== void 0 && nextBottom !== void 0) {
|
|
1594
|
+
state.scrollForNextCalculateItemsInView = nextTop !== void 0 && nextBottom !== void 0 ? {
|
|
1595
|
+
top: nextTop,
|
|
1596
|
+
bottom: nextBottom
|
|
1597
|
+
} : void 0;
|
|
1598
|
+
}
|
|
1599
|
+
const numContainers = peek$(ctx, "numContainers");
|
|
1600
|
+
const pendingRemoval = [];
|
|
1601
|
+
if (dataChanged) {
|
|
1602
|
+
for (let i = 0; i < numContainers; i++) {
|
|
1603
|
+
const itemKey = peek$(ctx, `containerItemKey${i}`);
|
|
1604
|
+
if (!state.props.keyExtractor || itemKey && indexByKey.get(itemKey) === void 0) {
|
|
1605
|
+
pendingRemoval.push(i);
|
|
1606
|
+
}
|
|
1607
|
+
}
|
|
1608
|
+
}
|
|
1609
|
+
if (startBuffered !== null && endBuffered !== null) {
|
|
1610
|
+
let numContainers2 = prevNumContainers;
|
|
1611
|
+
const needNewContainers = [];
|
|
1612
|
+
for (let i = startBuffered; i <= endBuffered; i++) {
|
|
1613
|
+
const id = (_f = idCache.get(i)) != null ? _f : getId(state, i);
|
|
1614
|
+
if (!containerItemKeys.has(id)) {
|
|
1615
|
+
needNewContainers.push(i);
|
|
1616
|
+
}
|
|
1617
|
+
}
|
|
1618
|
+
if (needNewContainers.length > 0) {
|
|
1619
|
+
const availableContainers = findAvailableContainers(
|
|
1620
|
+
ctx,
|
|
1621
|
+
state,
|
|
1622
|
+
needNewContainers.length,
|
|
1623
|
+
startBuffered,
|
|
1624
|
+
endBuffered,
|
|
1625
|
+
pendingRemoval
|
|
1626
|
+
);
|
|
1627
|
+
for (let idx = 0; idx < needNewContainers.length; idx++) {
|
|
1628
|
+
const i = needNewContainers[idx];
|
|
1629
|
+
const containerIndex = availableContainers[idx];
|
|
1630
|
+
const id = (_g = idCache.get(i)) != null ? _g : getId(state, i);
|
|
1631
|
+
const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
|
|
1632
|
+
if (oldKey && oldKey !== id) {
|
|
1633
|
+
containerItemKeys.delete(oldKey);
|
|
1634
|
+
}
|
|
1635
|
+
set$(ctx, `containerItemKey${containerIndex}`, id);
|
|
1636
|
+
set$(ctx, `containerItemData${containerIndex}`, data[i]);
|
|
1637
|
+
containerItemKeys.add(id);
|
|
1638
|
+
if (containerIndex >= numContainers2) {
|
|
1639
|
+
numContainers2 = containerIndex + 1;
|
|
1640
|
+
}
|
|
1641
|
+
}
|
|
1642
|
+
if (numContainers2 !== prevNumContainers) {
|
|
1643
|
+
set$(ctx, "numContainers", numContainers2);
|
|
1644
|
+
if (numContainers2 > peek$(ctx, "numContainersPooled")) {
|
|
1645
|
+
set$(ctx, "numContainersPooled", Math.ceil(numContainers2 * 1.5));
|
|
1646
|
+
}
|
|
1647
|
+
}
|
|
1648
|
+
}
|
|
1649
|
+
}
|
|
1650
|
+
for (let i = 0; i < numContainers; i++) {
|
|
1651
|
+
const itemKey = peek$(ctx, `containerItemKey${i}`);
|
|
1652
|
+
if (pendingRemoval.includes(i)) {
|
|
1653
|
+
if (itemKey) {
|
|
1654
|
+
containerItemKeys.delete(itemKey);
|
|
1655
|
+
}
|
|
1656
|
+
set$(ctx, `containerItemKey${i}`, void 0);
|
|
1657
|
+
set$(ctx, `containerItemData${i}`, void 0);
|
|
1658
|
+
set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
|
|
1659
|
+
set$(ctx, `containerColumn${i}`, -1);
|
|
1660
|
+
} else {
|
|
1661
|
+
const itemIndex = indexByKey.get(itemKey);
|
|
1662
|
+
const item = data[itemIndex];
|
|
1663
|
+
if (item !== void 0) {
|
|
1664
|
+
const id = (_h = idCache.get(itemIndex)) != null ? _h : getId(state, itemIndex);
|
|
1665
|
+
const position = positions.get(id);
|
|
1666
|
+
if (position === void 0) {
|
|
1667
|
+
set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
|
|
1668
|
+
} else {
|
|
1669
|
+
const pos = positions.get(id);
|
|
1670
|
+
const column = columns.get(id) || 1;
|
|
1671
|
+
const prevPos = peek$(ctx, `containerPosition${i}`);
|
|
1672
|
+
const prevColumn = peek$(ctx, `containerColumn${i}`);
|
|
1673
|
+
const prevData = peek$(ctx, `containerItemData${i}`);
|
|
1674
|
+
if (!prevPos || pos > POSITION_OUT_OF_VIEW && pos !== prevPos) {
|
|
1675
|
+
set$(ctx, `containerPosition${i}`, pos);
|
|
1676
|
+
}
|
|
1677
|
+
if (column >= 0 && column !== prevColumn) {
|
|
1678
|
+
set$(ctx, `containerColumn${i}`, column);
|
|
1679
|
+
}
|
|
1680
|
+
if (prevData !== item) {
|
|
1681
|
+
set$(ctx, `containerItemData${i}`, data[itemIndex]);
|
|
1682
|
+
}
|
|
1683
|
+
}
|
|
1684
|
+
}
|
|
1685
|
+
}
|
|
1686
|
+
}
|
|
1687
|
+
if (!queuedInitialLayout && endBuffered !== null) {
|
|
1688
|
+
if (checkAllSizesKnown(state)) {
|
|
1689
|
+
setDidLayout(ctx, state);
|
|
1690
|
+
}
|
|
1691
|
+
}
|
|
1692
|
+
if (state.props.viewabilityConfigCallbackPairs) {
|
|
1693
|
+
updateViewableItems(
|
|
1694
|
+
state,
|
|
1695
|
+
ctx,
|
|
1696
|
+
state.props.viewabilityConfigCallbackPairs,
|
|
1697
|
+
scrollLength,
|
|
1698
|
+
startNoBuffer,
|
|
1699
|
+
endNoBuffer
|
|
1700
|
+
);
|
|
1701
|
+
}
|
|
1702
|
+
}
|
|
1703
|
+
|
|
1704
|
+
// src/checkAtTop.ts
|
|
1705
|
+
function checkAtTop(state) {
|
|
1706
|
+
if (!state) {
|
|
1707
|
+
return;
|
|
1708
|
+
}
|
|
1709
|
+
const {
|
|
1710
|
+
scrollLength,
|
|
1711
|
+
scroll,
|
|
1712
|
+
props: { onStartReachedThreshold }
|
|
1713
|
+
} = state;
|
|
1714
|
+
const distanceFromTop = scroll;
|
|
1715
|
+
state.isAtStart = distanceFromTop <= 0;
|
|
1716
|
+
state.isStartReached = checkThreshold(
|
|
1717
|
+
distanceFromTop,
|
|
1718
|
+
false,
|
|
1719
|
+
onStartReachedThreshold * scrollLength,
|
|
1720
|
+
state.isStartReached,
|
|
1721
|
+
state.startReachedBlockedByTimer,
|
|
1722
|
+
(distance) => {
|
|
1723
|
+
var _a, _b;
|
|
1724
|
+
return (_b = (_a = state.props).onStartReached) == null ? void 0 : _b.call(_a, { distanceFromStart: distance });
|
|
1725
|
+
},
|
|
1726
|
+
(block) => {
|
|
1727
|
+
state.startReachedBlockedByTimer = block;
|
|
1728
|
+
}
|
|
1729
|
+
);
|
|
1730
|
+
}
|
|
1731
|
+
|
|
1732
|
+
// src/createColumnWrapperStyle.ts
|
|
1733
|
+
function createColumnWrapperStyle(contentContainerStyle) {
|
|
1734
|
+
const { gap, columnGap, rowGap } = contentContainerStyle;
|
|
1735
|
+
if (gap || columnGap || rowGap) {
|
|
1736
|
+
contentContainerStyle.gap = void 0;
|
|
1737
|
+
contentContainerStyle.columnGap = void 0;
|
|
1738
|
+
contentContainerStyle.rowGap = void 0;
|
|
1739
|
+
return {
|
|
1740
|
+
gap,
|
|
1741
|
+
columnGap,
|
|
1742
|
+
rowGap
|
|
1743
|
+
};
|
|
1744
|
+
}
|
|
1745
|
+
}
|
|
1746
|
+
|
|
1747
|
+
// src/doInitialAllocateContainers.ts
|
|
1748
|
+
function doInitialAllocateContainers(ctx, state) {
|
|
1749
|
+
const { scrollLength } = state;
|
|
1750
|
+
const data = state.props.data;
|
|
1751
|
+
if (scrollLength > 0 && data.length > 0 && !peek$(ctx, "numContainers")) {
|
|
1752
|
+
const averageItemSize = state.props.getEstimatedItemSize ? state.props.getEstimatedItemSize(0, data[0]) : state.props.estimatedItemSize;
|
|
1753
|
+
const Extra = 1.5;
|
|
1754
|
+
const numContainers = Math.ceil(
|
|
1755
|
+
(scrollLength + state.props.scrollBuffer * 2) / averageItemSize * state.props.numColumns * Extra
|
|
1756
|
+
);
|
|
1757
|
+
for (let i = 0; i < numContainers; i++) {
|
|
1758
|
+
set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
|
|
1759
|
+
set$(ctx, `containerColumn${i}`, -1);
|
|
1760
|
+
}
|
|
1761
|
+
set$(ctx, "numContainers", numContainers);
|
|
1762
|
+
set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
|
|
1763
|
+
if (!IsNewArchitecture) {
|
|
1764
|
+
if (state.props.initialScroll) {
|
|
1765
|
+
requestAnimationFrame(() => {
|
|
1766
|
+
calculateItemsInView(ctx, state);
|
|
1767
|
+
});
|
|
1768
|
+
} else {
|
|
1769
|
+
calculateItemsInView(ctx, state);
|
|
1770
|
+
}
|
|
1771
|
+
}
|
|
1772
|
+
return true;
|
|
1773
|
+
}
|
|
1774
|
+
}
|
|
1775
|
+
|
|
1776
|
+
// src/doMaintainScrollAtEnd.ts
|
|
1777
|
+
function doMaintainScrollAtEnd(ctx, state, animated) {
|
|
1778
|
+
const {
|
|
1779
|
+
refScroller,
|
|
1780
|
+
props: { maintainScrollAtEnd }
|
|
1781
|
+
} = state;
|
|
1782
|
+
if ((state == null ? void 0 : state.isAtEnd) && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
|
|
1783
|
+
const paddingTop = peek$(ctx, "alignItemsPaddingTop");
|
|
1784
|
+
if (paddingTop > 0) {
|
|
1785
|
+
state.scroll = 0;
|
|
1786
|
+
}
|
|
1787
|
+
requestAnimationFrame(() => {
|
|
1788
|
+
var _a;
|
|
1789
|
+
state.maintainingScrollAtEnd = true;
|
|
1790
|
+
(_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
|
|
1791
|
+
animated
|
|
1792
|
+
});
|
|
1793
|
+
setTimeout(
|
|
1794
|
+
() => {
|
|
1795
|
+
state.maintainingScrollAtEnd = false;
|
|
1796
|
+
},
|
|
1797
|
+
0
|
|
1798
|
+
);
|
|
1799
|
+
});
|
|
1800
|
+
return true;
|
|
1801
|
+
}
|
|
1802
|
+
}
|
|
1803
|
+
function getRenderedItem(ctx, state, key) {
|
|
1804
|
+
if (!state) {
|
|
1805
|
+
return null;
|
|
1806
|
+
}
|
|
1807
|
+
const {
|
|
1808
|
+
indexByKey,
|
|
1809
|
+
props: { data, renderItem: renderItem2 }
|
|
1810
|
+
} = state;
|
|
1811
|
+
const index = indexByKey.get(key);
|
|
1812
|
+
if (index === void 0) {
|
|
1813
|
+
return null;
|
|
1814
|
+
}
|
|
1815
|
+
let renderedItem = null;
|
|
1816
|
+
if (renderItem2) {
|
|
1817
|
+
const itemProps = {
|
|
1818
|
+
item: data[index],
|
|
1819
|
+
index,
|
|
1820
|
+
extraData: peek$(ctx, "extraData")
|
|
1821
|
+
};
|
|
1822
|
+
renderedItem = React3__default.createElement(renderItem2, itemProps);
|
|
1823
|
+
}
|
|
1824
|
+
return { index, item: data[index], renderedItem };
|
|
1825
|
+
}
|
|
1826
|
+
|
|
1827
|
+
// src/handleLayout.ts
|
|
1828
|
+
function handleLayout(ctx, state, layout, setCanRender) {
|
|
1829
|
+
const { maintainScrollAtEnd } = state.props;
|
|
1830
|
+
const scrollLength = layout[state.props.horizontal ? "width" : "height"];
|
|
1831
|
+
const otherAxisSize = layout[state.props.horizontal ? "height" : "width"];
|
|
1832
|
+
const needsCalculate = !state.lastLayout || scrollLength > state.scrollLength || state.lastLayout.x !== layout.x || state.lastLayout.y !== layout.y;
|
|
1833
|
+
state.lastLayout = layout;
|
|
1834
|
+
const didChange = scrollLength !== state.scrollLength;
|
|
1835
|
+
const prevOtherAxisSize = state.otherAxisSize;
|
|
1836
|
+
state.scrollLength = scrollLength;
|
|
1837
|
+
state.otherAxisSize = otherAxisSize;
|
|
1838
|
+
state.lastBatchingAction = Date.now();
|
|
1839
|
+
state.scrollForNextCalculateItemsInView = void 0;
|
|
1840
|
+
doInitialAllocateContainers(ctx, state);
|
|
1841
|
+
if (needsCalculate) {
|
|
1842
|
+
calculateItemsInView(ctx, state, { doMVCP: true });
|
|
1843
|
+
}
|
|
1844
|
+
if (didChange || otherAxisSize !== prevOtherAxisSize) {
|
|
1845
|
+
set$(ctx, "scrollSize", { width: layout.width, height: layout.height });
|
|
1846
|
+
}
|
|
1847
|
+
if (maintainScrollAtEnd === true || maintainScrollAtEnd.onLayout) {
|
|
1848
|
+
doMaintainScrollAtEnd(ctx, state, false);
|
|
1849
|
+
}
|
|
1850
|
+
updateAlignItemsPaddingTop(ctx, state);
|
|
1851
|
+
checkAtBottom(ctx, state);
|
|
1852
|
+
checkAtTop(state);
|
|
1853
|
+
if (state) {
|
|
1854
|
+
state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
|
|
1855
|
+
}
|
|
1856
|
+
if (__DEV__ && scrollLength === 0) {
|
|
1857
|
+
warnDevOnce(
|
|
1858
|
+
"height0",
|
|
1859
|
+
`List ${state.props.horizontal ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
|
|
1860
|
+
);
|
|
1861
|
+
}
|
|
1862
|
+
setCanRender(true);
|
|
1863
|
+
}
|
|
1864
|
+
|
|
1865
|
+
// src/onScroll.ts
|
|
1866
|
+
function onScroll(ctx, state, event) {
|
|
1867
|
+
var _a, _b, _c, _d, _e;
|
|
1868
|
+
if (((_b = (_a = event.nativeEvent) == null ? void 0 : _a.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
|
|
1869
|
+
return;
|
|
1870
|
+
}
|
|
1871
|
+
const newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
|
|
1872
|
+
const ignoreScrollFromMVCP = state.ignoreScrollFromMVCP;
|
|
1873
|
+
if (ignoreScrollFromMVCP && !state.scrollingTo) {
|
|
1874
|
+
const { lt, gt } = ignoreScrollFromMVCP;
|
|
1875
|
+
if (lt && newScroll < lt || gt && newScroll > gt) {
|
|
1876
|
+
return;
|
|
1877
|
+
}
|
|
1878
|
+
}
|
|
1879
|
+
state.scrollPending = newScroll;
|
|
1880
|
+
updateScroll(ctx, state, newScroll);
|
|
1881
|
+
(_e = (_d = state.props).onScroll) == null ? void 0 : _e.call(_d, event);
|
|
1882
|
+
}
|
|
1883
|
+
function updateScroll(ctx, state, newScroll) {
|
|
1884
|
+
const scrollingTo = state.scrollingTo;
|
|
1885
|
+
state.hasScrolled = true;
|
|
1886
|
+
state.lastBatchingAction = Date.now();
|
|
1887
|
+
const currentTime = performance.now();
|
|
1888
|
+
if (scrollingTo === void 0 && !(state.scrollHistory.length === 0 && newScroll === state.scroll)) {
|
|
1889
|
+
state.scrollHistory.push({ scroll: newScroll, time: currentTime });
|
|
1890
|
+
}
|
|
1891
|
+
if (state.scrollHistory.length > 5) {
|
|
1892
|
+
state.scrollHistory.shift();
|
|
1893
|
+
}
|
|
1894
|
+
state.scrollPrev = state.scroll;
|
|
1895
|
+
state.scrollPrevTime = state.scrollTime;
|
|
1896
|
+
state.scroll = newScroll;
|
|
1897
|
+
state.scrollTime = currentTime;
|
|
1898
|
+
calculateItemsInView(ctx, state);
|
|
1899
|
+
checkAtBottom(ctx, state);
|
|
1900
|
+
checkAtTop(state);
|
|
1901
|
+
}
|
|
1902
|
+
|
|
1903
|
+
// src/updateItemSize.ts
|
|
1904
|
+
function updateItemSizes(ctx, state, itemUpdates) {
|
|
1905
|
+
var _a;
|
|
1906
|
+
const {
|
|
1907
|
+
props: {
|
|
1908
|
+
horizontal,
|
|
1909
|
+
maintainVisibleContentPosition,
|
|
1910
|
+
suggestEstimatedItemSize,
|
|
1911
|
+
onItemSizeChanged,
|
|
1912
|
+
data,
|
|
1913
|
+
maintainScrollAtEnd
|
|
1914
|
+
}
|
|
1915
|
+
} = state;
|
|
1916
|
+
if (!data) return;
|
|
1917
|
+
let needsRecalculate = false;
|
|
1918
|
+
let shouldMaintainScrollAtEnd = false;
|
|
1919
|
+
let minIndexSizeChanged;
|
|
1920
|
+
let maxOtherAxisSize = peek$(ctx, "otherAxisSize") || 0;
|
|
1921
|
+
for (const { itemKey, sizeObj } of itemUpdates) {
|
|
1922
|
+
const index = state.indexByKey.get(itemKey);
|
|
1923
|
+
const prevSizeKnown = state.sizesKnown.get(itemKey);
|
|
1924
|
+
const diff = updateOneItemSize(state, itemKey, sizeObj);
|
|
1925
|
+
const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
|
|
1926
|
+
if (diff !== 0) {
|
|
1927
|
+
minIndexSizeChanged = minIndexSizeChanged !== void 0 ? Math.min(minIndexSizeChanged, index) : index;
|
|
1928
|
+
if (((_a = state.scrollingTo) == null ? void 0 : _a.viewPosition) && maintainVisibleContentPosition && index === state.scrollingTo.index) {
|
|
1929
|
+
requestAdjust(ctx, state, diff * state.scrollingTo.viewPosition);
|
|
1930
|
+
}
|
|
1931
|
+
const { startBuffered, endBuffered } = state;
|
|
1932
|
+
needsRecalculate || (needsRecalculate = index >= startBuffered && index <= endBuffered);
|
|
1933
|
+
if (!needsRecalculate) {
|
|
1934
|
+
const numContainers = ctx.values.get("numContainers");
|
|
1935
|
+
for (let i = 0; i < numContainers; i++) {
|
|
1936
|
+
if (peek$(ctx, `containerItemKey${i}`) === itemKey) {
|
|
1937
|
+
needsRecalculate = true;
|
|
1938
|
+
break;
|
|
1939
|
+
}
|
|
1940
|
+
}
|
|
1941
|
+
}
|
|
1942
|
+
if (state.needsOtherAxisSize) {
|
|
1943
|
+
const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
|
|
1944
|
+
maxOtherAxisSize = Math.max(maxOtherAxisSize, otherAxisSize);
|
|
1945
|
+
}
|
|
1946
|
+
if (prevSizeKnown !== void 0 && Math.abs(prevSizeKnown - size) > 5) {
|
|
1947
|
+
shouldMaintainScrollAtEnd = true;
|
|
1948
|
+
}
|
|
1949
|
+
onItemSizeChanged == null ? void 0 : onItemSizeChanged({
|
|
1950
|
+
size,
|
|
1951
|
+
previous: size - diff,
|
|
1952
|
+
index,
|
|
1953
|
+
itemKey,
|
|
1954
|
+
itemData: state.props.data[index]
|
|
1955
|
+
});
|
|
1956
|
+
}
|
|
1957
|
+
}
|
|
1958
|
+
if (minIndexSizeChanged !== void 0) {
|
|
1959
|
+
state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, minIndexSizeChanged) : minIndexSizeChanged;
|
|
1960
|
+
}
|
|
1961
|
+
if (__DEV__ && suggestEstimatedItemSize && minIndexSizeChanged !== void 0) {
|
|
1962
|
+
if (state.timeoutSizeMessage) clearTimeout(state.timeoutSizeMessage);
|
|
1963
|
+
state.timeoutSizeMessage = setTimeout(() => {
|
|
1964
|
+
var _a2;
|
|
1965
|
+
state.timeoutSizeMessage = void 0;
|
|
1966
|
+
const num = state.sizesKnown.size;
|
|
1967
|
+
const avg = (_a2 = state.averageSizes[""]) == null ? void 0 : _a2.avg;
|
|
1968
|
+
console.warn(
|
|
1969
|
+
`[legend-list] Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
|
|
1970
|
+
);
|
|
1971
|
+
}, 1e3);
|
|
1972
|
+
}
|
|
1973
|
+
const cur = peek$(ctx, "otherAxisSize");
|
|
1974
|
+
if (!cur || maxOtherAxisSize > cur) {
|
|
1975
|
+
set$(ctx, "otherAxisSize", maxOtherAxisSize);
|
|
1976
|
+
}
|
|
1977
|
+
const containersDidLayout = peek$(ctx, "containersDidLayout");
|
|
1978
|
+
if (containersDidLayout || checkAllSizesKnown(state)) {
|
|
1979
|
+
if (needsRecalculate) {
|
|
1980
|
+
state.scrollForNextCalculateItemsInView = void 0;
|
|
1981
|
+
calculateItemsInView(ctx, state, { doMVCP: true });
|
|
1982
|
+
}
|
|
1983
|
+
if (shouldMaintainScrollAtEnd) {
|
|
1984
|
+
if (maintainScrollAtEnd === true || maintainScrollAtEnd.onItemLayout) {
|
|
1985
|
+
doMaintainScrollAtEnd(ctx, state, false);
|
|
1986
|
+
}
|
|
1987
|
+
}
|
|
1988
|
+
}
|
|
1989
|
+
}
|
|
1990
|
+
function updateItemSize(ctx, state, itemKey, sizeObj) {
|
|
1991
|
+
if (IsNewArchitecture) {
|
|
1992
|
+
const { sizesKnown } = state;
|
|
1993
|
+
const numContainers = ctx.values.get("numContainers");
|
|
1994
|
+
const changes = [];
|
|
1995
|
+
for (let i = 0; i < numContainers; i++) {
|
|
1996
|
+
const containerItemKey = peek$(ctx, `containerItemKey${i}`);
|
|
1997
|
+
if (itemKey === containerItemKey) {
|
|
1998
|
+
changes.push({ itemKey, sizeObj });
|
|
1999
|
+
} else if (!sizesKnown.has(containerItemKey) && containerItemKey !== void 0) {
|
|
2000
|
+
const containerRef = ctx.viewRefs.get(i);
|
|
2001
|
+
if (containerRef == null ? void 0 : containerRef.current) {
|
|
2002
|
+
let measured;
|
|
2003
|
+
containerRef.current.measure((x, y, width, height) => {
|
|
2004
|
+
measured = { x, y, width, height };
|
|
2005
|
+
});
|
|
2006
|
+
if (measured) {
|
|
2007
|
+
changes.push({ itemKey: containerItemKey, sizeObj: measured });
|
|
2008
|
+
}
|
|
2009
|
+
}
|
|
2010
|
+
}
|
|
2011
|
+
}
|
|
2012
|
+
if (changes.length > 0) {
|
|
2013
|
+
updateItemSizes(ctx, state, changes);
|
|
2014
|
+
}
|
|
2015
|
+
} else {
|
|
2016
|
+
updateItemSizes(ctx, state, [{ itemKey, sizeObj }]);
|
|
2017
|
+
}
|
|
2018
|
+
}
|
|
2019
|
+
function updateOneItemSize(state, itemKey, sizeObj) {
|
|
2020
|
+
const {
|
|
2021
|
+
sizes,
|
|
2022
|
+
indexByKey,
|
|
2023
|
+
sizesKnown,
|
|
2024
|
+
averageSizes,
|
|
2025
|
+
props: { data, horizontal }
|
|
2026
|
+
} = state;
|
|
2027
|
+
if (!data) return 0;
|
|
2028
|
+
const index = indexByKey.get(itemKey);
|
|
2029
|
+
const prevSize = getItemSize(state, itemKey, index, data);
|
|
2030
|
+
const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
|
|
2031
|
+
sizesKnown.set(itemKey, size);
|
|
2032
|
+
const itemType = "";
|
|
2033
|
+
let averages = averageSizes[itemType];
|
|
2034
|
+
if (!averages) {
|
|
2035
|
+
averages = averageSizes[itemType] = { num: 0, avg: 0 };
|
|
2036
|
+
}
|
|
2037
|
+
averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
|
|
2038
|
+
averages.num++;
|
|
2039
|
+
if (!prevSize || Math.abs(prevSize - size) > 0.1) {
|
|
2040
|
+
sizes.set(itemKey, size);
|
|
2041
|
+
return size - prevSize;
|
|
2042
|
+
}
|
|
2043
|
+
return 0;
|
|
2044
|
+
}
|
|
2045
|
+
var useCombinedRef = (...refs) => {
|
|
2046
|
+
const callback = useCallback((element) => {
|
|
2047
|
+
for (const ref of refs) {
|
|
2048
|
+
if (!ref) {
|
|
2049
|
+
continue;
|
|
2050
|
+
}
|
|
2051
|
+
if (isFunction(ref)) {
|
|
2052
|
+
ref(element);
|
|
2053
|
+
} else {
|
|
2054
|
+
ref.current = element;
|
|
2055
|
+
}
|
|
2056
|
+
}
|
|
2057
|
+
}, refs);
|
|
2058
|
+
return callback;
|
|
2059
|
+
};
|
|
2060
|
+
|
|
2061
|
+
// src/LegendList.tsx
|
|
2062
|
+
var DEFAULT_DRAW_DISTANCE = 250;
|
|
2063
|
+
var DEFAULT_ITEM_SIZE = 100;
|
|
2064
|
+
var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
|
|
2065
|
+
return /* @__PURE__ */ React3.createElement(StateProvider, null, /* @__PURE__ */ React3.createElement(LegendListInner, { ...props, ref: forwardedRef }));
|
|
2066
|
+
});
|
|
2067
|
+
var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
|
|
2068
|
+
var _a;
|
|
2069
|
+
const {
|
|
2070
|
+
data: dataProp = [],
|
|
2071
|
+
initialScrollIndex: initialScrollIndexProp,
|
|
2072
|
+
initialScrollOffset,
|
|
2073
|
+
horizontal,
|
|
2074
|
+
drawDistance = 250,
|
|
2075
|
+
recycleItems = false,
|
|
2076
|
+
onEndReachedThreshold = 0.5,
|
|
2077
|
+
onStartReachedThreshold = 0.5,
|
|
2078
|
+
maintainScrollAtEnd = false,
|
|
2079
|
+
maintainScrollAtEndThreshold = 0.1,
|
|
2080
|
+
alignItemsAtEnd = false,
|
|
2081
|
+
maintainVisibleContentPosition = false,
|
|
2082
|
+
onScroll: onScrollProp,
|
|
2083
|
+
onMomentumScrollEnd,
|
|
2084
|
+
numColumns: numColumnsProp = 1,
|
|
2085
|
+
columnWrapperStyle,
|
|
2086
|
+
keyExtractor: keyExtractorProp,
|
|
2087
|
+
renderItem: renderItem2,
|
|
2088
|
+
estimatedListSize,
|
|
2089
|
+
estimatedItemSize: estimatedItemSizeProp,
|
|
2090
|
+
getEstimatedItemSize,
|
|
2091
|
+
suggestEstimatedItemSize,
|
|
2092
|
+
ListHeaderComponent,
|
|
2093
|
+
ListEmptyComponent,
|
|
2094
|
+
onItemSizeChanged,
|
|
2095
|
+
refScrollView,
|
|
2096
|
+
waitForInitialLayout = true,
|
|
2097
|
+
extraData,
|
|
2098
|
+
contentContainerStyle: contentContainerStyleProp,
|
|
2099
|
+
style: styleProp,
|
|
2100
|
+
onLayout: onLayoutProp,
|
|
2101
|
+
onRefresh,
|
|
2102
|
+
refreshing,
|
|
2103
|
+
progressViewOffset,
|
|
2104
|
+
refreshControl,
|
|
2105
|
+
initialContainerPoolRatio = 2,
|
|
2106
|
+
viewabilityConfig,
|
|
2107
|
+
viewabilityConfigCallbackPairs,
|
|
2108
|
+
onViewableItemsChanged,
|
|
2109
|
+
onStartReached,
|
|
2110
|
+
onEndReached,
|
|
2111
|
+
onLoad,
|
|
2112
|
+
...rest
|
|
2113
|
+
} = props;
|
|
2114
|
+
const [renderNum, setRenderNum] = useState(0);
|
|
2115
|
+
const initialScroll = typeof initialScrollIndexProp === "number" ? { index: initialScrollIndexProp } : initialScrollIndexProp;
|
|
2116
|
+
const initialScrollIndex = initialScroll == null ? void 0 : initialScroll.index;
|
|
2117
|
+
const [canRender, setCanRender] = React3.useState(!IsNewArchitecture);
|
|
2118
|
+
const contentContainerStyle = { ...StyleSheet.flatten(contentContainerStyleProp) };
|
|
2119
|
+
const style = { ...StyleSheet.flatten(styleProp) };
|
|
2120
|
+
const stylePaddingTopState = extractPadding(style, contentContainerStyle, "Top");
|
|
2121
|
+
const stylePaddingBottomState = extractPadding(style, contentContainerStyle, "Bottom");
|
|
2122
|
+
const ctx = useStateContext();
|
|
2123
|
+
ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
|
|
2124
|
+
const refScroller = useRef(null);
|
|
2125
|
+
const combinedRef = useCombinedRef(refScroller, refScrollView);
|
|
2126
|
+
const estimatedItemSize = estimatedItemSizeProp != null ? estimatedItemSizeProp : DEFAULT_ITEM_SIZE;
|
|
2127
|
+
const scrollBuffer = (drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE) || 1;
|
|
2128
|
+
const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
|
|
2129
|
+
const refState = useRef();
|
|
2130
|
+
if (!refState.current) {
|
|
2131
|
+
const initialScrollLength = (estimatedListSize != null ? estimatedListSize : IsNewArchitecture ? { width: 0, height: 0 } : Dimensions.get("window"))[horizontal ? "width" : "height"];
|
|
2132
|
+
refState.current = {
|
|
2133
|
+
sizes: /* @__PURE__ */ new Map(),
|
|
2134
|
+
positions: /* @__PURE__ */ new Map(),
|
|
2135
|
+
columns: /* @__PURE__ */ new Map(),
|
|
2136
|
+
pendingAdjust: 0,
|
|
2137
|
+
isStartReached: false,
|
|
2138
|
+
isEndReached: false,
|
|
2139
|
+
isAtEnd: false,
|
|
2140
|
+
isAtStart: false,
|
|
2141
|
+
scrollLength: initialScrollLength,
|
|
2142
|
+
startBuffered: -1,
|
|
2143
|
+
startNoBuffer: -1,
|
|
2144
|
+
endBuffered: -1,
|
|
2145
|
+
endNoBuffer: -1,
|
|
2146
|
+
firstFullyOnScreenIndex: -1,
|
|
2147
|
+
scroll: 0,
|
|
2148
|
+
totalSize: 0,
|
|
2149
|
+
timeouts: /* @__PURE__ */ new Set(),
|
|
2150
|
+
viewabilityConfigCallbackPairs: void 0,
|
|
2151
|
+
scrollAdjustHandler: new ScrollAdjustHandler(ctx),
|
|
2152
|
+
nativeMarginTop: 0,
|
|
2153
|
+
scrollPrev: 0,
|
|
2154
|
+
scrollPrevTime: 0,
|
|
2155
|
+
scrollTime: 0,
|
|
2156
|
+
scrollPending: 0,
|
|
2157
|
+
indexByKey: /* @__PURE__ */ new Map(),
|
|
2158
|
+
scrollHistory: [],
|
|
2159
|
+
sizesKnown: /* @__PURE__ */ new Map(),
|
|
2160
|
+
timeoutSizeMessage: 0,
|
|
2161
|
+
startReachedBlockedByTimer: false,
|
|
2162
|
+
endReachedBlockedByTimer: false,
|
|
2163
|
+
scrollForNextCalculateItemsInView: void 0,
|
|
2164
|
+
enableScrollForNextCalculateItemsInView: true,
|
|
2165
|
+
minIndexSizeChanged: 0,
|
|
2166
|
+
queuedCalculateItemsInView: 0,
|
|
2167
|
+
lastBatchingAction: Date.now(),
|
|
2168
|
+
averageSizes: {},
|
|
2169
|
+
idsInView: [],
|
|
2170
|
+
containerItemKeys: /* @__PURE__ */ new Set(),
|
|
2171
|
+
idCache: /* @__PURE__ */ new Map(),
|
|
2172
|
+
props: {},
|
|
2173
|
+
refScroller: void 0,
|
|
2174
|
+
loadStartTime: Date.now(),
|
|
2175
|
+
initialScroll,
|
|
2176
|
+
lastLayout: void 0
|
|
2177
|
+
};
|
|
2178
|
+
set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
|
|
2179
|
+
set$(ctx, "extraData", extraData);
|
|
2180
|
+
}
|
|
2181
|
+
const state = refState.current;
|
|
2182
|
+
const isFirst = !state.props.renderItem;
|
|
2183
|
+
const didDataChange = state.props.data !== dataProp;
|
|
2184
|
+
state.props = {
|
|
2185
|
+
alignItemsAtEnd,
|
|
2186
|
+
data: dataProp,
|
|
2187
|
+
estimatedItemSize,
|
|
2188
|
+
maintainScrollAtEnd,
|
|
2189
|
+
maintainScrollAtEndThreshold,
|
|
2190
|
+
onEndReachedThreshold,
|
|
2191
|
+
onStartReachedThreshold,
|
|
2192
|
+
stylePaddingBottom: stylePaddingBottomState,
|
|
2193
|
+
horizontal: !!horizontal,
|
|
2194
|
+
maintainVisibleContentPosition,
|
|
2195
|
+
onItemSizeChanged,
|
|
2196
|
+
suggestEstimatedItemSize: !!suggestEstimatedItemSize,
|
|
2197
|
+
keyExtractor,
|
|
2198
|
+
onScroll: onScrollProp,
|
|
2199
|
+
getEstimatedItemSize,
|
|
2200
|
+
onStartReached,
|
|
2201
|
+
onEndReached,
|
|
2202
|
+
onLoad,
|
|
2203
|
+
renderItem: renderItem2,
|
|
2204
|
+
initialScroll,
|
|
2205
|
+
scrollBuffer,
|
|
2206
|
+
viewabilityConfigCallbackPairs: void 0,
|
|
2207
|
+
numColumns: numColumnsProp,
|
|
2208
|
+
initialContainerPoolRatio,
|
|
2209
|
+
stylePaddingTop: stylePaddingTopState
|
|
2210
|
+
};
|
|
2211
|
+
state.refScroller = refScroller;
|
|
2212
|
+
const checkResetContainers = (isFirst2) => {
|
|
2213
|
+
const state2 = refState.current;
|
|
2214
|
+
if (state2) {
|
|
2215
|
+
state2.props.data = dataProp;
|
|
2216
|
+
if (!isFirst2) {
|
|
2217
|
+
calculateItemsInView(ctx, state2, { dataChanged: true, doMVCP: true });
|
|
2218
|
+
const shouldMaintainScrollAtEnd = maintainScrollAtEnd === true || maintainScrollAtEnd.onDataChange;
|
|
2219
|
+
const didMaintainScrollAtEnd = shouldMaintainScrollAtEnd && doMaintainScrollAtEnd(ctx, state2, false);
|
|
2220
|
+
if (!didMaintainScrollAtEnd && dataProp.length > state2.props.data.length) {
|
|
2221
|
+
state2.isEndReached = false;
|
|
2222
|
+
}
|
|
2223
|
+
if (!didMaintainScrollAtEnd) {
|
|
2224
|
+
checkAtTop(state2);
|
|
2225
|
+
checkAtBottom(ctx, state2);
|
|
2226
|
+
}
|
|
2227
|
+
}
|
|
2228
|
+
}
|
|
2229
|
+
};
|
|
2230
|
+
const memoizedLastItemKeys = useMemo(() => {
|
|
2231
|
+
if (!dataProp.length) return [];
|
|
2232
|
+
return Array.from(
|
|
2233
|
+
{ length: Math.min(numColumnsProp, dataProp.length) },
|
|
2234
|
+
(_, i) => getId(state, dataProp.length - 1 - i)
|
|
2235
|
+
);
|
|
2236
|
+
}, [dataProp, numColumnsProp]);
|
|
2237
|
+
const initalizeStateVars = () => {
|
|
2238
|
+
set$(ctx, "lastItemKeys", memoizedLastItemKeys);
|
|
2239
|
+
set$(ctx, "numColumns", numColumnsProp);
|
|
2240
|
+
const prevPaddingTop = peek$(ctx, "stylePaddingTop");
|
|
2241
|
+
setPaddingTop(ctx, { stylePaddingTop: stylePaddingTopState });
|
|
2242
|
+
refState.current.props.stylePaddingBottom = stylePaddingBottomState;
|
|
2243
|
+
const paddingDiff = stylePaddingTopState - prevPaddingTop;
|
|
2244
|
+
if (paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
|
|
2245
|
+
calculateItemsInView(ctx, state, { doMVCP: true });
|
|
2246
|
+
requestAdjust(ctx, state, paddingDiff);
|
|
2247
|
+
}
|
|
2248
|
+
};
|
|
2249
|
+
if (isFirst) {
|
|
2250
|
+
initalizeStateVars();
|
|
2251
|
+
updateAllPositions(ctx, state);
|
|
2252
|
+
}
|
|
2253
|
+
const initialContentOffset = useMemo(() => {
|
|
2254
|
+
const initialContentOffset2 = initialScrollOffset || calculateOffsetForIndex(ctx, state, initialScrollIndex);
|
|
2255
|
+
refState.current.isStartReached = initialContentOffset2 < refState.current.scrollLength * onStartReachedThreshold;
|
|
2256
|
+
if (initialContentOffset2 > 0) {
|
|
2257
|
+
scrollTo(state, { offset: initialContentOffset2, animated: false, index: initialScrollIndex });
|
|
2258
|
+
}
|
|
2259
|
+
return initialContentOffset2;
|
|
2260
|
+
}, [renderNum]);
|
|
2261
|
+
if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
|
|
2262
|
+
refState.current.lastBatchingAction = Date.now();
|
|
2263
|
+
if (!keyExtractorProp && !isFirst && didDataChange) {
|
|
2264
|
+
__DEV__ && warnDevOnce(
|
|
2265
|
+
"keyExtractor",
|
|
2266
|
+
"Changing data without a keyExtractor can cause slow performance and resetting scroll. If your list data can change you should use a keyExtractor with a unique id for best performance and behavior."
|
|
2267
|
+
);
|
|
2268
|
+
refState.current.sizes.clear();
|
|
2269
|
+
refState.current.positions.clear();
|
|
2270
|
+
}
|
|
2271
|
+
}
|
|
2272
|
+
useLayoutEffect(() => {
|
|
2273
|
+
if (IsNewArchitecture) {
|
|
2274
|
+
let measured;
|
|
2275
|
+
refScroller.current.measure((x, y, width, height) => {
|
|
2276
|
+
measured = { x, y, width, height };
|
|
2277
|
+
});
|
|
2278
|
+
if (measured) {
|
|
2279
|
+
const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
|
|
2280
|
+
if (size) {
|
|
2281
|
+
handleLayout(ctx, state, measured, setCanRender);
|
|
2282
|
+
}
|
|
2283
|
+
}
|
|
2284
|
+
}
|
|
2285
|
+
if (!isFirst) {
|
|
2286
|
+
calculateItemsInView(ctx, state, { doMVCP: true });
|
|
2287
|
+
}
|
|
2288
|
+
}, [dataProp]);
|
|
2289
|
+
const onLayoutHeader = useCallback((rect, fromLayoutEffect) => {
|
|
2290
|
+
const size = rect[horizontal ? "width" : "height"];
|
|
2291
|
+
set$(ctx, "headerSize", size);
|
|
2292
|
+
if (initialScroll) {
|
|
2293
|
+
if (IsNewArchitecture && Platform.OS !== "android") {
|
|
2294
|
+
if (fromLayoutEffect) {
|
|
2295
|
+
setRenderNum((v) => v + 1);
|
|
2296
|
+
}
|
|
2297
|
+
} else {
|
|
2298
|
+
setTimeout(() => {
|
|
2299
|
+
scrollToIndex(ctx, state, { ...initialScroll, animated: false });
|
|
2300
|
+
}, 17);
|
|
2301
|
+
}
|
|
2302
|
+
}
|
|
2303
|
+
}, []);
|
|
2304
|
+
useLayoutEffect(() => {
|
|
2305
|
+
const didAllocateContainers = doInitialAllocateContainersCallback();
|
|
2306
|
+
if (!didAllocateContainers) {
|
|
2307
|
+
checkResetContainers(
|
|
2308
|
+
/*isFirst*/
|
|
2309
|
+
isFirst
|
|
2310
|
+
);
|
|
2311
|
+
}
|
|
2312
|
+
}, [dataProp, numColumnsProp]);
|
|
2313
|
+
useLayoutEffect(() => {
|
|
2314
|
+
set$(ctx, "extraData", extraData);
|
|
2315
|
+
}, [extraData]);
|
|
2316
|
+
useLayoutEffect(initalizeStateVars, [
|
|
2317
|
+
memoizedLastItemKeys.join(","),
|
|
2318
|
+
numColumnsProp,
|
|
2319
|
+
stylePaddingTopState,
|
|
2320
|
+
stylePaddingBottomState
|
|
2321
|
+
]);
|
|
2322
|
+
const doInitialAllocateContainersCallback = () => {
|
|
2323
|
+
return doInitialAllocateContainers(ctx, state);
|
|
2324
|
+
};
|
|
2325
|
+
useEffect(() => {
|
|
2326
|
+
const viewability = setupViewability({
|
|
2327
|
+
viewabilityConfig,
|
|
2328
|
+
viewabilityConfigCallbackPairs,
|
|
2329
|
+
onViewableItemsChanged
|
|
2330
|
+
});
|
|
2331
|
+
state.viewabilityConfigCallbackPairs = viewability;
|
|
2332
|
+
state.props.viewabilityConfigCallbackPairs = viewability;
|
|
2333
|
+
state.enableScrollForNextCalculateItemsInView = !viewability;
|
|
2334
|
+
}, [viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged]);
|
|
2335
|
+
if (!IsNewArchitecture) {
|
|
2336
|
+
useInit(() => {
|
|
2337
|
+
doInitialAllocateContainersCallback();
|
|
2338
|
+
});
|
|
2339
|
+
}
|
|
2340
|
+
const onLayout = useCallback((event) => {
|
|
2341
|
+
const layout = event.nativeEvent.layout;
|
|
2342
|
+
handleLayout(ctx, state, layout, setCanRender);
|
|
2343
|
+
if (onLayoutProp) {
|
|
2344
|
+
onLayoutProp(event);
|
|
2345
|
+
}
|
|
2346
|
+
}, []);
|
|
2347
|
+
useImperativeHandle(
|
|
2348
|
+
forwardedRef,
|
|
2349
|
+
() => {
|
|
2350
|
+
const scrollIndexIntoView = (options) => {
|
|
2351
|
+
const state2 = refState.current;
|
|
2352
|
+
if (state2) {
|
|
2353
|
+
const { index, ...rest2 } = options;
|
|
2354
|
+
const { startNoBuffer, endNoBuffer } = state2;
|
|
2355
|
+
if (index < startNoBuffer || index > endNoBuffer) {
|
|
2356
|
+
const viewPosition = index < startNoBuffer ? 0 : 1;
|
|
2357
|
+
scrollToIndex(ctx, state2, {
|
|
2358
|
+
...rest2,
|
|
2359
|
+
viewPosition,
|
|
2360
|
+
index
|
|
2361
|
+
});
|
|
2362
|
+
}
|
|
2363
|
+
}
|
|
2364
|
+
};
|
|
2365
|
+
return {
|
|
2366
|
+
flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
|
|
2367
|
+
getNativeScrollRef: () => refScroller.current,
|
|
2368
|
+
getScrollableNode: () => refScroller.current.getScrollableNode(),
|
|
2369
|
+
getScrollResponder: () => refScroller.current.getScrollResponder(),
|
|
2370
|
+
getState: () => {
|
|
2371
|
+
const state2 = refState.current;
|
|
2372
|
+
return state2 ? {
|
|
2373
|
+
contentLength: state2.totalSize,
|
|
2374
|
+
end: state2.endNoBuffer,
|
|
2375
|
+
endBuffered: state2.endBuffered,
|
|
2376
|
+
isAtEnd: state2.isAtEnd,
|
|
2377
|
+
isAtStart: state2.isAtStart,
|
|
2378
|
+
scroll: state2.scroll,
|
|
2379
|
+
scrollLength: state2.scrollLength,
|
|
2380
|
+
start: state2.startNoBuffer,
|
|
2381
|
+
startBuffered: state2.startBuffered,
|
|
2382
|
+
sizes: state2.sizesKnown,
|
|
2383
|
+
sizeAtIndex: (index) => state2.sizesKnown.get(getId(state2, index))
|
|
2384
|
+
} : {};
|
|
2385
|
+
},
|
|
2386
|
+
scrollIndexIntoView,
|
|
2387
|
+
scrollItemIntoView: ({ item, ...props2 }) => {
|
|
2388
|
+
const data = refState.current.props.data;
|
|
2389
|
+
const index = data.indexOf(item);
|
|
2390
|
+
if (index !== -1) {
|
|
2391
|
+
scrollIndexIntoView({ index, ...props2 });
|
|
2392
|
+
}
|
|
2393
|
+
},
|
|
2394
|
+
scrollToIndex: (params) => scrollToIndex(ctx, state, params),
|
|
2395
|
+
scrollToItem: ({ item, ...props2 }) => {
|
|
2396
|
+
const data = refState.current.props.data;
|
|
2397
|
+
const index = data.indexOf(item);
|
|
2398
|
+
if (index !== -1) {
|
|
2399
|
+
scrollToIndex(ctx, state, { index, ...props2 });
|
|
2400
|
+
}
|
|
2401
|
+
},
|
|
2402
|
+
scrollToOffset: (params) => scrollTo(state, params),
|
|
2403
|
+
scrollToEnd: (options) => {
|
|
2404
|
+
const data = refState.current.props.data;
|
|
2405
|
+
const stylePaddingBottom = refState.current.props.stylePaddingBottom;
|
|
2406
|
+
const index = data.length - 1;
|
|
2407
|
+
if (index !== -1) {
|
|
2408
|
+
const paddingBottom = stylePaddingBottom || 0;
|
|
2409
|
+
const footerSize = peek$(ctx, "footerSize") || 0;
|
|
2410
|
+
scrollToIndex(ctx, state, {
|
|
2411
|
+
index,
|
|
2412
|
+
viewPosition: 1,
|
|
2413
|
+
viewOffset: -paddingBottom - footerSize,
|
|
2414
|
+
...options
|
|
2415
|
+
});
|
|
2416
|
+
}
|
|
2417
|
+
},
|
|
2418
|
+
setVisibleContentAnchorOffset: (value) => {
|
|
2419
|
+
const val = typeof value === "function" ? value(peek$(ctx, "scrollAdjustUserOffset") || 0) : value;
|
|
2420
|
+
set$(ctx, "scrollAdjustUserOffset", val);
|
|
2421
|
+
}
|
|
2422
|
+
};
|
|
2423
|
+
},
|
|
2424
|
+
[]
|
|
2425
|
+
);
|
|
2426
|
+
if (Platform.OS === "web") {
|
|
2427
|
+
useEffect(() => {
|
|
2428
|
+
if (initialContentOffset) {
|
|
2429
|
+
scrollTo(state, { offset: initialContentOffset, animated: false });
|
|
2430
|
+
}
|
|
2431
|
+
}, []);
|
|
2432
|
+
}
|
|
2433
|
+
const fns = useMemo(
|
|
2434
|
+
() => ({
|
|
2435
|
+
updateItemSize: (itemKey, sizeObj) => updateItemSize(ctx, state, itemKey, sizeObj),
|
|
2436
|
+
getRenderedItem: (key) => getRenderedItem(ctx, state, key),
|
|
2437
|
+
onScroll: (event) => onScroll(ctx, state, event)
|
|
2438
|
+
}),
|
|
2439
|
+
[]
|
|
2440
|
+
);
|
|
2441
|
+
return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
|
|
2442
|
+
ListComponent,
|
|
2443
|
+
{
|
|
2444
|
+
...rest,
|
|
2445
|
+
canRender,
|
|
2446
|
+
horizontal,
|
|
2447
|
+
refScrollView: combinedRef,
|
|
2448
|
+
initialContentOffset,
|
|
2449
|
+
getRenderedItem: fns.getRenderedItem,
|
|
2450
|
+
updateItemSize: fns.updateItemSize,
|
|
2451
|
+
onScroll: fns.onScroll,
|
|
2452
|
+
onMomentumScrollEnd: (event) => {
|
|
2453
|
+
requestAnimationFrame(() => {
|
|
2454
|
+
finishScrollTo(refState.current);
|
|
2455
|
+
});
|
|
2456
|
+
if (onMomentumScrollEnd) {
|
|
2457
|
+
onMomentumScrollEnd(event);
|
|
2458
|
+
}
|
|
2459
|
+
},
|
|
2460
|
+
onLayout,
|
|
2461
|
+
recycleItems,
|
|
2462
|
+
alignItemsAtEnd,
|
|
2463
|
+
ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
|
|
2464
|
+
ListHeaderComponent,
|
|
2465
|
+
maintainVisibleContentPosition,
|
|
2466
|
+
scrollEventThrottle: Platform.OS === "web" ? 16 : void 0,
|
|
2467
|
+
waitForInitialLayout,
|
|
2468
|
+
refreshControl: refreshControl ? stylePaddingTopState > 0 ? React3.cloneElement(refreshControl, {
|
|
2469
|
+
progressViewOffset: (refreshControl.props.progressViewOffset || 0) + stylePaddingTopState
|
|
2470
|
+
}) : refreshControl : onRefresh && /* @__PURE__ */ React3.createElement(
|
|
2471
|
+
RefreshControl,
|
|
2472
|
+
{
|
|
2473
|
+
refreshing: !!refreshing,
|
|
2474
|
+
onRefresh,
|
|
2475
|
+
progressViewOffset: (progressViewOffset || 0) + stylePaddingTopState
|
|
2476
|
+
}
|
|
2477
|
+
),
|
|
2478
|
+
style,
|
|
2479
|
+
contentContainerStyle,
|
|
2480
|
+
scrollAdjustHandler: (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler,
|
|
2481
|
+
onLayoutHeader
|
|
2482
|
+
}
|
|
2483
|
+
), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React3.createElement(DebugView, { state: refState.current }));
|
|
2484
|
+
});
|
|
2485
|
+
var typedForwardRef2 = forwardRef;
|
|
2486
|
+
var renderItem = ({ item }) => item;
|
|
2487
|
+
var LazyLegendList = typedForwardRef2(function LazyLegendList2(props, forwardedRef) {
|
|
2488
|
+
const { LegendList: LegendListProp, children, ...rest } = props;
|
|
2489
|
+
const LegendListComponent = LegendListProp != null ? LegendListProp : LegendList;
|
|
2490
|
+
const data = (isArray(children) ? children : React3.Children.toArray(children)).flat(1);
|
|
2491
|
+
return (
|
|
2492
|
+
// @ts-expect-error TODO: Fix this type
|
|
2493
|
+
/* @__PURE__ */ React3.createElement(LegendListComponent, { ...rest, data, renderItem, ref: forwardedRef })
|
|
2494
|
+
);
|
|
2495
|
+
});
|
|
2496
|
+
|
|
2497
|
+
export { LazyLegendList, LegendList, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
|