@rudra-studio/rudra-layout 1.0.18 → 1.0.19

package/components/VirtualList/index.d.ts

@@ -0,0 +1,94 @@
+import { default as React } from 'react';
+export interface VirtualListRenderContext {
+    item: any;
+    index: number;
+}
+export interface VirtualListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className"> {
+    /**
+     * List data.
+     *
+     * @type|json
+     */
+    items?: any[];
+    /**
+     * Item renderer.
+     *
+     * @nodeFunction
+     */
+    children?: React.ReactNode | ((context: VirtualListRenderContext) => React.ReactNode);
+    /**
+     * Height of one item in pixels.
+     */
+    itemHeight?: number;
+    /**
+     * Visible list height.
+     */
+    height?: number;
+    /**
+     * Additional items rendered above
+     * and below the viewport.
+     */
+    overscan?: number;
+    /**
+     * Gap between rows.
+     */
+    gap?: number;
+    /**
+     * Index to scroll to.
+     *
+     * Updating this prop scrolls
+     * the list to that item.
+     */
+    scrollToIndex?: number;
+    /**
+     * @select|start|center|end
+     */
+    scrollAlignment?: "start" | "center" | "end";
+    /**
+     * Initial scroll index.
+     */
+    initialScrollIndex?: number;
+    /**
+     * Trigger onEndReached when this many
+     * items remain below the visible range.
+     */
+    endReachedThreshold?: number;
+    /**
+     * Empty builder message.
+     */
+    emptyText?: string;
+    /**
+     * @type|class
+     */
+    className?: string;
+    /**
+     * @type|class
+     */
+    itemClassName?: string;
+    /**
+     * @type|class
+     */
+    contentClassName?: string;
+    /**
+     * @type|complex
+     * @schema {"type":"object"}
+     */
+    customAttributes?: Record<string, string>;
+    /**
+     * @type|function
+     */
+    onScrollChange?: (scrollTop: number) => void;
+    /**
+     * @type|function
+     */
+    onVisibleRangeChange?: (startIndex: number, endIndex: number) => void;
+    /**
+     * @type|function
+     */
+    onEndReached?: () => void;
+    /**
+     * @type|function
+     */
+    onItemClick?: (item: any, index: number) => void;
+}
+export default function VirtualList({ items, children, itemHeight, height, overscan, gap, scrollToIndex, scrollAlignment, initialScrollIndex, endReachedThreshold, emptyText, className, itemClassName, contentClassName, customAttributes, onScrollChange, onVisibleRangeChange, onEndReached, onItemClick, style, ...props }: VirtualListProps): import("react/jsx-runtime").JSX.Element;

package/components/VirtualList/index.js

