@legendapp/list 1.0.0-beta.43 → 1.0.0-beta.44

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 +1 -1
  2. package/index.d.ts +1 -1
  3. package/index.js +29 -14
  4. package/index.mjs +29 -14
  5. package/package.json +1 -1
package/index.d.mts CHANGED
@@ -505,7 +505,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
505
505
  waitForInitialLayout?: boolean;
506
506
  } & React$1.RefAttributes<LegendListRef>) => React$1.ReactNode;
507
507
 
508
- declare function useViewability(configId: string, callback: ViewabilityCallback): void;
508
+ declare function useViewability(callback: ViewabilityCallback, configId?: string): void;
509
509
  declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void;
510
510
  declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
511
511
  declare function useRecyclingState(valueOrFun: ((info: LegendListRecyclingState<unknown>) => any) | any): [any, React$1.Dispatch<any>];
package/index.d.ts CHANGED
@@ -505,7 +505,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
505
505
  waitForInitialLayout?: boolean;
506
506
  } & React$1.RefAttributes<LegendListRef>) => React$1.ReactNode;
507
507
 
508
- declare function useViewability(configId: string, callback: ViewabilityCallback): void;
508
+ declare function useViewability(callback: ViewabilityCallback, configId?: string): void;
509
509
  declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void;
510
510
  declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
511
511
  declare function useRecyclingState(valueOrFun: ((info: LegendListRecyclingState<unknown>) => any) | any): [any, React$1.Dispatch<any>];
