apply disabled prop recursively

Author: abdel-17

packages/svelte-file-tree/src/lib/components/Tree/Tree.svelte

@@ -24,6 +24,8 @@
 		pasteOperation = $bindable(),
 		id = defaultId,
 		element = $bindable(null),
+		editable = false,
+		disabled = false,
 		generateCopyId = () => crypto.randomUUID(),
 		onRenameItem = (args) => {
 			args.target.name = args.name;
@@ -72,7 +74,12 @@
 
 {#snippet items(nodes: Array<FileTreeNode>)}
 	{#each nodes as node, index (node.id)}
-		<TreeItemContextProvider {node} {index}>
+		<TreeItemContextProvider
+			{node}
+			{index}
+			editable={typeof editable === "function" ? editable(node) : editable}
+			disabled={typeof disabled === "function" ? disabled(node) : disabled}
+		>
 			{#snippet children(args)}
 				{@render item(args)}
 

packages/svelte-file-tree/src/lib/components/Tree/TreeItemContextProvider.svelte

@@ -22,10 +22,14 @@
 	const {
 		node,
 		index,
+		editable,
+		disabled,
 		children,
 	}: {
 		node: FileTreeNode;
 		index: number;
+		editable: boolean;
+		disabled: boolean;
 		children: Snippet<[args: TreeItemSnippetArgs]>;
 	} = $props();
 
@@ -34,6 +38,8 @@
 		parent,
 		node: () => node,
 		index: () => index,
+		editable: () => editable,
+		disabled: () => disabled,
 	});
 	setContext(CONTEXT_KEY, context);
 

packages/svelte-file-tree/src/lib/components/Tree/state.svelte.ts

@@ -641,22 +641,28 @@ export type TreeItemContextProps<TNode extends FileTreeNode = FileTreeNode> = {
 	parent: TreeItemContext<FolderNode> | undefined;
 	node: () => TNode;
 	index: () => number;
+	editable: () => boolean;
+	disabled: () => boolean;
 };
 
 export class TreeItemContext<TNode extends FileTreeNode = FileTreeNode> {
 	readonly #treeContext: TreeContext;
-	readonly parent?: TreeItemContext<FolderNode>;
 	readonly #node: () => TNode;
 	readonly #index: () => number;
+	readonly #editable: () => boolean;
+	readonly #disabled: () => boolean;
+	readonly parent?: TreeItemContext<FolderNode>;
 	readonly depth: number;
 	readonly dropPosition: DropPositionState;
 	editing: boolean = $state.raw(false);
 
 	constructor(props: TreeItemContextProps<TNode>) {
 		this.#treeContext = props.treeContext;
-		this.parent = props.parent;
 		this.#node = props.node;
 		this.#index = props.index;
+		this.#editable = props.editable;
+		this.#disabled = props.disabled;
+		this.parent = props.parent;
 		this.depth = props.parent !== undefined ? props.parent.depth + 1 : 0;
 		this.dropPosition = new DropPositionState(props);
 	}
@@ -669,6 +675,17 @@ export class TreeItemContext<TNode extends FileTreeNode = FileTreeNode> {
 		return this.#index();
 	}
 
+	get editable(): boolean {
+		return this.#editable();
+	}
+
+	readonly disabled: boolean = $derived.by(() => {
+		if (this.parent?.disabled) {
+			return true;
+		}
+		return this.#disabled();
+	});
+
 	readonly nearestSelectedAncestor: TreeItemContext<FolderNode> | undefined = $derived.by(() => {
 		if (this.parent === undefined) {
 			return;
@@ -714,6 +731,10 @@ export class TreeItemSnippetArgs {
 		return this.#context.depth;
 	}
 
+	get editable(): boolean {
+		return this.#context.editable;
+	}
+
 	get editing(): boolean {
 		return this.#context.editing;
 	}
@@ -722,6 +743,10 @@ export class TreeItemSnippetArgs {
 		this.#context.editing = value;
 	}
 
+	get disabled(): boolean {
+		return this.#context.disabled;
+	}
+
 	get dragged(): boolean {
 		return this.#context.dragged;
 	}

packages/svelte-file-tree/src/lib/components/Tree/types.ts

@@ -58,6 +58,8 @@ export interface TreeProps
 	item: Snippet<[args: TreeItemSnippetArgs]>;
 	pasteOperation?: PasteOperation;
 	id?: string;
+	editable?: boolean | ((node: FileTreeNode) => boolean);
+	disabled?: boolean | ((node: FileTreeNode) => boolean);
 	element?: HTMLElement | null;
 	generateCopyId?: () => string;
 	onRenameItem?: (args: RenameItemArgs) => MaybePromise<boolean>;

packages/svelte-file-tree/src/lib/components/TreeItem/TreeItem.svelte

@@ -10,8 +10,6 @@
 
 	let {
 		children,
-		editable = false,
-		disabled = false,
 		element = $bindable(null),
 		onfocusin,
 		onkeydown,
@@ -38,8 +36,6 @@
 	const attributes = new TreeItemAttributes({
 		treeContext,
 		itemContext,
-		editable: () => editable,
-		disabled: () => disabled,
 	});
 </script>
 

packages/svelte-file-tree/src/lib/components/TreeItem/state.svelte.ts

@@ -7,21 +7,15 @@ import type { DropPosition, TreeContext, TreeItemContext } from "../Tree/state.s
 export type TreeItemAttributesProps = {
 	treeContext: TreeContext;
 	itemContext: TreeItemContext;
-	editable: () => boolean;
-	disabled: () => boolean;
 };
 
 export class TreeItemAttributes {
 	readonly #treeContext: TreeContext;
 	readonly #itemContext: TreeItemContext;
-	readonly #editable: () => boolean;
-	readonly #disabled: () => boolean;
 
 	constructor(props: TreeItemAttributesProps) {
 		this.#treeContext = props.treeContext;
 		this.#itemContext = props.itemContext;
-		this.#editable = props.editable;
-		this.#disabled = props.disabled;
 	}
 
 	get id(): string {
@@ -62,7 +56,7 @@ export class TreeItemAttributes {
 	};
 
 	readonly onkeydown: EventHandler<KeyboardEvent, HTMLElement> = (event) => {
-		if (this.#disabled()) {
+		if (this.#itemContext.disabled) {
 			return;
 		}
 
@@ -244,7 +238,7 @@ export class TreeItemAttributes {
 				break;
 			}
 			case "F2": {
-				if (this.#editable()) {
+				if (this.#itemContext.editable) {
 					this.#itemContext.editing = true;
 				}
 				break;
@@ -298,7 +292,7 @@ export class TreeItemAttributes {
 	};
 
 	readonly onclick: EventHandler<MouseEvent, HTMLElement> = (event) => {
-		if (this.#disabled()) {
+		if (this.#itemContext.disabled) {
 			return;
 		}
 
@@ -313,7 +307,7 @@ export class TreeItemAttributes {
 	};
 
 	readonly ondragstart: EventHandler<DragEvent, HTMLElement> = (event) => {
-		if (this.#disabled()) {
+		if (this.#itemContext.disabled) {
 			return;
 		}
 
@@ -332,7 +326,7 @@ export class TreeItemAttributes {
 
 	readonly ondragover: EventHandler<DragEvent, HTMLElement> = (event) => {
 		if (
-			this.#disabled() ||
+			this.#itemContext.disabled ||
 			this.#treeContext.draggedId === undefined ||
 			this.#itemContext.node.selected ||
 			this.#itemContext.nearestSelectedAncestor !== undefined
@@ -366,7 +360,7 @@ export class TreeItemAttributes {
 		this.#itemContext.dropPosition.clear();
 
 		const draggedId = this.#treeContext.draggedId;
-		if (this.#disabled() || draggedId === undefined) {
+		if (this.#itemContext.disabled || draggedId === undefined) {
 			return;
 		}
 

packages/svelte-file-tree/src/lib/components/TreeItem/types.ts

@@ -15,7 +15,5 @@ export interface TreeItemProps
 		| "tabindex"
 	> {
 	children: Snippet;
-	editable?: boolean;
-	disabled?: boolean;
 	element?: HTMLElement | null;
 }

packages/svelte-file-tree/src/lib/tree.svelte.ts

@@ -16,14 +16,14 @@ export type FileTreeJSON = {
 };
 
 export class FileTree {
+	readonly #children: LinkedState<Array<FileTreeNode>>;
 	readonly selectedIds: SvelteSet<string>;
 	readonly expandedIds: SvelteSet<string>;
-	readonly #children: LinkedState<Array<FileTreeNode>>;
 
 	constructor(props: FileTreeProps) {
+		this.#children = new LinkedState(() => props.children(this));
 		this.selectedIds = props.selectedIds ?? new SvelteSet(props.defaultSelectedIds);
 		this.expandedIds = props.expandedIds ?? new SvelteSet(props.defaultExpandedIds);
-		this.#children = new LinkedState(() => props.children(this));
 	}
 
 	get children(): Array<FileTreeNode> {

sites/preview/src/routes/+page.svelte

@@ -92,10 +92,9 @@
 </script>
 
 <main class="p-8">
-	<Tree {tree} {onRenameError} {onMoveError} {onNameConflict} class="space-y-4">
+	<Tree {tree} editable {onRenameError} {onMoveError} {onNameConflict} class="space-y-4">
 		{#snippet item({ node, depth, editing, dragged, dropPosition })}
 			<TreeItem
-				editable
 				draggable
 				class={[
 					"relative flex items-center rounded-md border border-neutral-400 p-3 hover:bg-neutral-200 focus:outline-2 focus:outline-offset-2 focus:outline-current active:bg-neutral-300 aria-selected:border-blue-400 aria-selected:bg-blue-100 aria-selected:text-blue-800 aria-selected:active:bg-blue-200",

sites/sveltekit-example/src/routes/+page.svelte

@@ -54,39 +54,26 @@
 
 	let disabledIds = new SvelteSet<string>();
 
-	const disableNode = (node: FileTreeNode): void => {
-		disabledIds.add(node.id);
-	};
-
-	const enableNode = (node: FileTreeNode): void => {
-		disabledIds.delete(node.id);
-	};
-
-	const forEachNode = (nodes: Array<FileTreeNode>, callback: (node: FileTreeNode) => void) => {
-		for (const node of nodes) {
-			callback(node);
-
-			if (node.type === "folder") {
-				forEachNode(node.children, callback);
-			}
-		}
-	};
-
 	const mutate = async ({
 		affected,
 		mutation,
 	}: {
 		affected: Array<FileTreeNode>;
 		mutation: () => Promise<unknown>;
 	}): Promise<void> => {
-		forEachNode(affected, disableNode);
+		for (const node of affected) {
+			disabledIds.add(node.id);
+		}
+
 		try {
 			await mutation();
 		} finally {
 			try {
 				await invalidate(FILES_DEPENDENCY);
 			} finally {
-				forEachNode(affected, enableNode);
+				for (const node of affected) {
+					disabledIds.delete(node.id);
+				}
 			}
 		}
 	};
@@ -236,6 +223,8 @@
 <main class="p-8">
 	<Tree
 		{tree}
+		editable
+		disabled={(node) => disabledIds.has(node.id)}
 		{onRenameItem}
 		{onRenameError}
 		{onMoveItems}
@@ -245,12 +234,9 @@
 		{onDeleteItems}
 		class="space-y-4"
 	>
-		{#snippet item({ node, depth, editing, dragged, dropPosition })}
-			{@const disabled = disabledIds.has(node.id)}
+		{#snippet item({ node, depth, editing, disabled, dragged, dropPosition })}
 			<TreeItem
-				editable
 				draggable
-				{disabled}
 				class={[
 					"relative flex items-center rounded-md border border-neutral-400 p-3 hover:bg-neutral-200 focus:outline-2 focus:outline-offset-2 focus:outline-current active:bg-neutral-300 aria-selected:border-blue-400 aria-selected:bg-blue-100 aria-selected:text-blue-800 aria-selected:active:bg-blue-200",
 					dragged && "opacity-50",