@legendapp/list 2.0.0-next.2 → 2.0.0-next.20

package/src/checkAtBottom.ts

@@ -1,36 +0,0 @@
-import { checkThreshold } from "./checkThreshold";
-import { getContentSize } from "./state";
-import type { StateContext } from "./state";
-import type { InternalState } from "./types";
-
-export function checkAtBottom(ctx: StateContext, state: InternalState) {
-    if (!state) {
-        return;
-    }
-    const {
-        queuedInitialLayout,
-        scrollLength,
-        scroll,
-        maintainingScrollAtEnd,
-        props: { maintainScrollAtEndThreshold, onEndReachedThreshold },
-    } = state;
-    const contentSize = getContentSize(ctx);
-    if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
-        // Check if at end
-        const distanceFromEnd = contentSize - scroll - scrollLength;
-        const isContentLess = contentSize < scrollLength;
-        state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold!;
-
-        state.isEndReached = checkThreshold(
-            distanceFromEnd,
-            isContentLess,
-            onEndReachedThreshold! * scrollLength,
-            state.isEndReached,
-            state.endReachedBlockedByTimer,
-            (distance) => state.props.onEndReached?.({ distanceFromEnd: distance }),
-            (block) => {
-                state.endReachedBlockedByTimer = block;
-            },
-        );
-    }
-}

package/src/checkAtTop.ts

@@ -1,27 +0,0 @@
-import { checkThreshold } from "./checkThreshold";
-import type { InternalState } from "./types";
-
-export function checkAtTop(state: InternalState) {
-    if (!state) {
-        return;
-    }
-    const {
-        scrollLength,
-        scroll,
-        props: { onStartReachedThreshold },
-    } = state;
-    const distanceFromTop = scroll;
-    state.isAtStart = distanceFromTop <= 0;
-
-    state.isStartReached = checkThreshold(
-        distanceFromTop,
-        false,
-        onStartReachedThreshold! * scrollLength,
-        state.isStartReached,
-        state.startReachedBlockedByTimer,
-        (distance) => state.props.onStartReached?.({ distanceFromStart: distance }),
-        (block) => {
-            state.startReachedBlockedByTimer = block;
-        },
-    );
-}

package/src/checkThreshold.ts

@@ -1,30 +0,0 @@
-export const checkThreshold = (
-    distance: number,
-    atThreshold: boolean,
-    threshold: number,
-    isReached: boolean,
-    isBlockedByTimer: boolean,
-    onReached?: (distance: number) => void,
-    blockTimer?: (block: boolean) => void,
-) => {
-    const distanceAbs = Math.abs(distance);
-    const isAtThreshold = atThreshold || distanceAbs < threshold;
-
-    if (!isReached && !isBlockedByTimer) {
-        if (isAtThreshold) {
-            onReached?.(distance);
-            blockTimer?.(true);
-            setTimeout(() => {
-                blockTimer?.(false);
-            }, 700);
-            return true;
-        }
-    } else {
-        // reset flag when user scrolls back out of the threshold
-        // add hysteresis to avoid multiple events triggered
-        if (distance >= 1.3 * threshold) {
-            return false;
-        }
-    }
-    return isReached;
-};

package/src/constants.ts

@@ -1,11 +0,0 @@
-export const POSITION_OUT_OF_VIEW = -10000000;
-
-// use colorful overlays to visualize the padding and scroll adjustments
-// green means paddingTop (used for aligning elements at the bottom)
-// lightblue means scrollAdjust (used for maintainVisibleContentPosition) positive values
-// blue arrow at the rights means negative scrollAdjust (used for maintainVisibleContentPosition) negative values
-export const ENABLE_DEVMODE = __DEV__ && false;
-export const ENABLE_DEBUG_VIEW = __DEV__ && false;
-
-// @ts-expect-error nativeFabricUIManager is not defined in the global object types
-export const IsNewArchitecture = global.nativeFabricUIManager != null;

package/src/createColumnWrapperStyle.ts

@@ -1,16 +0,0 @@
-import type { ViewStyle } from "react-native";
-import type { ColumnWrapperStyle } from "./types";
-
-export function createColumnWrapperStyle(contentContainerStyle: ViewStyle): ColumnWrapperStyle | undefined {
-    const { gap, columnGap, rowGap } = contentContainerStyle;
-    if (gap || columnGap || rowGap) {
-        contentContainerStyle.gap = undefined;
-        contentContainerStyle.columnGap = undefined;
-        contentContainerStyle.rowGap = undefined;
-        return {
-            gap: gap as number,
-            columnGap: columnGap as number,
-            rowGap: rowGap as number,
-        };
-    }
-}

