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

package/src/onScroll.ts

@@ -1,66 +0,0 @@
-import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
-import { calculateItemsInView } from "./calculateItemsInView";
-import { checkAtBottom } from "./checkAtBottom";
-import { checkAtTop } from "./checkAtTop";
-import type { StateContext } from "./state";
-import type { InternalState } from "./types";
-
-export function onScroll(
-    ctx: StateContext,
-    state: InternalState,
-    event: {
-        nativeEvent: NativeScrollEvent;
-    },
-) {
-    if (event.nativeEvent?.contentSize?.height === 0 && event.nativeEvent.contentSize?.width === 0) {
-        return;
-    }
-
-    const newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
-
-    // Ignore scroll events that are too close to the previous scroll position
-    // after adjusting for MVCP
-    const ignoreScrollFromMVCP = state.ignoreScrollFromMVCP;
-    if (ignoreScrollFromMVCP && !state.scrollingTo) {
-        const { lt, gt } = ignoreScrollFromMVCP;
-        if ((lt && newScroll < lt) || (gt && newScroll > gt)) {
-            return;
-        }
-    }
-
-    state.scrollPending = newScroll;
-
-    updateScroll(ctx, state, newScroll);
-
-    state.props.onScroll?.(event as NativeSyntheticEvent<NativeScrollEvent>);
-}
-
-function updateScroll(ctx: StateContext, state: InternalState, newScroll: number) {
-    const scrollingTo = state.scrollingTo;
-
-    state.hasScrolled = true;
-    state.lastBatchingAction = Date.now();
-    const currentTime = performance.now();
-
-    // Don't add to the history if it's initial scroll event otherwise invalid velocity will be calculated
-    // Don't add to the history if we are scrolling to an offset
-    if (scrollingTo === undefined && !(state.scrollHistory.length === 0 && newScroll === state.scroll)) {
-        // Update scroll history
-        state.scrollHistory.push({ scroll: newScroll, time: currentTime });
-    }
-
-    // Keep only last 5 entries
-    if (state.scrollHistory.length > 5) {
-        state.scrollHistory.shift();
-    }
-
-    // Update current scroll state
-    state.scrollPrev = state.scroll;
-    state.scrollPrevTime = state.scrollTime;
-    state.scroll = newScroll;
-    state.scrollTime = currentTime;
-    // Use velocity to predict scroll position
-    calculateItemsInView(ctx, state);
-    checkAtBottom(ctx, state);
-    checkAtTop(state);
-}

package/src/prepareMVCP.ts

@@ -1,50 +0,0 @@
-import { getId } from "./getId";
-import { requestAdjust } from "./requestAdjust";
-import { type StateContext, peek$ } from "./state";
-import type { InternalState } from "./types";
-
-export function prepareMVCP(ctx: StateContext, state: InternalState): () => void {
-    const {
-        positions,
-        scrollingTo,
-        props: { maintainVisibleContentPosition },
-    } = state;
-
-    let prevPosition: number;
-    let targetId: string | undefined;
-    let targetIndex: number | undefined;
-    const scrollTarget = scrollingTo?.index;
-
-    if (maintainVisibleContentPosition) {
-        const indexByKey = state.indexByKey;
-
-        if (scrollTarget !== undefined) {
-            // If we're currently scrolling to a target index, do MVCP for its position
-            targetId = getId(state, scrollTarget);
-            targetIndex = scrollTarget;
-        } else if (state.idsInView.length > 0 && peek$(ctx, "containersDidLayout")) {
-            // Do MVCP for the first item fully in view
-            targetId = state.idsInView.find((id) => indexByKey.get(id) !== undefined);
-            targetIndex = indexByKey.get(targetId!);
-        }
-
-        if (targetId !== undefined && targetIndex !== undefined) {
-            prevPosition = positions.get(targetId)!;
-        }
-    }
-
-    // Return a function to do MVCP based on the prepared values
-    return () => {
-        if (targetId !== undefined && prevPosition !== undefined) {
-            const newPosition = positions.get(targetId);
-
-            if (newPosition !== undefined) {
-                const positionDiff = newPosition - prevPosition;
-
-                if (Math.abs(positionDiff) > 0.1) {
-                    requestAdjust(ctx, state, positionDiff);
-                }
-            }
-        }
-    };
-}

