Merge pull request #64 from abdel-17/improve-editing

change rename ui

Author: abdel-17

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

@@ -17,7 +17,6 @@
 		defaultClipboardIds,
 		clipboardIds = new SvelteSet(defaultClipboardIds),
 		pasteOperation = $bindable(),
-		isItemEditable = true,
 		isItemDisabled = false,
 		id = defaultId,
 		ref = $bindable(null),
@@ -44,10 +43,6 @@
 				}
 			}
 		},
-		onRenameItem = ({ target, name }) => {
-			target.name = name;
-			return true;
-		},
 		onMoveItems = ({ updates }) => {
 			for (const { target, children } of updates) {
 				target.children = children;
@@ -65,7 +60,6 @@
 			return true;
 		},
 		onResolveNameConflict = () => "cancel",
-		onAlreadyExistsError,
 		onCircularReferenceError,
 		...rest
 	}: TreeProps<TNode> = $props();
@@ -79,13 +73,6 @@
 		setPasteOperation: (value) => {
 			pasteOperation = value;
 		},
-		isItemEditable: (node) => {
-			if (typeof isItemEditable === "function") {
-				return isItemEditable(node);
-			}
-
-			return isItemEditable;
-		},
 		isItemDisabled: (node) => {
 			if (typeof isItemDisabled === "function") {
 				return isItemDisabled(node);
@@ -95,16 +82,14 @@
 		},
 		id: () => id,
 		copyNode: (node) => copyNode(node),
-		onRenameItem: (args) => onRenameItem(args),
 		onMoveItems: (args) => onMoveItems(args),
 		onCopyPasteItems: (args) => onCopyPasteItems(args),
 		onRemoveItems: (args) => onRemoveItems(args),
 		onResolveNameConflict: (args) => onResolveNameConflict(args),
-		onAlreadyExistsError: (args) => onAlreadyExistsError?.(args),
 		onCircularReferenceError: (args) => onCircularReferenceError?.(args),
 	});
 
-	export const { rename, copy, paste, remove } = treeState;
+	export const { copy, paste, remove } = treeState;
 </script>
 
 <div {...rest} bind:this={ref} {id} role="tree" aria-multiselectable="true">

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

@@ -1,26 +1,11 @@
 <script lang="ts" module>
 	import { composeEventHandlers, isControlOrMeta } from "$lib/internal/helpers.js";
-	import { DEV } from "esm-env";
-	import { flushSync, getContext, hasContext, setContext } from "svelte";
+	import { flushSync } from "svelte";
 	import type { EventHandler } from "svelte/elements";
 	import { getTreeItemProviderContext } from "./TreeItemProvider.svelte";
 	import { createTreeItemDragState, type TreeItemPosition } from "./state.svelte.js";
 	import type { TreeItemChildrenSnippetArgs, TreeItemProps, TreeItemState } from "./types.js";
 
-	const CONTEXT_KEY = Symbol("TreeItem");
-
-	export type TreeItemContext = {
-		setEditing: (value: boolean) => void;
-	};
-
-	export function getTreeItemContext(): TreeItemContext {
-		if (DEV && !hasContext(CONTEXT_KEY)) {
-			throw new Error("No parent <TreeItem> found");
-		}
-
-		return getContext(CONTEXT_KEY);
-	}
-
 	function hasChildren(item: TreeItemState): boolean {
 		return item.node.type === "folder" && item.node.children.length !== 0;
 	}
@@ -31,7 +16,6 @@
 
 	let {
 		children,
-		editing = $bindable(false),
 		ref = $bindable(null),
 		class: className,
 		style,
@@ -53,12 +37,9 @@
 			item,
 		});
 
