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

package/src/ContextContainer.ts

@@ -0,0 +1,145 @@
+import {
+    type Dispatch,
+    type SetStateAction,
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+import { isFunction } from "./helpers";
+import { useArr$, useSelector$, useStateContext } from "./state";
+import type { LegendListRecyclingState, ViewabilityAmountCallback, ViewabilityCallback } from "./types";
+import { useInit } from "./useInit";
+
+export interface ContextContainerType {
+    containerId: number;
+    itemKey: string;
+    index: number;
+    value: any;
+    triggerLayout: () => void;
+}
+
+export const ContextContainer = createContext<ContextContainerType>(null as any);
+
+export function useViewability(callback: ViewabilityCallback, configId?: string) {
+    const ctx = useStateContext();
+    const { containerId } = useContext(ContextContainer);
+
+    const key = containerId + (configId ?? "");
+
+    useInit(() => {
+        const value = ctx.mapViewabilityValues.get(key);
+        if (value) {
+            callback(value);
+        }
+    });
+
+    ctx.mapViewabilityCallbacks.set(key, callback);
+
+    useEffect(
+        () => () => {
+            ctx.mapViewabilityCallbacks.delete(key);
+        },
+        [],
+    );
+}
+
+export function useViewabilityAmount(callback: ViewabilityAmountCallback) {
+    const ctx = useStateContext();
+    const { containerId } = useContext(ContextContainer);
+
+    useInit(() => {
+        const value = ctx.mapViewabilityAmountValues.get(containerId);
+        if (value) {
+            callback(value);
+        }
+    });
+
+    ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
+
+    useEffect(
+        () => () => {
+            ctx.mapViewabilityAmountCallbacks.delete(containerId);
+        },
+        [],
+    );
+}
+
+export function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)) {
+    const { index, value } = useContext(ContextContainer);
+    const prevValues = useRef<{ prevIndex: number | undefined; prevItem: any }>({
+        prevIndex: undefined,
+        prevItem: undefined,
+    });
+
+    useEffect(() => {
+        let ret: void | (() => void) = undefined;
+        // Only run effect if there's a previous value
+        if (prevValues.current.prevIndex !== undefined && prevValues.current.prevItem !== undefined) {
+            ret = effect({
+                index,
+                item: value,
+                prevIndex: prevValues.current.prevIndex,
+                prevItem: prevValues.current.prevItem,
+            });
+        }
+
+        // Update refs for next render
+        prevValues.current = {
+            prevIndex: index,
+            prevItem: value,
+        };
+
+        return ret;
+    }, [index, value]);
+}
+
+export function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT) {
+    const { index, value, itemKey, triggerLayout } = useContext(ContextContainer);
+    const refState = useRef<{ itemKey: string | null; value: ItemT | null }>({
+        itemKey: null,
+        value: null,
+    });
+    const [_, setRenderNum] = useState(0);
+    const state = refState.current;
+
+    if (state.itemKey !== itemKey) {
+        state.itemKey = itemKey;
+        // Reset local state in ref
+        state.value = isFunction(valueOrFun)
+            ? valueOrFun({
+                  index,
+                  item: value,
+                  prevIndex: undefined,
+                  prevItem: undefined,
+              })
+            : valueOrFun;
+    }
+
+    const setState: Dispatch<SetStateAction<ItemT>> = useCallback(
+        (newState: SetStateAction<ItemT>) => {
+            // Update local state in ref
+            state.value = isFunction(newState) ? (newState as (prevState: ItemT) => ItemT)(state.value!) : newState;
+            // Trigger item to re-render
+            setRenderNum((v) => v + 1);
+            // Trigger container to re-render to update item size
+            triggerLayout();
+        },
+        [triggerLayout, state],
+    );
+
+    return [state.value, setState] as const;
+}
+
+export function useIsLastItem(): boolean {
+    const { itemKey } = useContext(ContextContainer);
+    const isLast = useSelector$("lastItemKeys", (lastItemKeys) => lastItemKeys?.includes(itemKey) || false);
+    return isLast;
+}
+
+export function useListScrollSize(): { width: number; height: number } {
+    const [scrollSize] = useArr$(["scrollSize"]);
+    return scrollSize;
+}