package/src/reanimated.tsx

@@ -1,63 +0,0 @@
-import { LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRef } from "@legendapp/list";
-import React, { type ComponentProps } from "react";
-import Animated from "react-native-reanimated";
-import { useCombinedRef } from "./useCombinedRef";
-
-type KeysToOmit =
-    | "getEstimatedItemSize"
-    | "keyExtractor"
-    | "animatedProps"
-    | "renderItem"
-    | "onItemSizeChanged"
-    | "ItemSeparatorComponent";
-
-type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Animated.ScrollView>>;
-
-export interface AnimatedLegendListPropsBase<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
-    refScrollView?: React.Ref<Animated.ScrollView>;
-}
-
-type OtherAnimatedLegendListProps<ItemT> = Pick<PropsBase<ItemT>, KeysToOmit>;
-
-// A component that receives a ref for the Animated.ScrollView and passes it to the LegendList
-const LegendListForwardedRef = React.forwardRef(function LegendListForwardedRef<ItemT>(
-    props: LegendListProps<ItemT> & { refLegendList: (r: LegendListRef | null) => void },
-    ref: React.Ref<Animated.ScrollView>,
-) {
-    const { refLegendList, ...rest } = props;
-
-    return (
-        <LegendList
-            refScrollView={ref}
-            ref={(r) => {
-                refLegendList(r);
-            }}
-            {...rest}
-        />
-    );
-});
-
-const AnimatedLegendListComponent = Animated.createAnimatedComponent(LegendListForwardedRef);
-
-type AnimatedLegendListProps<ItemT> = Omit<AnimatedLegendListPropsBase<ItemT>, "refLegendList" | "ref"> &
-    OtherAnimatedLegendListProps<ItemT>;
-
-type AnimatedLegendListDefinition = <ItemT>(
-    props: AnimatedLegendListProps<ItemT> & { ref?: React.Ref<LegendListRef> },
-) => React.ReactElement | null;
-
-// A component that has the shape of LegendList which passes the ref down as refLegendList
-const AnimatedLegendList = React.forwardRef(function AnimatedLegendList<ItemT>(
-    props: AnimatedLegendListProps<ItemT>,
-    ref: React.Ref<LegendListRef>,
-) {
-    const { refScrollView, ...rest } = props as AnimatedLegendListPropsBase<ItemT>;
-
-    const refLegendList = React.useRef<LegendListRef | null>(null);
-
-    const combinedRef = useCombinedRef(refLegendList, ref);
-
-    return <AnimatedLegendListComponent refLegendList={combinedRef} ref={refScrollView} {...rest} />;
-}) as AnimatedLegendListDefinition;
-
-export { AnimatedLegendList, type AnimatedLegendListProps };

package/src/requestAdjust.ts

@@ -1,41 +0,0 @@
-import { type StateContext, peek$ } from "./state";
-import type { InternalState } from "./types";
-
-export function requestAdjust(ctx: StateContext, state: InternalState, positionDiff: number) {
-    if (Math.abs(positionDiff) > 0.1) {
-        const doit = () => {
-            state.scrollAdjustHandler.requestAdjust(positionDiff);
-        };
-        state.scroll += positionDiff;
-        state.scrollForNextCalculateItemsInView = undefined;
-
-        const didLayout = peek$(ctx, "containersDidLayout");
-
-        if (didLayout) {
-            doit();
-
-            // Calculate a threshold to ignore scroll jumps for a short period of time
-            // This is to avoid the case where a scroll event comes in that was relevant from before
-            // the requestAdjust. So we ignore scroll events that are closer to the previous
-            // scroll position than the target position.
-            const threshold = state.scroll - positionDiff / 2;
-            if (!state.ignoreScrollFromMVCP) {
-                state.ignoreScrollFromMVCP = {};
-            }
-            if (positionDiff > 0) {
-                state.ignoreScrollFromMVCP.lt = threshold;
-            } else {
-                state.ignoreScrollFromMVCP.gt = threshold;
-            }
-
-            if (state.ignoreScrollFromMVCPTimeout) {
-                clearTimeout(state.ignoreScrollFromMVCPTimeout);
-            }
-            state.ignoreScrollFromMVCPTimeout = setTimeout(() => {
-                state.ignoreScrollFromMVCP = undefined;
-            }, 100);
-        } else {
-            requestAnimationFrame(doit);
-        }
-    }
-}