-	const context: TreeItemContext = {
-		setEditing: (value) => {
-			editing = value;
-		},
-	};
-	setContext(CONTEXT_KEY, context);
+	const childrenArgs: TreeItemChildrenSnippetArgs = $derived({
+		dropPosition: dropPosition(),
+	});
 
 	const handleFocusIn: EventHandler<FocusEvent, HTMLElement> = () => {
 		treeState.setTabbableId(item().node.id);
@@ -139,7 +120,7 @@
 				const itemRect = event.currentTarget.getBoundingClientRect();
 
 				let current: TreeItemPosition = item();
-				let currentElement: HTMLElement = event.currentTarget;
+				let currentElement = event.currentTarget;
 				while (true) {
 					const next = navigate(current);
 					if (next === undefined) {
@@ -267,12 +248,6 @@
 				window.scrollBy(0, rectAfter.top - rectBefore.top);
 				break;
 			}
-			case "F2": {
-				if (item().editable) {
-					editing = true;
-				}
-				break;
-			}
 			case "Delete": {
 				treeState.remove(item());
 				break;
@@ -382,11 +357,6 @@
 		treeState.setDraggedId(undefined);
 	};
 
-	const childrenArgs: TreeItemChildrenSnippetArgs = {
-		editing: () => editing,
-		dropPosition,
-	};
-
 	$effect(() => {
 		return () => {
 			treeState.onItemDestroyed(item().node.id);

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

@@ -3,7 +3,6 @@ import { FileNode, FolderNode, type FileTree, type FileTreeNode } from "$lib/tre
 import { DEV } from "esm-env";
 import type { SvelteSet } from "svelte/reactivity";
 import type {
-	AlreadyExistsErrorArgs,
 	CircularReferenceErrorArgs,
 	CopyPasteItemsArgs,
 	DropPosition,
@@ -12,7 +11,6 @@ import type {
 	ParentFileTreeNode,
 	PasteOperation,
 	RemoveItemsArgs,
-	RenameItemArgs,
 	ResolveNameConflictArgs,
 	TreeItemState,
 } from "./types.js";
@@ -24,16 +22,13 @@ export type TreeStateProps<TNode extends FileNode | FolderNode<TNode> = FileTree
 	clipboardIds: () => SvelteSet<string>;
 	pasteOperation: () => PasteOperation | undefined;
 	setPasteOperation: (value: PasteOperation | undefined) => void;
-	isItemEditable: (node: TNode) => boolean;
 	isItemDisabled: (node: TNode) => boolean;
 	id: () => string;
 	copyNode: (node: TNode) => TNode;
-	onRenameItem: (args: RenameItemArgs<TNode>) => MaybePromise<boolean>;
 	onMoveItems: (args: MoveItemsArgs<TNode>) => MaybePromise<boolean>;
 	onCopyPasteItems: (args: CopyPasteItemsArgs<TNode>) => MaybePromise<boolean>;
 	onRemoveItems: (args: RemoveItemsArgs<TNode>) => MaybePromise<boolean>;
 	onResolveNameConflict: (args: ResolveNameConflictArgs) => MaybePromise<NameConflictResolution>;
-	onAlreadyExistsError: (args: AlreadyExistsErrorArgs) => void;
 	onCircularReferenceError: (args: CircularReferenceErrorArgs<TNode>) => void;
 };
 
@@ -55,7 +50,6 @@ class TreeItemStateImpl<TNode extends FileNode | FolderNode<TNode> = FileTreeNod
 		readonly selectedIds: () => SvelteSet<string>,
 		readonly expandedIds: () => SvelteSet<string>,
 		readonly clipboardIds: () => SvelteSet<string>,
-		readonly isItemEditable: (node: TNode) => boolean,
 		readonly isItemDisabled: (node: TNode) => boolean,
 		readonly draggedId: () => string | undefined,
 	) {
@@ -72,8 +66,6 @@ class TreeItemStateImpl<TNode extends FileNode | FolderNode<TNode> = FileTreeNod
 
 	readonly inClipboard: boolean = $derived.by(() => this.clipboardIds().has(this.node.id));
 
-	readonly editable: boolean = $derived.by(() => this.isItemEditable(this.node));
-
 	readonly disabled: boolean = $derived.by(() => {
 		if (this.parent?.disabled === true) {
 			return true;
@@ -129,16 +121,13 @@ export function createTreeState<TNode extends FileNode | FolderNode<TNode>>({
 	clipboardIds,
 	pasteOperation,
 	setPasteOperation,
-	isItemEditable,
 	isItemDisabled,
 	id,
 	copyNode,
-	onRenameItem,
 	onMoveItems,
 	onCopyPasteItems,
 	onRemoveItems,
 	onResolveNameConflict,
-	onAlreadyExistsError,
 	onCircularReferenceError,
 }: TreeStateProps<TNode>) {
 	let tabbableId: string | undefined = $state.raw();
@@ -178,7 +167,6 @@ export function createTreeState<TNode extends FileNode | FolderNode<TNode>>({
 				selectedIds,
 				expandedIds,
 				clipboardIds,
-				isItemEditable,
 				isItemDisabled,
 				getDraggedId,
 			);
@@ -344,29 +332,6 @@ export function createTreeState<TNode extends FileNode | FolderNode<TNode>>({
 		setPasteOperation(undefined);
 	}
 
-	async function rename(target: TreeItemState<TNode>, name: string): Promise<boolean> {
-		if (name.length === 0) {
-			return false;
-		}
-
-		const owner = target.parent?.node ?? tree();
-		for (const child of owner.children) {
-			if (child !== target.node && name === child.name) {
-				onAlreadyExistsError({ name });
-				return false;
-			}
-		}
-
-		if (name === target.node.name) {
-			return true;
-		}
-
-		return await onRenameItem({
-			target: target.node,
-			name,
-		});
-	}
-
 	async function moveItems(
 		movedIds: Set<string>,
 		isItemMoved: (item: TreeItemState<TNode>) => boolean,
@@ -775,7 +740,6 @@ export function createTreeState<TNode extends FileNode | FolderNode<TNode>>({
 		clipboardIds,
 		pasteOperation,
 		id,
-		tabbableId: () => tabbableId,
 		isItemTabbable,
 		setTabbableId,
 		draggedId: getDraggedId,
@@ -791,7 +755,6 @@ export function createTreeState<TNode extends FileNode | FolderNode<TNode>>({
 		selectUntil,
 		copy,
 		clearClipboard,
-		rename,
 		drop,
 		paste,
 		remove,