@legendapp/list 1.0.0-beta.14 → 1.0.0-beta.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.
Files changed (7) hide show
  1. package/animated.d.mts +1 -0
  2. package/animated.d.ts +1 -0
  3. package/index.d.mts +8 -1
  4. package/index.d.ts +8 -1
  5. package/index.js +20 -4
  6. package/index.mjs +21 -5
  7. package/package.json +1 -1
package/animated.d.mts CHANGED
@@ -16,6 +16,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
16
16
  alignItemsAtEnd?: boolean;
17
17
  maintainVisibleContentPosition?: boolean;
18
18
  numColumns?: number;
19
+ columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
19
20
  refScrollView?: React.Ref<react_native.ScrollView>;
20
21
  waitForInitialLayout?: boolean;
21
22
  estimatedItemSize?: number;
package/animated.d.ts CHANGED
@@ -16,6 +16,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
16
16
  alignItemsAtEnd?: boolean;
17
17
  maintainVisibleContentPosition?: boolean;
18
18
  numColumns?: number;
19
+ columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
19
20
  refScrollView?: React.Ref<react_native.ScrollView>;
20
21
  waitForInitialLayout?: boolean;
21
22
  estimatedItemSize?: number;
package/index.d.mts CHANGED
@@ -31,6 +31,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
31
31
  alignItemsAtEnd?: boolean;
32
32
  maintainVisibleContentPosition?: boolean;
33
33
  numColumns?: number;
34
+ columnWrapperStyle?: ColumnWrapperStyle;
34
35
  refScrollView?: React.Ref<ScrollView>;
35
36
  waitForInitialLayout?: boolean;
36
37
  estimatedItemSize?: number;
@@ -66,6 +67,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
66
67
  renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
67
68
  extraData?: any;
68
69
  };
70
+ interface ColumnWrapperStyle {
71
+ rowGap?: number;
72
+ gap?: number;
73
+ columnGap?: number;
74
+ }
69
75
  type AnchoredPosition = {
70
76
  type: "top" | "bottom";
71
77
  relativeCoordinate: number;
@@ -251,6 +257,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
251
257
  alignItemsAtEnd?: boolean;
252
258
  maintainVisibleContentPosition?: boolean;
253
259
  numColumns?: number;
260
+ columnWrapperStyle?: ColumnWrapperStyle;
254
261
  refScrollView?: React$1.Ref<ScrollView>;
255
262
  waitForInitialLayout?: boolean;
256
263
  estimatedItemSize?: number;
@@ -288,4 +295,4 @@ declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void
288
295
  declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
289
296
  declare function useRecyclingState(valueOrFun: ((info: LegendListRecyclingState<unknown>) => any) | any): [any, React$1.Dispatch<any>];
290
297
 
291
- export { type AnchoredPosition, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
298
+ export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
package/index.d.ts CHANGED
@@ -31,6 +31,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
31
31
  alignItemsAtEnd?: boolean;
32
32
  maintainVisibleContentPosition?: boolean;
33
33
  numColumns?: number;
34
+ columnWrapperStyle?: ColumnWrapperStyle;
34
35
  refScrollView?: React.Ref<ScrollView>;
35
36
  waitForInitialLayout?: boolean;
36
37
  estimatedItemSize?: number;
@@ -66,6 +67,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
66
67
  renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
67
68
  extraData?: any;
68
69
  };
70
+ interface ColumnWrapperStyle {
71
+ rowGap?: number;
72
+ gap?: number;
73
+ columnGap?: number;
74
+ }
69
75
  type AnchoredPosition = {
70
76
  type: "top" | "bottom";
71
77
  relativeCoordinate: number;
@@ -251,6 +257,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
251
257
  alignItemsAtEnd?: boolean;
252
258
  maintainVisibleContentPosition?: boolean;
253
259
  numColumns?: number;
260
+ columnWrapperStyle?: ColumnWrapperStyle;
254
261
  refScrollView?: React$1.Ref<ScrollView>;
255
262
  waitForInitialLayout?: boolean;
256
263
  estimatedItemSize?: number;
@@ -288,4 +295,4 @@ declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void
288
295
  declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
289
296
  declare function useRecyclingState(valueOrFun: ((info: LegendListRecyclingState<unknown>) => any) | any): [any, React$1.Dispatch<any>];
290
297
 
291
- export { type AnchoredPosition, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
298
+ export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
package/index.js CHANGED
@@ -32,7 +32,8 @@ function StateProvider({ children }) {
32
32
  mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
33
33
  mapViewabilityValues: /* @__PURE__ */ new Map(),
34
34
  mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
35
- mapViewabilityAmountValues: /* @__PURE__ */ new Map()
35
+ mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
36
+ columnWrapperStyle: void 0
36
37
  }));
37
38
  return /* @__PURE__ */ React6__namespace.createElement(ContextState.Provider, { value }, children);
38
39
  }
