@legendapp/list 1.0.0-beta.31 → 1.0.0-beta.33

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 (5) hide show
  1. package/index.d.mts +3 -2
  2. package/index.d.ts +3 -2
  3. package/index.js +30 -24
  4. package/index.mjs +30 -24
  5. package/package.json +1 -1
package/index.d.mts CHANGED
@@ -272,6 +272,7 @@ interface InternalState {
272
272
  queuedCalculateItemsInView: number | undefined;
273
273
  lastBatchingAction: number;
274
274
  ignoreScrollFromCalcTotal?: boolean;
275
+ scrollingToOffset?: number | undefined;
275
276
  onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
276
277
  }
277
278
  interface ViewableRange<T> {
@@ -473,9 +474,9 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
473
474
  keyExtractor?: ((item: T, index: number) => string) | undefined;
474
475
  ListEmptyComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
475
476
  ListFooterComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
476
- ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
477
+ ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
477
478
  ListHeaderComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
478
- ListHeaderComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
479
+ ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
479
480
  maintainScrollAtEnd?: boolean;
480
481
  maintainScrollAtEndThreshold?: number;
481
482
  maintainVisibleContentPosition?: boolean;
package/index.d.ts CHANGED
@@ -272,6 +272,7 @@ interface InternalState {
272
272
  queuedCalculateItemsInView: number | undefined;
273
273
  lastBatchingAction: number;
274
274
  ignoreScrollFromCalcTotal?: boolean;
275
+ scrollingToOffset?: number | undefined;
275
276
  onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
276
277
  }
277
278
  interface ViewableRange<T> {
@@ -473,9 +474,9 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
473
474
  keyExtractor?: ((item: T, index: number) => string) | undefined;
474
475
  ListEmptyComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
475
476
  ListFooterComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
476
- ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
477
+ ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
477
478
  ListHeaderComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
478
- ListHeaderComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
479
+ ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
479
480
  maintainScrollAtEnd?: boolean;
480
481
  maintainScrollAtEndThreshold?: number;
481
482
  maintainVisibleContentPosition?: boolean;
package/index.js CHANGED
@@ -526,7 +526,7 @@ var ListComponent = typedMemo(function ListComponent2({
526
526
  contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
527
527
  ref: refScrollView
528
528
  },
529
- ENABLE_DEVMODE ? /* @__PURE__ */ React6__namespace.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6__namespace.createElement(PaddingAndAdjust, null),
529
+ !ListEmptyComponent && (ENABLE_DEVMODE ? /* @__PURE__ */ React6__namespace.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6__namespace.createElement(PaddingAndAdjust, null)),
530
530
  ListHeaderComponent && /* @__PURE__ */ React6__namespace.createElement(
531
531
  reactNative.View,
532
532
  {
@@ -780,6 +780,16 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
780
780
  // src/LegendList.tsx
781
781
  var DEFAULT_DRAW_DISTANCE = 250;
782
782
  var DEFAULT_ITEM_SIZE = 100;
783
+ function createColumnWrapperStyle(contentContainerStyle) {
784
+ const { gap, columnGap, rowGap } = reactNative.StyleSheet.flatten(contentContainerStyle);
785
+ if (gap || columnGap || rowGap) {
786
+ return {
787
+ gap,
788
+ columnGap,
789
+ rowGap
790
+ };
791
+ }
792
+ }
783
793
  var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
784
794
  return /* @__PURE__ */ React6__namespace.createElement(StateProvider, null, /* @__PURE__ */ React6__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
785
795
  });
@@ -831,7 +841,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
831
841
  callbacks.current.onStartReached = rest.onStartReached;
832
842
  callbacks.current.onEndReached = rest.onEndReached;
833
843
  const ctx = useStateContext();
834
- ctx.columnWrapperStyle = columnWrapperStyle;
844
+ ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
835
845
  const refScroller = React6.useRef(null);
836
846
  const combinedRef = useCombinedRef(refScroller, refScrollView);
837
847
  const scrollBuffer = (drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE) || 1;
@@ -926,13 +936,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
926
936
  lastBatchingAction: Date.now(),
927
937
  onScroll: onScrollProp
928
938
  };
929
- if (maintainVisibleContentPosition) {
930
- if (initialScrollIndex) {
939
+ const dataLength = dataProp.length;
940
+ if (maintainVisibleContentPosition && dataLength > 0) {
941
+ if (initialScrollIndex && initialScrollIndex < dataLength) {
931
942
  refState.current.anchorElement = {
932
943
  coordinate: initialContentOffset,
933
944
  id: getId(initialScrollIndex)
934
945
  };
935
- } else if (dataProp.length) {
946
+ } else if (dataLength > 0) {
936
947
  refState.current.anchorElement = {
937
948
  coordinate: initialContentOffset,
938
949
  id: getId(0)
@@ -1575,6 +1586,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1575
1586
  (_, i) => getId(dataProp.length - 1 - i)
1576
1587
  );
1577
1588
  }, [dataProp, numColumnsProp]);
1589
+ const stylePaddingTop = (_d = (_c = (_a = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
1578
1590
  const initalizeStateVars = () => {
1579
1591
  set$(ctx, "lastItemKeys", memoizedLastItemKeys);
1580
1592
  set$(ctx, "numColumns", numColumnsProp);
@@ -1604,7 +1616,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1604
1616
  set$(ctx, "extraData", extraData);
1605
1617
  }, [extraData]);
1606
1618
  refState.current.renderItem = renderItem;
1607
- const stylePaddingTop = (_d = (_c = (_a = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
1608
1619
  React6.useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTop]);
1609
1620
  const getRenderedItem = React6.useCallback((key) => {
1610
1621
  var _a2, _b2;
@@ -1858,28 +1869,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1858
1869
  state.minIndexSizeChanged = index;
1859
1870
  firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
1860
1871
  }
1861
- state.scrollAdjustHandler.setDisableAdjust(true);
1862
- setTimeout(
1863
- () => {
1864
- state.scrollAdjustHandler.setDisableAdjust(false);
1865
- calculateItemsInView();
1866
- },
1867
- animated ? 150 : 50
1868
- );
1869
1872
  if (viewPosition) {
1870
1873
  firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
1871
1874
  }
1875
+ state.scrollAdjustHandler.setDisableAdjust(true);
1876
+ state.scrollingToOffset = firstIndexScrollPostion;
1872
1877
  scrollTo(firstIndexScrollPostion, animated);
1873
- const totalSizeWithScrollAdjust = peek$(ctx, "totalSizeWithScrollAdjust");
1874
- if (maintainVisibleContentPosition && totalSizeWithScrollAdjust - firstIndexScrollPostion < state.scrollLength) {
1875
- const doScrollTo = () => {
1876
- scrollTo(firstIndexScrollPostion, animated);
1877
- };
1878
- setTimeout(doScrollTo, animated ? 150 : 50);
1879
- if (animated) {
1880
- setTimeout(doScrollTo, 350);
1881
- }
1882
- }
1883
1878
  };
1884
1879
  const scrollIndexIntoView = (options) => {
1885
1880
  if (refState.current) {
@@ -1962,6 +1957,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1962
1957
  updateItemSize,
1963
1958
  handleScroll,
1964
1959
  onMomentumScrollEnd: (event) => {
1960
+ var _a2;
1961
+ const scrollingToOffset = (_a2 = refState.current) == null ? void 0 : _a2.scrollingToOffset;
1962
+ if (scrollingToOffset !== void 0) {
1963
+ requestAnimationFrame(() => {
1964
+ scrollTo(scrollingToOffset, false);
1965
+ refState.current.scrollingToOffset = void 0;
1966
+ requestAnimationFrame(() => {
1967
+ refState.current.scrollAdjustHandler.setDisableAdjust(false);
1968
+ });
1969
+ });
1970
+ }
1965
1971
  const wasPaused = refState.current.scrollAdjustHandler.unPauseAdjust();
1966
1972
  if (wasPaused) {
1967
1973
  refState.current.scrollVelocity = 0;
package/index.mjs CHANGED
@@ -505,7 +505,7 @@ var ListComponent = typedMemo(function ListComponent2({
505
505
  contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
506
506
  ref: refScrollView
507
507
  },
508
- ENABLE_DEVMODE ? /* @__PURE__ */ React6.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6.createElement(PaddingAndAdjust, null),
508
+ !ListEmptyComponent && (ENABLE_DEVMODE ? /* @__PURE__ */ React6.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6.createElement(PaddingAndAdjust, null)),
509
509
  ListHeaderComponent && /* @__PURE__ */ React6.createElement(
510
510
  View,
511
511
  {
@@ -759,6 +759,16 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
759
759
  // src/LegendList.tsx
760
760
  var DEFAULT_DRAW_DISTANCE = 250;
761
761
  var DEFAULT_ITEM_SIZE = 100;
762
+ function createColumnWrapperStyle(contentContainerStyle) {
763
+ const { gap, columnGap, rowGap } = StyleSheet.flatten(contentContainerStyle);
764
+ if (gap || columnGap || rowGap) {
765
+ return {
766
+ gap,
767
+ columnGap,
768
+ rowGap
769
+ };
770
+ }
771
+ }
762
772
  var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
763
773
  return /* @__PURE__ */ React6.createElement(StateProvider, null, /* @__PURE__ */ React6.createElement(LegendListInner, { ...props, ref: forwardedRef }));
764
774
  });
@@ -810,7 +820,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
810
820
  callbacks.current.onStartReached = rest.onStartReached;
811
821
  callbacks.current.onEndReached = rest.onEndReached;
812
822
  const ctx = useStateContext();
813
- ctx.columnWrapperStyle = columnWrapperStyle;
823
+ ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
814
824
  const refScroller = useRef(null);
815
825
  const combinedRef = useCombinedRef(refScroller, refScrollView);
816
826
  const scrollBuffer = (drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE) || 1;
@@ -905,13 +915,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
905
915
  lastBatchingAction: Date.now(),
906
916
  onScroll: onScrollProp
907
917
  };
908
- if (maintainVisibleContentPosition) {
909
- if (initialScrollIndex) {
918
+ const dataLength = dataProp.length;
919
+ if (maintainVisibleContentPosition && dataLength > 0) {
920
+ if (initialScrollIndex && initialScrollIndex < dataLength) {
910
921
  refState.current.anchorElement = {
911
922
  coordinate: initialContentOffset,
912
923
  id: getId(initialScrollIndex)
913
924
  };
914
- } else if (dataProp.length) {
925
+ } else if (dataLength > 0) {
915
926
  refState.current.anchorElement = {
916
927
  coordinate: initialContentOffset,
917
928
  id: getId(0)
@@ -1554,6 +1565,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1554
1565
  (_, i) => getId(dataProp.length - 1 - i)
1555
1566
  );
1556
1567
  }, [dataProp, numColumnsProp]);
1568
+ const stylePaddingTop = (_d = (_c = (_a = StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
1557
1569
  const initalizeStateVars = () => {
1558
1570
  set$(ctx, "lastItemKeys", memoizedLastItemKeys);
1559
1571
  set$(ctx, "numColumns", numColumnsProp);
@@ -1583,7 +1595,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1583
1595
  set$(ctx, "extraData", extraData);
1584
1596
  }, [extraData]);
1585
1597
  refState.current.renderItem = renderItem;
1586
- const stylePaddingTop = (_d = (_c = (_a = StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
1587
1598
  useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTop]);
1588
1599
  const getRenderedItem = useCallback((key) => {
1589
1600
  var _a2, _b2;
@@ -1837,28 +1848,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1837
1848
  state.minIndexSizeChanged = index;
1838
1849
  firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
1839
1850
  }
1840
- state.scrollAdjustHandler.setDisableAdjust(true);
1841
- setTimeout(
1842
- () => {
1843
- state.scrollAdjustHandler.setDisableAdjust(false);
1844
- calculateItemsInView();
1845
- },
1846
- animated ? 150 : 50
1847
- );
1848
1851
  if (viewPosition) {
1849
1852
  firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
1850
1853
  }
1854
+ state.scrollAdjustHandler.setDisableAdjust(true);
1855
+ state.scrollingToOffset = firstIndexScrollPostion;
1851
1856
  scrollTo(firstIndexScrollPostion, animated);
1852
- const totalSizeWithScrollAdjust = peek$(ctx, "totalSizeWithScrollAdjust");
1853
- if (maintainVisibleContentPosition && totalSizeWithScrollAdjust - firstIndexScrollPostion < state.scrollLength) {
1854
- const doScrollTo = () => {
1855
- scrollTo(firstIndexScrollPostion, animated);
1856
- };
1857
- setTimeout(doScrollTo, animated ? 150 : 50);
1858
- if (animated) {
1859
- setTimeout(doScrollTo, 350);
1860
- }
1861
- }
1862
1857
  };
1863
1858
  const scrollIndexIntoView = (options) => {
1864
1859
  if (refState.current) {
@@ -1941,6 +1936,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
1941
1936
  updateItemSize,
1942
1937
  handleScroll,
1943
1938
  onMomentumScrollEnd: (event) => {
1939
+ var _a2;
1940
+ const scrollingToOffset = (_a2 = refState.current) == null ? void 0 : _a2.scrollingToOffset;
1941
+ if (scrollingToOffset !== void 0) {
1942
+ requestAnimationFrame(() => {
1943
+ scrollTo(scrollingToOffset, false);
1944
+ refState.current.scrollingToOffset = void 0;
1945
+ requestAnimationFrame(() => {
1946
+ refState.current.scrollAdjustHandler.setDisableAdjust(false);
1947
+ });
1948
+ });
1949
+ }
1944
1950
  const wasPaused = refState.current.scrollAdjustHandler.unPauseAdjust();
1945
1951
  if (wasPaused) {
1946
1952
  refState.current.scrollVelocity = 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@legendapp/list",
3
- "version": "1.0.0-beta.31",
3
+ "version": "1.0.0-beta.33",
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,