package/index.js CHANGED
@@ -154,10 +154,10 @@ function useInit(cb) {
154
154
 
155
155
  // src/ContextContainer.ts
156
156
  var ContextContainer = React6.createContext(null);
157
- function useViewability(configId, callback) {
157
+ function useViewability(callback, configId) {
158
158
  const ctx = useStateContext();
159
159
  const { containerId } = React6.useContext(ContextContainer);
160
- const key = containerId + configId;
160
+ const key = containerId + (configId != null ? configId : "");
161
161
  useInit(() => {
162
162
  const value = ctx.mapViewabilityValues.get(key);
163
163
  if (value) {
@@ -267,13 +267,20 @@ var Container = ({
267
267
  const refLastSize = React6.useRef();
268
268
  const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
269
269
  const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
270
- let verticalPaddingStyles;
270
+ let paddingStyles;
271
271
  if (columnWrapperStyle) {
272
272
  const { columnGap, rowGap, gap } = columnWrapperStyle;
273
- verticalPaddingStyles = {
274
- paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
275
- paddingHorizontal: (columnGap || gap || 0) / 2
276
- };
273
+ if (horizontal) {
274
+ paddingStyles = {
275
+ paddingRight: !lastItemKeys.includes(itemKey) ? columnGap || gap || void 0 : void 0,
276
+ paddingVertical: (rowGap || gap || 0) / 2
277
+ };
278
+ } else {
279
+ paddingStyles = {
280
+ paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
281
+ paddingHorizontal: (columnGap || gap || 0) / 2
282
+ };
283
+ }
277
284
  }
278
285
  const style = horizontal ? {
279
286
  flexDirection: ItemSeparatorComponent ? "row" : void 0,
@@ -281,14 +288,15 @@ var Container = ({
281
288
  top: otherAxisPos,
282
289
  bottom: numColumns > 1 ? null : 0,
283
290
  height: otherAxisSize,
284
- left: position.relativeCoordinate
291
+ left: position.relativeCoordinate,
292
+ ...paddingStyles || {}
285
293
  } : {
286
294
  position: "absolute",
287
295
  left: otherAxisPos,
288
296
  right: numColumns > 1 ? null : 0,
289
297
  width: otherAxisSize,
290
298
  top: position.relativeCoordinate,
291
- ...verticalPaddingStyles || {}
299
+ ...paddingStyles || {}
292
300
  };
293
301
  const renderedItemInfo = React6.useMemo(
294
302
  () => itemKey !== void 0 ? getRenderedItem(itemKey) : null,
@@ -386,7 +394,7 @@ var Containers = typedMemo(function Containers2({
386
394
  }) {
387
395
  const ctx = useStateContext();
388
396
  const columnWrapperStyle = ctx.columnWrapperStyle;
389
- const numColumns = use$("numColumns");
397
+ use$("numColumns");
390
398
  const numContainers = use$("numContainersPooled");
391
399
  const animSize = useValue$(
392
400
  "totalSizeWithScrollAdjust",
@@ -413,11 +421,18 @@ var Containers = typedMemo(function Containers2({
413
421
  );
414
422
  }
415
423
  const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
416
- if (columnWrapperStyle && !horizontal && numColumns > 1) {
424
+ if (columnWrapperStyle) {
417
425
  const { columnGap, rowGap, gap } = columnWrapperStyle;
418
- const mx = (columnGap || gap || 0) / 2;
419
- if (mx) {
420
- style.marginHorizontal = -mx;
426
+ if (horizontal) {
427
+ const my = (rowGap || gap || 0) / 2;
428
+ if (my) {
429
+ style.marginVertical = -my;
430
+ }
431
+ } else {
432
+ const mx = (columnGap || gap || 0) / 2;
433
+ if (mx) {
434
+ style.marginHorizontal = -mx;
435
+ }
421
436
  }
422
437
  }
423
438
  return /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style }, containers);
package/index.mjs CHANGED
@@ -133,10 +133,10 @@ function useInit(cb) {
133
133
 
134
134
  // src/ContextContainer.ts
135
135
  var ContextContainer = createContext(null);
136
- function useViewability(configId, callback) {
136
+ function useViewability(callback, configId) {
137
137
  const ctx = useStateContext();
138
138
  const { containerId } = useContext(ContextContainer);
139
- const key = containerId + configId;
139
+ const key = containerId + (configId != null ? configId : "");
140
140
  useInit(() => {
141
141
  const value = ctx.mapViewabilityValues.get(key);
142
142
  if (value) {
@@ -246,13 +246,20 @@ var Container = ({
246
246
  const refLastSize = useRef();
247
247
  const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
248
248
  const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
249
- let verticalPaddingStyles;
249
+ let paddingStyles;
250
250
  if (columnWrapperStyle) {
251
251
  const { columnGap, rowGap, gap } = columnWrapperStyle;
252
- verticalPaddingStyles = {
253
- paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
254
- paddingHorizontal: (columnGap || gap || 0) / 2
255
- };
252
+ if (horizontal) {
253
+ paddingStyles = {
254
+ paddingRight: !lastItemKeys.includes(itemKey) ? columnGap || gap || void 0 : void 0,
255
+ paddingVertical: (rowGap || gap || 0) / 2
256
+ };
257
+ } else {
258
+ paddingStyles = {
259
+ paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
260
+ paddingHorizontal: (columnGap || gap || 0) / 2
261
+ };
262
+ }
256
263
  }
257
264
  const style = horizontal ? {
258
265
  flexDirection: ItemSeparatorComponent ? "row" : void 0,
@@ -260,14 +267,15 @@ var Container = ({
260
267
  top: otherAxisPos,
261
268
  bottom: numColumns > 1 ? null : 0,
262
269
  height: otherAxisSize,
263
- left: position.relativeCoordinate
270
+ left: position.relativeCoordinate,
271
+ ...paddingStyles || {}
264
272
  } : {
265
273
  position: "absolute",
266
274
  left: otherAxisPos,
267
275
  right: numColumns > 1 ? null : 0,
268
276
  width: otherAxisSize,
269
277
  top: position.relativeCoordinate,
270
- ...verticalPaddingStyles || {}
278
+ ...paddingStyles || {}
271
279
  };
272
280
  const renderedItemInfo = useMemo(
273
281
  () => itemKey !== void 0 ? getRenderedItem(itemKey) : null,
@@ -365,7 +373,7 @@ var Containers = typedMemo(function Containers2({
365
373
  }) {
366
374
  const ctx = useStateContext();
367
375
  const columnWrapperStyle = ctx.columnWrapperStyle;
368
- const numColumns = use$("numColumns");
376
+ use$("numColumns");
369
377
  const numContainers = use$("numContainersPooled");
370
378
  const animSize = useValue$(
371
379
  "totalSizeWithScrollAdjust",
@@ -392,11 +400,18 @@ var Containers = typedMemo(function Containers2({
392
400
  );
393
401
  }
394
402
  const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
395
- if (columnWrapperStyle && !horizontal && numColumns > 1) {
403
+ if (columnWrapperStyle) {
396
404
  const { columnGap, rowGap, gap } = columnWrapperStyle;
397
- const mx = (columnGap || gap || 0) / 2;
398
- if (mx) {
399
- style.marginHorizontal = -mx;
405
+ if (horizontal) {
406
+ const my = (rowGap || gap || 0) / 2;
407
+ if (my) {
408
+ style.marginVertical = -my;
409
+ }
410
+ } else {
411
+ const mx = (columnGap || gap || 0) / 2;
412
+ if (mx) {
413
+ style.marginHorizontal = -mx;
414
+ }
400
415
  }
401
416
  }
402
417
  return /* @__PURE__ */ React6.createElement(Animated.View, { style }, containers);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@legendapp/list",
3
- "version": "1.0.0-beta.43",
3
+ "version": "1.0.0-beta.44",
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,