@@ -217,12 +218,24 @@ var Container = ({
217
218
  updateItemSize,
218
219
  ItemSeparatorComponent
219
220
  }) => {
221
+ const ctx = useStateContext();
222
+ const columnWrapperStyle = ctx.columnWrapperStyle;
220
223
  const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
221
224
  const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
222
225
  const column = use$(`containerColumn${id}`) || 0;
223
226
  const numColumns = use$("numColumns");
224
227
  const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
225
228
  const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
229
+ let verticalPaddingStyles;
230
+ if (columnWrapperStyle && !horizontal && numColumns > 1) {
231
+ const { columnGap, rowGap, gap } = columnWrapperStyle;
232
+ verticalPaddingStyles = {
233
+ paddingVertical: rowGap || gap || void 0,
234
+ // Apply horizontal padding based on column position (first, middle, or last)
235
+ paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
236
+ paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
237
+ };
238
+ }
226
239
  const style = horizontal ? {
227
240
  flexDirection: ItemSeparatorComponent ? "row" : void 0,
228
241
  position: "absolute",
@@ -235,7 +248,8 @@ var Container = ({
235
248
  left: otherAxisPos,
236
249
  right: numColumns > 1 ? null : 0,
237
250
  width: otherAxisSize,
238
- top: position.relativeCoordinate
251
+ top: position.relativeCoordinate,
252
+ ...verticalPaddingStyles || {}
239
253
  };
240
254
  const lastItemKey = use$("lastItemKey");
241
255
  const itemKey = use$(`containerItemKey${id}`);
@@ -286,9 +300,9 @@ var Container = ({
286
300
  }
287
301
  return /* @__PURE__ */ React6__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
288
302
  };
289
- var useAnimatedValue = reactNative.useAnimatedValue || ((initialValue) => {
303
+ var useAnimatedValue = (initialValue) => {
290
304
  return React6.useRef(new reactNative.Animated.Value(initialValue)).current;
291
- });
305
+ };
292
306
 
293
307
  // src/useValue$.ts
294
308
  function useValue$(key, getValue, useMicrotask) {
@@ -718,6 +732,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
718
732
  onScroll: onScrollProp,
719
733
  onMomentumScrollEnd,
720
734
  numColumns: numColumnsProp = 1,
735
+ columnWrapperStyle,
721
736
  keyExtractor: keyExtractorProp,
722
737
  renderItem,
723
738
  estimatedItemSize,
@@ -739,6 +754,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
739
754
  callbacks.current.onStartReached = rest.onStartReached;
740
755
  callbacks.current.onEndReached = rest.onEndReached;
741
756
  const ctx = useStateContext();
757
+ ctx.columnWrapperStyle = columnWrapperStyle;
742
758
  const refScroller = React6.useRef(null);
743
759
  const combinedRef = useCombinedRef(refScroller, refScrollView);
744
760
  const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
package/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React6 from 'react';
2
2
  import React6__default, { createContext, memo, useReducer, useEffect, useMemo, useRef, useCallback, useImperativeHandle, useSyncExternalStore, useContext, useState, forwardRef, useLayoutEffect } from 'react';
3
- import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
3
+ import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet } from 'react-native';
4
4
 
5
5
  // src/LegendList.tsx
6
6
  var ContextState = React6.createContext(null);
@@ -11,7 +11,8 @@ function StateProvider({ children }) {
11
11
  mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
12
12
  mapViewabilityValues: /* @__PURE__ */ new Map(),
13
13
  mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
14
- mapViewabilityAmountValues: /* @__PURE__ */ new Map()
14
+ mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
15
+ columnWrapperStyle: void 0
15
16
  }));
16
17
  return /* @__PURE__ */ React6.createElement(ContextState.Provider, { value }, children);
17
18
  }
