@parallelworks/ui 0.19.0 → 0.19.1

package/dist/file-explorer/TreeView.js

@@ -0,0 +1,376 @@
+import { useStrings } from "../components/Provider.js";
+import { AngleRightIcon, FolderIcon, FolderOpenIcon } from "../icons.js";
+import { positionKeys } from "../components/keys.js";
+import { getParentPath } from "./lib/utils.js";
+import { canPreview } from "./FilePreview/previewType.js";
+import { getNodeIcon } from "./helpers.js";
+import { findRowIndex, flattenTreeRows, nextFileLimit, stepRow } from "./treeRows.js";
+import cx from "classnames";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Skeleton from "react-loading-skeleton";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/file-explorer/TreeView.tsx
+/** 9px margin + 12px padding, per level. */
+var INDENT_PER_LEVEL = 21;
+var GUIDE_OFFSET = 9;
+var ROW_PAD_DIRECTORY = 8;
+var ROW_PAD_FILE = 28;
+function rowHeight(row) {
+	return row.kind === "skeleton" ? 64 : 30;
+}
+/** The sidebar tree, flattened and windowed. The flat array is the single source
+*  of truth for rendering, arrow keys and ARIA. */
+function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, paging }) {
+	const [scrollEl, setScrollEl] = useState(null);
+	const [fileLimits, setFileLimits] = useState(() => /* @__PURE__ */ new Map());
+	const incompletePaths = paging?.incompletePaths;
+	const rows = useMemo(() => flattenTreeRows(rootNodes, parentToChildrenMap, expandedPaths, {
+		loadingPaths,
+		...incompletePaths && { incompletePaths },
+		fileLimits
+	}), [
+		rootNodes,
+		parentToChildrenMap,
+		expandedPaths,
+		loadingPaths,
+		incompletePaths,
+		fileLimits
+	]);
+	const revealMore = useCallback((row) => {
+		const path = row.node.path;
+		if ((row.hiddenFiles ?? 0) > 0) {
+			setFileLimits((prev) => new Map(prev).set(path, nextFileLimit(prev.get(path))));
+			return;
+		}
+		paging?.onLoadMore(row.node);
+	}, [paging]);
+	const offsets = useMemo(() => {
+		const out = new Array(rows.length);
+		let running = 0;
+		rows.forEach((row, i) => {
+			out[i] = running;
+			running += rowHeight(row);
+		});
+		return out;
+	}, [rows]);
+	const cursorRef = useRef(null);
+	const wantsFocusRef = useRef(false);
+	const pendingNavRef = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		if (pendingNavRef.current.delete(selectedPath)) return;
+		cursorRef.current = selectedPath;
+	}, [selectedPath]);
+	const getRowKey = useCallback((index) => rows[index]?.key ?? index, [rows]);
+	const virtualizer = useVirtualizer({
+		count: rows.length,
+		getScrollElement: () => scrollEl,
+		estimateSize: (index) => {
+			const row = rows[index];
+			return row ? rowHeight(row) : 30;
+		},
+		getItemKey: getRowKey,
+		overscan: 10
+	});
+	const move = useCallback((from, direction) => {
+		const cursorIndex = findRowIndex(rows, cursorRef.current ?? "");
+		const index = cursorIndex >= 0 ? cursorIndex : findRowIndex(rows, from.path);
+		if (index === -1) return;
+		const target = stepRow(rows, index, direction);
+		if (!target) return;
+		cursorRef.current = target.node.path;
+		pendingNavRef.current.add(target.node.path);
+		virtualizer.scrollToIndex(findRowIndex(rows, target.node.path));
+		wantsFocusRef.current = true;
+		onSelect(target.node.path, target.node);
+	}, [
+		rows,
+		virtualizer,
+		onSelect
+	]);
+	useEffect(() => {
+		if (!wantsFocusRef.current) return;
+		const index = findRowIndex(rows, cursorRef.current ?? "");
+		const row = index < 0 ? null : scrollEl?.querySelector(`[data-index="${index}"] [role="treeitem"]`);
+		if (row instanceof HTMLElement) {
+			wantsFocusRef.current = false;
+			row.focus();
+			return;
+		}
+		if (selectedPath === cursorRef.current) wantsFocusRef.current = false;
+	}, [
+		selectedPath,
+		rows,
+		scrollEl
+	]);
+	const handleKeyDown = useCallback((e, node) => {
+		if (e.key === " " && node.type === "file" && canPreview(node)) {
+			e.preventDefault();
+			onPreviewFile(node);
+			return;
+		}
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			move(node, 1);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			move(node, -1);
+		}
+	}, [move, onPreviewFile]);
+	const items = virtualizer.getVirtualItems();
+	useTreePitchAudit(scrollEl, rows, items);
+	const renderRow = (index, top, height) => {
+		const row = rows[index];
+		if (!row) return null;
+		return /* @__PURE__ */ jsx("div", {
+			"data-index": index,
+			className: "absolute inset-x-0",
+			style: {
+				top,
+				height
+			},
+			children: row.kind === "skeleton" ? /* @__PURE__ */ jsx(TreeSkeletonRow, { depth: row.depth }) : row.kind === "more" ? /* @__PURE__ */ jsx(TreeMoreRow, {
+				depth: row.depth,
+				hiddenFiles: row.hiddenFiles ?? 0,
+				partial: incompletePaths?.has(row.node.path) ?? false,
+				loading: paging?.isLoading(row.node.path) ?? false,
+				failed: paging?.hasFailed(row.node.path) ?? false,
+				onReveal: () => revealMore(row)
+			}) : /* @__PURE__ */ jsx(TreeRowItem, {
+				row,
+				isSelected: row.node.path === selectedPath,
+				onToggleExpand,
+				onSelect,
+				onDropToFolder,
+				onContextMenu,
+				onKeyDown: handleKeyDown
+			})
+		}, row.key);
+	};
+	const cursorIndex = findRowIndex(rows, cursorRef.current ?? selectedPath);
+	const cursorOutsideWindow = cursorIndex >= 0 && !items.some((item) => item.index === cursorIndex);
+	const slots = items.map((item) => ({
+		index: item.index,
+		top: item.start,
+		height: item.size
+	}));
+	if (cursorOutsideWindow) {
+		slots.push({
+			index: cursorIndex,
+			top: offsets[cursorIndex] ?? 0,
+			height: rowHeight(rows[cursorIndex])
+		});
+		slots.sort((a, b) => a.index - b.index);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref: setScrollEl,
+		className: "overflow-auto flex-1 px-2 py-2",
+		role: "tree",
+		onDragOver: (e) => e.preventDefault(),
+		onDrop: (e) => e.preventDefault(),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "relative w-full",
+			style: { height: virtualizer.getTotalSize() },
+			children: slots.map((slot) => renderRow(slot.index, slot.top, slot.height))
+		})
+	});
+}
+function indentStyle(depth, isDirectory) {
+	return { paddingLeft: depth * INDENT_PER_LEVEL + (isDirectory ? ROW_PAD_DIRECTORY : ROW_PAD_FILE) };
+}
+function IndentGuides({ depth }) {
+	if (depth === 0) return null;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: positionKeys(depth, "indent").map((key, level) => /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "pointer-events-none absolute inset-y-0 w-px bg-(--theme-border)/60",
+		style: { left: GUIDE_OFFSET + level * INDENT_PER_LEVEL }
+	}, key)) });
+}
+function RowIcons({ isDirectory, isExpanded, customIcon }) {
+	if (!isDirectory) return /* @__PURE__ */ jsx("div", {
+		className: "shrink-0",
+		children: customIcon
+	});
+	const folder = isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "h-4 w-4 mr-1 text-sky-500" }) : /* @__PURE__ */ jsx(FolderIcon, { className: "h-4 w-4 mr-1 text-sky-500/80" });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx("h-3.5 w-3.5 shrink-0 theme-muted-text transition-transform duration-150", isExpanded && "rotate-90") }), customIcon ?? folder] });
+}
+/** Sized by the slot, not by its contents: react-loading-skeleton wraps each bar
+*  in an inline span, so a bar occupies a line box taller than its `height` and
+*  the overflow would sit on top of the absolutely positioned row below. */
+/** Click-only, unlike the table's sentinel: the tree is a navigation aid, and
+*  growing it automatically as the user scrolls is what the cap exists to prevent. */
+function TreeMoreRow({ depth, hiddenFiles, partial, loading, failed, onReveal }) {
+	const t = useStrings().fileExplorer;
+	const label = () => {
+		if (failed) return t.retry;
+		if (hiddenFiles === 0) return t.loadMore;
+		return partial ? t.treeMoreCountPartial(hiddenFiles) : t.treeMoreCount(hiddenFiles);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative h-full overflow-hidden",
+		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), /* @__PURE__ */ jsx("div", {
+			className: "flex h-full items-center pr-2 text-xs theme-muted-text",
+			style: { paddingLeft: depth * INDENT_PER_LEVEL + ROW_PAD_FILE },
+			children: loading ? /* @__PURE__ */ jsx("span", { children: t.loadingMore }) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cx("cursor-pointer underline", failed ? "text-red-500" : "theme-link"),
+				onClick: onReveal,
+				children: label()
+			})
+		})]
+	});
+}
+function TreeSkeletonRow({ depth }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative h-full overflow-hidden",
+		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), /* @__PURE__ */ jsx("div", {
+			className: "flex h-full flex-col justify-center gap-1.5 py-1 pr-2",
+			style: { paddingLeft: depth * INDENT_PER_LEVEL + ROW_PAD_FILE },
+			children: [
+				0,
+				1,
+				2
+			].map((i) => /* @__PURE__ */ jsx(Skeleton, {
+				height: 12,
+				containerClassName: "block leading-none"
+			}, i))
+		})]
+	});
+}
+/** Hovering a dragged file over a collapsed folder expands it after 400ms. */
+function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggleExpand, onDropToFolder }) {
+	const hoverCount = useRef(0);
+	const timer = useRef(null);
+	const [dragActive, setDragActive] = useState(false);
+	const clear = () => {
+		if (timer.current) {
+			clearTimeout(timer.current);
+			timer.current = null;
+		}
+	};
+	useEffect(() => () => {
+		if (timer.current) {
+			clearTimeout(timer.current);
+			timer.current = null;
+		}
+	}, []);
+	return {
+		dragActive,
+		dragHandlers: {
+			onDragEnter: (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				hoverCount.current += 1;
+				setDragActive(true);
+				if (isDirectory && !isExpanded && !timer.current) timer.current = setTimeout(() => {
+					onToggleExpand(node.path);
+					timer.current = null;
+				}, 400);
+			},
+			onDragOver: (e) => e.preventDefault(),
+			onDragLeave: (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				hoverCount.current -= 1;
+				if (hoverCount.current > 0) return;
+				setDragActive(false);
+				clear();
+			},
+			onDrop: (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+				hoverCount.current = 0;
+				setDragActive(false);
+				clear();
+				onDropToFolder(dropPath, e.dataTransfer.items.length ? e.dataTransfer.items : e.dataTransfer.files);
+			}
+		}
+	};
+}
+/** Keys a row handles itself; the arrows that move between rows delegate upward,
+*  where the flat array is. The set is deliberately narrow:
+*  no Home/End, no typeahead, and ArrowLeft/Right only toggle a directory. */
+function dispatchRowKey(e, { node, isDirectory, isExpanded, onSelect, onToggleExpand, onDelegate }) {
+	if (e.key === "Enter") {
+		e.preventDefault();
+		onSelect(e);
+		return;
+	}
+	if (e.key === " ") {
+		e.preventDefault();
+		if (!isDirectory && canPreview(node)) onDelegate(e, node);
+		else onSelect(e);
+		return;
+	}
+	if (e.key === "ArrowRight" && isDirectory && !isExpanded || e.key === "ArrowLeft" && isDirectory && isExpanded) {
+		e.preventDefault();
+		onToggleExpand(node.path);
+		return;
+	}
+	onDelegate(e, node);
+}
+var TreeRowItem = memo(function TreeRowItem({ row, isSelected, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onKeyDown }) {
+	const { node, depth, isExpanded } = row;
+	const isDirectory = node.type === "directory";
+	const isStorageNode = !!node.displayName && node.storageId;
+	const { dragActive, dragHandlers } = useSpringLoadedDrop({
+		node,
+		dropPath: isDirectory ? node.path : getParentPath(node.path),
+		isDirectory,
+		isExpanded,
+		onToggleExpand,
+		onDropToFolder
+	});
+	const handleSelect = (e) => {
+		if (e.type === "click") e.preventDefault();
+		onSelect(node.path, node);
+		if (isDirectory) onToggleExpand(node.path);
+	};
+	const handleKeyDown = (e) => dispatchRowKey(e, {
+		node,
+		isDirectory,
+		isExpanded,
+		onSelect: handleSelect,
+		onToggleExpand,
+		onDelegate: onKeyDown
+	});
+	const customIcon = getNodeIcon(node);
+	const label = isDirectory && isStorageNode && node.displayName ? node.displayName : node.name;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("relative h-full rounded-md transition-[box-shadow,background-color] duration-150", dragActive && "ring-1 ring-(--theme-link)/60"),
+		...dragHandlers,
+		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), /* @__PURE__ */ jsxs("div", {
+			className: cx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-element)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
+			style: indentStyle(depth, isDirectory),
+			onClick: handleSelect,
+			onKeyDown: handleKeyDown,
+			onContextMenu: (e) => onContextMenu(e, node),
+			role: "treeitem",
+			"aria-level": depth + 1,
+			"aria-posinset": row.posInSet,
+			"aria-setsize": row.setSize,
+			"aria-selected": isSelected,
+			...isDirectory && { "aria-expanded": isExpanded },
+			tabIndex: isSelected ? 0 : -1,
+			children: [/* @__PURE__ */ jsx(RowIcons, {
+				isDirectory,
+				isExpanded,
+				customIcon
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-sm truncate",
+				children: label
+			})]
+		})]
+	});
+});
+/** The height constants must equal the rendered pitch, or the scrollbar
+*  drifts from the content. Reports the measured value to use. */
+function useTreePitchAudit(scrollEl, rows, items) {
+	useEffect(() => {}, [
+		scrollEl,
+		rows,
+		items
+	]);
+}
+//#endregion
+export { TreeView };