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

package/src/updateAllPositions.ts

@@ -1,130 +0,0 @@
-import { getId } from "./getId";
-import { getItemSize } from "./getItemSize";
-import { getScrollVelocity } from "./getScrollVelocity";
-import { roundSize } from "./helpers";
-import { type StateContext, peek$ } from "./state";
-import type { InternalState } from "./types";
-import { updateTotalSize } from "./updateTotalSize";
-
-export function updateAllPositions(ctx: StateContext, state: InternalState, dataChanged?: boolean) {
-    const { averageSizes, columns, indexByKey, positions, firstFullyOnScreenIndex, idCache, sizesKnown } = state;
-    const data = state.props.data;
-    const numColumns = peek$(ctx, "numColumns");
-    const indexByKeyForChecking = __DEV__ ? new Map() : undefined;
-    const scrollVelocity = getScrollVelocity(state);
-
-    if (dataChanged) {
-        indexByKey.clear();
-        idCache.clear();
-    }
-
-    // TODO: Hook this up to actual item types later once we have item types
-    const itemType = "";
-    let averageSize = averageSizes[itemType]?.avg;
-    if (averageSize !== undefined) {
-        averageSize = roundSize(averageSize);
-    }
-
-    // Check if we should use backwards optimization when scrolling up
-    const shouldUseBackwards =
-        !dataChanged && scrollVelocity < 0 && firstFullyOnScreenIndex > 5 && firstFullyOnScreenIndex < data!.length;
-
-    if (shouldUseBackwards && firstFullyOnScreenIndex !== undefined) {
-        // Get the current position of firstFullyOnScreenIndex as anchor
-        const anchorId = getId(state, firstFullyOnScreenIndex)!;
-        const anchorPosition = positions.get(anchorId);
-
-        // If we don't have the anchor position, fall back to regular behavior
-        if (anchorPosition !== undefined) {
-            // Start from the anchor and go backwards
-            let currentRowTop = anchorPosition;
-            let maxSizeInRow = 0;
-            let bailout = false;
-
-            // Process items backwards from firstFullyOnScreenIndex - 1 to 0
-            for (let i = firstFullyOnScreenIndex - 1; i >= 0; i--) {
-                const id = idCache.get(i) ?? getId(state, i)!;
-                const size = sizesKnown.get(id) ?? getItemSize(state, id, i, data[i], averageSize);
-                const itemColumn = columns.get(id)!;
-
-                maxSizeInRow = Math.max(maxSizeInRow, size);
-
-                // When we reach column 1, we're at the start of a new row going backwards
-                if (itemColumn === 1) {
-                    currentRowTop -= maxSizeInRow;
-                    maxSizeInRow = 0;
-                }
-
-                // Check if position goes too low - bail if so
-                if (currentRowTop < -2000) {
-                    bailout = true;
-                    break;
-                }
-
-                // Update position for this item (columns and indexByKey already set)
-                positions.set(id, currentRowTop);
-            }
-
-            if (!bailout) {
-                // We successfully processed backwards, we're done
-                updateTotalSize(ctx, state);
-                return;
-            }
-        }
-    }
-
-    // Regular ascending behavior (either not scrolling up or bailed out)
-    let currentRowTop = 0;
-    let column = 1;
-    let maxSizeInRow = 0;
-
-    const hasColumns = numColumns > 1;
-    const needsIndexByKey = dataChanged || indexByKey.size === 0;
-
-    // Note that this loop is micro-optimized because it's a hot path
-    const dataLength = data!.length;
-    for (let i = 0; i < dataLength; i++) {
-        // Inline the map get calls to avoid the overhead of the function call
-        const id = idCache.get(i) ?? getId(state, i)!;
-        const size = sizesKnown.get(id) ?? getItemSize(state, id, i, data[i], averageSize);
-
-        // Set index mapping for this item
-        if (__DEV__ && needsIndexByKey) {
-            if (indexByKeyForChecking!.has(id)) {
-                console.error(
-                    `[legend-list] Error: Detected overlapping key (${id}) which causes missing items and gaps and other terrrible things. Check that keyExtractor returns unique values.`,
-                );
-            }
-            indexByKeyForChecking!.set(id, i);
-        }
-
-        // Set position for this item
-        positions.set(id, currentRowTop);
-
-        // Update indexByKey if needed
-        if (needsIndexByKey) {
-            indexByKey.set(id, i);
-        }
-
-        // Set column for this item
-        columns.set(id, column);
-
-        if (hasColumns) {
-            if (size > maxSizeInRow) {
-                maxSizeInRow = size;
-            }
-
-            column++;
-            if (column > numColumns) {
-                // Move to next row
-                currentRowTop += maxSizeInRow;
-                column = 1;
-                maxSizeInRow = 0;
-            }
-        } else {
-            currentRowTop += size;
-        }
-    }
-
-    updateTotalSize(ctx, state);
-}

