react-arborist 3.2.0 → 3.3.1-0

package/dist/module/dnd/compute-drop.js

@@ -0,0 +1,125 @@
+import { bound, indexOf, isClosed, isItem } from "../utils";
+function measureHover(el, offset) {
+    const rect = el.getBoundingClientRect();
+    const x = offset.x - Math.round(rect.x);
+    const y = offset.y - Math.round(rect.y);
+    const height = rect.height;
+    const inTopHalf = y < height / 2;
+    const inBottomHalf = !inTopHalf;
+    const pad = height / 4;
+    const inMiddle = y > pad && y < height - pad;
+    const atTop = !inMiddle && inTopHalf;
+    const atBottom = !inMiddle && inBottomHalf;
+    return { x, inTopHalf, inBottomHalf, inMiddle, atTop, atBottom };
+}
+function getNodesAroundCursor(node, prev, next, hover) {
+    if (!node) {
+        // We're hovering over the empty part of the list, not over an item,
+        // Put the cursor below the last item which is "prev"
+        return [prev, null];
+    }
+    if (node.isInternal) {
+        if (hover.atTop) {
+            return [prev, node];
+        }
+        else if (hover.inMiddle) {
+            return [node, node];
+        }
+        else {
+            return [node, next];
+        }
+    }
+    else {
+        if (hover.inTopHalf) {
+            return [prev, node];
+        }
+        else {
+            return [node, next];
+        }
+    }
+}
+function getDropLevel(hovering, aboveCursor, belowCursor, indent) {
+    const hoverLevel = Math.round(Math.max(0, hovering.x - indent) / indent);
+    let min, max;
+    if (!aboveCursor) {
+        max = 0;
+        min = 0;
+    }
+    else if (!belowCursor) {
+        max = aboveCursor.level;
+        min = 0;
+    }
+    else {
+        max = aboveCursor.level;
+        min = belowCursor.level;
+    }
+    return bound(hoverLevel, min, max);
+}
+function dropAt(parentId, index) {
+    return { parentId: parentId || null, index };
+}
+function lineCursor(index, level) {
+    return {
+        type: "line",
+        index,
+        level,
+    };
+}
+function noCursor() {
+    return {
+        type: "none",
+    };
+}
+function highlightCursor(id) {
+    return {
+        type: "highlight",
+        id,
+    };
+}
+function walkUpFrom(node, level) {
+    var _a;
+    let drop = node;
+    while (drop.parent && drop.level > level) {
+        drop = drop.parent;
+    }
+    const parentId = ((_a = drop.parent) === null || _a === void 0 ? void 0 : _a.id) || null;
+    const index = indexOf(drop) + 1;
+    return { parentId, index };
+}
+/**
+ * This is the most complex, tricky function in the whole repo.
+ * It could be simplified and made more understandable.
+ */
+export function computeDrop(args) {
+    var _a;
+    const hover = measureHover(args.element, args.offset);
+    const { node, nextNode, prevNode } = args;
+    const [above, below] = getNodesAroundCursor(node, prevNode, nextNode, hover);
+    /* Hovering over the middle of a folder */
+    if (node && node.isInternal && hover.inMiddle) {
+        return {
+            drop: dropAt(node.id, null),
+            cursor: highlightCursor(node.id),
+        };
+    }
+    /* At the top of the list */
+    if (!above) {
+        return {
+            drop: dropAt((_a = below === null || below === void 0 ? void 0 : below.parent) === null || _a === void 0 ? void 0 : _a.id, 0),
+            cursor: lineCursor(0, 0),
+        };
+    }
+    /* The above node is an item or a closed folder */
+    if (isItem(above) || isClosed(above)) {
+        const level = getDropLevel(hover, above, below, args.indent);
+        return {
+            drop: walkUpFrom(above, level),
+            cursor: lineCursor(above.rowIndex + 1, level),
+        };
+    }
+    /* The above node is an open folder */
+    return {
+        drop: dropAt(above === null || above === void 0 ? void 0 : above.id, 0),
+        cursor: lineCursor(above.rowIndex + 1, above.level + 1),
+    };
+}

package/dist/module/dnd/drag-hook.d.ts

@@ -0,0 +1,3 @@
+import { ConnectDragSource } from "react-dnd";
+import { NodeApi } from "../interfaces/node-api";
+export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;