package/src/doInitialAllocateContainers.ts

@@ -1,40 +0,0 @@
-import { calculateItemsInView } from "./calculateItemsInView";
-import { IsNewArchitecture, POSITION_OUT_OF_VIEW } from "./constants";
-import { type StateContext, peek$, set$ } from "./state";
-import type { InternalState } from "./types";
-
-export function doInitialAllocateContainers(ctx: StateContext, state: InternalState): boolean | undefined {
-    // Allocate containers
-    const { scrollLength } = state;
-    const data = state.props.data;
-    if (scrollLength > 0 && data.length > 0 && !peek$(ctx, "numContainers")) {
-        const averageItemSize = state.props.getEstimatedItemSize
-            ? state.props.getEstimatedItemSize(0, data[0])
-            : state.props.estimatedItemSize;
-        const Extra = 1.5; // TODO make it a prop, experiment with whether it's faster with more containers
-        const numContainers = Math.ceil(
-            ((scrollLength + state.props.scrollBuffer * 2) / averageItemSize!) * state.props.numColumns * Extra,
-        );
-
-        for (let i = 0; i < numContainers; i++) {
-            set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
-            set$(ctx, `containerColumn${i}`, -1);
-        }
-
-        set$(ctx, "numContainers", numContainers);
-        set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
-
-        if (!IsNewArchitecture) {
-            if (state.props.initialScroll) {
-                requestAnimationFrame(() => {
-                    // immediate render causes issues with initial index position
-                    calculateItemsInView(ctx, state);
-                });
-            } else {
-                calculateItemsInView(ctx, state);
-            }
-        }
-
-        return true;
-    }
-}

package/src/doMaintainScrollAtEnd.ts

@@ -1,34 +0,0 @@
-import { peek$ } from "./state";
-import type { StateContext } from "./state";
-import type { InternalState } from "./types";
-
-export function doMaintainScrollAtEnd(ctx: StateContext, state: InternalState, animated: boolean) {
-    const {
-        refScroller,
-        props: { maintainScrollAtEnd },
-    } = state;
-    // Run this only if scroll is at the bottom and after initial layout
-    if (state?.isAtEnd && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
-        // Set scroll to the bottom of the list so that checkAtTop/checkAtBottom is correct
-        const paddingTop = peek$(ctx, "alignItemsPaddingTop");
-        if (paddingTop > 0) {
-            // if paddingTop exists, list is shorter then a screen, so scroll should be 0 anyways
-            state.scroll = 0;
-        }
-
-        requestAnimationFrame(() => {
-            state.maintainingScrollAtEnd = true;
-            refScroller.current?.scrollToEnd({
-                animated,
-            });
-            setTimeout(
-                () => {
-                    state.maintainingScrollAtEnd = false;
-                },
-                animated ? 500 : 0,
-            );
-        });
-
-        return true;
-    }
-}

package/src/findAvailableContainers.ts

@@ -1,98 +0,0 @@
-import { comparatorDefault } from "./helpers";
-import { type StateContext, peek$ } from "./state";
-import type { InternalState } from "./types";
-
-export function findAvailableContainers(
-    ctx: StateContext,
-    state: InternalState,
-    numNeeded: number,
-    startBuffered: number,
-    endBuffered: number,
-    pendingRemoval: number[],
-): number[] {
-    const numContainers = peek$(ctx, "numContainers") as number;
-
-    const result: number[] = [];
-    const availableContainers: Array<{ index: number; distance: number }> = [];
-
-    // First pass: collect unallocated containers (most efficient to use)
-    for (let u = 0; u < numContainers; u++) {
-        const key = peek$(ctx, `containerItemKey${u}`);
-        let isOk = key === undefined;
-        if (!isOk) {
-            const index = pendingRemoval.indexOf(u);
-            if (index !== -1) {
-                pendingRemoval.splice(index, 1);
-                isOk = true;
-            }
-        }
-        // Hasn't been allocated yet or is pending removal, so use it
-        if (isOk) {
-            result.push(u);
-            if (result.length >= numNeeded) {
-                return result; // Early exit if we have enough unallocated containers
-            }
-        }
-    }
-
-    // Second pass: collect containers that are out of view
-    for (let u = 0; u < numContainers; u++) {
-        const key = peek$(ctx, `containerItemKey${u}`);
-        if (key === undefined) continue; // Skip already collected containers
-
-        const index = state.indexByKey.get(key)!;
-        if (index < startBuffered) {
-            availableContainers.push({ index: u, distance: startBuffered - index });
-        } else if (index > endBuffered) {
-            availableContainers.push({ index: u, distance: index - endBuffered });
-        }
-    }
-
-    // If we need more containers than we have available so far
-    const remaining = numNeeded - result.length;
-    if (remaining > 0) {
-        if (availableContainers.length > 0) {
-            // Only sort if we need to
-            if (availableContainers.length > remaining) {
-                // Sort by distance (furthest first)
-                availableContainers.sort(comparatorByDistance);
-                // Take just what we need
-                availableContainers.length = remaining;
-            }
-
-            // Add to result, keeping track of original indices
-            for (const container of availableContainers) {
-                result.push(container.index);
-            }
-        }
-
-        // If we still need more, create new containers
-        const stillNeeded = numNeeded - result.length;
-        if (stillNeeded > 0) {
-            for (let i = 0; i < stillNeeded; i++) {
-                result.push(numContainers + i);
-            }
-
-            if (__DEV__ && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
-                console.warn(
-                    "[legend-list] No unused container available, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio.",
-                    {
-                        debugInfo: {
-                            numContainers,
-                            numNeeded,
-                            stillNeeded,
-                            numContainersPooled: peek$(ctx, "numContainersPooled"),
-                        },
-                    },
-                );
-            }
-        }
-    }
-
-    // Sort by index for consistent ordering
-    return result.sort(comparatorDefault);
-}
-
-function comparatorByDistance(a: { distance: number }, b: { distance: number }) {
-    return b.distance - a.distance;
-}

