Move parent-controlled state from TreeView to the parent.

Author: miyukoc

src/app.tsx

@@ -10,7 +10,7 @@ import { Terminal } from './terminal';
 import { GlasgowFileSystem, type FileTreeNode } from './filesystem';
 
 import { PanelContainer } from './components/panel';
-import { TreeView, type TreeViewAPI } from './components/tree-view';
+import { TreeView } from './components/tree-view';
 
 import { onlyTruthy } from './helpers/truthy-filter';
 import { joinPath } from './helpers/path';
@@ -104,7 +104,9 @@ declare global {
         interrupt();
     };
 
-    let treeViewAPI: TreeViewAPI<FileTreeNode> | null = null;
+    let [creatingNewFileNode, setCreatingNewFileNode] = createSignal<
+        Parameters<typeof TreeView<FileTreeNode>>[0]['creatingNewNode']
+    >(null);
 
     const handleFileTreeNodeAction = async (node: FileTreeNode) => {
         let fileContents = await glasgowFS.readFile(node.path);
@@ -128,7 +130,8 @@ declare global {
             fileReader.addEventListener('loadend', () => {
                 const fileContents = new Uint8Array(fileReader.result as ArrayBuffer);
 
-                treeViewAPI!.createFile({
+                setCreatingNewFileNode({
+                    type: 'file',
                     underNode: node,
                     defaultName: file.name,
                     async execute({ node, parents, name, dryRun }) {
@@ -142,7 +145,8 @@ declare global {
     };
 
     const createNewFolder = (node: FileTreeNode | null) => {
-        treeViewAPI!.createFolder({
+        setCreatingNewFileNode({
+            type: 'folder',
             underNode: node,
             async execute({ node, parents, name, dryRun }) {
                 await glasgowFS.createPath(joinPath(HOME_DIRECTORY, ...parents, node, name), 'folder', null, dryRun);
@@ -159,21 +163,14 @@ declare global {
     };
 
     const handleFileDuplicate = async (node: FileTreeNode, parents: FileTreeNode[]) => {
-        let options: (
-            | Parameters<NonNullable<typeof treeViewAPI>['createFile']>[0]
-            | Parameters<NonNullable<typeof treeViewAPI>['createFolder']>[0]
-        ) = {
+        setCreatingNewFileNode({
+            type: node.children ? 'folder' : 'file',
             underNode: parents.at(-1) ?? null,
             defaultName: node.name,
             async execute({ name, dryRun }) {
                 await glasgowFS.duplicatePath(node.path, joinPath(HOME_DIRECTORY, ...parents, name), dryRun);
             },
-        };
-        if (!node.children) {
-            treeViewAPI!.createFile(options);
-        } else {
-            treeViewAPI!.createFolder(options);
-        }
+        });
     };
 
     const handleFileRename = async (node: FileTreeNode, parents: FileTreeNode[], newName: string, dryRun: boolean) => {
@@ -255,6 +252,8 @@ declare global {
                                         ? (
                                             <TreeView
                                                 nodes={fileTree.tree}
+                                                creatingNewNode={creatingNewFileNode()}
+                                                onCancelNodeCreation={() => setCreatingNewFileNode(null)}
                                                 emptyTreeMessage="Directory is empty"
                                                 actions={[
                                                     {
@@ -302,7 +301,6 @@ declare global {
                                                         execute: (node, parents) => handleFileDeletion(node!, parents),
                                                     },
                                                 ]}
-                                                api={(value) => treeViewAPI = value}
                                             />
                                         )
                                         : <i>{isInitializing() ? 'Waiting...' : 'Unavailable'}</i>

src/components/tree-view.tsx

@@ -20,20 +20,6 @@ interface TreeNodeAction<N extends TreeNode> {
     showInline?: boolean;
 }
 
-export interface TreeViewAPI<N extends TreeNode> {
-    createFile(options: {
-        underNode: TreeNode | null;
-        defaultName?: string;
-        execute(options: { node: N | null; parents: N[]; name: string; dryRun: boolean; }): Promise<void>;
-    }): void;
-
-    createFolder(options: {
-        underNode: TreeNode | null;
-        defaultName?: string;
-        execute(options: { node: N | null; parents: N[]; name: string; dryRun: boolean; }): Promise<void>;
-    }): void;
-}
-
 interface TreeNodeAPI {
     rename(options: {
         execute(options: { newName: string; dryRun: boolean; }): Promise<void>;
@@ -44,12 +30,8 @@ interface TreeRootContextValue {
     rootNodes: TreeNode[];
     nodeElements: Map<TreeNode, HTMLElement>;
     currentlyFocusableNode: TreeNode | null;
-    creatingNewNode: (
-        (
-            | Parameters<TreeViewAPI<TreeNode>['createFile']>[0]
-            | Parameters<TreeViewAPI<TreeNode>['createFolder']>[0]
-        ) & { type: 'file' | 'folder'; }
-    ) | null;
+    creatingNewNode: TreeViewProps<any>['creatingNewNode'];
+    cancelNodeCreation: () => void;
     actions: TreeNodeAction<TreeNode>[];
     focus(node: TreeNode | null): void;
 }
@@ -84,14 +66,14 @@ const TreeNodeCreationForm = (props: TreeNodeCreationProps) => {
             nameInput.setCustomValidity('');
             if (dryRun)
                 return;
-            treeRootContext.creatingNewNode = null;
+            treeRootContext.cancelNodeCreation();
         } catch (e) {
             nameInput.setCustomValidity(String(e));
         }
     };
 
     const cancel = () => {
-        treeRootContext.creatingNewNode = null;
+        treeRootContext.cancelNodeCreation();
     };
 
     const handleBlur = (_event: FocusEvent) => {
@@ -502,16 +484,21 @@ const TreeNodeView = (props: TreeNodeViewProps) => {
 
 interface TreeViewProps<N extends TreeNode> {
     nodes: N[];
+    creatingNewNode: null | {
+        type: 'file' | 'folder';
+        underNode: TreeNode | null;
+        defaultName?: string;
+        execute(options: { node: N | null; parents: N[]; name: string; dryRun: boolean; }): Promise<void>;
+    };
     emptyTreeMessage?: string;
     actions: TreeNodeAction<N>[];
-    api: (api: TreeViewAPI<N>) => void;
+    onCancelNodeCreation: () => void;
 }
 
 export const TreeView = <N extends TreeNode>(props: TreeViewProps<N>) => {
     let rootListRef: HTMLElement | undefined;
     const nodeElements = new Map<TreeNode, HTMLElement>();
     const [currentlyFocusableNode, setCurrentlyFocusableNode] = createSignal<TreeNode | null>(null);
-    const [creatingNewNode, setCreatingNewNode] = createSignal<TreeRootContextValue['creatingNewNode']>(null);
 
     createComputed(() => {
         props.nodes;
@@ -530,10 +517,10 @@ export const TreeView = <N extends TreeNode>(props: TreeViewProps<N>) => {
         },
         nodeElements: nodeElements,
         get creatingNewNode() {
-            return creatingNewNode();
+            return props.creatingNewNode;
         },
-        set creatingNewNode(value) {
-            setCreatingNewNode(value);
+        get cancelNodeCreation() {
+            return props.onCancelNodeCreation;
         },
         get actions() {
             return props.actions as TreeNodeAction<TreeNode>[];
@@ -549,22 +536,10 @@ export const TreeView = <N extends TreeNode>(props: TreeViewProps<N>) => {
         },
     } satisfies TreeRootContextValue;
 
-    const api = {
-        createFile(options) {
-            setCreatingNewNode({ ...options, type: 'file' });
-        },
-
-        createFolder(options) {
-            setCreatingNewNode({ ...options, type: 'folder' });
-        },
-    } satisfies TreeViewAPI<N>;
-
-    props.api(api);
-
     return (
         <TreeRootContext.Provider value={treeRootContextValue}>
             <Show
-                when={props.nodes.length > 0 || creatingNewNode() !== null}
+                when={props.nodes.length > 0 || props.creatingNewNode !== null}
                 fallback={<i>{props.emptyTreeMessage ?? 'No entries'}</i>}
             >
                 <TreeList ref={el => rootListRef = el} nodes={props.nodes} parents={[]} />