package/src/scrollTo.ts

@@ -1,40 +0,0 @@
-import { calculateOffsetWithOffsetPosition } from "./calculateOffsetWithOffsetPosition";
-import { finishScrollTo } from "./finishScrollTo";
-import type { InternalState } from "./types";
-
-export function scrollTo(
-    state: InternalState,
-    params: {
-        animated?: boolean;
-        index?: number;
-        offset: number;
-        viewOffset?: number;
-        viewPosition?: number;
-    } = {} as any,
-) {
-    const { animated } = params;
-    const {
-        refScroller,
-        props: { horizontal },
-    } = state;
-
-    const offset = calculateOffsetWithOffsetPosition(state, params.offset, params);
-
-    // Disable scroll adjust while scrolling so that it doesn't do extra work affecting the target offset
-    state.scrollHistory.length = 0;
-    state.scrollingTo = params;
-    state.scrollPending = offset;
-    // Do the scroll
-    refScroller.current?.scrollTo({
-        x: horizontal ? offset : 0,
-        y: horizontal ? 0 : offset,
-        animated: !!animated,
-    });
-
-    if (!animated) {
-        state.scroll = offset;
-        // TODO: Should this not be a timeout, and instead wait for all item layouts to settle?
-        // It's used for mvcp for when items change size above scroll.
-        setTimeout(() => finishScrollTo(state), 100);
-    }
-}

package/src/scrollToIndex.ts

@@ -1,34 +0,0 @@
-import { calculateOffsetForIndex } from "./calculateOffsetForIndex";
-import { scrollTo } from "./scrollTo";
-import type { StateContext } from "./state";
-import type { InternalState, LegendListRef } from "./types";
-
-export function scrollToIndex(
-    ctx: StateContext,
-    state: InternalState,
-    { index, viewOffset = 0, animated = true, viewPosition }: Parameters<LegendListRef["scrollToIndex"]>[0],
-) {
-    if (index >= state.props.data.length) {
-        index = state.props.data.length - 1;
-    } else if (index < 0) {
-        index = 0;
-    }
-
-    const firstIndexOffset = calculateOffsetForIndex(ctx, state, index);
-
-    const isLast = index === state.props.data.length - 1;
-    if (isLast && viewPosition === undefined) {
-        viewPosition = 1;
-    }
-    const firstIndexScrollPostion = firstIndexOffset - viewOffset;
-
-    state.scrollForNextCalculateItemsInView = undefined;
-
-    scrollTo(state, {
-        offset: firstIndexScrollPostion,
-        animated,
-        index,
-        viewPosition: viewPosition ?? 0,
-        viewOffset,
-    });
-}

package/src/setDidLayout.ts

@@ -1,25 +0,0 @@
-import { checkAtBottom } from "./checkAtBottom";
-import { IsNewArchitecture } from "./constants";
-import { scrollToIndex } from "./scrollToIndex";
-import { type StateContext, set$ } from "./state";
-import type { InternalState } from "./types";
-
-export function setDidLayout(ctx: StateContext, state: InternalState) {
-    const {
-        loadStartTime,
-        initialScroll,
-        props: { onLoad },
-    } = state;
-    state.queuedInitialLayout = true;
-    checkAtBottom(ctx, state);
-
-    if (!IsNewArchitecture && initialScroll) {
-        scrollToIndex(ctx, state, { ...initialScroll, animated: false });
-    }
-
-    set$(ctx, "containersDidLayout", true);
-
-    if (onLoad) {
-        onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
-    }
-}

package/src/setPaddingTop.ts