package/src/finishScrollTo.ts

@@ -1,8 +0,0 @@
-import type { InternalState } from "./types";
-
-export const finishScrollTo = (state: InternalState | null | undefined) => {
-    if (state) {
-        state.scrollingTo = undefined;
-        state.scrollHistory.length = 0;
-    }
-};

package/src/getId.ts

@@ -1,21 +0,0 @@
-import type { InternalState } from "./types";
-
-/**
- * Generates and caches a unique ID for a list item at the given index.
- *
- * @param state - The internal state containing data, keyExtractor, and ID cache
- * @param index - The index of the item to get the ID for
- * @returns The unique ID for the item, or empty string if data is not available
- */
-export function getId(state: InternalState, index: number): string {
-    const { data, keyExtractor } = state.props;
-    if (!data) {
-        return "";
-    }
-
-    // Generate and cache the ID
-    const ret = index < data.length ? (keyExtractor ? keyExtractor(data[index], index) : index) : null;
-    const id = ret as string;
-    state.idCache.set(index, id);
-    return id;
-}

package/src/getItemSize.ts

@@ -1,52 +0,0 @@
-import { IsNewArchitecture } from "./constants";
-import type { InternalState } from "./types";
-
-export function getItemSize(
-    state: InternalState,
-    key: string,
-    index: number,
-    data: any,
-    useAverageSize?: number | undefined,
-) {
-    const {
-        sizesKnown,
-        sizes,
-        scrollingTo,
-        props: { estimatedItemSize, getEstimatedItemSize },
-    } = state;
-    const sizeKnown = sizesKnown.get(key)!;
-    if (sizeKnown !== undefined) {
-        return sizeKnown;
-    }
-
-    let size: number | undefined;
-
-    // Using average size is not supported on old architecture because it can't layout immediately
-    if (
-        IsNewArchitecture &&
-        useAverageSize !== undefined &&
-        sizeKnown === undefined &&
-        !getEstimatedItemSize &&
-        !scrollingTo
-    ) {
-        // TODO: Hook this up to actual item type later once we have item types
-        size = useAverageSize;
-    }
-
-    if (size === undefined) {
-        size = sizes.get(key)!;
-
-        if (size !== undefined) {
-            return size;
-        }
-    }
-
-    if (size === undefined) {
-        // Get estimated size if we don't have an average or already cached size
-        size = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize!;
-    }
-
-    // Save to rendered sizes
-    sizes.set(key, size);
-    return size;
-}

package/src/getRenderedItem.ts

@@ -1,34 +0,0 @@
-import React from "react";
-import { type StateContext, peek$ } from "./state";
-import type { InternalState } from "./types";
-
-export function getRenderedItem(ctx: StateContext, state: InternalState, key: string) {
-    if (!state) {
-        return null;
-    }
-
-    const {
-        indexByKey,
-        props: { data, renderItem },
-    } = state;
-
-    const index = indexByKey.get(key);
-
-    if (index === undefined) {
-        return null;
-    }
-
-    let renderedItem: React.ReactNode = null;
-
-    if (renderItem) {
-        const itemProps = {
-            item: data[index],
-            index,
-            extraData: peek$(ctx, "extraData"),
-        };
-
-        renderedItem = React.createElement(renderItem, itemProps);
-    }
-
-    return { index, item: data[index], renderedItem };
-}

