@legendapp/list 3.0.0-beta.52 → 3.0.0-beta.53
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.ts +6 -1
- package/index.d.ts +6 -0
- package/index.js +134 -44
- package/index.mjs +134 -44
- package/index.native.js +107 -39
- package/index.native.mjs +107 -39
- package/keyboard-chat.d.ts +3 -2
- package/keyboard-chat.js +3 -3
- package/keyboard-chat.mjs +3 -3
- package/keyboard-test.d.ts +5 -2
- package/keyboard-test.js +3 -3
- package/keyboard-test.mjs +3 -3
- package/package.json +1 -1
- package/react-native.d.ts +6 -1
- package/react-native.js +107 -39
- package/react-native.mjs +107 -39
- package/react-native.web.d.ts +5 -1
- package/react-native.web.js +134 -44
- package/react-native.web.mjs +134 -44
- package/react.d.ts +5 -1
- package/react.js +134 -44
- package/react.mjs +134 -44
- package/reanimated.d.ts +6 -1
- package/section-list.d.ts +6 -1
package/react-native.mjs
CHANGED
|
@@ -139,7 +139,10 @@ function useSelector$(signalName, selector) {
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
// src/state/getContentInsetEnd.ts
|
|
142
|
-
function
|
|
142
|
+
function getContentInsetEndAdjustmentEnd(adjustment) {
|
|
143
|
+
return Math.max(0, adjustment != null ? adjustment : 0);
|
|
144
|
+
}
|
|
145
|
+
function getContentInsetEnd(ctx, contentInsetEndAdjustmentOverride) {
|
|
143
146
|
var _a3, _b;
|
|
144
147
|
const state = ctx.state;
|
|
145
148
|
const { props } = state;
|
|
@@ -147,14 +150,21 @@ function getContentInsetEnd(ctx) {
|
|
|
147
150
|
const contentInset = props.contentInset;
|
|
148
151
|
const baseInset = contentInset != null ? contentInset : state.nativeContentInset;
|
|
149
152
|
const baseEndInset = (horizontal ? baseInset == null ? void 0 : baseInset.right : baseInset == null ? void 0 : baseInset.bottom) || 0;
|
|
153
|
+
const contentInsetEndAdjustment = getContentInsetEndAdjustmentEnd(
|
|
154
|
+
contentInsetEndAdjustmentOverride != null ? contentInsetEndAdjustmentOverride : props.contentInsetEndAdjustment
|
|
155
|
+
);
|
|
150
156
|
const anchoredEndSpaceSize = peek$(ctx, "anchoredEndSpaceSize");
|
|
151
157
|
const anchoredEndInset = ((_a3 = props.anchoredEndSpace) == null ? void 0 : _a3.includeInEndInset) && anchoredEndSpaceSize ? anchoredEndSpaceSize : 0;
|
|
152
158
|
const overrideInset = (_b = state.contentInsetOverride) != null ? _b : void 0;
|
|
159
|
+
const adjustedBaseEndInset = baseEndInset + contentInsetEndAdjustment;
|
|
153
160
|
if (overrideInset) {
|
|
154
161
|
const mergedInset = { bottom: 0, right: 0, ...baseInset, ...overrideInset };
|
|
155
|
-
return Math.max(
|
|
162
|
+
return Math.max(
|
|
163
|
+
((horizontal ? mergedInset.right : mergedInset.bottom) || 0) + contentInsetEndAdjustment,
|
|
164
|
+
anchoredEndInset
|
|
165
|
+
);
|
|
156
166
|
}
|
|
157
|
-
return Math.max(
|
|
167
|
+
return Math.max(adjustedBaseEndInset, anchoredEndInset);
|
|
158
168
|
}
|
|
159
169
|
|
|
160
170
|
// src/state/getContentSize.ts
|
|
@@ -646,6 +656,49 @@ function isInMVCPActiveMode(state) {
|
|
|
646
656
|
}
|
|
647
657
|
|
|
648
658
|
// src/components/Container.tsx
|
|
659
|
+
function getContainerPositionStyle({
|
|
660
|
+
columnWrapperStyle,
|
|
661
|
+
horizontal,
|
|
662
|
+
hasItemSeparator,
|
|
663
|
+
numColumns,
|
|
664
|
+
otherAxisPos,
|
|
665
|
+
otherAxisSize
|
|
666
|
+
}) {
|
|
667
|
+
let paddingStyles;
|
|
668
|
+
if (columnWrapperStyle) {
|
|
669
|
+
const { columnGap, rowGap, gap } = columnWrapperStyle;
|
|
670
|
+
if (horizontal) {
|
|
671
|
+
paddingStyles = {
|
|
672
|
+
paddingBottom: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0,
|
|
673
|
+
paddingRight: columnGap || gap || void 0,
|
|
674
|
+
paddingTop: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
|
|
675
|
+
};
|
|
676
|
+
} else {
|
|
677
|
+
paddingStyles = {
|
|
678
|
+
paddingBottom: rowGap || gap || void 0,
|
|
679
|
+
paddingLeft: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0,
|
|
680
|
+
paddingRight: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
|
|
681
|
+
};
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
return horizontal ? {
|
|
685
|
+
boxSizing: paddingStyles ? "border-box" : void 0,
|
|
686
|
+
flexDirection: hasItemSeparator ? "row" : void 0,
|
|
687
|
+
height: otherAxisSize,
|
|
688
|
+
left: 0,
|
|
689
|
+
position: "absolute",
|
|
690
|
+
top: otherAxisPos,
|
|
691
|
+
...paddingStyles || {}
|
|
692
|
+
} : {
|
|
693
|
+
boxSizing: paddingStyles ? "border-box" : void 0,
|
|
694
|
+
left: otherAxisPos,
|
|
695
|
+
position: "absolute",
|
|
696
|
+
right: numColumns > 1 ? null : 0,
|
|
697
|
+
top: 0,
|
|
698
|
+
width: otherAxisSize,
|
|
699
|
+
...paddingStyles || {}
|
|
700
|
+
};
|
|
701
|
+
}
|
|
649
702
|
var Container = typedMemo(function Container2({
|
|
650
703
|
id,
|
|
651
704
|
recycleItems,
|
|
@@ -684,42 +737,17 @@ var Container = typedMemo(function Container2({
|
|
|
684
737
|
const resolvedSpan = Math.min(Math.max(span || 1, 1), numColumns);
|
|
685
738
|
const otherAxisPos = numColumns > 1 ? `${(resolvedColumn - 1) / numColumns * 100}%` : 0;
|
|
686
739
|
const otherAxisSize = numColumns > 1 ? `${resolvedSpan / numColumns * 100}%` : void 0;
|
|
687
|
-
const style = useMemo(
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
paddingStyles = {
|
|
699
|
-
paddingBottom: rowGap || gap || void 0,
|
|
700
|
-
paddingLeft: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0,
|
|
701
|
-
paddingRight: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
|
|
702
|
-
};
|
|
703
|
-
}
|
|
704
|
-
}
|
|
705
|
-
return horizontal ? {
|
|
706
|
-
boxSizing: paddingStyles ? "border-box" : void 0,
|
|
707
|
-
flexDirection: ItemSeparatorComponent ? "row" : void 0,
|
|
708
|
-
height: otherAxisSize,
|
|
709
|
-
left: 0,
|
|
710
|
-
position: "absolute",
|
|
711
|
-
top: otherAxisPos,
|
|
712
|
-
...paddingStyles || {}
|
|
713
|
-
} : {
|
|
714
|
-
boxSizing: paddingStyles ? "border-box" : void 0,
|
|
715
|
-
left: otherAxisPos,
|
|
716
|
-
position: "absolute",
|
|
717
|
-
right: numColumns > 1 ? null : 0,
|
|
718
|
-
top: 0,
|
|
719
|
-
width: otherAxisSize,
|
|
720
|
-
...paddingStyles || {}
|
|
721
|
-
};
|
|
722
|
-
}, [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns]);
|
|
740
|
+
const style = useMemo(
|
|
741
|
+
() => getContainerPositionStyle({
|
|
742
|
+
columnWrapperStyle,
|
|
743
|
+
hasItemSeparator: !!ItemSeparatorComponent,
|
|
744
|
+
horizontal,
|
|
745
|
+
numColumns,
|
|
746
|
+
otherAxisPos,
|
|
747
|
+
otherAxisSize
|
|
748
|
+
}),
|
|
749
|
+
[horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns, ItemSeparatorComponent]
|
|
750
|
+
);
|
|
723
751
|
const renderedItemInfo = useMemo(
|
|
724
752
|
() => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
|
|
725
753
|
[itemKey, data, extraData]
|
|
@@ -2677,6 +2705,15 @@ function abortBootstrapInitialScroll(ctx) {
|
|
|
2677
2705
|
}
|
|
2678
2706
|
|
|
2679
2707
|
// src/core/initialScrollLifecycle.ts
|
|
2708
|
+
function retargetActiveInitialScrollAtEnd(ctx) {
|
|
2709
|
+
var _a3;
|
|
2710
|
+
const state = ctx.state;
|
|
2711
|
+
const initialScroll = state.initialScroll;
|
|
2712
|
+
if (!initialScroll || state.didFinishInitialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
|
|
2713
|
+
return false;
|
|
2714
|
+
}
|
|
2715
|
+
return advanceCurrentInitialScrollSession(ctx, { forceScroll: true });
|
|
2716
|
+
}
|
|
2680
2717
|
function handleInitialScrollLayoutReady(ctx) {
|
|
2681
2718
|
var _a3;
|
|
2682
2719
|
if (!ctx.state.initialScroll) {
|
|
@@ -4785,6 +4822,22 @@ function maybeUpdateAnchoredEndSpace(ctx) {
|
|
|
4785
4822
|
return nextSize;
|
|
4786
4823
|
}
|
|
4787
4824
|
|
|
4825
|
+
// src/core/updateContentInsetEndAdjustment.ts
|
|
4826
|
+
function updateContentInsetEndAdjustment(ctx, previousContentInsetEndAdjustment) {
|
|
4827
|
+
const state = ctx.state;
|
|
4828
|
+
const previousContentInsetEnd = getContentInsetEnd(ctx, previousContentInsetEndAdjustment);
|
|
4829
|
+
const nextContentInsetEnd = getContentInsetEnd(ctx);
|
|
4830
|
+
const insetDiff = nextContentInsetEnd - previousContentInsetEnd;
|
|
4831
|
+
if (insetDiff !== 0) {
|
|
4832
|
+
const wasWithinEndThreshold = !!peek$(ctx, "isWithinMaintainScrollAtEndThreshold");
|
|
4833
|
+
updateScroll(ctx, state.scroll, true, { markHasScrolled: false });
|
|
4834
|
+
const didRetargetInitialScroll = retargetActiveInitialScrollAtEnd(ctx);
|
|
4835
|
+
if (!didRetargetInitialScroll && wasWithinEndThreshold && (Platform.OS !== "web" || insetDiff > 0)) {
|
|
4836
|
+
requestAdjust(ctx, insetDiff);
|
|
4837
|
+
}
|
|
4838
|
+
}
|
|
4839
|
+
}
|
|
4840
|
+
|
|
4788
4841
|
// src/core/updateItemSize.ts
|
|
4789
4842
|
function runOrScheduleMVCPRecalculate(ctx) {
|
|
4790
4843
|
const state = ctx.state;
|
|
@@ -5147,8 +5200,14 @@ function createImperativeHandle(ctx) {
|
|
|
5147
5200
|
startBuffered: state.startBuffered
|
|
5148
5201
|
}),
|
|
5149
5202
|
reportContentInset: (inset) => {
|
|
5203
|
+
var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
5204
|
+
const previousInset = state.contentInsetOverride;
|
|
5150
5205
|
state.contentInsetOverride = inset != null ? inset : void 0;
|
|
5206
|
+
const didChange = ((_a3 = previousInset == null ? void 0 : previousInset.top) != null ? _a3 : 0) !== ((_c = (_b = state.contentInsetOverride) == null ? void 0 : _b.top) != null ? _c : 0) || ((_d = previousInset == null ? void 0 : previousInset.bottom) != null ? _d : 0) !== ((_f = (_e = state.contentInsetOverride) == null ? void 0 : _e.bottom) != null ? _f : 0) || ((_g = previousInset == null ? void 0 : previousInset.left) != null ? _g : 0) !== ((_i = (_h = state.contentInsetOverride) == null ? void 0 : _h.left) != null ? _i : 0) || ((_j = previousInset == null ? void 0 : previousInset.right) != null ? _j : 0) !== ((_l = (_k = state.contentInsetOverride) == null ? void 0 : _k.right) != null ? _l : 0);
|
|
5151
5207
|
updateScroll(ctx, state.scroll, true, { markHasScrolled: false });
|
|
5208
|
+
if (didChange) {
|
|
5209
|
+
retargetActiveInitialScrollAtEnd(ctx);
|
|
5210
|
+
}
|
|
5152
5211
|
},
|
|
5153
5212
|
scrollIndexIntoView: (options) => runScrollWithPromise(() => scrollIndexIntoView(options)),
|
|
5154
5213
|
scrollItemIntoView: ({ item, ...props }) => runScrollWithPromise(() => {
|
|
@@ -5449,6 +5508,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
5449
5508
|
data: dataProp = [],
|
|
5450
5509
|
dataVersion,
|
|
5451
5510
|
drawDistance = 250,
|
|
5511
|
+
contentInsetEndAdjustment,
|
|
5452
5512
|
estimatedItemSize = 100,
|
|
5453
5513
|
estimatedListSize,
|
|
5454
5514
|
extraData,
|
|
@@ -5558,6 +5618,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
5558
5618
|
const combinedRef = useCombinedRef(refScroller, refScrollView);
|
|
5559
5619
|
const keyExtractor = keyExtractorProp != null ? keyExtractorProp : ((_item, index) => index.toString());
|
|
5560
5620
|
const stickyHeaderIndices = stickyHeaderIndicesProp != null ? stickyHeaderIndicesProp : stickyIndicesDeprecated;
|
|
5621
|
+
const contentInsetEndAdjustmentResolved = Platform.OS === "web" ? contentInsetEndAdjustment : void 0;
|
|
5622
|
+
const previousContentInsetEndAdjustmentRef = useRef(contentInsetEndAdjustmentResolved);
|
|
5561
5623
|
const alwaysRenderIndices = useMemo(() => {
|
|
5562
5624
|
const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor, anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
|
|
5563
5625
|
return { arr: indices, set: new Set(indices) };
|
|
@@ -5677,6 +5739,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
5677
5739
|
anchoredEndSpace: anchoredEndSpaceResolved,
|
|
5678
5740
|
animatedProps: animatedPropsInternal,
|
|
5679
5741
|
contentInset,
|
|
5742
|
+
contentInsetEndAdjustment: contentInsetEndAdjustmentResolved,
|
|
5680
5743
|
data: dataProp,
|
|
5681
5744
|
dataVersion,
|
|
5682
5745
|
drawDistance,
|
|
@@ -5799,6 +5862,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
5799
5862
|
didAnchoredEndSpaceAnchorIndexChange,
|
|
5800
5863
|
numColumnsProp
|
|
5801
5864
|
]);
|
|
5865
|
+
useLayoutEffect(() => {
|
|
5866
|
+
const previousContentInsetEndAdjustment = previousContentInsetEndAdjustmentRef.current;
|
|
5867
|
+
previousContentInsetEndAdjustmentRef.current = contentInsetEndAdjustmentResolved;
|
|
5868
|
+
updateContentInsetEndAdjustment(ctx, previousContentInsetEndAdjustment);
|
|
5869
|
+
}, [ctx, contentInsetEndAdjustmentResolved]);
|
|
5802
5870
|
const onLayoutFooter = useCallback(
|
|
5803
5871
|
(layout) => {
|
|
5804
5872
|
if (!usesBootstrapInitialScroll) {
|
package/react-native.web.d.ts
CHANGED
|
@@ -5,7 +5,6 @@ type ScrollEventTarget = Window | HTMLElement;
|
|
|
5
5
|
|
|
6
6
|
interface ScrollViewMethods {
|
|
7
7
|
getBoundingClientRect(): DOMRect | null | undefined;
|
|
8
|
-
getContentNode(): HTMLElement | null;
|
|
9
8
|
getCurrentScrollOffset(): number;
|
|
10
9
|
getScrollableNode(): HTMLElement;
|
|
11
10
|
getScrollEventTarget(): ScrollEventTarget | null;
|
|
@@ -278,6 +277,11 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
|
|
|
278
277
|
* Keeps an item visually anchored to the start by adding trailing space when the content below it underflows.
|
|
279
278
|
*/
|
|
280
279
|
anchoredEndSpace?: AnchoredEndSpaceConfig$1;
|
|
280
|
+
/**
|
|
281
|
+
* Adjusts the effective end content inset for web lists without replacing the base contentInset.
|
|
282
|
+
* The adjustment is also rendered as real content padding so the browser scroll range includes it.
|
|
283
|
+
*/
|
|
284
|
+
contentInsetEndAdjustment?: number;
|
|
281
285
|
/**
|
|
282
286
|
* Number of columns to render items in.
|
|
283
287
|
* @default 1
|
package/react-native.web.js
CHANGED
|
@@ -166,7 +166,10 @@ function useSelector$(signalName, selector) {
|
|
|
166
166
|
}
|
|
167
167
|
|
|
168
168
|
// src/state/getContentInsetEnd.ts
|
|
169
|
-
function
|
|
169
|
+
function getContentInsetEndAdjustmentEnd(adjustment) {
|
|
170
|
+
return Math.max(0, adjustment != null ? adjustment : 0);
|
|
171
|
+
}
|
|
172
|
+
function getContentInsetEnd(ctx, contentInsetEndAdjustmentOverride) {
|
|
170
173
|
var _a3, _b;
|
|
171
174
|
const state = ctx.state;
|
|
172
175
|
const { props } = state;
|
|
@@ -174,14 +177,21 @@ function getContentInsetEnd(ctx) {
|
|
|
174
177
|
const contentInset = props.contentInset;
|
|
175
178
|
const baseInset = contentInset != null ? contentInset : state.nativeContentInset;
|
|
176
179
|
const baseEndInset = (horizontal ? baseInset == null ? void 0 : baseInset.right : baseInset == null ? void 0 : baseInset.bottom) || 0;
|
|
180
|
+
const contentInsetEndAdjustment = getContentInsetEndAdjustmentEnd(
|
|
181
|
+
contentInsetEndAdjustmentOverride != null ? contentInsetEndAdjustmentOverride : props.contentInsetEndAdjustment
|
|
182
|
+
);
|
|
177
183
|
const anchoredEndSpaceSize = peek$(ctx, "anchoredEndSpaceSize");
|
|
178
184
|
const anchoredEndInset = ((_a3 = props.anchoredEndSpace) == null ? void 0 : _a3.includeInEndInset) && anchoredEndSpaceSize ? anchoredEndSpaceSize : 0;
|
|
179
185
|
const overrideInset = (_b = state.contentInsetOverride) != null ? _b : void 0;
|
|
186
|
+
const adjustedBaseEndInset = baseEndInset + contentInsetEndAdjustment;
|
|
180
187
|
if (overrideInset) {
|
|
181
188
|
const mergedInset = { bottom: 0, right: 0, ...baseInset, ...overrideInset };
|
|
182
|
-
return Math.max(
|
|
189
|
+
return Math.max(
|
|
190
|
+
((horizontal ? mergedInset.right : mergedInset.bottom) || 0) + contentInsetEndAdjustment,
|
|
191
|
+
anchoredEndInset
|
|
192
|
+
);
|
|
183
193
|
}
|
|
184
|
-
return Math.max(
|
|
194
|
+
return Math.max(adjustedBaseEndInset, anchoredEndInset);
|
|
185
195
|
}
|
|
186
196
|
|
|
187
197
|
// src/state/getContentSize.ts
|
|
@@ -682,6 +692,49 @@ function isInMVCPActiveMode(state) {
|
|
|
682
692
|
}
|
|
683
693
|
|
|
684
694
|
// src/components/Container.tsx
|
|
695
|
+
function getContainerPositionStyle({
|
|
696
|
+
columnWrapperStyle,
|
|
697
|
+
horizontal,
|
|
698
|
+
hasItemSeparator,
|
|
699
|
+
numColumns,
|
|
700
|
+
otherAxisPos,
|
|
701
|
+
otherAxisSize
|
|
702
|
+
}) {
|
|
703
|
+
let paddingStyles;
|
|
704
|
+
if (columnWrapperStyle) {
|
|
705
|
+
const { columnGap, rowGap, gap } = columnWrapperStyle;
|
|
706
|
+
if (horizontal) {
|
|
707
|
+
paddingStyles = {
|
|
708
|
+
paddingBottom: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0,
|
|
709
|
+
paddingRight: columnGap || gap || void 0,
|
|
710
|
+
paddingTop: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
|
|
711
|
+
};
|
|
712
|
+
} else {
|
|
713
|
+
paddingStyles = {
|
|
714
|
+
paddingBottom: rowGap || gap || void 0,
|
|
715
|
+
paddingLeft: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0,
|
|
716
|
+
paddingRight: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
|
|
717
|
+
};
|
|
718
|
+
}
|
|
719
|
+
}
|
|
720
|
+
return horizontal ? {
|
|
721
|
+
boxSizing: paddingStyles ? "border-box" : void 0,
|
|
722
|
+
flexDirection: hasItemSeparator ? "row" : void 0,
|
|
723
|
+
height: otherAxisSize,
|
|
724
|
+
left: 0,
|
|
725
|
+
position: "absolute",
|
|
726
|
+
top: otherAxisPos,
|
|
727
|
+
...paddingStyles || {}
|
|
728
|
+
} : {
|
|
729
|
+
boxSizing: paddingStyles ? "border-box" : void 0,
|
|
730
|
+
left: otherAxisPos,
|
|
731
|
+
position: "absolute",
|
|
732
|
+
right: numColumns > 1 ? null : 0,
|
|
733
|
+
top: 0,
|
|
734
|
+
width: otherAxisSize,
|
|
735
|
+
...paddingStyles || {}
|
|
736
|
+
};
|
|
737
|
+
}
|
|
685
738
|
var Container = typedMemo(function Container2({
|
|
686
739
|
id,
|
|
687
740
|
recycleItems,
|
|
@@ -720,42 +773,17 @@ var Container = typedMemo(function Container2({
|
|
|
720
773
|
const resolvedSpan = Math.min(Math.max(span || 1, 1), numColumns);
|
|
721
774
|
const otherAxisPos = numColumns > 1 ? `${(resolvedColumn - 1) / numColumns * 100}%` : 0;
|
|
722
775
|
const otherAxisSize = numColumns > 1 ? `${resolvedSpan / numColumns * 100}%` : void 0;
|
|
723
|
-
const style = React3.useMemo(
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
paddingStyles = {
|
|
735
|
-
paddingBottom: rowGap || gap || void 0,
|
|
736
|
-
paddingLeft: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0,
|
|
737
|
-
paddingRight: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
|
|
738
|
-
};
|
|
739
|
-
}
|
|
740
|
-
}
|
|
741
|
-
return horizontal ? {
|
|
742
|
-
boxSizing: paddingStyles ? "border-box" : void 0,
|
|
743
|
-
flexDirection: ItemSeparatorComponent ? "row" : void 0,
|
|
744
|
-
height: otherAxisSize,
|
|
745
|
-
left: 0,
|
|
746
|
-
position: "absolute",
|
|
747
|
-
top: otherAxisPos,
|
|
748
|
-
...paddingStyles || {}
|
|
749
|
-
} : {
|
|
750
|
-
boxSizing: paddingStyles ? "border-box" : void 0,
|
|
751
|
-
left: otherAxisPos,
|
|
752
|
-
position: "absolute",
|
|
753
|
-
right: numColumns > 1 ? null : 0,
|
|
754
|
-
top: 0,
|
|
755
|
-
width: otherAxisSize,
|
|
756
|
-
...paddingStyles || {}
|
|
757
|
-
};
|
|
758
|
-
}, [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns]);
|
|
776
|
+
const style = React3.useMemo(
|
|
777
|
+
() => getContainerPositionStyle({
|
|
778
|
+
columnWrapperStyle,
|
|
779
|
+
hasItemSeparator: !!ItemSeparatorComponent,
|
|
780
|
+
horizontal,
|
|
781
|
+
numColumns,
|
|
782
|
+
otherAxisPos,
|
|
783
|
+
otherAxisSize
|
|
784
|
+
}),
|
|
785
|
+
[horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns, ItemSeparatorComponent]
|
|
786
|
+
);
|
|
759
787
|
const renderedItemInfo = React3.useMemo(
|
|
760
788
|
() => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
|
|
761
789
|
[itemKey, data, extraData]
|
|
@@ -1066,6 +1094,9 @@ function useRafCoalescer(callback) {
|
|
|
1066
1094
|
return coalescer;
|
|
1067
1095
|
}
|
|
1068
1096
|
|
|
1097
|
+
// src/components/webConstants.ts
|
|
1098
|
+
var LEGEND_LIST_CONTENT_CONTAINER_CLASS = "legend-list-content-container";
|
|
1099
|
+
|
|
1069
1100
|
// src/components/webScrollUtils.ts
|
|
1070
1101
|
function getDocumentScrollerNode() {
|
|
1071
1102
|
if (typeof document === "undefined") {
|
|
@@ -1150,6 +1181,11 @@ function resolveWindowScrollTarget({ clampedOffset, horizontal, listPos, scroll
|
|
|
1150
1181
|
}
|
|
1151
1182
|
|
|
1152
1183
|
// src/components/ListComponentScrollView.tsx
|
|
1184
|
+
function getContentInsetEndAdjustmentEnd2(ctx) {
|
|
1185
|
+
var _a3, _b;
|
|
1186
|
+
const adjustment = (_b = (_a3 = ctx.state) == null ? void 0 : _a3.props) == null ? void 0 : _b.contentInsetEndAdjustment;
|
|
1187
|
+
return Math.max(0, adjustment != null ? adjustment : 0);
|
|
1188
|
+
}
|
|
1153
1189
|
var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView2({
|
|
1154
1190
|
children,
|
|
1155
1191
|
style,
|
|
@@ -1167,7 +1203,9 @@ var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView
|
|
|
1167
1203
|
onLayout,
|
|
1168
1204
|
...props
|
|
1169
1205
|
}, ref) {
|
|
1206
|
+
var _a3, _b, _c;
|
|
1170
1207
|
const ctx = useStateContext();
|
|
1208
|
+
const [anchoredEndSpaceSize] = useArr$(["anchoredEndSpaceSize"]);
|
|
1171
1209
|
const scrollRef = React3.useRef(null);
|
|
1172
1210
|
const contentRef = React3.useRef(null);
|
|
1173
1211
|
const isWindowScroll = useWindowScroll;
|
|
@@ -1229,10 +1267,9 @@ var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView
|
|
|
1229
1267
|
React3.useImperativeHandle(ref, () => {
|
|
1230
1268
|
const api = {
|
|
1231
1269
|
getBoundingClientRect: () => {
|
|
1232
|
-
var
|
|
1233
|
-
return (
|
|
1270
|
+
var _a4;
|
|
1271
|
+
return (_a4 = scrollRef.current) == null ? void 0 : _a4.getBoundingClientRect();
|
|
1234
1272
|
},
|
|
1235
|
-
getContentNode: () => contentRef.current,
|
|
1236
1273
|
getCurrentScrollOffset,
|
|
1237
1274
|
getScrollableNode: () => resolveScrollableNode(scrollRef.current, isWindowScroll),
|
|
1238
1275
|
getScrollEventTarget: () => getScrollTarget(),
|
|
@@ -1358,6 +1395,10 @@ var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView
|
|
|
1358
1395
|
},
|
|
1359
1396
|
...StyleSheet.flatten(style)
|
|
1360
1397
|
};
|
|
1398
|
+
const contentInsetEndAdjustment = getContentInsetEndAdjustmentEnd2(ctx);
|
|
1399
|
+
const anchoredEndInset = ((_c = (_b = (_a3 = ctx.state) == null ? void 0 : _a3.props) == null ? void 0 : _b.anchoredEndSpace) == null ? void 0 : _c.includeInEndInset) && anchoredEndSpaceSize ? anchoredEndSpaceSize : 0;
|
|
1400
|
+
const renderedContentInsetEndAdjustment = Math.max(0, contentInsetEndAdjustment - anchoredEndInset);
|
|
1401
|
+
const contentInsetEndAdjustmentSpacerStyle = renderedContentInsetEndAdjustment ? horizontal ? { flexShrink: 0, width: renderedContentInsetEndAdjustment } : { height: renderedContentInsetEndAdjustment } : void 0;
|
|
1361
1402
|
const contentStyle = {
|
|
1362
1403
|
display: horizontal ? "flex" : "block",
|
|
1363
1404
|
flexDirection: horizontal ? "row" : void 0,
|
|
@@ -1365,6 +1406,7 @@ var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView
|
|
|
1365
1406
|
minWidth: horizontal ? "100%" : void 0,
|
|
1366
1407
|
...StyleSheet.flatten(contentContainerStyle)
|
|
1367
1408
|
};
|
|
1409
|
+
const className = contentContainerClassName ? `${LEGEND_LIST_CONTENT_CONTAINER_CLASS} ${contentContainerClassName}` : LEGEND_LIST_CONTENT_CONTAINER_CLASS;
|
|
1368
1410
|
const {
|
|
1369
1411
|
contentContainerClassName: _contentContainerClassName,
|
|
1370
1412
|
contentInset: _contentInset,
|
|
@@ -1373,7 +1415,7 @@ var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView
|
|
|
1373
1415
|
useWindowScroll: _useWindowScroll,
|
|
1374
1416
|
...webProps
|
|
1375
1417
|
} = props;
|
|
1376
|
-
return /* @__PURE__ */ React3__namespace.createElement("div", { ref: scrollRef, ...webProps, style: scrollViewStyle }, refreshControl, /* @__PURE__ */ React3__namespace.createElement("div", { className
|
|
1418
|
+
return /* @__PURE__ */ React3__namespace.createElement("div", { ref: scrollRef, ...webProps, style: scrollViewStyle }, refreshControl, /* @__PURE__ */ React3__namespace.createElement("div", { className, ref: contentRef, style: contentStyle }, children, contentInsetEndAdjustmentSpacerStyle ? /* @__PURE__ */ React3__namespace.createElement("div", { "aria-hidden": true, style: contentInsetEndAdjustmentSpacerStyle }) : null));
|
|
1377
1419
|
});
|
|
1378
1420
|
function useValueListener$(key, callback) {
|
|
1379
1421
|
const ctx = useStateContext();
|
|
@@ -1401,11 +1443,18 @@ function getScrollAdjustAxis(horizontal) {
|
|
|
1401
1443
|
y: 1
|
|
1402
1444
|
};
|
|
1403
1445
|
}
|
|
1446
|
+
function resolveScrollAdjustContentNode(el, contentNode) {
|
|
1447
|
+
if ((contentNode == null ? void 0 : contentNode.isConnected) && contentNode.parentElement === el) {
|
|
1448
|
+
return contentNode;
|
|
1449
|
+
}
|
|
1450
|
+
return el.querySelector(`:scope > .${LEGEND_LIST_CONTENT_CONTAINER_CLASS}`);
|
|
1451
|
+
}
|
|
1404
1452
|
function ScrollAdjust() {
|
|
1405
1453
|
const ctx = useStateContext();
|
|
1406
1454
|
const lastScrollOffsetRef = React3__namespace.useRef(0);
|
|
1407
1455
|
const resetPaddingRafRef = React3__namespace.useRef(void 0);
|
|
1408
1456
|
const resetPaddingBaselineRef = React3__namespace.useRef(void 0);
|
|
1457
|
+
const contentNodeRef = React3__namespace.useRef(null);
|
|
1409
1458
|
const callback = React3__namespace.useCallback(() => {
|
|
1410
1459
|
var _a3, _b;
|
|
1411
1460
|
const scrollAdjust = peek$(ctx, "scrollAdjust");
|
|
@@ -1416,9 +1465,10 @@ function ScrollAdjust() {
|
|
|
1416
1465
|
const scrollDelta = scrollOffset - lastScrollOffsetRef.current;
|
|
1417
1466
|
if (scrollDelta !== 0) {
|
|
1418
1467
|
const axis = getScrollAdjustAxis(!!ctx.state.props.horizontal);
|
|
1419
|
-
const contentNode = scrollView.getContentNode();
|
|
1420
1468
|
const prevScroll = scrollView.getCurrentScrollOffset();
|
|
1421
1469
|
const el = scrollView.getScrollableNode();
|
|
1470
|
+
const contentNode = resolveScrollAdjustContentNode(el, contentNodeRef.current);
|
|
1471
|
+
contentNodeRef.current = contentNode;
|
|
1422
1472
|
const scrollBy = () => scrollView.scrollBy(axis.x * scrollDelta, axis.y * scrollDelta);
|
|
1423
1473
|
if (!contentNode) {
|
|
1424
1474
|
scrollBy();
|
|
@@ -3273,6 +3323,15 @@ function checkFinishedScrollFallback(ctx) {
|
|
|
3273
3323
|
}
|
|
3274
3324
|
|
|
3275
3325
|
// src/core/initialScrollLifecycle.ts
|
|
3326
|
+
function retargetActiveInitialScrollAtEnd(ctx) {
|
|
3327
|
+
var _a3;
|
|
3328
|
+
const state = ctx.state;
|
|
3329
|
+
const initialScroll = state.initialScroll;
|
|
3330
|
+
if (!initialScroll || state.didFinishInitialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
|
|
3331
|
+
return false;
|
|
3332
|
+
}
|
|
3333
|
+
return advanceCurrentInitialScrollSession(ctx, { forceScroll: true });
|
|
3334
|
+
}
|
|
3276
3335
|
function handleInitialScrollLayoutReady(ctx) {
|
|
3277
3336
|
var _a3;
|
|
3278
3337
|
if (!ctx.state.initialScroll) {
|
|
@@ -5339,6 +5398,22 @@ function maybeUpdateAnchoredEndSpace(ctx) {
|
|
|
5339
5398
|
return nextSize;
|
|
5340
5399
|
}
|
|
5341
5400
|
|
|
5401
|
+
// src/core/updateContentInsetEndAdjustment.ts
|
|
5402
|
+
function updateContentInsetEndAdjustment(ctx, previousContentInsetEndAdjustment) {
|
|
5403
|
+
const state = ctx.state;
|
|
5404
|
+
const previousContentInsetEnd = getContentInsetEnd(ctx, previousContentInsetEndAdjustment);
|
|
5405
|
+
const nextContentInsetEnd = getContentInsetEnd(ctx);
|
|
5406
|
+
const insetDiff = nextContentInsetEnd - previousContentInsetEnd;
|
|
5407
|
+
if (insetDiff !== 0) {
|
|
5408
|
+
const wasWithinEndThreshold = !!peek$(ctx, "isWithinMaintainScrollAtEndThreshold");
|
|
5409
|
+
updateScroll(ctx, state.scroll, true, { markHasScrolled: false });
|
|
5410
|
+
const didRetargetInitialScroll = retargetActiveInitialScrollAtEnd(ctx);
|
|
5411
|
+
if (!didRetargetInitialScroll && wasWithinEndThreshold && (insetDiff > 0)) {
|
|
5412
|
+
requestAdjust(ctx, insetDiff);
|
|
5413
|
+
}
|
|
5414
|
+
}
|
|
5415
|
+
}
|
|
5416
|
+
|
|
5342
5417
|
// src/core/updateItemSize.ts
|
|
5343
5418
|
function runOrScheduleMVCPRecalculate(ctx) {
|
|
5344
5419
|
const state = ctx.state;
|
|
@@ -5686,8 +5761,14 @@ function createImperativeHandle(ctx) {
|
|
|
5686
5761
|
startBuffered: state.startBuffered
|
|
5687
5762
|
}),
|
|
5688
5763
|
reportContentInset: (inset) => {
|
|
5764
|
+
var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
5765
|
+
const previousInset = state.contentInsetOverride;
|
|
5689
5766
|
state.contentInsetOverride = inset != null ? inset : void 0;
|
|
5767
|
+
const didChange = ((_a3 = previousInset == null ? void 0 : previousInset.top) != null ? _a3 : 0) !== ((_c = (_b = state.contentInsetOverride) == null ? void 0 : _b.top) != null ? _c : 0) || ((_d = previousInset == null ? void 0 : previousInset.bottom) != null ? _d : 0) !== ((_f = (_e = state.contentInsetOverride) == null ? void 0 : _e.bottom) != null ? _f : 0) || ((_g = previousInset == null ? void 0 : previousInset.left) != null ? _g : 0) !== ((_i = (_h = state.contentInsetOverride) == null ? void 0 : _h.left) != null ? _i : 0) || ((_j = previousInset == null ? void 0 : previousInset.right) != null ? _j : 0) !== ((_l = (_k = state.contentInsetOverride) == null ? void 0 : _k.right) != null ? _l : 0);
|
|
5690
5768
|
updateScroll(ctx, state.scroll, true, { markHasScrolled: false });
|
|
5769
|
+
if (didChange) {
|
|
5770
|
+
retargetActiveInitialScrollAtEnd(ctx);
|
|
5771
|
+
}
|
|
5691
5772
|
},
|
|
5692
5773
|
scrollIndexIntoView: (options) => runScrollWithPromise(() => scrollIndexIntoView(options)),
|
|
5693
5774
|
scrollItemIntoView: ({ item, ...props }) => runScrollWithPromise(() => {
|
|
@@ -5988,6 +6069,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
5988
6069
|
data: dataProp = [],
|
|
5989
6070
|
dataVersion,
|
|
5990
6071
|
drawDistance = 250,
|
|
6072
|
+
contentInsetEndAdjustment,
|
|
5991
6073
|
estimatedItemSize = 100,
|
|
5992
6074
|
estimatedListSize,
|
|
5993
6075
|
extraData,
|
|
@@ -6097,6 +6179,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
6097
6179
|
const combinedRef = useCombinedRef(refScroller, refScrollView);
|
|
6098
6180
|
const keyExtractor = keyExtractorProp != null ? keyExtractorProp : ((_item, index) => index.toString());
|
|
6099
6181
|
const stickyHeaderIndices = stickyHeaderIndicesProp != null ? stickyHeaderIndicesProp : stickyIndicesDeprecated;
|
|
6182
|
+
const contentInsetEndAdjustmentResolved = contentInsetEndAdjustment ;
|
|
6183
|
+
const previousContentInsetEndAdjustmentRef = React3.useRef(contentInsetEndAdjustmentResolved);
|
|
6100
6184
|
const alwaysRenderIndices = React3.useMemo(() => {
|
|
6101
6185
|
const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor, anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
|
|
6102
6186
|
return { arr: indices, set: new Set(indices) };
|
|
@@ -6216,6 +6300,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
6216
6300
|
anchoredEndSpace: anchoredEndSpaceResolved,
|
|
6217
6301
|
animatedProps: animatedPropsInternal,
|
|
6218
6302
|
contentInset,
|
|
6303
|
+
contentInsetEndAdjustment: contentInsetEndAdjustmentResolved,
|
|
6219
6304
|
data: dataProp,
|
|
6220
6305
|
dataVersion,
|
|
6221
6306
|
drawDistance,
|
|
@@ -6333,6 +6418,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
|
|
|
6333
6418
|
didAnchoredEndSpaceAnchorIndexChange,
|
|
6334
6419
|
numColumnsProp
|
|
6335
6420
|
]);
|
|
6421
|
+
React3.useLayoutEffect(() => {
|
|
6422
|
+
const previousContentInsetEndAdjustment = previousContentInsetEndAdjustmentRef.current;
|
|
6423
|
+
previousContentInsetEndAdjustmentRef.current = contentInsetEndAdjustmentResolved;
|
|
6424
|
+
updateContentInsetEndAdjustment(ctx, previousContentInsetEndAdjustment);
|
|
6425
|
+
}, [ctx, contentInsetEndAdjustmentResolved]);
|
|
6336
6426
|
const onLayoutFooter = React3.useCallback(
|
|
6337
6427
|
(layout) => {
|
|
6338
6428
|
if (!usesBootstrapInitialScroll) {
|