@@ -196,12 +197,24 @@ var Container = ({
196
197
  updateItemSize,
197
198
  ItemSeparatorComponent
198
199
  }) => {
200
+ const ctx = useStateContext();
201
+ const columnWrapperStyle = ctx.columnWrapperStyle;
199
202
  const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
200
203
  const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
201
204
  const column = use$(`containerColumn${id}`) || 0;
202
205
  const numColumns = use$("numColumns");
203
206
  const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
204
207
  const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
208
+ let verticalPaddingStyles;
209
+ if (columnWrapperStyle && !horizontal && numColumns > 1) {
210
+ const { columnGap, rowGap, gap } = columnWrapperStyle;
211
+ verticalPaddingStyles = {
212
+ paddingVertical: rowGap || gap || void 0,
213
+ // Apply horizontal padding based on column position (first, middle, or last)
214
+ paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
215
+ paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
216
+ };
217
+ }
205
218
  const style = horizontal ? {
206
219
  flexDirection: ItemSeparatorComponent ? "row" : void 0,
207
220
  position: "absolute",
@@ -214,7 +227,8 @@ var Container = ({
214
227
  left: otherAxisPos,
215
228
  right: numColumns > 1 ? null : 0,
216
229
  width: otherAxisSize,
217
- top: position.relativeCoordinate
230
+ top: position.relativeCoordinate,
231
+ ...verticalPaddingStyles || {}
218
232
  };
219
233
  const lastItemKey = use$("lastItemKey");
220
234
  const itemKey = use$(`containerItemKey${id}`);
@@ -265,9 +279,9 @@ var Container = ({
265
279
  }
266
280
  return /* @__PURE__ */ React6__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
267
281
  };
268
- var useAnimatedValue = useAnimatedValue$1 || ((initialValue) => {
282
+ var useAnimatedValue = (initialValue) => {
269
283
  return useRef(new Animated.Value(initialValue)).current;
270
- });
284
+ };
271
285
 
272
286
  // src/useValue$.ts
273
287
  function useValue$(key, getValue, useMicrotask) {
@@ -697,6 +711,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
697
711
  onScroll: onScrollProp,
698
712
  onMomentumScrollEnd,
699
713
  numColumns: numColumnsProp = 1,
714
+ columnWrapperStyle,
700
715
  keyExtractor: keyExtractorProp,
701
716
  renderItem,
702
717
  estimatedItemSize,
@@ -718,6 +733,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
718
733
  callbacks.current.onStartReached = rest.onStartReached;
719
734
  callbacks.current.onEndReached = rest.onEndReached;
720
735
  const ctx = useStateContext();
736
+ ctx.columnWrapperStyle = columnWrapperStyle;
721
737
  const refScroller = useRef(null);
722
738
  const combinedRef = useCombinedRef(refScroller, refScrollView);
723
739
  const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@legendapp/list",
3
- "version": "1.0.0-beta.14",
3
+ "version": "1.0.0-beta.15",
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,