package/src/updateItemSize.ts

@@ -1,203 +0,0 @@
-import type { LayoutRectangle } from "react-native";
-import { calculateItemsInView } from "./calculateItemsInView";
-import { checkAllSizesKnown } from "./checkAllSizesKnown";
-import { IsNewArchitecture } from "./constants";
-import { doMaintainScrollAtEnd } from "./doMaintainScrollAtEnd";
-import { getItemSize } from "./getItemSize";
-import { requestAdjust } from "./requestAdjust";
-import { type StateContext, peek$, set$ } from "./state";
-import type { InternalState, MaintainScrollAtEndOptions } from "./types";
-
-export function updateItemSizes(
-    ctx: StateContext,
-    state: InternalState,
-    itemUpdates: { itemKey: string; sizeObj: { width: number; height: number } }[],
-) {
-    const {
-        props: {
-            horizontal,
-            maintainVisibleContentPosition,
-            suggestEstimatedItemSize,
-            onItemSizeChanged,
-            data,
-            maintainScrollAtEnd,
-        },
-    } = state;
-
-    if (!data) return;
-
-    let needsRecalculate = false;
-    let shouldMaintainScrollAtEnd = false;
-    let minIndexSizeChanged: number | undefined;
-    let maxOtherAxisSize = peek$(ctx, "otherAxisSize") || 0;
-
-    for (const { itemKey, sizeObj } of itemUpdates) {
-        const index = state.indexByKey.get(itemKey)!;
-        const prevSizeKnown = state.sizesKnown.get(itemKey);
-
-        const diff = updateOneItemSize(state, itemKey, sizeObj);
-        const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
-
-        if (diff !== 0) {
-            minIndexSizeChanged = minIndexSizeChanged !== undefined ? Math.min(minIndexSizeChanged, index) : index;
-
-            // Handle scrolling adjustments
-            if (
-                state.scrollingTo?.viewPosition &&
-                maintainVisibleContentPosition &&
-                index === state.scrollingTo.index
-            ) {
-                requestAdjust(ctx, state, diff * state.scrollingTo.viewPosition);
-            }
-
-            // Check if item is in view
-            const { startBuffered, endBuffered } = state;
-            needsRecalculate ||= index >= startBuffered && index <= endBuffered;
-            if (!needsRecalculate) {
-                const numContainers = ctx.values.get("numContainers") as number;
-                for (let i = 0; i < numContainers; i++) {
-                    if (peek$(ctx, `containerItemKey${i}`) === itemKey) {
-                        needsRecalculate = true;
-                        break;
-                    }
-                }
-            }
-
-            // Handle other axis size
-            if (state.needsOtherAxisSize) {
-                const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
-                maxOtherAxisSize = Math.max(maxOtherAxisSize, otherAxisSize);
-            }
-
-            // Check if we should maintain scroll at end
-            if (prevSizeKnown !== undefined && Math.abs(prevSizeKnown - size) > 5) {
-                shouldMaintainScrollAtEnd = true;
-            }
-
-            // Call onItemSizeChanged callback
-            onItemSizeChanged?.({
-                size,
-                previous: size - diff,
-                index,
-                itemKey,
-                itemData: state.props.data[index],
-            });
-        }
-    }
-
-    // Update state with minimum changed index
-    if (minIndexSizeChanged !== undefined) {
-        state.minIndexSizeChanged =
-            state.minIndexSizeChanged !== undefined
-                ? Math.min(state.minIndexSizeChanged, minIndexSizeChanged)
-                : minIndexSizeChanged;
-    }
-
-    // Handle dev warning about estimated size
-    if (__DEV__ && suggestEstimatedItemSize && minIndexSizeChanged !== undefined) {
-        if (state.timeoutSizeMessage) clearTimeout(state.timeoutSizeMessage);
-        state.timeoutSizeMessage = setTimeout(() => {
-            state.timeoutSizeMessage = undefined;
-            const num = state.sizesKnown.size;
-            const avg = state.averageSizes[""]?.avg;
-            console.warn(
-                `[legend-list] Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`,
-            );
-        }, 1000);
-    }
-
-    const cur = peek$(ctx, "otherAxisSize");
-    if (!cur || maxOtherAxisSize > cur) {
-        set$(ctx, "otherAxisSize", maxOtherAxisSize);
-    }
-
-    const containersDidLayout = peek$(ctx, "containersDidLayout");
-
-    if (containersDidLayout || checkAllSizesKnown(state)) {
-        if (needsRecalculate) {
-            state.scrollForNextCalculateItemsInView = undefined;
-
-            calculateItemsInView(ctx, state, { doMVCP: true });
-        }
-        if (shouldMaintainScrollAtEnd) {
-            if (maintainScrollAtEnd === true || (maintainScrollAtEnd as MaintainScrollAtEndOptions).onItemLayout) {
-                doMaintainScrollAtEnd(ctx, state, false);
-            }
-        }
-    }
-}
-
-export function updateItemSize(
-    ctx: StateContext,
-    state: InternalState,
-    itemKey: string,
-    sizeObj: { width: number; height: number },
-) {
-    if (IsNewArchitecture) {
-        const { sizesKnown } = state;
-        const numContainers = ctx.values.get("numContainers") as number;
-        const changes: { itemKey: string; sizeObj: { width: number; height: number } }[] = [];
-
-        // Run through all containers and if we don't already have a known size then measure the item
-        // This is useful because when multiple items render in one frame, the first container fires a
-        // useLayoutEffect and we can measure all containers before their useLayoutEffects fire after a delay.
-        // This lets use fix any gaps/overlaps that might be visible before the useLayoutEffects fire for each container.
-        for (let i = 0; i < numContainers; i++) {
-            const containerItemKey = peek$(ctx, `containerItemKey${i}`);
-            if (itemKey === containerItemKey) {
-                // If it's this item just use the param
-                changes.push({ itemKey, sizeObj });
-            } else if (!sizesKnown.has(containerItemKey) && containerItemKey !== undefined) {
-                const containerRef = ctx.viewRefs.get(i);
-                if (containerRef?.current) {
-                    let measured: LayoutRectangle;
-                    containerRef.current.measure((x, y, width, height) => {
-                        measured = { x, y, width, height };
-                    });
-
-                    if (measured!) {
-                        changes.push({ itemKey: containerItemKey, sizeObj: measured });
-                    }
-                }
-            }
-        }
-
-        if (changes.length > 0) {
-            updateItemSizes(ctx, state, changes);
-        }
-    } else {
-        updateItemSizes(ctx, state, [{ itemKey, sizeObj }]);
-    }
-}
-
-export function updateOneItemSize(state: InternalState, itemKey: string, sizeObj: { width: number; height: number }) {
-    const {
-        sizes,
-        indexByKey,
-        sizesKnown,
-        averageSizes,
-        props: { data, horizontal },
-    } = state;
-    if (!data) return 0;
-
-    const index = indexByKey.get(itemKey)!;
-    const prevSize = getItemSize(state, itemKey, index, data as any);
-    const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
-
-    sizesKnown.set(itemKey, size);
-
-    // Update averages
-    const itemType = "";
-    let averages = averageSizes[itemType];
-    if (!averages) {
-        averages = averageSizes[itemType] = { num: 0, avg: 0 };
-    }
-    averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
-    averages.num++;
-
-    if (!prevSize || Math.abs(prevSize - size) > 0.1) {
-        sizes.set(itemKey, size);
-        return size - prevSize;
-    }
-    return 0;
-}