package/dist/module/dnd/drag-hook.js

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { useDrag } from "react-dnd";
+import { getEmptyImage } from "react-dnd-html5-backend";
+import { useTreeApi } from "../context";
+import { actions as dnd } from "../state/dnd-slice";
+import { safeRun } from "../utils";
+import { ROOT_ID } from "../data/create-root";
+export function useDragHook(node) {
+    const tree = useTreeApi();
+    const ids = tree.selectedIds;
+    const [_, ref, preview] = useDrag(() => ({
+        canDrag: () => node.isDraggable,
+        type: "NODE",
+        item: () => {
+            // This is fired once at the begging of a drag operation
+            const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
+            tree.dispatch(dnd.dragStart(node.id, dragIds));
+            return { id: node.id };
+        },
+        end: () => {
+            tree.hideCursor();
+            let { parentId, index, dragIds } = tree.state.dnd;
+            // If they held down meta, we need to create a copy
+            // if (drop.dropEffect === "copy")
+            if (tree.canDrop()) {
+                safeRun(tree.props.onMove, {
+                    dragIds,
+                    parentId: parentId === ROOT_ID ? null : parentId,
+                    index: index === null ? 0 : index, // When it's null it was dropped over a folder
+                    dragNodes: tree.dragNodes,
+                    parentNode: tree.get(parentId),
+                });
+                tree.open(parentId);
+            }
+            tree.dispatch(dnd.dragEnd());
+        },
+    }), [ids, node]);
+    useEffect(() => {
+        preview(getEmptyImage());
+    }, [preview]);
+    return ref;
+}

package/dist/module/dnd/drop-hook.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+import { ConnectDropTarget } from "react-dnd";
+import { NodeApi } from "../interfaces/node-api";
+export type DropResult = {
+    parentId: string | null;
+    index: number | null;
+};
+export declare function useDropHook(el: RefObject<HTMLElement | null>, node: NodeApi<any>): ConnectDropTarget;

package/dist/module/dnd/drop-hook.js

@@ -0,0 +1,38 @@
+import { useDrop } from "react-dnd";
+import { useTreeApi } from "../context";
+import { computeDrop } from "./compute-drop";
+import { actions as dnd } from "../state/dnd-slice";
+export function useDropHook(el, node) {
+    const tree = useTreeApi();
+    const [_, dropRef] = useDrop(() => ({
+        accept: "NODE",
+        canDrop: () => tree.canDrop(),
+        hover: (_item, m) => {
+            const offset = m.getClientOffset();
+            if (!el.current || !offset)
+                return;
+            const { cursor, drop } = computeDrop({
+                element: el.current,
+                offset: offset,
+                indent: tree.indent,
+                node: node,
+                prevNode: node.prev,
+                nextNode: node.next,
+            });
+            if (drop)
+                tree.dispatch(dnd.hovering(drop.parentId, drop.index));
+            if (m.canDrop()) {
+                if (cursor)
+                    tree.showCursor(cursor);
+            }
+            else {
+                tree.hideCursor();
+            }
+        },
+        drop: (_, m) => {
+            if (!m.canDrop())
+                return null;
+        },
+    }), [node, el.current, tree.props]);
+    return dropRef;
+}

package/dist/module/dnd/measure-hover.d.ts

@@ -0,0 +1,8 @@
+import { XYCoord } from "react-dnd";
+export declare function measureHover(el: HTMLElement, offset: XYCoord, indent: number): {
+    level: number;
+    inTopHalf: boolean;
+    inBottomHalf: boolean;
+    inMiddle: boolean;
+};
+export type HoverData = ReturnType<typeof measureHover>;

package/dist/module/dnd/measure-hover.js

@@ -0,0 +1,17 @@
+import { bound } from "../utils";
+export function measureHover(el, offset, indent) {
+    const nextEl = el.nextElementSibling;
+    const prevEl = el.previousElementSibling;
+    const rect = el.getBoundingClientRect();
+    const x = offset.x - Math.round(rect.x);
+    const y = offset.y - Math.round(rect.y);
+    const height = rect.height;
+    const inTopHalf = y < height / 2;
+    const inBottomHalf = !inTopHalf;
+    const pad = height / 4;
+    const inMiddle = y > pad && y < height - pad;
+    const maxLevel = Number(inBottomHalf ? el.dataset.level : prevEl ? prevEl.dataset.level : 0);
+    const minLevel = Number(inTopHalf ? el.dataset.level : nextEl ? nextEl.dataset.level : 0);
+    const level = bound(Math.floor(x / indent), minLevel, maxLevel);
+    return { level, inTopHalf, inBottomHalf, inMiddle };
+}

