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

package/src/updateAllPositions.ts

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,203 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,53 @@
+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;
+}