react-arborist 0.2.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -31,6 +31,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "typescript": "^4.6.2"
-  },
-  "stableVersion": "0.2.0-beta.0"
+  }
 }

package/src/components/preview.tsx

@@ -91,13 +91,13 @@ const PreviewNode = memo(function PreviewNode(props: {
         isDragging: false,
         isEditing: false,
         isSelected: false,
-        isFirstOfSelected: false,
-        isLastOfSelected: false,
+        isSelectedStart: false,
+        isSelectedEnd: false,
         isHoveringOverChild: false,
         isOpen: node.isOpen,
       }}
       handlers={{
-        edit: () => {},
+        edit: () => Promise.resolve({ cancelled: true }),
         select: () => {},
         toggle: () => {},
         submit: () => {},

package/src/components/row.tsx

@@ -37,8 +37,8 @@ export const Row = React.memo(function Row({ index, style }: Props) {
     return {
       isEditing,
       isDragging,
-      isFirstOfSelected: isSelected && !prevSelected,
-      isLastOfSelected: isSelected && !nextSelected,
+      isSelectedStart: isSelected && !prevSelected,
+      isSelectedEnd: isSelected && !nextSelected,
       isSelected,
       isHoveringOverChild,
       isOpen,
@@ -54,9 +54,6 @@ export const Row = React.memo(function Row({ index, style }: Props) {
     isDragging,
     isOverFolder,
   ]);
-  if (isSelected) {
-    console.log({id: node.id, state})
-  }
 
   const ref = useCallback(
     (n: HTMLDivElement | null) => {
@@ -76,9 +73,12 @@ export const Row = React.memo(function Row({ index, style }: Props) {
 
   const handlers = useMemo(() => {
     return {
-      select: (e: React.MouseEvent, selectOnClick: boolean = true) => {
+      select: (
+        e: React.MouseEvent,
+        args: { selectOnClick: boolean } = { selectOnClick: true }
+      ) => {
         if (node.rowIndex === null) return;
-        if (selectOnClick || e.metaKey || e.shiftKey) {
+        if (args.selectOnClick || e.metaKey || e.shiftKey) {
           tree.api.select(node.rowIndex, e.metaKey, e.shiftKey);
         } else {
           tree.api.select(null, false, false);
@@ -88,16 +88,11 @@ export const Row = React.memo(function Row({ index, style }: Props) {
         e.stopPropagation();
         tree.onToggle(node.id, !node.isOpen);
       },
-      edit: () => {
-        tree.api.edit(node.id);
-      },
+      edit: () => tree.api.edit(node.id),
       submit: (name: string) => {
-        if (name.trim()) tree.onEdit(node.id, name);
-        tree.api.edit(null);
-      },
-      reset: () => {
-        tree.api.edit(null);
+        name.trim() ? tree.api.submit(node.id, name) : tree.api.reset(node.id);
       },
+      reset: () => tree.api.reset(node.id),
     };
   }, [tree, node]);
 

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 };