package/dist/module/dnd/outer-drop-hook.d.ts

@@ -0,0 +1 @@
+export declare function useOuterDrop(): void;

package/dist/module/dnd/outer-drop-hook.js

@@ -0,0 +1,41 @@
+import { useDrop } from "react-dnd";
+import { useTreeApi } from "../context";
+import { computeDrop } from "./compute-drop";
+import { actions as dnd } from "../state/dnd-slice";
+export function useOuterDrop() {
+    const tree = useTreeApi();
+    // In case we drop an item at the bottom of the list
+    const [, drop] = useDrop(() => ({
+        accept: "NODE",
+        canDrop: (_item, m) => {
+            if (!m.isOver({ shallow: true }))
+                return false;
+            return tree.canDrop();
+        },
+        hover: (_item, m) => {
+            if (!m.isOver({ shallow: true }))
+                return;
+            const offset = m.getClientOffset();
+            if (!tree.listEl.current || !offset)
+                return;
+            const { cursor, drop } = computeDrop({
+                element: tree.listEl.current,
+                offset: offset,
+                indent: tree.indent,
+                node: null,
+                prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
+                nextNode: null,
+            });
+            if (drop)
+                tree.dispatch(dnd.hovering(drop.parentId, drop.index));
+            if (m.canDrop()) {
+                if (cursor)
+                    tree.showCursor(cursor);
+            }
+            else {
+                tree.hideCursor();
+            }
+        },
+    }), [tree]);
+    drop(tree.listEl);
+}

package/dist/module/hooks/use-fresh-node.d.ts

@@ -0,0 +1 @@
+export declare function useFreshNode<T>(index: number): import("..").NodeApi<T>;

package/dist/module/hooks/use-fresh-node.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { useTreeApi } from "../context";
+export function useFreshNode(index) {
+    const tree = useTreeApi();
+    const original = tree.at(index);
+    if (!original)
+        throw new Error(`Could not find node for index: ${index}`);
+    return useMemo(() => {
+        const fresh = original.clone();
+        tree.visibleNodes[index] = fresh; // sneaky
+        return fresh;
+        // Return a fresh instance if the state values change
+    }, [...Object.values(original.state), original]);
+}

package/dist/module/hooks/use-simple-tree.d.ts

@@ -0,0 +1,12 @@
+import { CreateHandler, DeleteHandler, MoveHandler, RenameHandler } from "../types/handlers";
+export type SimpleTreeData = {
+    id: string;
+    name: string;
+    children?: SimpleTreeData[];
+};
+export declare function useSimpleTree<T>(initialData: readonly T[]): readonly [readonly T[], {
+    onMove: MoveHandler<T>;
+    onRename: RenameHandler<T>;
+    onCreate: CreateHandler<T>;
+    onDelete: DeleteHandler<T>;
+}];

package/dist/module/hooks/use-simple-tree.js

@@ -0,0 +1,31 @@
+import { useMemo, useState } from "react";
+import { SimpleTree } from "../data/simple-tree";
+let nextId = 0;
+export function useSimpleTree(initialData) {
+    const [data, setData] = useState(initialData);
+    const tree = useMemo(() => new SimpleTree(data), [data]);
+    const onMove = (args) => {
+        for (const id of args.dragIds) {
+            tree.move({ id, parentId: args.parentId, index: args.index });
+        }
+        setData(tree.data);
+    };
+    const onRename = ({ name, id }) => {
+        tree.update({ id, changes: { name } });
+        setData(tree.data);
+    };
+    const onCreate = ({ parentId, index, type }) => {
+        const data = { id: `simple-tree-id-${nextId++}`, name: "" };
+        if (type === "internal")
+            data.children = [];
+        tree.create({ parentId, index, data });
+        setData(tree.data);
+        return data;
+    };
+    const onDelete = (args) => {
+        args.ids.forEach((id) => tree.drop({ id }));
+        setData(tree.data);
+    };
+    const controller = { onMove, onRename, onCreate, onDelete };
+    return [data, controller];
+}

package/dist/module/hooks/use-validated-props.d.ts

@@ -0,0 +1,2 @@
+import { TreeProps } from "../types/tree-props";
+export declare function useValidatedProps<T>(props: TreeProps<T>): TreeProps<T>;