package/src/updateTotalSize.ts

@@ -1,44 +0,0 @@
-import { getId } from "./getId";
-import { getItemSize } from "./getItemSize";
-import { type StateContext, set$ } from "./state";
-import type { InternalState } from "./types";
-import { updateAlignItemsPaddingTop } from "./updateAlignItemsPaddingTop";
-
-export function updateTotalSize(ctx: StateContext, state: InternalState) {
-    const {
-        positions,
-        props: { data },
-    } = state;
-
-    if (data.length === 0) {
-        addTotalSize(ctx, state, null, 0);
-    } else {
-        const lastId = getId(state, data.length - 1);
-        if (lastId !== undefined) {
-            const lastPosition = positions.get(lastId);
-            if (lastPosition !== undefined) {
-                const lastSize = getItemSize(state, lastId, data.length - 1, data[data.length - 1]);
-                // TODO: This is likely incorrect for columns with rows having different heights, need to get max size of the last row
-                if (lastSize !== undefined) {
-                    const totalSize = lastPosition + lastSize;
-                    addTotalSize(ctx, state, null, totalSize);
-                }
-            }
-        }
-    }
-}
-
-function addTotalSize(ctx: StateContext, state: InternalState, key: string | null, add: number) {
-    const { alignItemsAtEnd } = state.props;
-    if (key === null) {
-        state.totalSize = add;
-    } else {
-        state.totalSize += add;
-    }
-
-    set$(ctx, "totalSize", state.totalSize);
-
-    if (alignItemsAtEnd) {
-        updateAlignItemsPaddingTop(ctx, state);
-    }
-}