package/src/getScrollVelocity.ts

@@ -1,47 +0,0 @@
-import type { InternalState } from "./types";
-
-export const getScrollVelocity = (state: InternalState) => {
-    const { scrollHistory } = state;
-    let velocity = 0;
-    if (scrollHistory.length >= 1) {
-        const newest = scrollHistory[scrollHistory.length - 1];
-        let oldest: (typeof scrollHistory)[0] | undefined;
-        let start = 0;
-
-        // If there's a change in direction, remove all entries before that point
-        for (let i = 0; i < scrollHistory.length - 1; i++) {
-            const entry = scrollHistory[i];
-            const nextEntry = scrollHistory[i + 1];
-
-            // Check if direction changes - if so, remove older entries
-            if (i > 0) {
-                const prevEntry = scrollHistory[i - 1];
-                const prevDirection = entry.scroll - prevEntry.scroll;
-                const currentDirection = nextEntry.scroll - entry.scroll;
-
-                // If direction changed, remove all entries before this point
-                if ((prevDirection > 0 && currentDirection < 0) || (prevDirection < 0 && currentDirection > 0)) {
-                    start = i;
-                    break;
-                }
-            }
-        }
-
-        // Find oldest recent event
-        for (let i = start; i < scrollHistory.length - 1; i++) {
-            const entry = scrollHistory[i];
-            if (newest.time - entry.time <= 1000) {
-                oldest = entry;
-                break;
-            }
-        }
-
-        if (oldest) {
-            const scrollDiff = newest.scroll - oldest.scroll;
-            const timeDiff = newest.time - oldest.time;
-            velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
-        }
-    }
-
-    return velocity;
-};

package/src/handleLayout.ts

@@ -1,70 +0,0 @@
-import type { LayoutRectangle } from "react-native";
-import { calculateItemsInView } from "./calculateItemsInView";
-import { checkAtBottom } from "./checkAtBottom";
-import { checkAtTop } from "./checkAtTop";
-import { doInitialAllocateContainers } from "./doInitialAllocateContainers";
-import { doMaintainScrollAtEnd } from "./doMaintainScrollAtEnd";
-import { warnDevOnce } from "./helpers";
-import { type StateContext, set$ } from "./state";
-import type { InternalState, MaintainScrollAtEndOptions } from "./types";
-import { updateAlignItemsPaddingTop } from "./updateAlignItemsPaddingTop";
-
-export function handleLayout(
-    ctx: StateContext,
-    state: InternalState,
-    layout: LayoutRectangle,
-    setCanRender: (canRender: boolean) => void,
-) {
-    const { maintainScrollAtEnd } = state.props;
-
-    const scrollLength = layout[state.props.horizontal ? "width" : "height"];
-    const otherAxisSize = layout[state.props.horizontal ? "height" : "width"];
-
-    const needsCalculate =
-        !state.lastLayout ||
-        scrollLength > state.scrollLength ||
-        state.lastLayout.x !== layout.x ||
-        state.lastLayout.y !== layout.y;
-
-    state.lastLayout = layout;
-
-    const didChange = scrollLength !== state.scrollLength;
-    const prevOtherAxisSize = state.otherAxisSize;
-    state.scrollLength = scrollLength;
-    state.otherAxisSize = otherAxisSize;
-    state.lastBatchingAction = Date.now();
-    state.scrollForNextCalculateItemsInView = undefined;
-
-    doInitialAllocateContainers(ctx, state);
-
-    if (needsCalculate) {
-        calculateItemsInView(ctx, state, { doMVCP: true });
-    }
-    if (didChange || otherAxisSize !== prevOtherAxisSize) {
-        set$(ctx, "scrollSize", { width: layout.width, height: layout.height });
-    }
-
-    if (maintainScrollAtEnd === true || (maintainScrollAtEnd as MaintainScrollAtEndOptions).onLayout) {
-        doMaintainScrollAtEnd(ctx, state, false);
-    }
-    updateAlignItemsPaddingTop(ctx, state);
-    checkAtBottom(ctx, state);
-    checkAtTop(state);
-
-    if (state) {
-        // If otherAxisSize minus padding is less than 10, we need to set the size of the other axis
-        // from the item height. 10 is just a magic number to account for border/outline or rounding errors.
-        state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
-    }
-
-    if (__DEV__ && scrollLength === 0) {
-        warnDevOnce(
-            "height0",
-            `List ${
-                state.props.horizontal ? "width" : "height"
-            } is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`,
-        );
-    }
-
-    setCanRender(true);
-}

package/src/helpers.ts