package/src/DebugView.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { useEffect, useReducer } from "react";
+import { Text, View } from "react-native";
+import { getContentSize, useArr$, useStateContext } from "./state";
+import type { InternalState } from "./types";
+
+const DebugRow = ({ children }: React.PropsWithChildren) => {
+    return (
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>{children}</View>
+    );
+};
+
+export const DebugView = React.memo(function DebugView({ state }: { state: InternalState }) {
+    const ctx = useStateContext();
+
+    const [totalSize = 0, scrollAdjust = 0, rawScroll = 0, scroll = 0, numContainers = 0, numContainersPooled = 0] =
+        useArr$([
+            "totalSize",
+            "scrollAdjust",
+            "debugRawScroll",
+            "debugComputedScroll",
+            "numContainers",
+            "numContainersPooled",
+        ]);
+
+    const contentSize = getContentSize(ctx);
+    const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+    useInterval(() => {
+        forceUpdate();
+    }, 100);
+
+    return (
+        <View
+            style={{
+                position: "absolute",
+                top: 0,
+                right: 0,
+                paddingLeft: 4,
+                paddingBottom: 4,
+                // height: 100,
+                backgroundColor: "#FFFFFFCC",
+                padding: 4,
+                borderRadius: 4,
+            }}
+            pointerEvents="none"
+        >
+            <DebugRow>
+                <Text>TotalSize:</Text>
+                <Text>{totalSize.toFixed(2)}</Text>
+            </DebugRow>
+            <DebugRow>
+                <Text>ContentSize:</Text>
+                <Text>{contentSize.toFixed(2)}</Text>
+            </DebugRow>
+            <DebugRow>
+                <Text>At end:</Text>
+                <Text>{String(state.isAtEnd)}</Text>
+            </DebugRow>
+            <Text />
+            <DebugRow>
+                <Text>ScrollAdjust:</Text>
+                <Text>{scrollAdjust.toFixed(2)}</Text>
+            </DebugRow>
+            <Text />
+            <DebugRow>
+                <Text>RawScroll: </Text>
+                <Text>{rawScroll.toFixed(2)}</Text>
+            </DebugRow>
+            <DebugRow>
+                <Text>ComputedScroll: </Text>
+                <Text>{scroll.toFixed(2)}</Text>
+            </DebugRow>
+        </View>
+    );
+});
+
+function useInterval(callback: () => void, delay: number) {
+    useEffect(() => {
+        const interval = setInterval(callback, delay);
+        return () => clearInterval(interval);
+    }, [delay]);
+}

package/src/LazyLegendList.tsx

@@ -0,0 +1,41 @@
+import type { AnimatedLegendList } from "@legendapp/list/animated";
+import type { AnimatedLegendList as ReanimatedLegendList } from "@legendapp/list/reanimated";
+import * as React from "react";
+import { type ForwardedRef, forwardRef } from "react";
+import { LegendList as LegendListBase } from "./LegendList";
+import { isArray } from "./helpers";
+import type { LegendListProps, LegendListRef, LegendListRenderItemProps } from "./types";
+
+// 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 interface LazyLegendListProps<ItemT, ListT>
+    extends Omit<LegendListProps<ItemT>, "data" | "keyExtractor" | "renderItem"> {
+    children?: React.ReactNode | undefined;
+    LegendList?: ListT;
+}
+
+const renderItem = ({ item }: LegendListRenderItemProps<any>) => item;
+
+export const LazyLegendList = typedForwardRef(function LazyLegendList<
+    ItemT,
+    ListT extends
+        | typeof LegendListBase
+        | typeof AnimatedLegendList
+        | typeof ReanimatedLegendList = typeof LegendListBase,
+>(props: LazyLegendListProps<ItemT, ListT>, forwardedRef: ForwardedRef<LegendListRef>) {
+    const { LegendList: LegendListProp, children, ...rest } = props;
+
+    const LegendListComponent = LegendListProp ?? LegendListBase;
+
+    const data = (isArray(children) ? children : React.Children.toArray(children)).flat(1);
+
+    return (
+        // @ts-expect-error TODO: Fix this type
+        <LegendListComponent {...rest} data={data} renderItem={renderItem} ref={forwardedRef} />
+    );
+});

package/src/LeanView.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Platform, View, type ViewProps } from "react-native";
+
+// Thanks to @hirbod
+// https://gist.github.com/hirbod/03d487f40b4c091d2c56ebfb17dba7ed
+
+const LeanViewComponent = React.forwardRef<View, ViewProps>((props, ref) => {
+    return React.createElement("RCTView", { ...props, ref });
+});
+
+LeanViewComponent.displayName = "RCTView";
+
+// LeanView doesn't work well on web, and not sure how it works on other platforms,
+// so just use it on iOS and Android for now. Could expand this later if we know it's safe
+// for specific other platforms.
+const LeanView = Platform.OS === "android" || Platform.OS === "ios" ? LeanViewComponent : View;
+
+export { LeanView };