package/src/useAnimatedValue.ts

@@ -1,6 +0,0 @@
-import { useRef } from "react";
-import { Animated } from "react-native";
-
-export const useAnimatedValue = (initialValue: number): Animated.Value => {
-    return useRef(new Animated.Value(initialValue)).current;
-};

package/src/useCombinedRef.ts

@@ -1,22 +0,0 @@
-import { useCallback } from "react";
-import { isFunction } from "./helpers";
-
-type RefItem<T> = ((element: T | null) => void) | React.MutableRefObject<T | null> | null | undefined;
-
-export const useCombinedRef = <T>(...refs: RefItem<T>[]) => {
-    const callback = useCallback((element: T | null) => {
-        for (const ref of refs) {
-            if (!ref) {
-                continue;
-            }
-
-            if (isFunction(ref)) {
-                ref(element);
-            } else {
-                ref.current = element;
-            }
-        }
-    }, refs);
-
-    return callback;
-};

package/src/useInit.ts

@@ -1,17 +0,0 @@
-import { useRef } from "react";
-
-const symbolFirst = Symbol();
-// A hook that runs a callback only once during the first render.
-// It should happen during render, not in useEffect, so that any setState calls during the callback
-// will trigger a re-render immediately rather than waiting for a next render.
-// See https://react.dev/reference/react/useState#storing-information-from-previous-renders
-export function useInit<T>(cb: () => T) {
-    const refValue = useRef<T | typeof symbolFirst>(symbolFirst);
-
-    // Run inline during first render only
-    if (refValue.current === symbolFirst) {
-        refValue.current = cb();
-    }
-
-    return refValue.current;
-}

package/src/useSyncLayout.tsx

