@legendapp/list 1.0.0-beta.3 → 1.0.0-beta.4

package/index.d.mts

@@ -16,7 +16,7 @@ declare class ScrollAdjustHandler {
 }
 
 type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView>> = Omit<TScrollView, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
-    data: ArrayLike<any> & ItemT[];
+    data: ReadonlyArray<ItemT>;
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
@@ -45,7 +45,6 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
-    ListEmptyComponentStyle?: StyleProp<ViewStyle> | undefined;
     ItemSeparatorComponent?: React.ComponentType<any>;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;
@@ -87,7 +86,7 @@ interface InternalState {
     isEndReached: boolean;
     isAtBottom: boolean;
     isAtTop: boolean;
-    data: any[];
+    data: readonly any[];
     idsInFirstRender: Set<string>;
     hasScrolled: boolean;
     scrollLength: number;

package/index.d.ts

@@ -16,7 +16,7 @@ declare class ScrollAdjustHandler {
 }
 
 type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView>> = Omit<TScrollView, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
-    data: ArrayLike<any> & ItemT[];
+    data: ReadonlyArray<ItemT>;
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
@@ -45,7 +45,6 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
-    ListEmptyComponentStyle?: StyleProp<ViewStyle> | undefined;
     ItemSeparatorComponent?: React.ComponentType<any>;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;
@@ -87,7 +86,7 @@ interface InternalState {
     isEndReached: boolean;
     isAtBottom: boolean;
     isAtTop: boolean;
-    data: any[];
+    data: readonly any[];
     idsInFirstRender: Set<string>;
     hasScrolled: boolean;
     scrollLength: number;

package/index.js

@@ -176,6 +176,7 @@ var ANCHORED_POSITION_OUT_OF_VIEW = {
 };
 
 // src/Container.tsx
+var isNewArchitecture = global.nativeFabricUIManager != null;
 var Container = ({
   id,
   recycleItems,
@@ -184,7 +185,7 @@ var Container = ({
   updateItemSize,
   ItemSeparatorComponent
 }) => {
-  const ctx = useStateContext();
+  useStateContext();
   const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
@@ -209,44 +210,36 @@ var Container = ({
   const itemKey = use$(`containerItemKey${id}`);
   const data = use$(`containerItemData${id}`);
   const extraData = use$("extraData");
-  const refLastSize = React5.useRef();
   const renderedItemInfo = React5.useMemo(
     () => itemKey !== void 0 && getRenderedItem(itemKey),
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
-  React5.useEffect(() => {
-    if (itemKey) {
-      const timeout = setTimeout(() => {
-        if (refLastSize.current) {
-          updateItemSize(id, itemKey, refLastSize.current);
-        }
-      }, 16);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [itemKey]);
   const onLayout = (event) => {
-    const key = peek$(ctx, `containerItemKey${id}`);
-    if (key !== void 0) {
+    if (itemKey !== void 0) {
       const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
-      updateItemSize(id, key, size);
+      if (size === 0) {
+        console.log("[WARN] Container 0 height reported, possible bug in LegendList", id, itemKey);
+        return;
+      }
+      updateItemSize(id, itemKey, size);
     }
   };
   const ref = React5.useRef(null);
-  React5.useLayoutEffect(() => {
-    var _a, _b;
-    if (itemKey) {
-      const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
-      if (measured) {
-        const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
-        if (size) {
-          updateItemSize(id, itemKey, size);
+  if (isNewArchitecture) {
+    React5.useLayoutEffect(() => {
+      var _a, _b;
+      if (itemKey) {
+        const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
+        if (measured) {
+          const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
+          if (size) {
+            updateItemSize(id, itemKey, size);
+          }
         }
       }
-    }
-  }, [itemKey]);
+    }, [itemKey]);
+  }
   const contextValue = React5.useMemo(
     () => ({ containerId: id, itemKey, index, value: data }),
     [id, itemKey, index, data]
@@ -254,7 +247,7 @@ var Container = ({
   const contentFragment = /* @__PURE__ */ React5__namespace.default.createElement(React5__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React5__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
-    return /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style, ref }, /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style: anchorStyle, onLayout }, contentFragment));
+    return /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style }, /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment));
   }
   return /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
@@ -330,7 +323,6 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
   ListFooterComponent,
   ListFooterComponentStyle,
   ListEmptyComponent,
-  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   refScrollView,
@@ -379,7 +371,7 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
-    ListEmptyComponent && /* @__PURE__ */ React5__namespace.createElement(reactNative.Animated.View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
+    ListEmptyComponent && getComponent(ListEmptyComponent),
     /* @__PURE__ */ React5__namespace.createElement(
       Containers,
       {
@@ -736,7 +728,6 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         isAboveAnchor = true;
       }
     }
-    state.totalSize;
     if (key === null) {
       state.totalSize = add;
       state.totalSizeBelowAnchor = totalSizeBelowAnchor;
@@ -837,7 +828,17 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
-    const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
+    const scroll = scrollState - previousScrollAdjust - topPad;
+    let scrollBufferTop = scrollBuffer;
+    let scrollBufferBottom = scrollBuffer;
+    if (scrollExtra > 8) {
+      scrollBufferTop = 0;
+      scrollBufferBottom = scrollBuffer + scrollExtra;
+    }
+    if (scrollExtra < -8) {
+      scrollBufferTop = scrollBuffer - scrollExtra;
+      scrollBufferBottom = 0;
+    }
     if (state.scrollForNextCalculateItemsInView) {
       const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
       if (scroll > top2 && scroll < bottom) {
@@ -909,7 +910,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       if (startNoBuffer === null && top + size > scroll) {
         startNoBuffer = i;
       }
-      if (startBuffered === null && top + size > scroll - scrollBuffer) {
+      if (startBuffered === null && top + size > scroll - scrollBufferTop) {
         startBuffered = i;
         startBufferedId = id;
       }
@@ -917,7 +918,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         if (top <= scrollBottom) {
           endNoBuffer = i;
         }
-        if (top <= scrollBottom + scrollBuffer) {
+        if (top <= scrollBottom + scrollBufferBottom) {
           endBuffered = i;
         } else {
           break;
@@ -1244,7 +1245,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   refState.current.renderItem = renderItem;
-  const lastItemKey = getId(data[data.length - 1]);
+  const lastItemKey = data.length > 0 ? getId(data.length - 1) : void 0;
   const stylePaddingTop = (_e = (_d = (_b = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _b.paddingTop) != null ? _d : (_c = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _c.paddingTop) != null ? _e : 0;
   const initalizeStateVars = () => {
     set$(ctx, "lastItemKey", lastItemKey);

package/index.mjs

@@ -155,6 +155,7 @@ var ANCHORED_POSITION_OUT_OF_VIEW = {
 };
 
 // src/Container.tsx
+var isNewArchitecture = global.nativeFabricUIManager != null;
 var Container = ({
   id,
   recycleItems,
@@ -163,7 +164,7 @@ var Container = ({
   updateItemSize,
   ItemSeparatorComponent
 }) => {
-  const ctx = useStateContext();
+  useStateContext();
   const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
@@ -188,44 +189,36 @@ var Container = ({
   const itemKey = use$(`containerItemKey${id}`);
   const data = use$(`containerItemData${id}`);
   const extraData = use$("extraData");
-  const refLastSize = useRef();
   const renderedItemInfo = useMemo(
     () => itemKey !== void 0 && getRenderedItem(itemKey),
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
-  useEffect(() => {
-    if (itemKey) {
-      const timeout = setTimeout(() => {
-        if (refLastSize.current) {
-          updateItemSize(id, itemKey, refLastSize.current);
-        }
-      }, 16);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [itemKey]);
   const onLayout = (event) => {
-    const key = peek$(ctx, `containerItemKey${id}`);
-    if (key !== void 0) {
+    if (itemKey !== void 0) {
       const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
-      updateItemSize(id, key, size);
+      if (size === 0) {
+        console.log("[WARN] Container 0 height reported, possible bug in LegendList", id, itemKey);
+        return;
+      }
+      updateItemSize(id, itemKey, size);
     }
   };
   const ref = useRef(null);
-  useLayoutEffect(() => {
-    var _a, _b;
-    if (itemKey) {
-      const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
-      if (measured) {
-        const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
-        if (size) {
-          updateItemSize(id, itemKey, size);
+  if (isNewArchitecture) {
+    useLayoutEffect(() => {
+      var _a, _b;
+      if (itemKey) {
+        const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
+        if (measured) {
+          const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
+          if (size) {
+            updateItemSize(id, itemKey, size);
+          }
         }
       }
-    }
-  }, [itemKey]);
+    }, [itemKey]);
+  }
   const contextValue = useMemo(
     () => ({ containerId: id, itemKey, index, value: data }),
     [id, itemKey, index, data]
@@ -233,7 +226,7 @@ var Container = ({
   const contentFragment = /* @__PURE__ */ React5__default.createElement(React5__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React5__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
-    return /* @__PURE__ */ React5__default.createElement(LeanView, { style, ref }, /* @__PURE__ */ React5__default.createElement(LeanView, { style: anchorStyle, onLayout }, contentFragment));
+    return /* @__PURE__ */ React5__default.createElement(LeanView, { style }, /* @__PURE__ */ React5__default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment));
   }
   return /* @__PURE__ */ React5__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
@@ -309,7 +302,6 @@ var ListComponent = React5.memo(function ListComponent2({
   ListFooterComponent,
   ListFooterComponentStyle,
   ListEmptyComponent,
-  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   refScrollView,
@@ -358,7 +350,7 @@ var ListComponent = React5.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
-    ListEmptyComponent && /* @__PURE__ */ React5.createElement(Animated.View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
+    ListEmptyComponent && getComponent(ListEmptyComponent),
     /* @__PURE__ */ React5.createElement(
       Containers,
       {
@@ -715,7 +707,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         isAboveAnchor = true;
       }
     }
-    state.totalSize;
     if (key === null) {
       state.totalSize = add;
       state.totalSizeBelowAnchor = totalSizeBelowAnchor;
@@ -816,7 +807,17 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
-    const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
+    const scroll = scrollState - previousScrollAdjust - topPad;
+    let scrollBufferTop = scrollBuffer;
+    let scrollBufferBottom = scrollBuffer;
+    if (scrollExtra > 8) {
+      scrollBufferTop = 0;
+      scrollBufferBottom = scrollBuffer + scrollExtra;
+    }
+    if (scrollExtra < -8) {
+      scrollBufferTop = scrollBuffer - scrollExtra;
+      scrollBufferBottom = 0;
+    }
     if (state.scrollForNextCalculateItemsInView) {
       const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
       if (scroll > top2 && scroll < bottom) {
@@ -888,7 +889,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       if (startNoBuffer === null && top + size > scroll) {
         startNoBuffer = i;
       }
-      if (startBuffered === null && top + size > scroll - scrollBuffer) {
+      if (startBuffered === null && top + size > scroll - scrollBufferTop) {
         startBuffered = i;
         startBufferedId = id;
       }
@@ -896,7 +897,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         if (top <= scrollBottom) {
           endNoBuffer = i;
         }
-        if (top <= scrollBottom + scrollBuffer) {
+        if (top <= scrollBottom + scrollBufferBottom) {
           endBuffered = i;
         } else {
           break;
@@ -1223,7 +1224,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   refState.current.renderItem = renderItem;
-  const lastItemKey = getId(data[data.length - 1]);
+  const lastItemKey = data.length > 0 ? getId(data.length - 1) : void 0;
   const stylePaddingTop = (_e = (_d = (_b = StyleSheet.flatten(style)) == null ? void 0 : _b.paddingTop) != null ? _d : (_c = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _c.paddingTop) != null ? _e : 0;
   const initalizeStateVars = () => {
     set$(ctx, "lastItemKey", lastItemKey);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,