@swan-io/lake 8.17.1 → 8.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.17.1",
+  "version": "8.18.0",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/ScrollView.d.ts

@@ -10,6 +10,7 @@ export type ScrollViewRef = {
 export type ScrollViewProps = ViewProps & {
     contentContainerStyle?: StyleProp<ViewStyle>;
     horizontal?: boolean;
+    both?: boolean;
     onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     scrollEventThrottle?: number;
     showsScrollIndicators?: boolean;
@@ -17,6 +18,7 @@ export type ScrollViewProps = ViewProps & {
 export declare const ScrollView: import("react").ForwardRefExoticComponent<ViewProps & {
     contentContainerStyle?: StyleProp<ViewStyle>;
     horizontal?: boolean;
+    both?: boolean;
     onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     scrollEventThrottle?: number;
     showsScrollIndicators?: boolean;

package/src/components/ScrollView.js

@@ -16,6 +16,11 @@ const styles = StyleSheet.create({
         overflowX: "auto",
         overflowY: "hidden",
     },
+    both: {
+        flexDirection: "column",
+        overflowX: "auto",
+        overflowY: "auto",
+    },
     contentHorizontal: {
         flexDirection: "row",
     },
@@ -55,7 +60,7 @@ const normalizeScrollEvent = (event) => {
     };
 };
 const shouldEmitScrollEvent = (state, eventThrottle) => !state.scrolling || (eventThrottle > 0 && Date.now() - state.lastTick >= eventThrottle);
-export const ScrollView = forwardRef(({ children, contentContainerStyle, horizontal = false, onScroll, scrollEventThrottle = 16, showsScrollIndicators = true, style, ...viewProps }, forwardedRef) => {
+export const ScrollView = forwardRef(({ children, contentContainerStyle, horizontal = false, both = false, onScroll, scrollEventThrottle = 16, showsScrollIndicators = true, style, ...viewProps }, forwardedRef) => {
     const innerRef = useRef(null);
     const stateRef = useRef({ lastTick: 0, scrolling: false });
     const timeoutRef = useRef(null);
@@ -95,6 +100,7 @@ export const ScrollView = forwardRef(({ children, contentContainerStyle, horizon
             styles.base,
             style,
             horizontal && styles.horizontal,
+            both && styles.both,
             !showsScrollIndicators && styles.hideScrollbars,
         ], children: _jsx(View, { style: [horizontal && styles.contentHorizontal, contentContainerStyle], children: children }) }));
 });

package/src/components/VirtualizedList.d.ts

@@ -0,0 +1,55 @@
+import { ReactElement, ReactNode } from "react";
+export type ColumnTitleConfig<ExtraInfo> = {
+    title: string;
+    extraInfo: ExtraInfo;
+    id: string;
+};
+export type ColumnCellConfig<T, ExtraInfo> = {
+    columnId: string;
+    item: T;
+    index: number;
+    extraInfo: ExtraInfo;
+    isHovered: boolean;
+};
+export type ColumnConfig<T, ExtraInfo> = {
+    id: string;
+    width: number;
+    title: string;
+    renderTitle: (props: ColumnTitleConfig<ExtraInfo>) => ReactNode;
+    renderCell: (props: ColumnCellConfig<T, ExtraInfo>) => ReactNode;
+};
+export type LinkConfig<T, ExtraInfo> = {
+    item: T;
+    index: number;
+    extraInfo: ExtraInfo;
+};
+export type VirtualizedListProps<T, ExtraInfo> = {
+    variant: "default" | "accented";
+    data: T[];
+    keyExtractor: (item: T, index: number) => string;
+    highlightedRowId?: string;
+    headerHeight: number;
+    rowHeight: number;
+    extraInfo: ExtraInfo;
+    stickedToStartColumns?: ColumnConfig<T, ExtraInfo>[];
+    columns: ColumnConfig<T, ExtraInfo>[];
+    stickedToEndColumns?: ColumnConfig<T, ExtraInfo>[];
+    renderThreshold?: number;
+    onEndReached?: () => void;
+    onEndReachedThreshold?: number;
+    getRowLink?: (config: LinkConfig<T, ExtraInfo>) => ReactElement | undefined;
+    renderEmptyList?: () => ReactNode;
+    loading?: {
+        isLoading: boolean;
+        count: number;
+    };
+};
+export declare const VirtualizedList: <T, ExtraInfo>({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold, onEndReached, onEndReachedThreshold, loading, extraInfo, keyExtractor, }: VirtualizedListProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
+type VirtualizedListPlaceholderProps = {
+    count: number;
+    rowHeight: number;
+    groupHeaderHeight?: number;
+    headerHeight?: number;
+};
+export declare const VirtualizedListPlaceholder: ({ count, rowHeight, groupHeaderHeight, headerHeight, }: VirtualizedListPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/VirtualizedList.js

@@ -0,0 +1,426 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Option } from "@swan-io/boxed";
+import { cloneElement, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { StyleSheet, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
+import { backgroundColor as backgroundColorVariants, colors, spacings } from "../constants/design";
+import { useHover } from "../hooks/useHover";
+import { ScrollView } from "./ScrollView";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    container: {
+        ...commonStyles.fill,
+        alignSelf: "stretch",
+    },
+    headerRow: {
+        position: "sticky",
+        top: 0,
+        flexDirection: "row",
+        alignItems: "stretch",
+        zIndex: 2,
+    },
+    cellsContainer: {
+        flexDirection: "row",
+        transform: "translateZ(0)",
+    },
+    stickedToStartColumnGroup: {
+        position: "sticky",
+        left: 0,
+        zIndex: 1,
+    },
+    stickedToEndColumnGroup: {
+        position: "sticky",
+        right: 0,
+        zIndex: 1,
+    },
+    rowsContainer: {
+        position: "relative",
+    },
+    row: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        flexDirection: "row",
+        alignItems: "stretch",
+    },
+    headerCell: {
+        display: "flex",
+        flexDirection: "row",
+        flexGrow: 1,
+        alignItems: "center",
+    },
+    cell: {
+        display: "flex",
+        flexDirection: "row",
+        flexGrow: 1,
+        alignItems: "stretch",
+        boxShadow: `inset 0 -1px ${colors.gray[100]}`,
+    },
+    shadowsLayerContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "none",
+        zIndex: 4,
+    },
+    shadowsLayer: {
+        position: "sticky",
+        top: 12,
+        flexDirection: "row",
+        alignItems: "stretch",
+    },
+    startColumnsShadow: {
+        position: "sticky",
+        left: 0,
+        top: 0,
+        boxShadow: "15px 0 10px -12px rgba(0, 0, 0, 0.1)",
+        transition: "100ms ease-in-out opacity",
+    },
+    endColumnsShadow: {
+        position: "sticky",
+        right: 0,
+        top: 0,
+        boxShadow: "-15px 0 10px -12px rgba(0, 0, 0, 0.1)",
+        transition: "100ms ease-in-out opacity",
+    },
+    scrollTracker: {
+        pointerEvents: "none",
+        position: "absolute",
+        left: 0,
+        bottom: 0,
+        right: 0,
+    },
+    placeholderRowContainer: {
+        position: "absolute",
+        alignItems: "flex-start",
+        top: 0,
+        left: 0,
+        right: 0,
+        animationKeyframes: {
+            "50%": {
+                opacity: 0.6,
+            },
+        },
+        animationDuration: "2000ms",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+        boxShadow: `inset 0 -1px ${colors.gray[100]}`,
+    },
+    placeholderRowContents: {
+        position: "sticky",
+        width: "50%",
+        left: 0,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        flexGrow: 1,
+        paddingHorizontal: spacings[20],
+    },
+    loadingPlaceholder: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+    },
+    placeholderRow: {
+        height: 14,
+        width: "30%",
+        backgroundColor: colors.gray[100],
+    },
+    placeholderRowEnd: {
+        paddingHorizontal: spacings[20],
+        position: "sticky",
+        right: 0,
+        flexGrow: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+    },
+    smallPlaceholderRow: {
+        width: "10%",
+    },
+});
+export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold = 1000, onEndReached, onEndReachedThreshold = 200, loading, extraInfo, keyExtractor, }) => {
+    // Used for unique IDs generation (usefull for header IDs and cells aria-describedBy pointing to them)
+    const viewId = useId();
+    const scrollViewRef = useRef(null);
+    const scrollTrackerRef = useRef(null);
+    // Theoretical height of all actual data if rendered
+    const fullDataHeight = rowHeight * data.length;
+    const loadingDataPlaceholderHeight = Option.fromNullable(loading)
+        .flatMap(({ isLoading, count }) => (isLoading ? Option.Some(rowHeight * count) : Option.None()))
+        .getOr(0);
+    const containerContainerHeight = headerHeight + fullDataHeight + loadingDataPlaceholderHeight;
+    const stickedToStartColumnsWidth = useMemo(() => Option.fromNullable(stickedToStartColumns)
+        .map(columns => columns.reduce((acc, column) => acc + column.width, 0))
+        .getOr(0), [stickedToStartColumns]);
+    const centerColumnsWidth = useMemo(() => columns.reduce((acc, column) => acc + column.width, 0), [columns]);
+    const stickedToEndColumnsWidth = useMemo(() => Option.fromNullable(stickedToEndColumns)
+        .map(columns => columns.reduce((acc, column) => acc + column.width, 0))
+        .getOr(0), [stickedToEndColumns]);
+    const contentContainerWidth = stickedToStartColumnsWidth + centerColumnsWidth + stickedToEndColumnsWidth;
+    const backgroundColor = backgroundColorVariants[variant];
+    // We store the `startIndex` and `endIndex` rather than the scroll position
+    // so that it triggers way less re-renders
+    const [rangeToRender, setRangeToRender] = useState(undefined);
+    const [clientHeight, setClientHeight] = useState(undefined);
+    const [horizontalScrollPosition, setHasHorizontalScrollPosition] = useState(undefined);
+    const rowsToRender = useMemo(() => {
+        return Option.fromNullable(rangeToRender).map(({ startIndex, endIndex }) => ({
+            startIndex,
+            endIndex,
+            data: data.slice(startIndex, endIndex),
+        }));
+    }, [data, rangeToRender]);
+    useLayoutEffect(() => {
+        const element = Option.fromNullable(scrollViewRef.current).flatMap(ref => Option.fromNullable(ref.element));
+        setRangeToRender(previousRangeToRender => element
+            .map(scrollView => {
+            const startIndex = Math.max(0, Math.floor((scrollView.scrollTop - renderThreshold) / rowHeight));
+            const endIndex = Math.min(data.length, startIndex + Math.ceil((scrollView.scrollHeight + renderThreshold * 2) / rowHeight));
+            if ((previousRangeToRender === null || previousRangeToRender === void 0 ? void 0 : previousRangeToRender.startIndex) === startIndex &&
+                previousRangeToRender.endIndex === endIndex) {
+                return previousRangeToRender;
+            }
+            return { startIndex, endIndex };
+        })
+            .toUndefined());
+        setClientHeight(element.map(scrollView => scrollView.clientHeight).toUndefined());
+        setHasHorizontalScrollPosition(element
+            .map(scrollView => scrollView.scrollWidth === scrollView.clientWidth
+            ? "NoScroll"
+            : scrollView.scrollLeft <= 0
+                ? "Start"
+                : scrollView.scrollLeft >= scrollView.scrollWidth - scrollView.clientWidth
+                    ? "End"
+                    : "Middle")
+            .toUndefined());
+    }, [data, renderThreshold, rowHeight]);
+    const scrollTimeoutRef = useRef(undefined);
+    const rowsContainerRef = useRef(null);
+    const onScroll = useCallback(() => {
+        const element = Option.fromNullable(scrollViewRef.current).flatMap(ref => Option.fromNullable(ref.element));
+        // Disable interactions in cells during scroll, avoids useless
+        // re-renders
+        if (scrollTimeoutRef.current != null) {
+            clearTimeout(scrollTimeoutRef.current);
+        }
+        if (rowsContainerRef.current instanceof HTMLElement) {
+            rowsContainerRef.current.style.pointerEvents = "none";
+        }
+        scrollTimeoutRef.current = window.setTimeout(() => {
+            if (rowsContainerRef.current instanceof HTMLElement) {
+                rowsContainerRef.current.style.pointerEvents = "auto";
+            }
+        }, 100);
+        setRangeToRender(previousRangeToRender => element
+            .map(scrollView => {
+            const startIndex = Math.max(0, Math.floor((scrollView.scrollTop - renderThreshold) / rowHeight));
+            const endIndex = Math.min(data.length, startIndex + Math.ceil((scrollView.scrollHeight + renderThreshold * 2) / rowHeight));
+            if ((previousRangeToRender === null || previousRangeToRender === void 0 ? void 0 : previousRangeToRender.startIndex) === startIndex &&
+                previousRangeToRender.endIndex === endIndex) {
+                return previousRangeToRender;
+            }
+            return { startIndex, endIndex };
+        })
+            .toUndefined());
+        setHasHorizontalScrollPosition(element
+            .map(scrollView => scrollView.scrollWidth === scrollView.clientWidth
+            ? "NoScroll"
+            : scrollView.scrollLeft <= 0
+                ? "Start"
+                : scrollView.scrollLeft >= scrollView.scrollWidth - scrollView.clientWidth
+                    ? "End"
+                    : "Middle")
+            .toUndefined());
+    }, [data, renderThreshold, rowHeight]);
+    // tracks if the threshold to initiate the next data load is reached
+    useEffect(() => {
+        const scrollTracker = scrollTrackerRef.current;
+        if (scrollTracker != null) {
+            const scrollTrackerElement = scrollTracker;
+            const intersectionObserver = new IntersectionObserver(entries => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        if (onEndReached != null) {
+                            onEndReached();
+                        }
+                    }
+                });
+            });
+            intersectionObserver.observe(scrollTrackerElement);
+            return () => intersectionObserver.unobserve(scrollTrackerElement);
+        }
+    }, [onEndReached, data.length]);
+    const header = useMemo(() => {
+        return (_jsxs(View, { style: [styles.headerRow, { height: headerHeight }], children: [Option.fromNullable(stickedToStartColumns)
+                    .map(columns => (_jsx(View, { style: [
+                        styles.cellsContainer,
+                        styles.stickedToStartColumnGroup,
+                        { width: stickedToStartColumnsWidth, backgroundColor },
+                    ], children: columns.map(({ id, width, title, renderTitle }) => {
+                        const columnId = `${viewId}_${id}`;
+                        return (_jsx(View, { style: [styles.headerCell, { width }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                    }) })))
+                    .toNull(), _jsx(View, { style: [styles.cellsContainer, { width: centerColumnsWidth, backgroundColor }], children: columns.map(({ id, width, title, renderTitle }) => {
+                        const columnId = `${viewId}_${id}`;
+                        return (_jsx(View, { style: [styles.headerCell, { width }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                    }) }), Option.fromNullable(stickedToEndColumns)
+                    .map(columns => (_jsx(View, { style: [
+                        styles.cellsContainer,
+                        styles.stickedToEndColumnGroup,
+                        { width: stickedToEndColumnsWidth, backgroundColor },
+                    ], children: columns.map(({ id, width, title, renderTitle }) => {
+                        const columnId = `${viewId}_${id}`;
+                        return (_jsx(View, { style: [styles.headerCell, { width }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                    }) })))
+                    .toNull()] }));
+    }, [
+        backgroundColor,
+        stickedToStartColumnsWidth,
+        centerColumnsWidth,
+        stickedToEndColumnsWidth,
+        headerHeight,
+        extraInfo,
+        stickedToStartColumns,
+        columns,
+        stickedToEndColumns,
+        viewId,
+    ]);
+    const startColumnShadow = useMemo(() => {
+        if (stickedToStartColumnsWidth === 0) {
+            return Option.None();
+        }
+        return Option.Some(_jsx(View, { style: [
+                styles.startColumnsShadow,
+                {
+                    width: stickedToStartColumnsWidth,
+                    opacity: Option.fromNullable(horizontalScrollPosition)
+                        .map(value => (value === "Start" || value === "NoScroll" ? 0 : 1))
+                        .getOr(0),
+                },
+            ] }));
+    }, [stickedToStartColumnsWidth, horizontalScrollPosition]);
+    const endColumnShadow = useMemo(() => {
+        if (stickedToEndColumnsWidth === 0) {
+            return Option.None();
+        }
+        return Option.Some(_jsx(View, { style: [
+                styles.endColumnsShadow,
+                {
+                    width: stickedToEndColumnsWidth,
+                    opacity: Option.fromNullable(horizontalScrollPosition)
+                        .map(value => (value === "End" || value === "NoScroll" ? 0 : 1))
+                        .getOr(0),
+                },
+            ] }));
+    }, [stickedToEndColumnsWidth, horizontalScrollPosition]);
+    return (_jsxs(ScrollView, { ref: scrollViewRef, both: true, style: styles.container, onScroll: onScroll, scrollEventThrottle: 32, contentContainerStyle: {
+            height: containerContainerHeight,
+            width: contentContainerWidth,
+        }, children: [header, rowsToRender
+                .map(({ startIndex, endIndex, data }) => (_jsxs(View, { style: styles.rowsContainer, ref: rowsContainerRef, children: [data.map((item, index) => (_jsx(VirtualizedRow, { viewId: viewId, item: item, rowHeight: rowHeight, absoluteIndex: startIndex + index, variant: variant, stickedToStartColumnsWidth: stickedToStartColumnsWidth, centerColumnsWidth: centerColumnsWidth, stickedToEndColumnsWidth: stickedToEndColumnsWidth, stickedToStartColumns: stickedToStartColumns, columns: columns, stickedToEndColumns: stickedToEndColumns, extraInfo: extraInfo }, keyExtractor(item, startIndex + index)))), Option.fromNullable(loading)
+                        .flatMap(({ isLoading, count }) => (isLoading ? Option.Some(count) : Option.None()))
+                        .map(count => (_jsx(View, { "aria-busy": true, style: [
+                            styles.loadingPlaceholder,
+                            {
+                                top: endIndex * rowHeight,
+                            },
+                        ], children: _jsx(VirtualizedListPlaceholder, { count: count, headerHeight: 0, rowHeight: rowHeight }) })))
+                        .toNull()] })))
+                .toNull(), Option.fromNullable(clientHeight)
+                .map(clientHeight => (_jsx(View, { style: styles.shadowsLayerContainer, children: _jsxs(View, { style: [styles.shadowsLayer, { height: clientHeight - 12 }], children: [startColumnShadow.toNull(), _jsx(View, { style: { width: centerColumnsWidth } }), endColumnShadow.toNull()] }) })))
+                .toNull(), _jsx(View, { style: [styles.scrollTracker, { height: onEndReachedThreshold }], ref: scrollTrackerRef })] }));
+};
+const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedToStartColumnsWidth, centerColumnsWidth, stickedToEndColumnsWidth, stickedToStartColumns, columns, stickedToEndColumns, extraInfo, item, getRowLink, }) => {
+    var _a;
+    const [isHovered, setIsHovered] = useState(false);
+    const elementRef = useRef(null);
+    useHover(elementRef, {
+        onHoverStart: () => setIsHovered(true),
+        onHoverEnd: () => setIsHovered(false),
+    });
+    const rootElement = getRowLink != null ? (((_a = getRowLink({ item, index: absoluteIndex, extraInfo })) !== null && _a !== void 0 ? _a : _jsx(View, {}))) : (_jsx(View, {}));
+    return cloneElement(rootElement, {
+        ref: elementRef,
+        style: [
+            styles.row,
+            isHovered && {
+                backgroundColor: variant === "accented"
+                    ? backgroundColorVariants.default
+                    : backgroundColorVariants.accented,
+            },
+            {
+                backgroundColor: backgroundColorVariants[variant],
+                top: absoluteIndex * rowHeight,
+                height: rowHeight,
+            },
+        ],
+        children: (_jsxs(_Fragment, { children: [Option.fromNullable(stickedToStartColumns)
+                    .map(columns => (_jsx(View, { style: [
+                        styles.cellsContainer,
+                        styles.stickedToStartColumnGroup,
+                        {
+                            width: stickedToStartColumnsWidth,
+                            backgroundColor: isHovered
+                                ? backgroundColorVariants[variant === "accented" ? "default" : "accented"]
+                                : backgroundColorVariants[variant],
+                        },
+                    ], children: columns.map(({ id, width, renderCell }) => {
+                        const columnId = `${viewId}_${id}`;
+                        return (_jsx(View, { style: [styles.cell, { width }], "aria-describedby": columnId, children: renderCell({
+                                columnId,
+                                item,
+                                index: absoluteIndex,
+                                extraInfo,
+                                isHovered: false,
+                            }) }, columnId));
+                    }) })))
+                    .toNull(), _jsx(View, { style: [
+                        styles.cellsContainer,
+                        {
+                            width: centerColumnsWidth,
+                            backgroundColor: isHovered
+                                ? backgroundColorVariants[variant === "accented" ? "default" : "accented"]
+                                : backgroundColorVariants[variant],
+                        },
+                    ], children: columns.map(({ id, width, renderCell }) => {
+                        const columnId = `${viewId}_${id}`;
+                        return (_jsx(View, { style: [styles.cell, { width }], "aria-describedby": columnId, children: renderCell({
+                                columnId,
+                                item,
+                                index: absoluteIndex,
+                                extraInfo,
+                                isHovered: false,
+                            }) }, columnId));
+                    }) }), Option.fromNullable(stickedToEndColumns)
+                    .map(columns => (_jsx(View, { style: [
+                        styles.cellsContainer,
+                        styles.stickedToEndColumnGroup,
+                        {
+                            width: stickedToEndColumnsWidth,
+                            backgroundColor: isHovered
+                                ? backgroundColorVariants[variant === "accented" ? "default" : "accented"]
+                                : backgroundColorVariants[variant],
+                        },
+                    ], children: columns.map(({ id, width, renderCell }) => {
+                        const columnId = `${viewId}_${id}`;
+                        return (_jsx(View, { style: [styles.cell, { width }], "aria-describedby": columnId, children: renderCell({
+                                columnId,
+                                item,
+                                index: absoluteIndex,
+                                extraInfo,
+                                isHovered: false,
+                            }) }, columnId));
+                    }) })))
+                    .toNull()] })),
+    });
+};
+const VirtualizedRow = memo(RawVirtualizedRow);
+export const VirtualizedListPlaceholder = ({ count, rowHeight, groupHeaderHeight, headerHeight, }) => {
+    return (_jsxs(View, { style: styles.container, children: [headerHeight != null ? _jsx(View, { style: { height: headerHeight } }) : null, groupHeaderHeight != groupHeaderHeight ? _jsx(View, { style: { height: headerHeight } }) : null, _jsx(View, { children: Array.from({ length: count }, (_, index) => {
+                    const top = index * rowHeight;
+                    return (_jsx(View, { style: [styles.placeholderRowContainer, { height: rowHeight, top }], children: _jsxs(View, { style: styles.placeholderRowContents, children: [_jsx(View, { style: styles.placeholderRow }), _jsx(Space, { width: 32 }), _jsx(View, { style: [styles.placeholderRow, styles.smallPlaceholderRow] }), _jsx(Space, { width: 32 }), _jsx(View, { style: styles.placeholderRowEnd, children: _jsx(View, { style: [styles.placeholderRow, styles.smallPlaceholderRow] }) })] }) }, String(index)));
+                }) })] }));
+};