@@ -1,68 +0,0 @@
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import type { LayoutChangeEvent, LayoutRectangle, View } from "react-native";
-
-export function useSyncLayoutState<T extends View = View>({
-    getValue,
-    debounce,
-    onChange: onChangeProp,
-}: {
-    getValue: (rectangle: LayoutRectangle) => number;
-    debounce?: number | undefined;
-    onChange: (rectangle: LayoutRectangle, fromLayoutEffect: boolean) => void;
-}) {
-    const debounceTimeoutRef = useRef<any>(null);
-    const [value, setValue] = useState(0);
-
-    const onChange = useCallback(
-        (rectangle: LayoutRectangle, fromLayoutEffect: boolean) => {
-            const height = getValue(rectangle);
-
-            if (debounce === undefined) {
-                setValue(height);
-            } else {
-                // Clear previous timeout if it exists
-                if (debounceTimeoutRef.current) {
-                    clearTimeout(debounceTimeoutRef.current);
-                }
-
-                // Debounce the setViewHeight call
-                debounceTimeoutRef.current = setTimeout(() => {
-                    debounceTimeoutRef.current = null;
-                    setValue(height);
-                }, debounce);
-            }
-
-            onChangeProp?.(rectangle, fromLayoutEffect);
-        },
-        [getValue, debounce],
-    );
-
-    const { onLayout, ref } = useSyncLayout<T>({ onChange });
-
-    return { value, onLayout, ref };
-}
-
-export function useSyncLayout<T extends View = View>({
-    onChange,
-}: {
-    onChange: (rectangle: LayoutRectangle, fromLayoutEffect: boolean) => void;
-}) {
-    const ref = useRef<T | null>(null);
-
-    const onLayout = useCallback(
-        (event: LayoutChangeEvent) => {
-            onChange(event.nativeEvent.layout, false);
-        },
-        [onChange],
-    );
-
-    useLayoutEffect(() => {
-        if (ref.current) {
-            ref.current.measure((x, y, width, height) => {
-                onChange({ x, y, width, height }, true);
-            });
-        }
-    }, []);
-
-    return { onLayout, ref };
-}

package/src/useValue$.ts

@@ -1,53 +0,0 @@
-import { useMemo } from "react";
-import { listen$, peek$, useStateContext } from "./state";
-import type { ListenerType } from "./state";
-import { useAnimatedValue } from "./useAnimatedValue";
-
-export function useValue$(
-    key: ListenerType,
-    params?: {
-        getValue?: (value: number) => number;
-        delay?: number | ((value: number, prevValue: number | undefined) => number);
-    },
-) {
-    const { getValue, delay } = params || {};
-    const ctx = useStateContext();
-    const animValue = useAnimatedValue((getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) ?? 0);
-    useMemo(() => {
-        let newValue: number | undefined = undefined;
-        let prevValue: number | undefined = undefined;
-        let didQueueTask = false;
-        listen$(ctx, key, (v) => {
-            newValue = getValue ? getValue(v) : v;
-
-            if (delay !== undefined) {
-                // Queue into a microtask because setting the value immediately was making the value
-                // not actually set. I think it has to do with setting during useLayoutEffect, but I'm not sure.
-                // This seems to be an optimization for setting totalSize because that can happen multiple times per frame
-                // so we skip setting the value immediately if using the microtask version.
-                const fn = () => {
-                    didQueueTask = false;
-                    if (newValue !== undefined) {
-                        animValue.setValue(newValue!);
-                    }
-                };
-                const delayValue = typeof delay === "function" ? delay(newValue!, prevValue) : delay;
-                prevValue = newValue;
-                if (!didQueueTask) {
-                    didQueueTask = true;
-                    if (delayValue === 0) {
-                        queueMicrotask(fn);
-                    } else {
-                        // We're not clearing the timeout because we want it to run in the timeout from the first change
-                        // but just not run multiple times.
-                        setTimeout(fn, delayValue);
-                    }
-                }
-            } else {
-                animValue.setValue(newValue!);
-            }
-        });
-    }, []);
-
-    return animValue;
-}