react-arborist 0.2.0 → 1.0.3

package/src/tree-api.ts

@@ -4,9 +4,12 @@ import { FixedSizeList } from "react-window";
 import { flattenTree } from "./data/flatten-tree";
 import { Cursor } from "./dnd/compute-drop";
 import { Action, actions } from "./reducer";
-import { Node, StateContext, TreeProviderProps } from "./types";
+import { Node, StateContext, TreeProviderProps, EditResult } from "./types";
+import ReactDOM from "react-dom";
 
 export class TreeApi<T = unknown> {
+  private edits = new Map<string, (args: EditResult) => void>();
+
   constructor(
     public dispatch: Dispatch<Action>,
     public state: StateContext,
@@ -36,14 +39,42 @@ export class TreeApi<T = unknown> {
     return this.state.selection.ids;
   }
 
-  edit(id: string | number | null) {
-    this.dispatch(actions.edit(id ? id.toString() : null));
+  edit(id: string | number): Promise<EditResult> {
+    const sid = id.toString();
+    this.resolveEdit(sid, { cancelled: true });
+    this.scrollToId(sid);
+    this.dispatch(actions.edit(sid));
+    return new Promise((resolve) => this.edits.set(sid, resolve));
+  }
+
+  submit(id: string | number, value: string) {
+    const sid = id.toString();
+    this.props.onEdit(sid, value);
+    this.dispatch(actions.edit(null));
+    this.resolveEdit(sid, { cancelled: false, value });
+  }
+
+  reset(id: string | number) {
+    const sid = id.toString();
+    this.dispatch(actions.edit(null));
+    this.resolveEdit(sid, { cancelled: true });
   }
 
-  select(index: number | null, meta: boolean, shift: boolean) {
+  private resolveEdit(id: string, value: EditResult) {
+    const resolve = this.edits.get(id.toString());
+    if (resolve) resolve(value);
+    this.edits.delete(id);
+  }
+
+  select(index: number | null, meta = false, shift = false) {
     this.dispatch(actions.select(index, meta, shift));
   }
 
+  selectById(id: string | number, meta = false, shift = false) {
+    const index = this.idToIndex[id];
+    this.select(index, meta, shift);
+  }
+
   selectUpwards(shiftKey: boolean) {
     this.dispatch(actions.stepUp(shiftKey, this.visibleIds));
   }
@@ -67,11 +98,7 @@ export class TreeApi<T = unknown> {
       this.list.scrollToItem(index, "start");
     } else {
       this.openParents(id);
-      // This appears to be synchronous
-      // But I've only tested it in the console and
-      // not in an event handler which will be batched...
-      // We may need to wrap this in a timeout or trigger an effect somehow
-      setTimeout(() => {
+      ReactDOM.flushSync(() => {
         const index = this.idToIndex[id];
         if (index) {
           this.list?.scrollToItem(index, "start");

package/src/types.ts

@@ -53,15 +53,15 @@ export type NodeState = {
   isSelected: boolean;
   isHoveringOverChild: boolean;
   isDragging: boolean;
-  isFirstOfSelected: boolean;
-  isLastOfSelected: boolean;
+  isSelectedStart: boolean;
+  isSelectedEnd: boolean;
   isEditing: boolean;
 };
 
 export type NodeHandlers = {
   toggle: MouseEventHandler;
-  select: (e: MouseEvent, selectOnClick?: boolean) => void;
-  edit: () => void;
+  select: (e: MouseEvent, args: { selectOnClick: boolean }) => void;
+  edit: () => Promise<EditResult>;
   submit: (name: string) => void;
   reset: () => void;
 };
@@ -145,3 +145,7 @@ export type StaticContext<T> = TreeProviderProps<T> & {
   api: TreeApi<T>;
   list: MutableRefObject<FixedSizeList | undefined>;
 };
+
+export type EditResult =
+  | { cancelled: true }
+  | { cancelled: false; value: string };