@@ -0,0 +1,127 @@
+import { useEffect as e, useMemo as t, useRef as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/VirtualList/index.tsx
+function a(e, t, n) {
+	return Math.max(t, Math.min(n, e));
+}
+function o({ items: o = [], children: s, itemHeight: c = 56, height: l = 400, overscan: u = 3, gap: d = 0, scrollToIndex: f, scrollAlignment: p = "start", initialScrollIndex: m = 0, endReachedThreshold: h = 3, emptyText: g = "Add list items", className: _ = "w-full", itemClassName: v = "", contentClassName: y = "", customAttributes: b = {}, onScrollChange: x, onVisibleRangeChange: S, onEndReached: C, onItemClick: w, style: T, ...E }) {
+	let D = n(null), O = n(!1), [k, A] = r(0), j = Math.max(1, c), M = Math.max(0, d), N = j + M, P = o.length > 0 ? o.length * N - M : 0, F = Math.max(1, Math.ceil(l / N)), I = Math.floor(k / N), L = a(I - Math.max(0, u), 0, Math.max(0, o.length - 1)), R = a(I + F + Math.max(0, u), 0, Math.max(0, o.length - 1)), z = t(() => {
+		if (o.length === 0) return [];
+		let e = [];
+		for (let t = L; t <= R; t++) e.push({
+			item: o[t],
+			index: t
+		});
+		return e;
+	}, [
+		o,
+		L,
+		R
+	]), B = (e) => {
+		let t = a(e, 0, Math.max(0, o.length - 1)) * N;
+		return p === "center" ? Math.max(0, t - l / 2 + j / 2) : p === "end" ? Math.max(0, t - l + j) : t;
+	}, V = (e, t = "auto") => {
+		let n = D.current;
+		!n || o.length === 0 || n.scrollTo({
+			top: B(e),
+			behavior: t
+		});
+	};
+	return e(() => {
+		if (o.length === 0 || m <= 0) return;
+		let e = requestAnimationFrame(() => {
+			V(m);
+		});
+		return () => {
+			cancelAnimationFrame(e);
+		};
+	}, []), e(() => {
+		f !== void 0 && V(f, "smooth");
+	}, [
+		f,
+		o.length,
+		N,
+		l,
+		p
+	]), e(() => {
+		if (o.length === 0) return;
+		let e = a(I, 0, o.length - 1), t = a(I + F - 1, 0, o.length - 1);
+		S?.(e, t), o.length - 1 - t <= Math.max(0, h) ? O.current || (O.current = !0, C?.()) : O.current = !1;
+	}, [
+		I,
+		F,
+		o.length,
+		h
+	]), o.length === 0 ? /* @__PURE__ */ i("div", {
+		className: _,
+		...b,
+		...E,
+		style: {
+			width: "100%",
+			height: l,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: 16,
+			border: "1px dashed #d1d5db",
+			borderRadius: 8,
+			color: "#9ca3af",
+			fontSize: 13,
+			boxSizing: "border-box",
+			...T
+		},
+		children: typeof s == "function" ? s({
+			item: null,
+			index: 0
+		}) : g
+	}) : /* @__PURE__ */ i("div", {
+		ref: D,
+		className: _,
+		...b,
+		...E,
+		onScroll: (e) => {
+			let t = e.currentTarget.scrollTop;
+			A(t), x?.(t);
+		},
+		style: {
+			position: "relative",
+			width: "100%",
+			height: l,
+			overflowY: "auto",
+			overflowX: "hidden",
+			WebkitOverflowScrolling: "touch",
+			boxSizing: "border-box",
+			...T
+		},
+		children: /* @__PURE__ */ i("div", {
+			className: y,
+			style: {
+				position: "relative",
+				width: "100%",
+				height: P,
+				minHeight: P,
+				boxSizing: "border-box"
+			},
+			children: z.map(({ item: e, index: t }) => /* @__PURE__ */ i("div", {
+				className: v,
+				"data-index": t,
+				onClick: () => w?.(e, t),
+				style: {
+					position: "absolute",
+					top: t * N,
+					left: 0,
+					right: 0,
+					height: j,
+					overflow: "hidden",
+					boxSizing: "border-box"
+				},
+				children: typeof s == "function" ? s({
+					item: e,
+					index: t
+				}) : s
+			}, e?.id ?? t))
+		})
+	});
+}
+//#endregion
+export { o as default };

package/index.d.ts

@@ -26,3 +26,5 @@ export type { ComplexGridProps } from './components/StructuredGrid';
 export { default as ComplexGrid } from './components/StructuredGrid';
 export type { DataTableProps } from './components/Table';
 export { default as DataTable } from './components/Table';
+export type { VirtualListProps, VirtualListRenderContext } from './components/VirtualList';
+export { default as VirtualList } from './components/VirtualList';

package/index.js

@@ -12,4 +12,5 @@ import u from "./components/Section/index.js";
 import d from "./components/Stack/index.js";
 import f from "./components/StructuredGrid/index.js";
 import p from "./components/Table/index.js";
-export { e as AspectRatio, t as Box, f as ComplexGrid, r as Container, p as DataTable, a as Flex, o as Grid, s as Repeater, i as RepeaterCarousel, c as RepeaterTable, n as RudraCarousel, l as ScrollArea, u as Section, d as Stack };
+import m from "./components/VirtualList/index.js";
+export { e as AspectRatio, t as Box, f as ComplexGrid, r as Container, p as DataTable, a as Flex, o as Grid, s as Repeater, i as RepeaterCarousel, c as RepeaterTable, n as RudraCarousel, l as ScrollArea, u as Section, d as Stack, m as VirtualList };

package/package.json

@@ -42,5 +42,5 @@
   },
   "types": "./index.d.ts",
   "unpkg": "./index.umd.js",
-  "version": "1.0.18"
+  "version": "1.0.19"
 }