package/dist/module/hooks/use-validated-props.js

@@ -0,0 +1,25 @@
+import { useSimpleTree } from "./use-simple-tree";
+export function useValidatedProps(props) {
+    if (props.initialData && props.data) {
+        throw new Error(`React Arborist Tree => Provide either a data or initialData prop, but not both.`);
+    }
+    if (props.initialData &&
+        (props.onCreate || props.onDelete || props.onMove || props.onRename)) {
+        throw new Error(`React Arborist Tree => You passed the initialData prop along with a data handler.
+Use the data prop if you want to provide your own handlers.`);
+    }
+    if (props.initialData) {
+        /**
+         * Let's break the rules of hooks here. If the initialData prop
+         * is provided, we will assume it will not change for the life of
+         * the component.
+         *
+         * We will provide the real data and the handlers to update it.
+         *   */
+        const [data, controller] = useSimpleTree(props.initialData);
+        return Object.assign(Object.assign(Object.assign({}, props), controller), { data });
+    }
+    else {
+        return props;
+    }
+}

package/dist/module/index.d.ts

@@ -0,0 +1,8 @@
+export { Tree } from "./components/tree";
+export * from "./types/handlers";
+export * from "./types/renderers";
+export * from "./types/state";
+export * from "./interfaces/node-api";
+export * from "./interfaces/tree-api";
+export * from "./data/simple-tree";
+export * from "./hooks/use-simple-tree";

package/dist/module/index.js

@@ -0,0 +1,9 @@
+/* The Public Api */
+export { Tree } from "./components/tree";
+export * from "./types/handlers";
+export * from "./types/renderers";
+export * from "./types/state";
+export * from "./interfaces/node-api";
+export * from "./interfaces/tree-api";
+export * from "./data/simple-tree";
+export * from "./hooks/use-simple-tree";

package/dist/module/interfaces/node-api.d.ts

@@ -0,0 +1,71 @@
+import React from "react";
+import { TreeApi } from "./tree-api";
+type Params<T> = {
+    id: string;
+    data: T;
+    level: number;
+    children: NodeApi<T>[] | null;
+    parent: NodeApi<T> | null;
+    isDraggable: boolean;
+    rowIndex: number | null;
+    tree: TreeApi<T>;
+};
+export declare class NodeApi<T = any> {
+    tree: TreeApi<T>;
+    id: string;
+    data: T;
+    level: number;
+    children: NodeApi<T>[] | null;
+    parent: NodeApi<T> | null;
+    isDraggable: boolean;
+    rowIndex: number | null;
+    constructor(params: Params<T>);
+    get isRoot(): boolean;
+    get isLeaf(): boolean;
+    get isInternal(): boolean;
+    get isOpen(): boolean;
+    get isClosed(): boolean;
+    get isEditable(): boolean;
+    get isEditing(): boolean;
+    get isSelected(): boolean;
+    get isOnlySelection(): boolean;
+    get isSelectedStart(): boolean;
+    get isSelectedEnd(): boolean;
+    get isFocused(): boolean;
+    get isDragging(): boolean;
+    get willReceiveDrop(): boolean;
+    get state(): {
+        isClosed: boolean;
+        isDragging: boolean;
+        isEditing: boolean;
+        isFocused: boolean;
+        isInternal: boolean;
+        isLeaf: boolean;
+        isOpen: boolean;
+        isSelected: boolean;
+        isSelectedEnd: boolean;
+        isSelectedStart: boolean;
+        willReceiveDrop: boolean;
+    };
+    get childIndex(): number;
+    get next(): NodeApi<T> | null;
+    get prev(): NodeApi<T> | null;
+    get nextSibling(): NodeApi<T> | null;
+    isAncestorOf(node: NodeApi<T> | null): boolean;
+    select(): void;
+    deselect(): void;
+    selectMulti(): void;
+    selectContiguous(): void;
+    activate(): void;
+    focus(): void;
+    toggle(): void;
+    open(): void;
+    openParents(): void;
+    close(): void;
+    submit(value: string): void;
+    reset(): void;
+    clone(): NodeApi<T>;
+    edit(): Promise<import("..").EditResult>;
+    handleClick: (e: React.MouseEvent) => void;
+}
+export {};

package/dist/module/interfaces/node-api.js