@@ -1,28 +0,0 @@
-import { type StateContext, peek$, set$ } from "./state";
-
-export function setPaddingTop(
-    ctx: StateContext,
-    { stylePaddingTop, alignItemsPaddingTop }: { stylePaddingTop?: number; alignItemsPaddingTop?: number },
-) {
-    if (stylePaddingTop !== undefined) {
-        const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
-        if (stylePaddingTop < prevStylePaddingTop) {
-            // If reducing top padding then we need to make sure the ScrollView doesn't
-            // scroll itself because the height reduced.
-            // First add the padding to the total size so that the total height in the ScrollView
-            // doesn't change
-            const prevTotalSize = peek$(ctx, "totalSize") || 0;
-            set$(ctx, "totalSize", prevTotalSize + prevStylePaddingTop);
-            setTimeout(() => {
-                // Then reset it back to how it was
-                set$(ctx, "totalSize", prevTotalSize);
-            }, 16);
-        }
-
-        // Now set the padding
-        set$(ctx, "stylePaddingTop", stylePaddingTop);
-    }
-    if (alignItemsPaddingTop !== undefined) {
-        set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
-    }
-}

package/src/state.tsx

@@ -1,304 +0,0 @@
-import * as React from "react";
-import type { View } from "react-native";
-import { useSyncExternalStore } from "use-sync-external-store/shim";
-import type {
-    ColumnWrapperStyle,
-    ViewAmountToken,
-    ViewToken,
-    ViewabilityAmountCallback,
-    ViewabilityCallback,
-} from "./types";
-
-// This is an implementation of a simple state management system, inspired by Legend State.
-// It stores values and listeners in Maps, with peek$ and set$ functions to get and set values.
-// The set$ function also triggers the listeners.
-//
-// This is definitely not general purpose and has one big optimization/caveat: use$ is only ever called
-// once for each unique name. So we don't need to manage a Set of listeners or dispose them,
-// which saves needing useEffect hooks or managing listeners in a Set.
-
-export type ListenerType =
-    | "numContainers"
-    | "numContainersPooled"
-    | `containerItemKey${number}`
-    | `containerItemData${number}`
-    | `containerPosition${number}`
-    | `containerColumn${number}`
-    | "containersDidLayout"
-    | "extraData"
-    | "numColumns"
-    | "lastItemKeys"
-    | "totalSize"
-    | "alignItemsPaddingTop"
-    | "stylePaddingTop"
-    | "scrollAdjust"
-    | "scrollAdjustUserOffset"
-    | "headerSize"
-    | "footerSize"
-    | "maintainVisibleContentPosition"
-    | "debugRawScroll"
-    | "debugComputedScroll"
-    | "otherAxisSize"
-    | "scrollSize";
-
-export type ListenerTypeValueMap = {
-    numContainers: number;
-    numContainersPooled: number;
-    containersDidLayout: boolean;
-    extraData: any;
-    numColumns: number;
-    lastItemKeys: string[];
-    totalSize: number;
-    alignItemsPaddingTop: number;
-    stylePaddingTop: number;
-    scrollAdjust: number;
-    scrollAdjustUserOffset: number;
-    headerSize: number;
-    footerSize: number;
-    maintainVisibleContentPosition: boolean;
-    debugRawScroll: number;
-    debugComputedScroll: number;
-    otherAxisSize: number;
-    scrollSize: { width: number; height: number };
-} & {
-    [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
-} & {
-    [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
-} & {
-    [K in ListenerType as K extends `containerPosition${number}` ? K : never]: number;
-} & {
-    [K in ListenerType as K extends `containerColumn${number}` ? K : never]: number;
-};
-
-export interface StateContext {
-    listeners: Map<ListenerType, Set<(value: any) => void>>;
-    values: Map<ListenerType, any>;
-    mapViewabilityCallbacks: Map<string, ViewabilityCallback>;
-    mapViewabilityValues: Map<string, ViewToken>;
-    mapViewabilityAmountCallbacks: Map<number, ViewabilityAmountCallback>;
-    mapViewabilityAmountValues: Map<number, ViewAmountToken>;
-    columnWrapperStyle: ColumnWrapperStyle | undefined;
-    viewRefs: Map<number, React.RefObject<View>>;
-}
-
-const ContextState = React.createContext<StateContext | null>(null);
-
-export function StateProvider({ children }: { children: React.ReactNode }) {
-    const [value] = React.useState<StateContext>(() => ({
-        listeners: new Map(),
-        values: new Map<ListenerType, any>([
-            ["alignItemsPaddingTop", 0],
-            ["stylePaddingTop", 0],
-            ["headerSize", 0],
-        ]),
-        mapViewabilityCallbacks: new Map<string, ViewabilityCallback>(),
-        mapViewabilityValues: new Map<string, ViewToken>(),
-        mapViewabilityAmountCallbacks: new Map<number, ViewabilityAmountCallback>(),
-        mapViewabilityAmountValues: new Map<number, ViewAmountToken>(),
-        columnWrapperStyle: undefined,
-        viewRefs: new Map<number, React.RefObject<View>>(),
-    }));
-    return <ContextState.Provider value={value}>{children}</ContextState.Provider>;
-}
-
-export function useStateContext() {
-    return React.useContext(ContextState)!;
-}
-
-function createSelectorFunctionsArr(ctx: StateContext, signalNames: ListenerType[]) {
-    let lastValues: any[] = [];
-    let lastSignalValues: any[] = [];
-
-    return {
-        subscribe: (cb: (value: any) => void) => {
-            const listeners: (() => void)[] = [];
-            for (const signalName of signalNames) {
-                listeners.push(listen$(ctx, signalName, cb));
-            }
-            return () => {
-                for (const listener of listeners) {
-                    listener();
-                }
-            };
-        },
-        get: () => {
-            const currentValues: any[] = [];
-            let hasChanged = false;
-
-            for (let i = 0; i < signalNames.length; i++) {
-                const value = peek$(ctx, signalNames[i]);
-                currentValues.push(value);
-
-                // Check if this value has changed from last time
-                if (value !== lastSignalValues[i]) {
-                    hasChanged = true;
-                }
-            }
-
-            // Update our cached signal values regardless
-            lastSignalValues = currentValues;
-
-            // Only create a new array reference if something changed
-            if (hasChanged) {
-                lastValues = currentValues;
-            }
-
-            return lastValues;
-        },
-    };
-}
-
-export function listen$<T extends ListenerType>(
-    ctx: StateContext,
-    signalName: T,
-    cb: (value: ListenerTypeValueMap[T]) => void,
-): () => void {
-    const { listeners } = ctx;
-    let setListeners = listeners.get(signalName);
-    if (!setListeners) {
-        setListeners = new Set();
-        listeners.set(signalName, setListeners);
-    }
-    setListeners!.add(cb);
-
-    return () => setListeners!.delete(cb);
-}
-
-// Function to get value based on ListenerType without requiring generic type
-export function peek$<T extends ListenerType>(ctx: StateContext, signalName: T): ListenerTypeValueMap[T] {
-    const { values } = ctx;
-    return values.get(signalName);
-}
-
-export function set$<T extends ListenerType>(
-    ctx: StateContext,
-    signalName: T,
-    value: ListenerTypeValueMap[T] | undefined,
-) {
-    const { listeners, values } = ctx;
-    if (values.get(signalName) !== value) {
-        values.set(signalName, value);
-        const setListeners = listeners.get(signalName);
-        if (setListeners) {
-            for (const listener of setListeners) {
-                listener(value);
-            }
-        }
-    }
-}
-
-export function getContentSize(ctx: StateContext) {
-    const { values } = ctx;
-    const stylePaddingTop = values.get("stylePaddingTop") || 0;
-    const headerSize = values.get("headerSize") || 0;
-    const footerSize = values.get("footerSize") || 0;
-    const totalSize = values.get("totalSize") || 0;
-    return headerSize + footerSize + totalSize + stylePaddingTop;
-}
-
-export function useArr$<T extends ListenerType>(signalNames: [T]): [ListenerTypeValueMap[T]];
-export function useArr$<T1 extends ListenerType, T2 extends ListenerType>(
-    signalNames: [T1, T2],
-): [ListenerTypeValueMap[T1], ListenerTypeValueMap[T2]];
-export function useArr$<T1 extends ListenerType, T2 extends ListenerType, T3 extends ListenerType>(
-    signalNames: [T1, T2, T3],
-): [ListenerTypeValueMap[T1], ListenerTypeValueMap[T2], ListenerTypeValueMap[T3]];
-export function useArr$<
-    T1 extends ListenerType,
-    T2 extends ListenerType,
-    T3 extends ListenerType,
-    T4 extends ListenerType,
->(
-    signalNames: [T1, T2, T3, T4],
-): [ListenerTypeValueMap[T1], ListenerTypeValueMap[T2], ListenerTypeValueMap[T3], ListenerTypeValueMap[T4]];
-export function useArr$<
-    T1 extends ListenerType,
-    T2 extends ListenerType,
-    T3 extends ListenerType,
-    T4 extends ListenerType,
-    T5 extends ListenerType,
->(
-    signalNames: [T1, T2, T3, T4, T5],
-): [
-    ListenerTypeValueMap[T1],
-    ListenerTypeValueMap[T2],
-    ListenerTypeValueMap[T3],
-    ListenerTypeValueMap[T4],
-    ListenerTypeValueMap[T5],
-];
-export function useArr$<
-    T1 extends ListenerType,
-    T2 extends ListenerType,
-    T3 extends ListenerType,
-    T4 extends ListenerType,
-    T5 extends ListenerType,
-    T6 extends ListenerType,
->(
-    signalNames: [T1, T2, T3, T4, T5, T6],
-): [
-    ListenerTypeValueMap[T1],
-    ListenerTypeValueMap[T2],
-    ListenerTypeValueMap[T3],
-    ListenerTypeValueMap[T4],
-    ListenerTypeValueMap[T5],
-    ListenerTypeValueMap[T6],
-];
-export function useArr$<
-    T1 extends ListenerType,
-    T2 extends ListenerType,
-    T3 extends ListenerType,
-    T4 extends ListenerType,
-    T5 extends ListenerType,
-    T6 extends ListenerType,
-    T7 extends ListenerType,
->(
-    signalNames: [T1, T2, T3, T4, T5, T6, T7],
-): [
-    ListenerTypeValueMap[T1],
-    ListenerTypeValueMap[T2],
-    ListenerTypeValueMap[T3],
-    ListenerTypeValueMap[T4],
-    ListenerTypeValueMap[T5],
-    ListenerTypeValueMap[T6],
-    ListenerTypeValueMap[T7],
-];
-export function useArr$<
-    T1 extends ListenerType,
-    T2 extends ListenerType,
-    T3 extends ListenerType,
-    T4 extends ListenerType,
-    T5 extends ListenerType,
-    T6 extends ListenerType,
-    T7 extends ListenerType,
-    T8 extends ListenerType,
->(
-    signalNames: [T1, T2, T3, T4, T5, T6, T7, T8],
-): [
-    ListenerTypeValueMap[T1],
-    ListenerTypeValueMap[T2],
-    ListenerTypeValueMap[T3],
-    ListenerTypeValueMap[T4],
-    ListenerTypeValueMap[T5],
-    ListenerTypeValueMap[T6],
-    ListenerTypeValueMap[T7],
-    ListenerTypeValueMap[T8],
-];
-export function useArr$<T extends ListenerType>(signalNames: T[]): ListenerTypeValueMap[T][] {
-    const ctx = React.useContext(ContextState)!;
-    const { subscribe, get } = React.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
-    const value = useSyncExternalStore(subscribe, get);
-
-    return value;
-}
-export function useSelector$<T extends ListenerType, T2>(
-    signalName: T,
-    selector: (value: ListenerTypeValueMap[T]) => T2,
-): T2 {
-    const ctx = React.useContext(ContextState)!;
-    const { subscribe, get } = React.useMemo(() => createSelectorFunctionsArr(ctx, [signalName]), [ctx, signalName]);
-
-    // Return a selected value based on the signal name, so it only re-renders when the selected value changes
-    const value = useSyncExternalStore(subscribe, () => selector(get()[0]));
-
-    return value;
-}