@legendapp/list 1.0.0-beta.20 → 1.0.0-beta.22

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.
Files changed (7) hide show
  1. package/animated.d.mts +1 -1
  2. package/animated.d.ts +1 -1
  3. package/index.d.mts +1 -1
  4. package/index.d.ts +1 -1
  5. package/index.js +39 -17
  6. package/index.mjs +39 -17
  7. 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, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
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;
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, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
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;
package/index.d.mts CHANGED
@@ -253,7 +253,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
253
253
  };
254
254
  declare const typedMemo: TypedMemo;
255
255
 
256
- declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
256
+ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
257
257
  data: readonly T[];
258
258
  initialScrollOffset?: number;
259
259
  initialScrollIndex?: number;
package/index.d.ts CHANGED
@@ -253,7 +253,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
253
253
  };
254
254
  declare const typedMemo: TypedMemo;
255
255
 
256
- declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
256
+ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
257
257
  data: readonly T[];
258
258
  initialScrollOffset?: number;
259
259
  initialScrollIndex?: number;
package/index.js CHANGED
@@ -239,6 +239,7 @@ var Container = ({
239
239
  const itemKey = use$(`containerItemKey${id}`);
240
240
  const data = use$(`containerItemData${id}`);
241
241
  const extraData = use$("extraData");
242
+ const refLastSize = React6.useRef();
242
243
  const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
243
244
  const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
244
245
  let verticalPaddingStyles;
@@ -271,6 +272,18 @@ var Container = ({
271
272
  [itemKey, data, extraData]
272
273
  );
273
274
  const { index, renderedItem } = renderedItemInfo || {};
275
+ React6.useEffect(() => {
276
+ if (itemKey) {
277
+ const timeout = setTimeout(() => {
278
+ if (refLastSize.current) {
279
+ updateItemSize(id, itemKey, refLastSize.current);
280
+ }
281
+ }, 16);
282
+ return () => {
283
+ clearTimeout(timeout);
284
+ };
285
+ }
286
+ }, [itemKey]);
274
287
  const onLayout = (event) => {
275
288
  if (itemKey !== void 0) {
276
289
  const layout = event.nativeEvent.layout;
@@ -286,6 +299,7 @@ var Container = ({
286
299
  }
287
300
  return;
288
301
  }
302
+ refLastSize.current = size;
289
303
  updateItemSize(id, itemKey, size);
290
304
  }
291
305
  };
@@ -687,11 +701,13 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
687
701
  }
688
702
  }
689
703
  function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
690
- const { sizes, positions, scroll } = state;
704
+ const { sizes, positions, scroll: scrollState, scrollAdjustHandler } = state;
691
705
  const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
692
706
  const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
693
707
  const viewAreaMode = viewAreaCoveragePercentThreshold != null;
694
708
  const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
709
+ const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
710
+ const scroll = scrollState - previousScrollAdjust - topPad;
695
711
  const top = positions.get(key) - scroll + topPad;
696
712
  const size = sizes.get(key) || 0;
697
713
  const bottom = top + size;
@@ -1705,12 +1721,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1705
1721
  React6.useImperativeHandle(
1706
1722
  forwardedRef,
1707
1723
  () => {
1708
- const scrollToIndex = ({ index, animated = true }) => {
1724
+ const scrollToIndex = ({
1725
+ index,
1726
+ viewOffset = 0,
1727
+ animated = true
1728
+ }) => {
1709
1729
  var _a2;
1710
1730
  const state = refState.current;
1711
1731
  const firstIndexOffset = calculateOffsetForIndex(index);
1712
- let firstIndexScrollPostion = firstIndexOffset;
1713
- if (maintainVisibleContentPosition) {
1732
+ let firstIndexScrollPostion = firstIndexOffset - viewOffset;
1733
+ const diff = Math.abs(state.scroll - firstIndexScrollPostion);
1734
+ const needsReanchoring = maintainVisibleContentPosition && diff > 100;
1735
+ if (needsReanchoring) {
1714
1736
  const id = getId(index);
1715
1737
  state.anchorElement = { id, coordinate: firstIndexOffset };
1716
1738
  (_a2 = state.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
@@ -1719,20 +1741,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1719
1741
  state.scrollForNextCalculateItemsInView = void 0;
1720
1742
  state.startBufferedId = id;
1721
1743
  state.minIndexSizeChanged = index;
1722
- firstIndexScrollPostion = firstIndexOffset + state.scrollAdjustHandler.getAppliedAdjust();
1723
- state.scrollAdjustHandler.pauseAdjust();
1724
- setTimeout(
1725
- () => {
1726
- const wasAdjusted = state.scrollAdjustHandler.unPauseAdjust();
1727
- if (wasAdjusted) {
1728
- refState.current.scrollVelocity = 0;
1729
- refState.current.scrollHistory = [];
1730
- calculateItemsInView(0);
1731
- }
1732
- },
1733
- animated ? 1e3 : 50
1734
- );
1744
+ firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
1735
1745
  }
1746
+ state.scrollAdjustHandler.pauseAdjust();
1747
+ setTimeout(
1748
+ () => {
1749
+ const wasAdjusted = state.scrollAdjustHandler.unPauseAdjust();
1750
+ if (wasAdjusted) {
1751
+ refState.current.scrollVelocity = 0;
1752
+ refState.current.scrollHistory = [];
1753
+ calculateItemsInView(0);
1754
+ }
1755
+ },
1756
+ animated ? 1e3 : 50
1757
+ );
1736
1758
  const offset = horizontal ? { x: firstIndexScrollPostion, y: 0 } : { x: 0, y: firstIndexScrollPostion };
1737
1759
  if (maintainVisibleContentPosition) {
1738
1760
  setTimeout(() => {
package/index.mjs CHANGED
@@ -218,6 +218,7 @@ var Container = ({
218
218
  const itemKey = use$(`containerItemKey${id}`);
219
219
  const data = use$(`containerItemData${id}`);
220
220
  const extraData = use$("extraData");
221
+ const refLastSize = useRef();
221
222
  const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
222
223
  const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
223
224
  let verticalPaddingStyles;
@@ -250,6 +251,18 @@ var Container = ({
250
251
  [itemKey, data, extraData]
251
252
  );
252
253
  const { index, renderedItem } = renderedItemInfo || {};
254
+ useEffect(() => {
255
+ if (itemKey) {
256
+ const timeout = setTimeout(() => {
257
+ if (refLastSize.current) {
258
+ updateItemSize(id, itemKey, refLastSize.current);
259
+ }
260
+ }, 16);
261
+ return () => {
262
+ clearTimeout(timeout);
263
+ };
264
+ }
265
+ }, [itemKey]);
253
266
  const onLayout = (event) => {
254
267
  if (itemKey !== void 0) {
255
268
  const layout = event.nativeEvent.layout;
@@ -265,6 +278,7 @@ var Container = ({
265
278
  }
266
279
  return;
267
280
  }
281
+ refLastSize.current = size;
268
282
  updateItemSize(id, itemKey, size);
269
283
  }
270
284
  };
@@ -666,11 +680,13 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
666
680
  }
667
681
  }
668
682
  function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
669
- const { sizes, positions, scroll } = state;
683
+ const { sizes, positions, scroll: scrollState, scrollAdjustHandler } = state;
670
684
  const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
671
685
  const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
672
686
  const viewAreaMode = viewAreaCoveragePercentThreshold != null;
673
687
  const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
688
+ const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
689
+ const scroll = scrollState - previousScrollAdjust - topPad;
674
690
  const top = positions.get(key) - scroll + topPad;
675
691
  const size = sizes.get(key) || 0;
676
692
  const bottom = top + size;
@@ -1684,12 +1700,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1684
1700
  useImperativeHandle(
1685
1701
  forwardedRef,
1686
1702
  () => {
1687
- const scrollToIndex = ({ index, animated = true }) => {
1703
+ const scrollToIndex = ({
1704
+ index,
1705
+ viewOffset = 0,
1706
+ animated = true
1707
+ }) => {
1688
1708
  var _a2;
1689
1709
  const state = refState.current;
1690
1710
  const firstIndexOffset = calculateOffsetForIndex(index);
1691
- let firstIndexScrollPostion = firstIndexOffset;
1692
- if (maintainVisibleContentPosition) {
1711
+ let firstIndexScrollPostion = firstIndexOffset - viewOffset;
1712
+ const diff = Math.abs(state.scroll - firstIndexScrollPostion);
1713
+ const needsReanchoring = maintainVisibleContentPosition && diff > 100;
1714
+ if (needsReanchoring) {
1693
1715
  const id = getId(index);
1694
1716
  state.anchorElement = { id, coordinate: firstIndexOffset };
1695
1717
  (_a2 = state.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
@@ -1698,20 +1720,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1698
1720
  state.scrollForNextCalculateItemsInView = void 0;
1699
1721
  state.startBufferedId = id;
1700
1722
  state.minIndexSizeChanged = index;
1701
- firstIndexScrollPostion = firstIndexOffset + state.scrollAdjustHandler.getAppliedAdjust();
1702
- state.scrollAdjustHandler.pauseAdjust();
1703
- setTimeout(
1704
- () => {
1705
- const wasAdjusted = state.scrollAdjustHandler.unPauseAdjust();
1706
- if (wasAdjusted) {
1707
- refState.current.scrollVelocity = 0;
1708
- refState.current.scrollHistory = [];
1709
- calculateItemsInView(0);
1710
- }
1711
- },
1712
- animated ? 1e3 : 50
1713
- );
1723
+ firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
1714
1724
  }
1725
+ state.scrollAdjustHandler.pauseAdjust();
1726
+ setTimeout(
1727
+ () => {
1728
+ const wasAdjusted = state.scrollAdjustHandler.unPauseAdjust();
1729
+ if (wasAdjusted) {
1730
+ refState.current.scrollVelocity = 0;
1731
+ refState.current.scrollHistory = [];
1732
+ calculateItemsInView(0);
1733
+ }
1734
+ },
1735
+ animated ? 1e3 : 50
1736
+ );
1715
1737
  const offset = horizontal ? { x: firstIndexScrollPostion, y: 0 } : { x: 0, y: firstIndexScrollPostion };
1716
1738
  if (maintainVisibleContentPosition) {
1717
1739
  setTimeout(() => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@legendapp/list",
3
- "version": "1.0.0-beta.20",
3
+ "version": "1.0.0-beta.22",
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,