@legendapp/list 1.0.14 → 1.0.15
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 +4 -1
- package/animated.d.ts +4 -1
- package/index.d.mts +10 -2
- package/index.d.ts +10 -2
- package/index.js +186 -137
- package/index.mjs +187 -139
- package/keyboard-controller.d.mts +145 -133
- package/keyboard-controller.d.ts +145 -133
- 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<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "
|
|
6
|
+
declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "maintainVisibleContentPosition" | "removeClippedSubviews" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
|
|
7
7
|
alignItemsAtEnd?: boolean;
|
|
8
8
|
columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
|
|
9
9
|
data: readonly T[];
|
|
@@ -54,6 +54,9 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Om
|
|
|
54
54
|
viewabilityConfig?: _legendapp_list.ViewabilityConfig;
|
|
55
55
|
viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
|
|
56
56
|
waitForInitialLayout?: boolean;
|
|
57
|
+
onLoad?: (info: {
|
|
58
|
+
elapsedTimeInMs: number;
|
|
59
|
+
}) => void;
|
|
57
60
|
} & React$1.RefAttributes<_legendapp_list.LegendListRef>) => React.ReactNode)>;
|
|
58
61
|
|
|
59
62
|
export { AnimatedLegendList };
|
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<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "
|
|
6
|
+
declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "maintainVisibleContentPosition" | "removeClippedSubviews" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
|
|
7
7
|
alignItemsAtEnd?: boolean;
|
|
8
8
|
columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
|
|
9
9
|
data: readonly T[];
|
|
@@ -54,6 +54,9 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Om
|
|
|
54
54
|
viewabilityConfig?: _legendapp_list.ViewabilityConfig;
|
|
55
55
|
viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
|
|
56
56
|
waitForInitialLayout?: boolean;
|
|
57
|
+
onLoad?: (info: {
|
|
58
|
+
elapsedTimeInMs: number;
|
|
59
|
+
}) => void;
|
|
57
60
|
} & React$1.RefAttributes<_legendapp_list.LegendListRef>) => React.ReactNode)>;
|
|
58
61
|
|
|
59
62
|
export { AnimatedLegendList };
|
package/index.d.mts
CHANGED
|
@@ -208,6 +208,9 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
|
|
|
208
208
|
* @default false
|
|
209
209
|
*/
|
|
210
210
|
waitForInitialLayout?: boolean;
|
|
211
|
+
onLoad?: (info: {
|
|
212
|
+
elapsedTimeInMs: number;
|
|
213
|
+
}) => void;
|
|
211
214
|
};
|
|
212
215
|
interface ColumnWrapperStyle {
|
|
213
216
|
rowGap?: number;
|
|
@@ -280,6 +283,7 @@ interface InternalState {
|
|
|
280
283
|
disableScrollJumpsFrom?: number;
|
|
281
284
|
scrollingToOffset?: number | undefined;
|
|
282
285
|
previousTotalSize?: number;
|
|
286
|
+
needsOtherAxisSize?: boolean;
|
|
283
287
|
averageSizes: Record<string, {
|
|
284
288
|
num: number;
|
|
285
289
|
avg: number;
|
|
@@ -464,7 +468,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
|
|
|
464
468
|
};
|
|
465
469
|
declare const typedMemo: TypedMemo;
|
|
466
470
|
|
|
467
|
-
declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "
|
|
471
|
+
declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "maintainVisibleContentPosition" | "removeClippedSubviews" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
|
|
468
472
|
alignItemsAtEnd?: boolean;
|
|
469
473
|
columnWrapperStyle?: ColumnWrapperStyle;
|
|
470
474
|
data: readonly T[];
|
|
@@ -515,11 +519,15 @@ declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "sc
|
|
|
515
519
|
viewabilityConfig?: ViewabilityConfig;
|
|
516
520
|
viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
|
|
517
521
|
waitForInitialLayout?: boolean;
|
|
522
|
+
onLoad?: (info: {
|
|
523
|
+
elapsedTimeInMs: number;
|
|
524
|
+
}) => void;
|
|
518
525
|
} & React$1.RefAttributes<LegendListRef>) => React$1.ReactNode;
|
|
519
526
|
|
|
520
527
|
declare function useViewability(callback: ViewabilityCallback, configId?: string): void;
|
|
521
528
|
declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void;
|
|
522
529
|
declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
|
|
523
530
|
declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
|
|
531
|
+
declare function useIsLastItem(): any;
|
|
524
532
|
|
|
525
|
-
export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
|
|
533
|
+
export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
|
package/index.d.ts
CHANGED
|
@@ -208,6 +208,9 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
|
|
|
208
208
|
* @default false
|
|
209
209
|
*/
|
|
210
210
|
waitForInitialLayout?: boolean;
|
|
211
|
+
onLoad?: (info: {
|
|
212
|
+
elapsedTimeInMs: number;
|
|
213
|
+
}) => void;
|
|
211
214
|
};
|
|
212
215
|
interface ColumnWrapperStyle {
|
|
213
216
|
rowGap?: number;
|
|
@@ -280,6 +283,7 @@ interface InternalState {
|
|
|
280
283
|
disableScrollJumpsFrom?: number;
|
|
281
284
|
scrollingToOffset?: number | undefined;
|
|
282
285
|
previousTotalSize?: number;
|
|
286
|
+
needsOtherAxisSize?: boolean;
|
|
283
287
|
averageSizes: Record<string, {
|
|
284
288
|
num: number;
|
|
285
289
|
avg: number;
|
|
@@ -464,7 +468,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
|
|
|
464
468
|
};
|
|
465
469
|
declare const typedMemo: TypedMemo;
|
|
466
470
|
|
|
467
|
-
declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "
|
|
471
|
+
declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "maintainVisibleContentPosition" | "removeClippedSubviews" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
|
|
468
472
|
alignItemsAtEnd?: boolean;
|
|
469
473
|
columnWrapperStyle?: ColumnWrapperStyle;
|
|
470
474
|
data: readonly T[];
|
|
@@ -515,11 +519,15 @@ declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "sc
|
|
|
515
519
|
viewabilityConfig?: ViewabilityConfig;
|
|
516
520
|
viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
|
|
517
521
|
waitForInitialLayout?: boolean;
|
|
522
|
+
onLoad?: (info: {
|
|
523
|
+
elapsedTimeInMs: number;
|
|
524
|
+
}) => void;
|
|
518
525
|
} & React$1.RefAttributes<LegendListRef>) => React$1.ReactNode;
|
|
519
526
|
|
|
520
527
|
declare function useViewability(callback: ViewabilityCallback, configId?: string): void;
|
|
521
528
|
declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void;
|
|
522
529
|
declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
|
|
523
530
|
declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
|
|
531
|
+
declare function useIsLastItem(): any;
|
|
524
532
|
|
|
525
|
-
export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
|
|
533
|
+
export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
|
package/index.js
CHANGED
|
@@ -120,6 +120,12 @@ function useArr$(signalNames) {
|
|
|
120
120
|
const value = shim.useSyncExternalStore(subscribe, get);
|
|
121
121
|
return value;
|
|
122
122
|
}
|
|
123
|
+
function useSelector$(signalName, selector) {
|
|
124
|
+
const ctx = React2__namespace.useContext(ContextState);
|
|
125
|
+
const { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctionsArr(ctx, [signalName]), [ctx, signalName]);
|
|
126
|
+
const value = shim.useSyncExternalStore(subscribe, () => selector(get()[0]));
|
|
127
|
+
return value;
|
|
128
|
+
}
|
|
123
129
|
|
|
124
130
|
// src/DebugView.tsx
|
|
125
131
|
var DebugRow = ({ children }) => {
|
|
@@ -308,6 +314,11 @@ function useRecyclingState(valueOrFun) {
|
|
|
308
314
|
);
|
|
309
315
|
return [refState.current.value, setState];
|
|
310
316
|
}
|
|
317
|
+
function useIsLastItem() {
|
|
318
|
+
const { itemKey } = React2.useContext(ContextContainer);
|
|
319
|
+
const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
|
|
320
|
+
return isLast;
|
|
321
|
+
}
|
|
311
322
|
var LeanViewComponent = React2__namespace.forwardRef((props, ref) => {
|
|
312
323
|
return React2__namespace.createElement("RCTView", { ...props, ref });
|
|
313
324
|
});
|
|
@@ -366,12 +377,12 @@ var Container = ({
|
|
|
366
377
|
if (horizontal) {
|
|
367
378
|
paddingStyles = {
|
|
368
379
|
paddingRight: !lastItemKeys.includes(itemKey) ? columnGap || gap || void 0 : void 0,
|
|
369
|
-
paddingVertical: (rowGap || gap || 0) / 2
|
|
380
|
+
paddingVertical: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
|
|
370
381
|
};
|
|
371
382
|
} else {
|
|
372
383
|
paddingStyles = {
|
|
373
384
|
paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
|
|
374
|
-
paddingHorizontal: (columnGap || gap || 0) / 2
|
|
385
|
+
paddingHorizontal: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
|
|
375
386
|
};
|
|
376
387
|
}
|
|
377
388
|
}
|
|
@@ -379,7 +390,6 @@ var Container = ({
|
|
|
379
390
|
flexDirection: ItemSeparatorComponent ? "row" : void 0,
|
|
380
391
|
position: "absolute",
|
|
381
392
|
top: otherAxisPos,
|
|
382
|
-
bottom: numColumns > 1 ? null : 0,
|
|
383
393
|
height: otherAxisSize,
|
|
384
394
|
left: position.relativeCoordinate,
|
|
385
395
|
...paddingStyles || {}
|
|
@@ -402,17 +412,17 @@ var Container = ({
|
|
|
402
412
|
const onLayout = (event) => {
|
|
403
413
|
var _a, _b;
|
|
404
414
|
if (!isNullOrUndefined(itemKey)) {
|
|
405
|
-
|
|
406
|
-
|
|
415
|
+
let layout = event.nativeEvent.layout;
|
|
416
|
+
const size = layout[horizontal ? "width" : "height"];
|
|
407
417
|
const doUpdate = () => {
|
|
408
|
-
refLastSize.current =
|
|
409
|
-
updateItemSize(itemKey,
|
|
418
|
+
refLastSize.current = { width: layout.width, height: layout.height };
|
|
419
|
+
updateItemSize(itemKey, layout);
|
|
410
420
|
};
|
|
411
421
|
if (IsNewArchitecture || size > 0) {
|
|
412
422
|
doUpdate();
|
|
413
423
|
} else {
|
|
414
424
|
(_b = (_a = ref.current) == null ? void 0 : _a.measure) == null ? void 0 : _b.call(_a, (x, y, width, height) => {
|
|
415
|
-
|
|
425
|
+
layout = { width, height };
|
|
416
426
|
doUpdate();
|
|
417
427
|
});
|
|
418
428
|
}
|
|
@@ -426,7 +436,7 @@ var Container = ({
|
|
|
426
436
|
if (measured) {
|
|
427
437
|
const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
|
|
428
438
|
if (size) {
|
|
429
|
-
updateItemSize(itemKey,
|
|
439
|
+
updateItemSize(itemKey, measured);
|
|
430
440
|
}
|
|
431
441
|
}
|
|
432
442
|
}
|
|
@@ -451,7 +461,7 @@ var Container = ({
|
|
|
451
461
|
}, [id, itemKey, index, data]);
|
|
452
462
|
const contentFragment = /* @__PURE__ */ React2__namespace.default.createElement(React2__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React2__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React2__namespace.default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
|
|
453
463
|
if (maintainVisibleContentPosition) {
|
|
454
|
-
const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
|
|
464
|
+
const anchorStyle = horizontal ? position.type === "top" ? { position: "absolute", left: 0, top: 0, bottom: 0, flexDirection: "row", alignItems: "stretch" } : { position: "absolute", right: 0, top: 0, bottom: 0, flexDirection: "row", alignItems: "stretch" } : position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
|
|
455
465
|
if (__DEV__ && ENABLE_DEVMODE) {
|
|
456
466
|
anchorStyle.borderColor = position.type === "top" ? "red" : "blue";
|
|
457
467
|
anchorStyle.borderWidth = 1;
|
|
@@ -500,7 +510,7 @@ var Containers = typedMemo(function Containers2({
|
|
|
500
510
|
}) {
|
|
501
511
|
const ctx = useStateContext();
|
|
502
512
|
const columnWrapperStyle = ctx.columnWrapperStyle;
|
|
503
|
-
const [numContainers] = useArr$(["numContainersPooled"]);
|
|
513
|
+
const [numContainers, numColumns] = useArr$(["numContainersPooled", "numColumns"]);
|
|
504
514
|
const animSize = useValue$(
|
|
505
515
|
"totalSizeWithScrollAdjust",
|
|
506
516
|
void 0,
|
|
@@ -508,6 +518,12 @@ var Containers = typedMemo(function Containers2({
|
|
|
508
518
|
true
|
|
509
519
|
);
|
|
510
520
|
const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
|
|
521
|
+
const otherAxisSize = useValue$(
|
|
522
|
+
"otherAxisSize",
|
|
523
|
+
void 0,
|
|
524
|
+
/*useMicrotask*/
|
|
525
|
+
true
|
|
526
|
+
);
|
|
511
527
|
const containers = [];
|
|
512
528
|
for (let i = 0; i < numContainers; i++) {
|
|
513
529
|
containers.push(
|
|
@@ -525,8 +541,8 @@ var Containers = typedMemo(function Containers2({
|
|
|
525
541
|
)
|
|
526
542
|
);
|
|
527
543
|
}
|
|
528
|
-
const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
|
|
529
|
-
if (columnWrapperStyle) {
|
|
544
|
+
const style = horizontal ? { width: animSize, opacity: animOpacity, minHeight: otherAxisSize } : { height: animSize, opacity: animOpacity, minWidth: otherAxisSize };
|
|
545
|
+
if (columnWrapperStyle && numColumns > 1) {
|
|
530
546
|
const { columnGap, rowGap, gap } = columnWrapperStyle;
|
|
531
547
|
if (horizontal) {
|
|
532
548
|
const my = (rowGap || gap || 0) / 2;
|
|
@@ -1026,6 +1042,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1026
1042
|
onViewableItemsChanged,
|
|
1027
1043
|
...rest
|
|
1028
1044
|
} = props;
|
|
1045
|
+
const refLoadStartTime = React2.useRef(Date.now());
|
|
1029
1046
|
const callbacks = React2.useRef({
|
|
1030
1047
|
onStartReached: rest.onStartReached,
|
|
1031
1048
|
onEndReached: rest.onEndReached
|
|
@@ -1230,6 +1247,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1230
1247
|
const setDidLayout = () => {
|
|
1231
1248
|
refState.current.queuedInitialLayout = true;
|
|
1232
1249
|
checkAtBottom();
|
|
1250
|
+
const setIt = () => {
|
|
1251
|
+
set$(ctx, "containersDidLayout", true);
|
|
1252
|
+
if (props.onLoad) {
|
|
1253
|
+
props.onLoad({ elapsedTimeInMs: Date.now() - refLoadStartTime.current });
|
|
1254
|
+
}
|
|
1255
|
+
};
|
|
1233
1256
|
if (initialScrollIndex) {
|
|
1234
1257
|
queueMicrotask(() => {
|
|
1235
1258
|
scrollToIndex({ index: initialScrollIndex, animated: false });
|
|
@@ -1237,13 +1260,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1237
1260
|
if (!IsNewArchitecture) {
|
|
1238
1261
|
scrollToIndex({ index: initialScrollIndex, animated: false });
|
|
1239
1262
|
}
|
|
1240
|
-
|
|
1263
|
+
setIt();
|
|
1241
1264
|
});
|
|
1242
1265
|
});
|
|
1243
1266
|
} else {
|
|
1244
|
-
queueMicrotask(
|
|
1245
|
-
set$(ctx, "containersDidLayout", true);
|
|
1246
|
-
});
|
|
1267
|
+
queueMicrotask(setIt);
|
|
1247
1268
|
}
|
|
1248
1269
|
};
|
|
1249
1270
|
const addTotalSize = React2.useCallback((key, add, totalSizeBelowAnchor) => {
|
|
@@ -1375,10 +1396,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1375
1396
|
});
|
|
1376
1397
|
numMeasurements++;
|
|
1377
1398
|
if (measured) {
|
|
1378
|
-
const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
|
|
1379
1399
|
updateItemSize(
|
|
1380
1400
|
itemKey,
|
|
1381
|
-
|
|
1401
|
+
measured,
|
|
1382
1402
|
/*fromFixGaps*/
|
|
1383
1403
|
true
|
|
1384
1404
|
);
|
|
@@ -1476,13 +1496,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1476
1496
|
scrollBufferBottom = scrollBuffer * 0.1;
|
|
1477
1497
|
}
|
|
1478
1498
|
}
|
|
1499
|
+
const scrollTopBuffered = scroll - scrollBufferTop;
|
|
1500
|
+
const scrollBottom = scroll + scrollLength;
|
|
1501
|
+
const scrollBottomBuffered = scrollBottom + scrollBufferBottom;
|
|
1479
1502
|
if (state.scrollForNextCalculateItemsInView) {
|
|
1480
1503
|
const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
|
|
1481
|
-
if (
|
|
1504
|
+
if (scrollTopBuffered > top2 && scrollBottomBuffered < bottom) {
|
|
1482
1505
|
return;
|
|
1483
1506
|
}
|
|
1484
1507
|
}
|
|
1485
|
-
const scrollBottom = scroll + scrollLength;
|
|
1486
1508
|
let startNoBuffer = null;
|
|
1487
1509
|
let startBuffered = null;
|
|
1488
1510
|
let startBufferedId = null;
|
|
@@ -1562,7 +1584,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1562
1584
|
if (startNoBuffer === null && top + size > scroll) {
|
|
1563
1585
|
startNoBuffer = i;
|
|
1564
1586
|
}
|
|
1565
|
-
if (startBuffered === null && top + size >
|
|
1587
|
+
if (startBuffered === null && top + size > scrollTopBuffered) {
|
|
1566
1588
|
startBuffered = i;
|
|
1567
1589
|
startBufferedId = id;
|
|
1568
1590
|
nextTop = top;
|
|
@@ -1571,7 +1593,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1571
1593
|
if (top <= scrollBottom) {
|
|
1572
1594
|
endNoBuffer = i;
|
|
1573
1595
|
}
|
|
1574
|
-
if (top <=
|
|
1596
|
+
if (top <= scrollBottomBuffered) {
|
|
1575
1597
|
endBuffered = i;
|
|
1576
1598
|
nextBottom = top + maxSizeInRow - scrollLength;
|
|
1577
1599
|
} else {
|
|
@@ -1860,8 +1882,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
1860
1882
|
for (let i = 0; i < numContainers; i++) {
|
|
1861
1883
|
const itemKey = peek$(ctx, `containerItemKey${i}`);
|
|
1862
1884
|
if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
|
|
1863
|
-
set$(ctx, `containerItemKey${i}`,
|
|
1864
|
-
set$(ctx, `containerItemData${i}`,
|
|
1885
|
+
set$(ctx, `containerItemKey${i}`, void 0);
|
|
1886
|
+
set$(ctx, `containerItemData${i}`, void 0);
|
|
1865
1887
|
set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
|
|
1866
1888
|
set$(ctx, `containerColumn${i}`, -1);
|
|
1867
1889
|
}
|
|
@@ -2142,120 +2164,130 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
2142
2164
|
useInit(() => {
|
|
2143
2165
|
doInitialAllocateContainers();
|
|
2144
2166
|
});
|
|
2145
|
-
const updateItemSize = React2.useCallback(
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
averages = averageSizes[itemType]
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
averages.num++;
|
|
2180
|
-
if (!prevSize || Math.abs(prevSize - size) > 0.1) {
|
|
2181
|
-
let diff;
|
|
2182
|
-
needsCalculate = true;
|
|
2183
|
-
if (numColumns > 1) {
|
|
2184
|
-
const rowNumber = Math.floor(index / numColumnsProp);
|
|
2185
|
-
const prevSizeInRow = getRowHeight(rowNumber);
|
|
2186
|
-
sizes.set(itemKey, size);
|
|
2187
|
-
rowHeights.delete(rowNumber);
|
|
2188
|
-
const sizeInRow = getRowHeight(rowNumber);
|
|
2189
|
-
diff = sizeInRow - prevSizeInRow;
|
|
2190
|
-
} else {
|
|
2191
|
-
sizes.set(itemKey, size);
|
|
2192
|
-
diff = size - prevSize;
|
|
2167
|
+
const updateItemSize = React2.useCallback(
|
|
2168
|
+
(itemKey, sizeObj, fromFixGaps) => {
|
|
2169
|
+
const state = refState.current;
|
|
2170
|
+
const {
|
|
2171
|
+
sizes,
|
|
2172
|
+
indexByKey,
|
|
2173
|
+
sizesKnown,
|
|
2174
|
+
data,
|
|
2175
|
+
rowHeights,
|
|
2176
|
+
startBuffered,
|
|
2177
|
+
endBuffered,
|
|
2178
|
+
averageSizes,
|
|
2179
|
+
queuedInitialLayout
|
|
2180
|
+
} = state;
|
|
2181
|
+
if (!data) {
|
|
2182
|
+
return;
|
|
2183
|
+
}
|
|
2184
|
+
const index = indexByKey.get(itemKey);
|
|
2185
|
+
const numColumns = peek$(ctx, "numColumns");
|
|
2186
|
+
state.scrollForNextCalculateItemsInView = void 0;
|
|
2187
|
+
state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
|
|
2188
|
+
const prevSize = getItemSize(itemKey, index, data);
|
|
2189
|
+
const prevSizeKnown = sizesKnown.get(itemKey);
|
|
2190
|
+
let needsCalculate = false;
|
|
2191
|
+
let needsUpdateContainersDidLayout = false;
|
|
2192
|
+
const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
|
|
2193
|
+
sizesKnown.set(itemKey, size);
|
|
2194
|
+
const itemType = "";
|
|
2195
|
+
let averages = averageSizes[itemType];
|
|
2196
|
+
if (!averages) {
|
|
2197
|
+
averages = averageSizes[itemType] = {
|
|
2198
|
+
num: 0,
|
|
2199
|
+
avg: 0
|
|
2200
|
+
};
|
|
2193
2201
|
}
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2202
|
+
averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
|
|
2203
|
+
averages.num++;
|
|
2204
|
+
if (!prevSize || Math.abs(prevSize - size) > 0.1) {
|
|
2205
|
+
let diff;
|
|
2206
|
+
needsCalculate = true;
|
|
2207
|
+
if (numColumns > 1) {
|
|
2208
|
+
const rowNumber = Math.floor(index / numColumnsProp);
|
|
2209
|
+
const prevSizeInRow = getRowHeight(rowNumber);
|
|
2210
|
+
sizes.set(itemKey, size);
|
|
2211
|
+
rowHeights.delete(rowNumber);
|
|
2212
|
+
const sizeInRow = getRowHeight(rowNumber);
|
|
2213
|
+
diff = sizeInRow - prevSizeInRow;
|
|
2214
|
+
} else {
|
|
2215
|
+
sizes.set(itemKey, size);
|
|
2216
|
+
diff = size - prevSize;
|
|
2217
|
+
}
|
|
2218
|
+
if (__DEV__ && suggestEstimatedItemSize) {
|
|
2219
|
+
if (state.timeoutSizeMessage) {
|
|
2220
|
+
clearTimeout(state.timeoutSizeMessage);
|
|
2221
|
+
}
|
|
2222
|
+
state.timeoutSizeMessage = setTimeout(() => {
|
|
2223
|
+
state.timeoutSizeMessage = void 0;
|
|
2224
|
+
const num = sizesKnown.size;
|
|
2225
|
+
const avg = state.averageSizes[""].avg;
|
|
2226
|
+
console.warn(
|
|
2227
|
+
`[legend-list] estimatedItemSize or getEstimatedItemSize are not defined. Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
|
|
2228
|
+
);
|
|
2229
|
+
}, 1e3);
|
|
2230
|
+
}
|
|
2231
|
+
state.scrollForNextCalculateItemsInView = void 0;
|
|
2232
|
+
addTotalSize(itemKey, diff, 0);
|
|
2233
|
+
if (prevSizeKnown !== void 0 && Math.abs(prevSizeKnown - size) > 5) {
|
|
2234
|
+
doMaintainScrollAtEnd(false);
|
|
2235
|
+
}
|
|
2236
|
+
if (onItemSizeChanged) {
|
|
2237
|
+
onItemSizeChanged({
|
|
2238
|
+
size,
|
|
2239
|
+
previous: prevSize,
|
|
2240
|
+
index,
|
|
2241
|
+
itemKey,
|
|
2242
|
+
itemData: data[index]
|
|
2243
|
+
});
|
|
2197
2244
|
}
|
|
2198
|
-
state.timeoutSizeMessage = setTimeout(() => {
|
|
2199
|
-
state.timeoutSizeMessage = void 0;
|
|
2200
|
-
const num = sizesKnown.size;
|
|
2201
|
-
const avg = state.averageSizes[""].avg;
|
|
2202
|
-
console.warn(
|
|
2203
|
-
`[legend-list] estimatedItemSize or getEstimatedItemSize are not defined. Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
|
|
2204
|
-
);
|
|
2205
|
-
}, 1e3);
|
|
2206
2245
|
}
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
if (prevSizeKnown !== void 0 && Math.abs(prevSizeKnown - size) > 5) {
|
|
2210
|
-
doMaintainScrollAtEnd(false);
|
|
2211
|
-
}
|
|
2212
|
-
if (onItemSizeChanged) {
|
|
2213
|
-
onItemSizeChanged({
|
|
2214
|
-
size,
|
|
2215
|
-
previous: prevSize,
|
|
2216
|
-
index,
|
|
2217
|
-
itemKey,
|
|
2218
|
-
itemData: data[index]
|
|
2219
|
-
});
|
|
2246
|
+
if (!queuedInitialLayout && checkAllSizesKnown()) {
|
|
2247
|
+
needsUpdateContainersDidLayout = true;
|
|
2220
2248
|
}
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
if (peek$(ctx, `containerItemKey${i}`) === itemKey) {
|
|
2230
|
-
isInView = true;
|
|
2231
|
-
break;
|
|
2249
|
+
let isInView = index >= startBuffered && index <= endBuffered;
|
|
2250
|
+
if (!isInView) {
|
|
2251
|
+
const numContainers = ctx.values.get("numContainers");
|
|
2252
|
+
for (let i = 0; i < numContainers; i++) {
|
|
2253
|
+
if (peek$(ctx, `containerItemKey${i}`) === itemKey) {
|
|
2254
|
+
isInView = true;
|
|
2255
|
+
break;
|
|
2256
|
+
}
|
|
2232
2257
|
}
|
|
2233
2258
|
}
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
}
|
|
2259
|
+
if (needsUpdateContainersDidLayout || !fromFixGaps && needsCalculate && (isInView || !queuedInitialLayout)) {
|
|
2260
|
+
const scrollVelocity = state.scrollVelocity;
|
|
2261
|
+
let didCalculate = false;
|
|
2262
|
+
if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1 || state.scrollingToOffset !== void 0) && (!waitForInitialLayout || needsUpdateContainersDidLayout || queuedInitialLayout)) {
|
|
2263
|
+
if (Date.now() - state.lastBatchingAction < 500) {
|
|
2264
|
+
if (!state.queuedCalculateItemsInView) {
|
|
2265
|
+
state.queuedCalculateItemsInView = requestAnimationFrame(() => {
|
|
2266
|
+
state.queuedCalculateItemsInView = void 0;
|
|
2267
|
+
calculateItemsInView();
|
|
2268
|
+
});
|
|
2269
|
+
}
|
|
2270
|
+
} else {
|
|
2271
|
+
calculateItemsInView();
|
|
2272
|
+
didCalculate = true;
|
|
2245
2273
|
}
|
|
2246
|
-
}
|
|
2247
|
-
|
|
2248
|
-
|
|
2274
|
+
}
|
|
2275
|
+
if (!didCalculate && !needsUpdateContainersDidLayout && IsNewArchitecture) {
|
|
2276
|
+
fixGaps();
|
|
2249
2277
|
}
|
|
2250
2278
|
}
|
|
2251
|
-
if (
|
|
2252
|
-
|
|
2279
|
+
if (state.needsOtherAxisSize) {
|
|
2280
|
+
const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
|
|
2281
|
+
const cur = peek$(ctx, "otherAxisSize");
|
|
2282
|
+
if (!cur || otherAxisSize > cur) {
|
|
2283
|
+
set$(ctx, "otherAxisSize", otherAxisSize);
|
|
2284
|
+
}
|
|
2253
2285
|
}
|
|
2254
|
-
}
|
|
2255
|
-
|
|
2256
|
-
|
|
2286
|
+
},
|
|
2287
|
+
[]
|
|
2288
|
+
);
|
|
2289
|
+
const handleLayout = React2.useCallback((scrollLength) => {
|
|
2257
2290
|
const state = refState.current;
|
|
2258
|
-
const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
|
|
2259
2291
|
const didChange = scrollLength !== state.scrollLength;
|
|
2260
2292
|
state.scrollLength = scrollLength;
|
|
2261
2293
|
state.lastBatchingAction = Date.now();
|
|
@@ -2268,20 +2300,36 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
2268
2300
|
if (didChange) {
|
|
2269
2301
|
calculateItemsInView();
|
|
2270
2302
|
}
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2303
|
+
}, []);
|
|
2304
|
+
const onLayout = React2.useCallback((event) => {
|
|
2305
|
+
const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
|
|
2306
|
+
handleLayout(scrollLength);
|
|
2307
|
+
const otherAxisSize = event.nativeEvent.layout[horizontal ? "height" : "width"];
|
|
2308
|
+
if (refState.current) {
|
|
2309
|
+
refState.current.needsOtherAxisSize = otherAxisSize - (stylePaddingTopState || 0) < 10;
|
|
2310
|
+
}
|
|
2311
|
+
if (__DEV__ && scrollLength === 0) {
|
|
2312
|
+
warnDevOnce(
|
|
2313
|
+
"height0",
|
|
2314
|
+
`List ${horizontal ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
|
|
2315
|
+
);
|
|
2280
2316
|
}
|
|
2281
2317
|
if (onLayoutProp) {
|
|
2282
2318
|
onLayoutProp(event);
|
|
2283
2319
|
}
|
|
2284
2320
|
}, []);
|
|
2321
|
+
if (IsNewArchitecture) {
|
|
2322
|
+
React2.useLayoutEffect(() => {
|
|
2323
|
+
var _a, _b;
|
|
2324
|
+
const measured = (_b = (_a = refScroller.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
|
|
2325
|
+
if (measured) {
|
|
2326
|
+
const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
|
|
2327
|
+
if (size) {
|
|
2328
|
+
handleLayout(size);
|
|
2329
|
+
}
|
|
2330
|
+
}
|
|
2331
|
+
}, []);
|
|
2332
|
+
}
|
|
2285
2333
|
const handleScroll = React2.useCallback(
|
|
2286
2334
|
(event) => {
|
|
2287
2335
|
var _a, _b, _c, _d;
|
|
@@ -2480,6 +2528,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
2480
2528
|
});
|
|
2481
2529
|
|
|
2482
2530
|
exports.LegendList = LegendList;
|
|
2531
|
+
exports.useIsLastItem = useIsLastItem;
|
|
2483
2532
|
exports.useRecyclingEffect = useRecyclingEffect;
|
|
2484
2533
|
exports.useRecyclingState = useRecyclingState;
|
|
2485
2534
|
exports.useViewability = useViewability;
|