@@ -1,39 +0,0 @@
-import type { ViewStyle } from "react-native";
-
-export function isFunction(obj: unknown): obj is (...args: any[]) => any {
-    return typeof obj === "function";
-}
-export function isArray(obj: unknown): obj is Array<any> {
-    return Array.isArray(obj);
-}
-
-const warned = new Set<string>();
-export function warnDevOnce(id: string, text: string) {
-    if (__DEV__ && !warned.has(id)) {
-        warned.add(id);
-        console.warn(`[legend-list] ${text}`);
-    }
-}
-
-export function roundSize(size: number) {
-    return Math.floor(size * 8) / 8; // Round to nearest quater pixel to avoid accumulating rounding errors
-}
-
-export function isNullOrUndefined(value: unknown) {
-    return value === null || value === undefined;
-}
-
-export function comparatorDefault(a: number, b: number) {
-    return a - b;
-}
-
-export function byIndex(a: { index: number }) {
-    return a.index;
-}
-
-function getPadding(s: ViewStyle, type: "Top" | "Bottom") {
-    return (s[`padding${type}`] ?? s.paddingVertical ?? s.padding ?? 0) as number;
-}
-export function extractPadding(style: ViewStyle, contentContainerStyle: ViewStyle, type: "Top" | "Bottom") {
-    return getPadding(style, type) + getPadding(contentContainerStyle, type);
-}

package/src/index.ts

@@ -1,11 +0,0 @@
-export { LegendList } from "./LegendList";
-export { LazyLegendList, type LazyLegendListProps } from "./LazyLegendList";
-export {
-    useIsLastItem,
-    useListScrollSize,
-    useRecyclingEffect,
-    useRecyclingState,
-    useViewability,
-    useViewabilityAmount,
-} from "./ContextContainer";
-export type * from "./types";

package/src/keyboard-controller.tsx

@@ -1,63 +0,0 @@
-import { LegendList as LegendListBase, type LegendListProps, type LegendListRef } from "@legendapp/list";
-import type { AnimatedLegendList } from "@legendapp/list/animated";
-import type { AnimatedLegendList as ReanimatedLegendList } from "@legendapp/list/reanimated";
-// biome-ignore lint/style/useImportType: Leaving this out makes it crash in some environments
-import * as React from "react";
-import { type ForwardedRef, forwardRef, useState } from "react";
-import { type Insets, StyleSheet } from "react-native";
-import { useKeyboardHandler } from "react-native-keyboard-controller";
-import { runOnJS } from "react-native-reanimated";
-
-// biome-ignore lint/complexity/noBannedTypes: This is a workaround for the fact that forwardRef is not typed
-type TypedForwardRef = <T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactNode,
-) => (props: P & React.RefAttributes<T>) => React.ReactNode;
-
-const typedForwardRef = forwardRef as TypedForwardRef;
-
-export const LegendList = typedForwardRef(function LegendList<
-    ItemT,
-    ListT extends
-        | typeof LegendListBase
-        | typeof AnimatedLegendList
-        | typeof ReanimatedLegendList = typeof LegendListBase,
->(props: LegendListProps<ItemT> & { LegendList?: ListT }, forwardedRef: ForwardedRef<LegendListRef>) {
-    const {
-        LegendList: LegendListProp,
-        contentContainerStyle: contentContainerStyleProp,
-        scrollIndicatorInsets: scrollIndicatorInsetsProp,
-        ...rest
-    } = props;
-    const [padding, setPadding] = useState(0);
-
-    // Define this function outside the worklet
-    const updatePadding = (height: number) => {
-        setPadding(height);
-    };
-
-    useKeyboardHandler({
-        onEnd: (e) => {
-            "worklet";
-            runOnJS(updatePadding)(e.height);
-        },
-    });
-
-    const LegendListComponent = LegendListProp ?? LegendListBase;
-
-    const contentContainerStyleFlattened = StyleSheet.flatten(contentContainerStyleProp) || {};
-    const contentContainerStyle = { ...contentContainerStyleFlattened, paddingTop: padding };
-    const scrollIndicatorInsets: Insets = scrollIndicatorInsetsProp ? { ...scrollIndicatorInsetsProp } : {};
-    if (!props.horizontal) {
-        scrollIndicatorInsets.top = (scrollIndicatorInsets?.top || 0) + padding;
-    }
-
-    return (
-        // @ts-expect-error TODO: Fix this type
-        <LegendListComponent
-            {...rest}
-            contentContainerStyle={contentContainerStyle}
-            scrollIndicatorInsets={scrollIndicatorInsets}
-            ref={forwardedRef}
-        />
-    );
-});