@@ -0,0 +1,160 @@
+import { ROOT_ID } from "../data/create-root";
+export class NodeApi {
+    constructor(params) {
+        this.handleClick = (e) => {
+            if (e.metaKey && !this.tree.props.disableMultiSelection) {
+                this.isSelected ? this.deselect() : this.selectMulti();
+            }
+            else if (e.shiftKey && !this.tree.props.disableMultiSelection) {
+                this.selectContiguous();
+            }
+            else {
+                this.select();
+                this.activate();
+            }
+        };
+        this.tree = params.tree;
+        this.id = params.id;
+        this.data = params.data;
+        this.level = params.level;
+        this.children = params.children;
+        this.parent = params.parent;
+        this.isDraggable = params.isDraggable;
+        this.rowIndex = params.rowIndex;
+    }
+    get isRoot() {
+        return this.id === ROOT_ID;
+    }
+    get isLeaf() {
+        return !Array.isArray(this.children);
+    }
+    get isInternal() {
+        return !this.isLeaf;
+    }
+    get isOpen() {
+        return this.isLeaf ? false : this.tree.isOpen(this.id);
+    }
+    get isClosed() {
+        return this.isLeaf ? false : !this.tree.isOpen(this.id);
+    }
+    get isEditable() {
+        return this.tree.isEditable(this.data);
+    }
+    get isEditing() {
+        return this.tree.editingId === this.id;
+    }
+    get isSelected() {
+        return this.tree.isSelected(this.id);
+    }
+    get isOnlySelection() {
+        return this.isSelected && this.tree.hasOneSelection;
+    }
+    get isSelectedStart() {
+        var _a;
+        return this.isSelected && !((_a = this.prev) === null || _a === void 0 ? void 0 : _a.isSelected);
+    }
+    get isSelectedEnd() {
+        var _a;
+        return this.isSelected && !((_a = this.next) === null || _a === void 0 ? void 0 : _a.isSelected);
+    }
+    get isFocused() {
+        return this.tree.isFocused(this.id);
+    }
+    get isDragging() {
+        return this.tree.isDragging(this.id);
+    }
+    get willReceiveDrop() {
+        return this.tree.willReceiveDrop(this.id);
+    }
+    get state() {
+        return {
+            isClosed: this.isClosed,
+            isDragging: this.isDragging,
+            isEditing: this.isEditing,
+            isFocused: this.isFocused,
+            isInternal: this.isInternal,
+            isLeaf: this.isLeaf,
+            isOpen: this.isOpen,
+            isSelected: this.isSelected,
+            isSelectedEnd: this.isSelectedEnd,
+            isSelectedStart: this.isSelectedStart,
+            willReceiveDrop: this.willReceiveDrop,
+        };
+    }
+    get childIndex() {
+        if (this.parent && this.parent.children) {
+            return this.parent.children.findIndex((child) => child.id === this.id);
+        }
+        else {
+            return -1;
+        }
+    }
+    get next() {
+        if (this.rowIndex === null)
+            return null;
+        return this.tree.at(this.rowIndex + 1);
+    }
+    get prev() {
+        if (this.rowIndex === null)
+            return null;
+        return this.tree.at(this.rowIndex - 1);
+    }
+    get nextSibling() {
+        var _a, _b;
+        const i = this.childIndex;
+        return (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children[i + 1]) !== null && _b !== void 0 ? _b : null;
+    }
+    isAncestorOf(node) {
+        if (!node)
+            return false;
+        let ancestor = node;
+        while (ancestor) {
+            if (ancestor.id === this.id)
+                return true;
+            ancestor = ancestor.parent;
+        }
+        return false;
+    }
+    select() {
+        this.tree.select(this);
+    }
+    deselect() {
+        this.tree.deselect(this);
+    }
+    selectMulti() {
+        this.tree.selectMulti(this);
+    }
+    selectContiguous() {
+        this.tree.selectContiguous(this);
+    }
+    activate() {
+        this.tree.activate(this);
+    }
+    focus() {
+        this.tree.focus(this);
+    }
+    toggle() {
+        this.tree.toggle(this);
+    }
+    open() {
+        this.tree.open(this);
+    }
+    openParents() {
+        this.tree.openParents(this);
+    }
+    close() {
+        this.tree.close(this);
+    }
+    submit(value) {
+        this.tree.submit(this, value);
+    }
+    reset() {
+        this.tree.reset();
+    }
+    clone() {
+        return new NodeApi(Object.assign({}, this));
+    }
+    edit() {
+        return this.tree.edit(this);
+    }
+}