@legendapp/list 1.0.0-beta.24 → 1.0.0-beta.26
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/animated.d.mts +2 -1
- package/animated.d.ts +2 -1
- package/index.d.mts +14 -10
- package/index.d.ts +14 -10
- package/index.js +88 -46
- package/index.mjs +88 -46
- package/package.json +1 -1
package/animated.d.mts
CHANGED
|
@@ -3,7 +3,7 @@ import * as _legendapp_list from '@legendapp/list';
|
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
4
|
import { Animated } from 'react-native';
|
|
5
5
|
|
|
6
|
-
declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "
|
|
6
|
+
declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
|
|
7
7
|
data: readonly T[];
|
|
8
8
|
initialScrollOffset?: number;
|
|
9
9
|
initialScrollIndex?: number;
|
|
@@ -19,6 +19,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
|
|
|
19
19
|
columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
|
|
20
20
|
refScrollView?: React.Ref<react_native.ScrollView>;
|
|
21
21
|
waitForInitialLayout?: boolean;
|
|
22
|
+
initialContainerPoolRatio?: number | undefined;
|
|
22
23
|
estimatedItemSize?: number;
|
|
23
24
|
getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
|
|
24
25
|
onStartReached?: ((info: {
|
package/animated.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import * as _legendapp_list from '@legendapp/list';
|
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
4
|
import { Animated } from 'react-native';
|
|
5
5
|
|
|
6
|
-
declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "
|
|
6
|
+
declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
|
|
7
7
|
data: readonly T[];
|
|
8
8
|
initialScrollOffset?: number;
|
|
9
9
|
initialScrollIndex?: number;
|
|
@@ -19,6 +19,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
|
|
|
19
19
|
columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
|
|
20
20
|
refScrollView?: React.Ref<react_native.ScrollView>;
|
|
21
21
|
waitForInitialLayout?: boolean;
|
|
22
|
+
initialContainerPoolRatio?: number | undefined;
|
|
22
23
|
estimatedItemSize?: number;
|
|
23
24
|
getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
|
|
24
25
|
onStartReached?: ((info: {
|
package/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
2
|
import { ComponentProps, ReactNode } from 'react';
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
|
-
import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
|
|
4
|
+
import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
|
|
5
5
|
import Animated from 'react-native-reanimated';
|
|
6
6
|
|
|
7
7
|
declare class ScrollAdjustHandler {
|
|
@@ -34,6 +34,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
|
|
|
34
34
|
columnWrapperStyle?: ColumnWrapperStyle;
|
|
35
35
|
refScrollView?: React.Ref<ScrollView>;
|
|
36
36
|
waitForInitialLayout?: boolean;
|
|
37
|
+
initialContainerPoolRatio?: number | undefined;
|
|
37
38
|
estimatedItemSize?: number;
|
|
38
39
|
getEstimatedItemSize?: (index: number, item: ItemT) => number;
|
|
39
40
|
onStartReached?: ((info: {
|
|
@@ -138,6 +139,7 @@ interface InternalState {
|
|
|
138
139
|
queuedCalculateItemsInView: number | undefined;
|
|
139
140
|
lastBatchingAction: number;
|
|
140
141
|
ignoreScrollFromCalcTotal?: boolean;
|
|
142
|
+
onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
|
|
141
143
|
}
|
|
142
144
|
interface ViewableRange<T> {
|
|
143
145
|
startBuffered: number;
|
|
@@ -173,20 +175,21 @@ type LegendListRef = {
|
|
|
173
175
|
scrollToEnd(options?: {
|
|
174
176
|
animated?: boolean | undefined;
|
|
175
177
|
}): void;
|
|
176
|
-
scrollToIndex
|
|
178
|
+
scrollToIndex(params: {
|
|
179
|
+
animated?: boolean | undefined;
|
|
177
180
|
index: number;
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
}) => void;
|
|
181
|
+
viewOffset?: number | undefined;
|
|
182
|
+
viewPosition?: number | undefined;
|
|
183
|
+
}): void;
|
|
182
184
|
scrollToItem(params: {
|
|
183
|
-
animated?: boolean;
|
|
185
|
+
animated?: boolean | undefined;
|
|
184
186
|
item: any;
|
|
185
|
-
|
|
187
|
+
viewOffset?: number | undefined;
|
|
188
|
+
viewPosition?: number | undefined;
|
|
186
189
|
}): void;
|
|
187
190
|
scrollToOffset(params: {
|
|
188
191
|
offset: number;
|
|
189
|
-
animated?: boolean;
|
|
192
|
+
animated?: boolean | undefined;
|
|
190
193
|
}): void;
|
|
191
194
|
};
|
|
192
195
|
interface ViewToken<ItemT = any> {
|
|
@@ -256,7 +259,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
|
|
|
256
259
|
};
|
|
257
260
|
declare const typedMemo: TypedMemo;
|
|
258
261
|
|
|
259
|
-
declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "
|
|
262
|
+
declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
|
|
260
263
|
data: readonly T[];
|
|
261
264
|
initialScrollOffset?: number;
|
|
262
265
|
initialScrollIndex?: number;
|
|
@@ -272,6 +275,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
|
|
|
272
275
|
columnWrapperStyle?: ColumnWrapperStyle;
|
|
273
276
|
refScrollView?: React$1.Ref<ScrollView>;
|
|
274
277
|
waitForInitialLayout?: boolean;
|
|
278
|
+
initialContainerPoolRatio?: number | undefined;
|
|
275
279
|
estimatedItemSize?: number;
|
|
276
280
|
getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
|
|
277
281
|
onStartReached?: ((info: {
|
package/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
2
|
import { ComponentProps, ReactNode } from 'react';
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
|
-
import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
|
|
4
|
+
import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
|
|
5
5
|
import Animated from 'react-native-reanimated';
|
|
6
6
|
|
|
7
7
|
declare class ScrollAdjustHandler {
|
|
@@ -34,6 +34,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
|
|
|
34
34
|
columnWrapperStyle?: ColumnWrapperStyle;
|
|
35
35
|
refScrollView?: React.Ref<ScrollView>;
|
|
36
36
|
waitForInitialLayout?: boolean;
|
|
37
|
+
initialContainerPoolRatio?: number | undefined;
|
|
37
38
|
estimatedItemSize?: number;
|
|
38
39
|
getEstimatedItemSize?: (index: number, item: ItemT) => number;
|
|
39
40
|
onStartReached?: ((info: {
|
|
@@ -138,6 +139,7 @@ interface InternalState {
|
|
|
138
139
|
queuedCalculateItemsInView: number | undefined;
|
|
139
140
|
lastBatchingAction: number;
|
|
140
141
|
ignoreScrollFromCalcTotal?: boolean;
|
|
142
|
+
onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
|
|
141
143
|
}
|
|
142
144
|
interface ViewableRange<T> {
|
|
143
145
|
startBuffered: number;
|
|
@@ -173,20 +175,21 @@ type LegendListRef = {
|
|
|
173
175
|
scrollToEnd(options?: {
|
|
174
176
|
animated?: boolean | undefined;
|
|
175
177
|
}): void;
|
|
176
|
-
scrollToIndex
|
|
178
|
+
scrollToIndex(params: {
|
|
179
|
+
animated?: boolean | undefined;
|
|
177
180
|
index: number;
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
}) => void;
|
|
181
|
+
viewOffset?: number | undefined;
|
|
182
|
+
viewPosition?: number | undefined;
|
|
183
|
+
}): void;
|
|
182
184
|
scrollToItem(params: {
|
|
183
|
-
animated?: boolean;
|
|
185
|
+
animated?: boolean | undefined;
|
|
184
186
|
item: any;
|
|
185
|
-
|
|
187
|
+
viewOffset?: number | undefined;
|
|
188
|
+
viewPosition?: number | undefined;
|
|
186
189
|
}): void;
|
|
187
190
|
scrollToOffset(params: {
|
|
188
191
|
offset: number;
|
|
189
|
-
animated?: boolean;
|
|
192
|
+
animated?: boolean | undefined;
|
|
190
193
|
}): void;
|
|
191
194
|
};
|
|
192
195
|
interface ViewToken<ItemT = any> {
|
|
@@ -256,7 +259,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
|
|
|
256
259
|
};
|
|
257
260
|
declare const typedMemo: TypedMemo;
|
|
258
261
|
|
|
259
|
-
declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "
|
|
262
|
+
declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
|
|
260
263
|
data: readonly T[];
|
|
261
264
|
initialScrollOffset?: number;
|
|
262
265
|
initialScrollIndex?: number;
|
|
@@ -272,6 +275,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
|
|
|
272
275
|
columnWrapperStyle?: ColumnWrapperStyle;
|
|
273
276
|
refScrollView?: React$1.Ref<ScrollView>;
|
|
274
277
|
waitForInitialLayout?: boolean;
|
|
278
|
+
initialContainerPoolRatio?: number | undefined;
|
|
275
279
|
estimatedItemSize?: number;
|
|
276
280
|
getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
|
|
277
281
|
onStartReached?: ((info: {
|
package/index.js
CHANGED
|
@@ -171,15 +171,24 @@ function useRecyclingState(valueOrFun) {
|
|
|
171
171
|
});
|
|
172
172
|
return stateInfo;
|
|
173
173
|
}
|
|
174
|
+
var DebugRow = ({ children }) => {
|
|
175
|
+
return /* @__PURE__ */ React.createElement(reactNative.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" } }, children);
|
|
176
|
+
};
|
|
174
177
|
var DebugView = React6.memo(function DebugView2({ state }) {
|
|
175
178
|
const ctx = useStateContext();
|
|
176
|
-
const totalSize = use$("totalSize");
|
|
179
|
+
const totalSize = use$("totalSize") || 0;
|
|
180
|
+
const totalSizeWithScrollAdjust = use$("totalSizeWithScrollAdjust") || 0;
|
|
181
|
+
const scrollAdjust = use$("scrollAdjust") || 0;
|
|
182
|
+
const rawScroll = use$("debugRawScroll") || 0;
|
|
183
|
+
const scroll = use$("debugComputedScroll") || 0;
|
|
177
184
|
const contentSize = getContentSize(ctx);
|
|
178
185
|
const [, forceUpdate] = React6.useReducer((x) => x + 1, 0);
|
|
186
|
+
use$("numContainers");
|
|
187
|
+
use$("numContainersPooled");
|
|
179
188
|
useInterval(() => {
|
|
180
189
|
forceUpdate();
|
|
181
190
|
}, 100);
|
|
182
|
-
return /* @__PURE__ */
|
|
191
|
+
return /* @__PURE__ */ React.createElement(
|
|
183
192
|
reactNative.View,
|
|
184
193
|
{
|
|
185
194
|
style: {
|
|
@@ -189,12 +198,21 @@ var DebugView = React6.memo(function DebugView2({ state }) {
|
|
|
189
198
|
paddingLeft: 4,
|
|
190
199
|
paddingBottom: 4,
|
|
191
200
|
// height: 100,
|
|
192
|
-
backgroundColor: "#FFFFFFCC"
|
|
193
|
-
|
|
201
|
+
backgroundColor: "#FFFFFFCC",
|
|
202
|
+
padding: 4,
|
|
203
|
+
borderRadius: 4
|
|
204
|
+
},
|
|
205
|
+
pointerEvents: "none"
|
|
194
206
|
},
|
|
195
|
-
/* @__PURE__ */
|
|
196
|
-
/* @__PURE__ */
|
|
197
|
-
/* @__PURE__ */
|
|
207
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "TotalSize:"), /* @__PURE__ */ React.createElement(reactNative.Text, null, totalSize.toFixed(2))),
|
|
208
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "ContentSize:"), /* @__PURE__ */ React.createElement(reactNative.Text, null, contentSize.toFixed(2))),
|
|
209
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "At end:"), /* @__PURE__ */ React.createElement(reactNative.Text, null, String(state.isAtBottom))),
|
|
210
|
+
/* @__PURE__ */ React.createElement(reactNative.Text, null),
|
|
211
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "ScrollAdjust:"), /* @__PURE__ */ React.createElement(reactNative.Text, null, scrollAdjust.toFixed(2))),
|
|
212
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "TotalSizeReal: "), /* @__PURE__ */ React.createElement(reactNative.Text, null, totalSizeWithScrollAdjust.toFixed(2))),
|
|
213
|
+
/* @__PURE__ */ React.createElement(reactNative.Text, null),
|
|
214
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "RawScroll: "), /* @__PURE__ */ React.createElement(reactNative.Text, null, rawScroll.toFixed(2))),
|
|
215
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "ComputedScroll: "), /* @__PURE__ */ React.createElement(reactNative.Text, null, scroll.toFixed(2)))
|
|
198
216
|
);
|
|
199
217
|
});
|
|
200
218
|
function useInterval(callback, delay) {
|
|
@@ -274,17 +292,6 @@ var Container = ({
|
|
|
274
292
|
if (itemKey !== void 0) {
|
|
275
293
|
const layout = event.nativeEvent.layout;
|
|
276
294
|
const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
|
|
277
|
-
if (size === 0) {
|
|
278
|
-
if (layout.x !== POSITION_OUT_OF_VIEW && layout.y !== POSITION_OUT_OF_VIEW) {
|
|
279
|
-
console.log(
|
|
280
|
-
"[WARN] Container 0 height reported, possible bug in LegendList",
|
|
281
|
-
id,
|
|
282
|
-
itemKey,
|
|
283
|
-
event.nativeEvent
|
|
284
|
-
);
|
|
285
|
-
}
|
|
286
|
-
return;
|
|
287
|
-
}
|
|
288
295
|
refLastSize.current = size;
|
|
289
296
|
updateItemSize(itemKey, size);
|
|
290
297
|
}
|
|
@@ -803,6 +810,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
803
810
|
refreshing,
|
|
804
811
|
progressViewOffset,
|
|
805
812
|
refreshControl,
|
|
813
|
+
initialContainerPoolRatio = 2,
|
|
806
814
|
...rest
|
|
807
815
|
} = props;
|
|
808
816
|
const { style, contentContainerStyle } = props;
|
|
@@ -861,6 +869,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
861
869
|
return 0;
|
|
862
870
|
};
|
|
863
871
|
const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React6.useMemo(calculateOffsetForIndex, []);
|
|
872
|
+
if (reactNative.Platform.OS === "web") {
|
|
873
|
+
React6.useEffect(() => {
|
|
874
|
+
var _a2;
|
|
875
|
+
if (initialContentOffset) {
|
|
876
|
+
(_a2 = refScroller.current) == null ? void 0 : _a2.scrollTo({
|
|
877
|
+
x: horizontal ? initialContentOffset : 0,
|
|
878
|
+
y: horizontal ? 0 : initialContentOffset,
|
|
879
|
+
animated: false
|
|
880
|
+
});
|
|
881
|
+
}
|
|
882
|
+
}, []);
|
|
883
|
+
}
|
|
864
884
|
if (!refState.current) {
|
|
865
885
|
const initialScrollLength = reactNative.Dimensions.get("window")[horizontal ? "width" : "height"];
|
|
866
886
|
refState.current = {
|
|
@@ -904,7 +924,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
904
924
|
minIndexSizeChanged: 0,
|
|
905
925
|
numPendingInitialLayout: 0,
|
|
906
926
|
queuedCalculateItemsInView: 0,
|
|
907
|
-
lastBatchingAction: Date.now()
|
|
927
|
+
lastBatchingAction: Date.now(),
|
|
928
|
+
onScroll: onScrollProp
|
|
908
929
|
};
|
|
909
930
|
if (maintainVisibleContentPosition) {
|
|
910
931
|
if (initialScrollIndex) {
|
|
@@ -927,6 +948,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
927
948
|
}
|
|
928
949
|
const didDataChange = refState.current.data !== dataProp;
|
|
929
950
|
refState.current.data = dataProp;
|
|
951
|
+
refState.current.onScroll = onScrollProp;
|
|
930
952
|
const getAnchorElementIndex = () => {
|
|
931
953
|
const state = refState.current;
|
|
932
954
|
if (state.anchorElement) {
|
|
@@ -976,7 +998,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
976
998
|
}, []);
|
|
977
999
|
const getRowHeight = (n) => {
|
|
978
1000
|
const { rowHeights, data } = refState.current;
|
|
979
|
-
|
|
1001
|
+
const numColumns = peek$(ctx, "numColumns");
|
|
1002
|
+
if (numColumns === 1) {
|
|
980
1003
|
const id = getId(n);
|
|
981
1004
|
return getItemSize(id, n, data[n]);
|
|
982
1005
|
}
|
|
@@ -984,8 +1007,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
984
1007
|
return rowHeights.get(n) || 0;
|
|
985
1008
|
}
|
|
986
1009
|
let rowHeight = 0;
|
|
987
|
-
const startEl = n *
|
|
988
|
-
for (let i = startEl; i < startEl +
|
|
1010
|
+
const startEl = n * numColumns;
|
|
1011
|
+
for (let i = startEl; i < startEl + numColumns && i < data.length; i++) {
|
|
989
1012
|
const id = getId(i);
|
|
990
1013
|
const size = getItemSize(id, i, data[i]);
|
|
991
1014
|
rowHeight = Math.max(rowHeight, size);
|
|
@@ -1004,10 +1027,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1004
1027
|
return /* @__PURE__ */ new Map();
|
|
1005
1028
|
}
|
|
1006
1029
|
const map = state.belowAnchorElementPositions || /* @__PURE__ */ new Map();
|
|
1030
|
+
const numColumns = peek$(ctx, "numColumns");
|
|
1007
1031
|
for (let i = anchorIndex - 1; i >= 0; i--) {
|
|
1008
1032
|
const id = getId(i);
|
|
1009
|
-
const rowNumber = Math.floor(i /
|
|
1010
|
-
if (i %
|
|
1033
|
+
const rowNumber = Math.floor(i / numColumns);
|
|
1034
|
+
if (i % numColumns === 0) {
|
|
1011
1035
|
top -= getRowHeight(rowNumber);
|
|
1012
1036
|
}
|
|
1013
1037
|
map.set(id, top);
|
|
@@ -1044,9 +1068,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1044
1068
|
return;
|
|
1045
1069
|
}
|
|
1046
1070
|
const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
|
|
1071
|
+
const numColumns = peek$(ctx, "numColumns");
|
|
1047
1072
|
const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
|
|
1048
1073
|
const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
|
|
1049
1074
|
const scroll = scrollState - previousScrollAdjust - topPad;
|
|
1075
|
+
if (ENABLE_DEBUG_VIEW) {
|
|
1076
|
+
set$(ctx, "debugRawScroll", scrollState);
|
|
1077
|
+
set$(ctx, "debugComputedScroll", scroll);
|
|
1078
|
+
}
|
|
1050
1079
|
let scrollBufferTop = scrollBuffer;
|
|
1051
1080
|
let scrollBufferBottom = scrollBuffer;
|
|
1052
1081
|
if (scrollExtra > 8) {
|
|
@@ -1095,7 +1124,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1095
1124
|
}
|
|
1096
1125
|
}
|
|
1097
1126
|
}
|
|
1098
|
-
const numColumns = peek$(ctx, "numColumns");
|
|
1099
1127
|
const loopStartMod = loopStart % numColumns;
|
|
1100
1128
|
if (loopStartMod > 0) {
|
|
1101
1129
|
loopStart -= loopStartMod;
|
|
@@ -1172,6 +1200,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1172
1200
|
if (startBuffered !== null && endBuffered !== null) {
|
|
1173
1201
|
const prevNumContainers = ctx.values.get("numContainers");
|
|
1174
1202
|
let numContainers = prevNumContainers;
|
|
1203
|
+
let didWarnMoreContainers = false;
|
|
1175
1204
|
for (let i = startBuffered; i <= endBuffered; i++) {
|
|
1176
1205
|
let isContained = false;
|
|
1177
1206
|
const id = getId(i);
|
|
@@ -1214,9 +1243,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1214
1243
|
set$(ctx, `containerItemData${containerId}`, data[index]);
|
|
1215
1244
|
set$(ctx, `containerPosition${containerId}`, ANCHORED_POSITION_OUT_OF_VIEW);
|
|
1216
1245
|
set$(ctx, `containerColumn${containerId}`, -1);
|
|
1217
|
-
if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
|
|
1246
|
+
if (__DEV__ && !didWarnMoreContainers && numContainers > peek$(ctx, "numContainersPooled")) {
|
|
1247
|
+
didWarnMoreContainers = true;
|
|
1218
1248
|
console.warn(
|
|
1219
|
-
"[legend-list] No container to recycle, so creating one on demand. This can be a performance issue and is likely caused by the estimatedItemSize being too
|
|
1249
|
+
"[legend-list] No container to recycle, 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. numContainers:",
|
|
1220
1250
|
numContainers
|
|
1221
1251
|
);
|
|
1222
1252
|
}
|
|
@@ -1226,14 +1256,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1226
1256
|
if (numContainers !== prevNumContainers) {
|
|
1227
1257
|
set$(ctx, "numContainers", numContainers);
|
|
1228
1258
|
if (numContainers > peek$(ctx, "numContainersPooled")) {
|
|
1229
|
-
set$(ctx, "numContainersPooled", numContainers);
|
|
1259
|
+
set$(ctx, "numContainersPooled", Math.ceil(numContainers * 1.5));
|
|
1230
1260
|
}
|
|
1231
1261
|
}
|
|
1232
1262
|
for (let i = 0; i < numContainers; i++) {
|
|
1233
1263
|
const itemKey = peek$(ctx, `containerItemKey${i}`);
|
|
1234
1264
|
const itemIndex = state.indexByKey.get(itemKey);
|
|
1235
1265
|
const item = data[itemIndex];
|
|
1236
|
-
if (item) {
|
|
1266
|
+
if (item !== void 0) {
|
|
1237
1267
|
const id = getId(itemIndex);
|
|
1238
1268
|
if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
|
|
1239
1269
|
const prevPos = peek$(ctx, `containerPosition${i}`).top;
|
|
@@ -1250,7 +1280,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1250
1280
|
};
|
|
1251
1281
|
const column2 = columns.get(id) || 1;
|
|
1252
1282
|
if (maintainVisibleContentPosition && itemIndex < anchorElementIndex) {
|
|
1253
|
-
const currentRow = Math.floor(itemIndex /
|
|
1283
|
+
const currentRow = Math.floor(itemIndex / numColumns);
|
|
1254
1284
|
const rowHeight = getRowHeight(currentRow);
|
|
1255
1285
|
const elementHeight = getItemSize(id, itemIndex, data[i]);
|
|
1256
1286
|
const diff = rowHeight - elementHeight;
|
|
@@ -1408,13 +1438,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1408
1438
|
}
|
|
1409
1439
|
};
|
|
1410
1440
|
const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
|
|
1411
|
-
var _a2, _b2, _c2;
|
|
1441
|
+
var _a2, _b2, _c2, _d2;
|
|
1412
1442
|
let totalSize = 0;
|
|
1413
1443
|
let totalSizeBelowIndex = 0;
|
|
1414
1444
|
const indexByKey = /* @__PURE__ */ new Map();
|
|
1415
1445
|
const newPositions = /* @__PURE__ */ new Map();
|
|
1416
1446
|
let column = 1;
|
|
1417
1447
|
let maxSizeInRow = 0;
|
|
1448
|
+
const numColumns = (_a2 = peek$(ctx, "numColumns")) != null ? _a2 : numColumnsProp;
|
|
1418
1449
|
if (!refState.current) {
|
|
1419
1450
|
return;
|
|
1420
1451
|
}
|
|
@@ -1443,8 +1474,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1443
1474
|
id: getId(0)
|
|
1444
1475
|
};
|
|
1445
1476
|
refState.current.anchorElement = newAnchorElement;
|
|
1446
|
-
(
|
|
1447
|
-
(
|
|
1477
|
+
(_b2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _b2.clear();
|
|
1478
|
+
(_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
|
|
1448
1479
|
setTimeout(() => {
|
|
1449
1480
|
calculateItemsInView();
|
|
1450
1481
|
}, 0);
|
|
@@ -1459,7 +1490,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1459
1490
|
} else {
|
|
1460
1491
|
refState.current.startBufferedId = void 0;
|
|
1461
1492
|
}
|
|
1462
|
-
(
|
|
1493
|
+
(_d2 = refScroller.current) == null ? void 0 : _d2.scrollTo({ x: 0, y: 0, animated: false });
|
|
1463
1494
|
setTimeout(() => {
|
|
1464
1495
|
calculateItemsInView();
|
|
1465
1496
|
}, 0);
|
|
@@ -1472,7 +1503,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1472
1503
|
const size = getItemSize(key, i, dataProp[i]);
|
|
1473
1504
|
maxSizeInRow = Math.max(maxSizeInRow, size);
|
|
1474
1505
|
column++;
|
|
1475
|
-
if (column >
|
|
1506
|
+
if (column > numColumns) {
|
|
1476
1507
|
if (maintainVisibleContentPosition && anchorElementIndex !== void 0 && i < anchorElementIndex) {
|
|
1477
1508
|
totalSizeBelowIndex += maxSizeInRow;
|
|
1478
1509
|
}
|
|
@@ -1571,7 +1602,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1571
1602
|
set$(ctx, `containerColumn${i}`, -1);
|
|
1572
1603
|
}
|
|
1573
1604
|
set$(ctx, "numContainers", numContainers);
|
|
1574
|
-
set$(ctx, "numContainersPooled", numContainers *
|
|
1605
|
+
set$(ctx, "numContainersPooled", numContainers * initialContainerPoolRatio);
|
|
1575
1606
|
if (initialScrollIndex) {
|
|
1576
1607
|
requestAnimationFrame(() => {
|
|
1577
1608
|
calculateItemsInView();
|
|
@@ -1599,14 +1630,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1599
1630
|
state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
|
|
1600
1631
|
const prevSize = getItemSize(itemKey, index, data);
|
|
1601
1632
|
let needsCalculate = false;
|
|
1633
|
+
let needsUpdateContainersDidLayout = false;
|
|
1602
1634
|
if (state.numPendingInitialLayout > 0) {
|
|
1603
1635
|
state.numPendingInitialLayout--;
|
|
1604
1636
|
if (state.numPendingInitialLayout === 0) {
|
|
1605
1637
|
needsCalculate = true;
|
|
1606
1638
|
state.numPendingInitialLayout = -1;
|
|
1607
|
-
|
|
1608
|
-
set$(ctx, "containersDidLayout", true);
|
|
1609
|
-
});
|
|
1639
|
+
needsUpdateContainersDidLayout = true;
|
|
1610
1640
|
}
|
|
1611
1641
|
}
|
|
1612
1642
|
if (!prevSize || Math.abs(prevSize - size) > 0.5) {
|
|
@@ -1662,9 +1692,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1662
1692
|
state.queuedCalculateItemsInView = requestAnimationFrame(() => {
|
|
1663
1693
|
state.queuedCalculateItemsInView = void 0;
|
|
1664
1694
|
calculateItemsInView();
|
|
1695
|
+
if (needsUpdateContainersDidLayout) {
|
|
1696
|
+
set$(ctx, "containersDidLayout", true);
|
|
1697
|
+
}
|
|
1665
1698
|
});
|
|
1666
1699
|
} else {
|
|
1667
1700
|
calculateItemsInView();
|
|
1701
|
+
if (needsUpdateContainersDidLayout) {
|
|
1702
|
+
queueMicrotask(() => {
|
|
1703
|
+
set$(ctx, "containersDidLayout", true);
|
|
1704
|
+
});
|
|
1705
|
+
}
|
|
1668
1706
|
}
|
|
1669
1707
|
}
|
|
1670
1708
|
}
|
|
@@ -1698,18 +1736,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1698
1736
|
}, []);
|
|
1699
1737
|
const handleScroll = React6.useCallback(
|
|
1700
1738
|
(event, fromSelf) => {
|
|
1701
|
-
var _a2, _b2, _c2;
|
|
1739
|
+
var _a2, _b2, _c2, _d2;
|
|
1702
1740
|
if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c2 = event.nativeEvent.contentSize) == null ? void 0 : _c2.width) === 0) {
|
|
1703
1741
|
return;
|
|
1704
1742
|
}
|
|
1705
1743
|
const state = refState.current;
|
|
1706
|
-
|
|
1744
|
+
const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
|
|
1745
|
+
if (state.ignoreScrollFromCalcTotal && newScroll !== 0) {
|
|
1707
1746
|
return;
|
|
1708
1747
|
}
|
|
1709
1748
|
state.hasScrolled = true;
|
|
1710
1749
|
state.lastBatchingAction = Date.now();
|
|
1711
1750
|
const currentTime = performance.now();
|
|
1712
|
-
const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
|
|
1713
1751
|
if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
|
|
1714
1752
|
state.scrollHistory.push({ scroll: newScroll, time: currentTime });
|
|
1715
1753
|
}
|
|
@@ -1739,7 +1777,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1739
1777
|
checkAtBottom();
|
|
1740
1778
|
checkAtTop();
|
|
1741
1779
|
if (!fromSelf) {
|
|
1742
|
-
|
|
1780
|
+
(_d2 = state.onScroll) == null ? void 0 : _d2.call(state, event);
|
|
1743
1781
|
}
|
|
1744
1782
|
},
|
|
1745
1783
|
[]
|
|
@@ -1750,7 +1788,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1750
1788
|
const scrollToIndex = ({
|
|
1751
1789
|
index,
|
|
1752
1790
|
viewOffset = 0,
|
|
1753
|
-
animated = true
|
|
1791
|
+
animated = true,
|
|
1792
|
+
viewPosition = 0
|
|
1754
1793
|
}) => {
|
|
1755
1794
|
var _a2;
|
|
1756
1795
|
const state = refState.current;
|
|
@@ -1781,6 +1820,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1781
1820
|
},
|
|
1782
1821
|
animated ? 1e3 : 50
|
|
1783
1822
|
);
|
|
1823
|
+
if (viewPosition) {
|
|
1824
|
+
firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
|
|
1825
|
+
}
|
|
1784
1826
|
const offset = horizontal ? { x: firstIndexScrollPostion, y: 0 } : { x: 0, y: firstIndexScrollPostion };
|
|
1785
1827
|
if (maintainVisibleContentPosition) {
|
|
1786
1828
|
setTimeout(() => {
|
|
@@ -1800,11 +1842,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1800
1842
|
const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
|
|
1801
1843
|
refScroller.current.scrollTo({ ...offsetObj, animated });
|
|
1802
1844
|
},
|
|
1803
|
-
scrollToItem: ({ item,
|
|
1845
|
+
scrollToItem: ({ item, ...props2 }) => {
|
|
1804
1846
|
const { data } = refState.current;
|
|
1805
1847
|
const index = data.indexOf(item);
|
|
1806
1848
|
if (index !== -1) {
|
|
1807
|
-
scrollToIndex({ index,
|
|
1849
|
+
scrollToIndex({ index, ...props2 });
|
|
1808
1850
|
}
|
|
1809
1851
|
},
|
|
1810
1852
|
scrollToEnd: (options) => refScroller.current.scrollToEnd(options)
|
package/index.mjs
CHANGED
|
@@ -150,15 +150,24 @@ function useRecyclingState(valueOrFun) {
|
|
|
150
150
|
});
|
|
151
151
|
return stateInfo;
|
|
152
152
|
}
|
|
153
|
+
var DebugRow = ({ children }) => {
|
|
154
|
+
return /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" } }, children);
|
|
155
|
+
};
|
|
153
156
|
var DebugView = memo(function DebugView2({ state }) {
|
|
154
157
|
const ctx = useStateContext();
|
|
155
|
-
const totalSize = use$("totalSize");
|
|
158
|
+
const totalSize = use$("totalSize") || 0;
|
|
159
|
+
const totalSizeWithScrollAdjust = use$("totalSizeWithScrollAdjust") || 0;
|
|
160
|
+
const scrollAdjust = use$("scrollAdjust") || 0;
|
|
161
|
+
const rawScroll = use$("debugRawScroll") || 0;
|
|
162
|
+
const scroll = use$("debugComputedScroll") || 0;
|
|
156
163
|
const contentSize = getContentSize(ctx);
|
|
157
164
|
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
|
165
|
+
use$("numContainers");
|
|
166
|
+
use$("numContainersPooled");
|
|
158
167
|
useInterval(() => {
|
|
159
168
|
forceUpdate();
|
|
160
169
|
}, 100);
|
|
161
|
-
return /* @__PURE__ */
|
|
170
|
+
return /* @__PURE__ */ React.createElement(
|
|
162
171
|
View,
|
|
163
172
|
{
|
|
164
173
|
style: {
|
|
@@ -168,12 +177,21 @@ var DebugView = memo(function DebugView2({ state }) {
|
|
|
168
177
|
paddingLeft: 4,
|
|
169
178
|
paddingBottom: 4,
|
|
170
179
|
// height: 100,
|
|
171
|
-
backgroundColor: "#FFFFFFCC"
|
|
172
|
-
|
|
180
|
+
backgroundColor: "#FFFFFFCC",
|
|
181
|
+
padding: 4,
|
|
182
|
+
borderRadius: 4
|
|
183
|
+
},
|
|
184
|
+
pointerEvents: "none"
|
|
173
185
|
},
|
|
174
|
-
/* @__PURE__ */
|
|
175
|
-
/* @__PURE__ */
|
|
176
|
-
/* @__PURE__ */
|
|
186
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React.createElement(Text, null, totalSize.toFixed(2))),
|
|
187
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React.createElement(Text, null, contentSize.toFixed(2))),
|
|
188
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "At end:"), /* @__PURE__ */ React.createElement(Text, null, String(state.isAtBottom))),
|
|
189
|
+
/* @__PURE__ */ React.createElement(Text, null),
|
|
190
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "ScrollAdjust:"), /* @__PURE__ */ React.createElement(Text, null, scrollAdjust.toFixed(2))),
|
|
191
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "TotalSizeReal: "), /* @__PURE__ */ React.createElement(Text, null, totalSizeWithScrollAdjust.toFixed(2))),
|
|
192
|
+
/* @__PURE__ */ React.createElement(Text, null),
|
|
193
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "RawScroll: "), /* @__PURE__ */ React.createElement(Text, null, rawScroll.toFixed(2))),
|
|
194
|
+
/* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "ComputedScroll: "), /* @__PURE__ */ React.createElement(Text, null, scroll.toFixed(2)))
|
|
177
195
|
);
|
|
178
196
|
});
|
|
179
197
|
function useInterval(callback, delay) {
|
|
@@ -253,17 +271,6 @@ var Container = ({
|
|
|
253
271
|
if (itemKey !== void 0) {
|
|
254
272
|
const layout = event.nativeEvent.layout;
|
|
255
273
|
const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
|
|
256
|
-
if (size === 0) {
|
|
257
|
-
if (layout.x !== POSITION_OUT_OF_VIEW && layout.y !== POSITION_OUT_OF_VIEW) {
|
|
258
|
-
console.log(
|
|
259
|
-
"[WARN] Container 0 height reported, possible bug in LegendList",
|
|
260
|
-
id,
|
|
261
|
-
itemKey,
|
|
262
|
-
event.nativeEvent
|
|
263
|
-
);
|
|
264
|
-
}
|
|
265
|
-
return;
|
|
266
|
-
}
|
|
267
274
|
refLastSize.current = size;
|
|
268
275
|
updateItemSize(itemKey, size);
|
|
269
276
|
}
|
|
@@ -782,6 +789,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
782
789
|
refreshing,
|
|
783
790
|
progressViewOffset,
|
|
784
791
|
refreshControl,
|
|
792
|
+
initialContainerPoolRatio = 2,
|
|
785
793
|
...rest
|
|
786
794
|
} = props;
|
|
787
795
|
const { style, contentContainerStyle } = props;
|
|
@@ -840,6 +848,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
840
848
|
return 0;
|
|
841
849
|
};
|
|
842
850
|
const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateOffsetForIndex, []);
|
|
851
|
+
if (Platform.OS === "web") {
|
|
852
|
+
useEffect(() => {
|
|
853
|
+
var _a2;
|
|
854
|
+
if (initialContentOffset) {
|
|
855
|
+
(_a2 = refScroller.current) == null ? void 0 : _a2.scrollTo({
|
|
856
|
+
x: horizontal ? initialContentOffset : 0,
|
|
857
|
+
y: horizontal ? 0 : initialContentOffset,
|
|
858
|
+
animated: false
|
|
859
|
+
});
|
|
860
|
+
}
|
|
861
|
+
}, []);
|
|
862
|
+
}
|
|
843
863
|
if (!refState.current) {
|
|
844
864
|
const initialScrollLength = Dimensions.get("window")[horizontal ? "width" : "height"];
|
|
845
865
|
refState.current = {
|
|
@@ -883,7 +903,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
883
903
|
minIndexSizeChanged: 0,
|
|
884
904
|
numPendingInitialLayout: 0,
|
|
885
905
|
queuedCalculateItemsInView: 0,
|
|
886
|
-
lastBatchingAction: Date.now()
|
|
906
|
+
lastBatchingAction: Date.now(),
|
|
907
|
+
onScroll: onScrollProp
|
|
887
908
|
};
|
|
888
909
|
if (maintainVisibleContentPosition) {
|
|
889
910
|
if (initialScrollIndex) {
|
|
@@ -906,6 +927,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
906
927
|
}
|
|
907
928
|
const didDataChange = refState.current.data !== dataProp;
|
|
908
929
|
refState.current.data = dataProp;
|
|
930
|
+
refState.current.onScroll = onScrollProp;
|
|
909
931
|
const getAnchorElementIndex = () => {
|
|
910
932
|
const state = refState.current;
|
|
911
933
|
if (state.anchorElement) {
|
|
@@ -955,7 +977,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
955
977
|
}, []);
|
|
956
978
|
const getRowHeight = (n) => {
|
|
957
979
|
const { rowHeights, data } = refState.current;
|
|
958
|
-
|
|
980
|
+
const numColumns = peek$(ctx, "numColumns");
|
|
981
|
+
if (numColumns === 1) {
|
|
959
982
|
const id = getId(n);
|
|
960
983
|
return getItemSize(id, n, data[n]);
|
|
961
984
|
}
|
|
@@ -963,8 +986,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
963
986
|
return rowHeights.get(n) || 0;
|
|
964
987
|
}
|
|
965
988
|
let rowHeight = 0;
|
|
966
|
-
const startEl = n *
|
|
967
|
-
for (let i = startEl; i < startEl +
|
|
989
|
+
const startEl = n * numColumns;
|
|
990
|
+
for (let i = startEl; i < startEl + numColumns && i < data.length; i++) {
|
|
968
991
|
const id = getId(i);
|
|
969
992
|
const size = getItemSize(id, i, data[i]);
|
|
970
993
|
rowHeight = Math.max(rowHeight, size);
|
|
@@ -983,10 +1006,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
983
1006
|
return /* @__PURE__ */ new Map();
|
|
984
1007
|
}
|
|
985
1008
|
const map = state.belowAnchorElementPositions || /* @__PURE__ */ new Map();
|
|
1009
|
+
const numColumns = peek$(ctx, "numColumns");
|
|
986
1010
|
for (let i = anchorIndex - 1; i >= 0; i--) {
|
|
987
1011
|
const id = getId(i);
|
|
988
|
-
const rowNumber = Math.floor(i /
|
|
989
|
-
if (i %
|
|
1012
|
+
const rowNumber = Math.floor(i / numColumns);
|
|
1013
|
+
if (i % numColumns === 0) {
|
|
990
1014
|
top -= getRowHeight(rowNumber);
|
|
991
1015
|
}
|
|
992
1016
|
map.set(id, top);
|
|
@@ -1023,9 +1047,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1023
1047
|
return;
|
|
1024
1048
|
}
|
|
1025
1049
|
const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
|
|
1050
|
+
const numColumns = peek$(ctx, "numColumns");
|
|
1026
1051
|
const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
|
|
1027
1052
|
const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
|
|
1028
1053
|
const scroll = scrollState - previousScrollAdjust - topPad;
|
|
1054
|
+
if (ENABLE_DEBUG_VIEW) {
|
|
1055
|
+
set$(ctx, "debugRawScroll", scrollState);
|
|
1056
|
+
set$(ctx, "debugComputedScroll", scroll);
|
|
1057
|
+
}
|
|
1029
1058
|
let scrollBufferTop = scrollBuffer;
|
|
1030
1059
|
let scrollBufferBottom = scrollBuffer;
|
|
1031
1060
|
if (scrollExtra > 8) {
|
|
@@ -1074,7 +1103,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1074
1103
|
}
|
|
1075
1104
|
}
|
|
1076
1105
|
}
|
|
1077
|
-
const numColumns = peek$(ctx, "numColumns");
|
|
1078
1106
|
const loopStartMod = loopStart % numColumns;
|
|
1079
1107
|
if (loopStartMod > 0) {
|
|
1080
1108
|
loopStart -= loopStartMod;
|
|
@@ -1151,6 +1179,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1151
1179
|
if (startBuffered !== null && endBuffered !== null) {
|
|
1152
1180
|
const prevNumContainers = ctx.values.get("numContainers");
|
|
1153
1181
|
let numContainers = prevNumContainers;
|
|
1182
|
+
let didWarnMoreContainers = false;
|
|
1154
1183
|
for (let i = startBuffered; i <= endBuffered; i++) {
|
|
1155
1184
|
let isContained = false;
|
|
1156
1185
|
const id = getId(i);
|
|
@@ -1193,9 +1222,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1193
1222
|
set$(ctx, `containerItemData${containerId}`, data[index]);
|
|
1194
1223
|
set$(ctx, `containerPosition${containerId}`, ANCHORED_POSITION_OUT_OF_VIEW);
|
|
1195
1224
|
set$(ctx, `containerColumn${containerId}`, -1);
|
|
1196
|
-
if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
|
|
1225
|
+
if (__DEV__ && !didWarnMoreContainers && numContainers > peek$(ctx, "numContainersPooled")) {
|
|
1226
|
+
didWarnMoreContainers = true;
|
|
1197
1227
|
console.warn(
|
|
1198
|
-
"[legend-list] No container to recycle, so creating one on demand. This can be a performance issue and is likely caused by the estimatedItemSize being too
|
|
1228
|
+
"[legend-list] No container to recycle, 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. numContainers:",
|
|
1199
1229
|
numContainers
|
|
1200
1230
|
);
|
|
1201
1231
|
}
|
|
@@ -1205,14 +1235,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1205
1235
|
if (numContainers !== prevNumContainers) {
|
|
1206
1236
|
set$(ctx, "numContainers", numContainers);
|
|
1207
1237
|
if (numContainers > peek$(ctx, "numContainersPooled")) {
|
|
1208
|
-
set$(ctx, "numContainersPooled", numContainers);
|
|
1238
|
+
set$(ctx, "numContainersPooled", Math.ceil(numContainers * 1.5));
|
|
1209
1239
|
}
|
|
1210
1240
|
}
|
|
1211
1241
|
for (let i = 0; i < numContainers; i++) {
|
|
1212
1242
|
const itemKey = peek$(ctx, `containerItemKey${i}`);
|
|
1213
1243
|
const itemIndex = state.indexByKey.get(itemKey);
|
|
1214
1244
|
const item = data[itemIndex];
|
|
1215
|
-
if (item) {
|
|
1245
|
+
if (item !== void 0) {
|
|
1216
1246
|
const id = getId(itemIndex);
|
|
1217
1247
|
if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
|
|
1218
1248
|
const prevPos = peek$(ctx, `containerPosition${i}`).top;
|
|
@@ -1229,7 +1259,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1229
1259
|
};
|
|
1230
1260
|
const column2 = columns.get(id) || 1;
|
|
1231
1261
|
if (maintainVisibleContentPosition && itemIndex < anchorElementIndex) {
|
|
1232
|
-
const currentRow = Math.floor(itemIndex /
|
|
1262
|
+
const currentRow = Math.floor(itemIndex / numColumns);
|
|
1233
1263
|
const rowHeight = getRowHeight(currentRow);
|
|
1234
1264
|
const elementHeight = getItemSize(id, itemIndex, data[i]);
|
|
1235
1265
|
const diff = rowHeight - elementHeight;
|
|
@@ -1387,13 +1417,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1387
1417
|
}
|
|
1388
1418
|
};
|
|
1389
1419
|
const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
|
|
1390
|
-
var _a2, _b2, _c2;
|
|
1420
|
+
var _a2, _b2, _c2, _d2;
|
|
1391
1421
|
let totalSize = 0;
|
|
1392
1422
|
let totalSizeBelowIndex = 0;
|
|
1393
1423
|
const indexByKey = /* @__PURE__ */ new Map();
|
|
1394
1424
|
const newPositions = /* @__PURE__ */ new Map();
|
|
1395
1425
|
let column = 1;
|
|
1396
1426
|
let maxSizeInRow = 0;
|
|
1427
|
+
const numColumns = (_a2 = peek$(ctx, "numColumns")) != null ? _a2 : numColumnsProp;
|
|
1397
1428
|
if (!refState.current) {
|
|
1398
1429
|
return;
|
|
1399
1430
|
}
|
|
@@ -1422,8 +1453,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1422
1453
|
id: getId(0)
|
|
1423
1454
|
};
|
|
1424
1455
|
refState.current.anchorElement = newAnchorElement;
|
|
1425
|
-
(
|
|
1426
|
-
(
|
|
1456
|
+
(_b2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _b2.clear();
|
|
1457
|
+
(_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
|
|
1427
1458
|
setTimeout(() => {
|
|
1428
1459
|
calculateItemsInView();
|
|
1429
1460
|
}, 0);
|
|
@@ -1438,7 +1469,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1438
1469
|
} else {
|
|
1439
1470
|
refState.current.startBufferedId = void 0;
|
|
1440
1471
|
}
|
|
1441
|
-
(
|
|
1472
|
+
(_d2 = refScroller.current) == null ? void 0 : _d2.scrollTo({ x: 0, y: 0, animated: false });
|
|
1442
1473
|
setTimeout(() => {
|
|
1443
1474
|
calculateItemsInView();
|
|
1444
1475
|
}, 0);
|
|
@@ -1451,7 +1482,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1451
1482
|
const size = getItemSize(key, i, dataProp[i]);
|
|
1452
1483
|
maxSizeInRow = Math.max(maxSizeInRow, size);
|
|
1453
1484
|
column++;
|
|
1454
|
-
if (column >
|
|
1485
|
+
if (column > numColumns) {
|
|
1455
1486
|
if (maintainVisibleContentPosition && anchorElementIndex !== void 0 && i < anchorElementIndex) {
|
|
1456
1487
|
totalSizeBelowIndex += maxSizeInRow;
|
|
1457
1488
|
}
|
|
@@ -1550,7 +1581,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1550
1581
|
set$(ctx, `containerColumn${i}`, -1);
|
|
1551
1582
|
}
|
|
1552
1583
|
set$(ctx, "numContainers", numContainers);
|
|
1553
|
-
set$(ctx, "numContainersPooled", numContainers *
|
|
1584
|
+
set$(ctx, "numContainersPooled", numContainers * initialContainerPoolRatio);
|
|
1554
1585
|
if (initialScrollIndex) {
|
|
1555
1586
|
requestAnimationFrame(() => {
|
|
1556
1587
|
calculateItemsInView();
|
|
@@ -1578,14 +1609,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1578
1609
|
state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
|
|
1579
1610
|
const prevSize = getItemSize(itemKey, index, data);
|
|
1580
1611
|
let needsCalculate = false;
|
|
1612
|
+
let needsUpdateContainersDidLayout = false;
|
|
1581
1613
|
if (state.numPendingInitialLayout > 0) {
|
|
1582
1614
|
state.numPendingInitialLayout--;
|
|
1583
1615
|
if (state.numPendingInitialLayout === 0) {
|
|
1584
1616
|
needsCalculate = true;
|
|
1585
1617
|
state.numPendingInitialLayout = -1;
|
|
1586
|
-
|
|
1587
|
-
set$(ctx, "containersDidLayout", true);
|
|
1588
|
-
});
|
|
1618
|
+
needsUpdateContainersDidLayout = true;
|
|
1589
1619
|
}
|
|
1590
1620
|
}
|
|
1591
1621
|
if (!prevSize || Math.abs(prevSize - size) > 0.5) {
|
|
@@ -1641,9 +1671,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1641
1671
|
state.queuedCalculateItemsInView = requestAnimationFrame(() => {
|
|
1642
1672
|
state.queuedCalculateItemsInView = void 0;
|
|
1643
1673
|
calculateItemsInView();
|
|
1674
|
+
if (needsUpdateContainersDidLayout) {
|
|
1675
|
+
set$(ctx, "containersDidLayout", true);
|
|
1676
|
+
}
|
|
1644
1677
|
});
|
|
1645
1678
|
} else {
|
|
1646
1679
|
calculateItemsInView();
|
|
1680
|
+
if (needsUpdateContainersDidLayout) {
|
|
1681
|
+
queueMicrotask(() => {
|
|
1682
|
+
set$(ctx, "containersDidLayout", true);
|
|
1683
|
+
});
|
|
1684
|
+
}
|
|
1647
1685
|
}
|
|
1648
1686
|
}
|
|
1649
1687
|
}
|
|
@@ -1677,18 +1715,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1677
1715
|
}, []);
|
|
1678
1716
|
const handleScroll = useCallback(
|
|
1679
1717
|
(event, fromSelf) => {
|
|
1680
|
-
var _a2, _b2, _c2;
|
|
1718
|
+
var _a2, _b2, _c2, _d2;
|
|
1681
1719
|
if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c2 = event.nativeEvent.contentSize) == null ? void 0 : _c2.width) === 0) {
|
|
1682
1720
|
return;
|
|
1683
1721
|
}
|
|
1684
1722
|
const state = refState.current;
|
|
1685
|
-
|
|
1723
|
+
const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
|
|
1724
|
+
if (state.ignoreScrollFromCalcTotal && newScroll !== 0) {
|
|
1686
1725
|
return;
|
|
1687
1726
|
}
|
|
1688
1727
|
state.hasScrolled = true;
|
|
1689
1728
|
state.lastBatchingAction = Date.now();
|
|
1690
1729
|
const currentTime = performance.now();
|
|
1691
|
-
const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
|
|
1692
1730
|
if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
|
|
1693
1731
|
state.scrollHistory.push({ scroll: newScroll, time: currentTime });
|
|
1694
1732
|
}
|
|
@@ -1718,7 +1756,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1718
1756
|
checkAtBottom();
|
|
1719
1757
|
checkAtTop();
|
|
1720
1758
|
if (!fromSelf) {
|
|
1721
|
-
|
|
1759
|
+
(_d2 = state.onScroll) == null ? void 0 : _d2.call(state, event);
|
|
1722
1760
|
}
|
|
1723
1761
|
},
|
|
1724
1762
|
[]
|
|
@@ -1729,7 +1767,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1729
1767
|
const scrollToIndex = ({
|
|
1730
1768
|
index,
|
|
1731
1769
|
viewOffset = 0,
|
|
1732
|
-
animated = true
|
|
1770
|
+
animated = true,
|
|
1771
|
+
viewPosition = 0
|
|
1733
1772
|
}) => {
|
|
1734
1773
|
var _a2;
|
|
1735
1774
|
const state = refState.current;
|
|
@@ -1760,6 +1799,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1760
1799
|
},
|
|
1761
1800
|
animated ? 1e3 : 50
|
|
1762
1801
|
);
|
|
1802
|
+
if (viewPosition) {
|
|
1803
|
+
firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
|
|
1804
|
+
}
|
|
1763
1805
|
const offset = horizontal ? { x: firstIndexScrollPostion, y: 0 } : { x: 0, y: firstIndexScrollPostion };
|
|
1764
1806
|
if (maintainVisibleContentPosition) {
|
|
1765
1807
|
setTimeout(() => {
|
|
@@ -1779,11 +1821,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1779
1821
|
const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
|
|
1780
1822
|
refScroller.current.scrollTo({ ...offsetObj, animated });
|
|
1781
1823
|
},
|
|
1782
|
-
scrollToItem: ({ item,
|
|
1824
|
+
scrollToItem: ({ item, ...props2 }) => {
|
|
1783
1825
|
const { data } = refState.current;
|
|
1784
1826
|
const index = data.indexOf(item);
|
|
1785
1827
|
if (index !== -1) {
|
|
1786
|
-
scrollToIndex({ index,
|
|
1828
|
+
scrollToIndex({ index, ...props2 });
|
|
1787
1829
|
}
|
|
1788
1830
|
},
|
|
1789
1831
|
scrollToEnd: (options) => refScroller.current.scrollToEnd(options)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@legendapp/list",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.26",
|
|
4
4
|
"description": "Legend List aims to be a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"private": false,
|