react-arborist 0.1.1 → 0.1.5

package/dist/lib/data/flatten-tree.d.ts

@@ -0,0 +1,2 @@
+import { Node } from "../types";
+export declare function flattenTree<T>(root: Node<T>): Node<T>[];

package/dist/lib/data/flatten-tree.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flattenTree = void 0;
+function flattenTree(root) {
+    var list = [];
+    var index = 0;
+    function collect(node) {
+        var _a;
+        if (node.level >= 0) {
+            node.rowIndex = index++;
+            list.push(node);
+        }
+        if (node.isOpen) {
+            (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(collect);
+        }
+    }
+    collect(root);
+    return list;
+}
+exports.flattenTree = flattenTree;

package/dist/lib/data/make-tree.d.ts

@@ -0,0 +1,5 @@
+export declare function makeTree(string: string): {
+    id: string;
+    name: string;
+    isOpen: boolean;
+};

package/dist/lib/data/make-tree.js

@@ -0,0 +1,40 @@
+"use strict";
+// A function that turns a string of text into a tree
+// Each line is a node
+// The number of spaces at the beginning indicate the level
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeTree = void 0;
+function makeTree(string) {
+    var root = { id: "ROOT", name: "ROOT", isOpen: true };
+    var prevNode = root;
+    var prevLevel = -1;
+    var id = 1;
+    string.split("\n").forEach(function (line) {
+        var name = line.trimStart();
+        var level = line.length - name.length;
+        var diff = level - prevLevel;
+        var node = { id: (id++).toString(), name: name, isOpen: true };
+        if (diff === 1) {
+            // First child
+            //@ts-ignore
+            node.parent = prevNode;
+            //@ts-ignore
+            prevNode.children = [node];
+        }
+        else {
+            // Find the parent and go up
+            //@ts-ignore
+            var parent_1 = prevNode.parent;
+            for (var i = diff; i < 0; i++) {
+                parent_1 = parent_1.parent;
+            }
+            //@ts-ignore
+            node.parent = parent_1;
+            parent_1.children.push(node);
+        }
+        prevNode = node;
+        prevLevel = level;
+    });
+    return root;
+}
+exports.makeTree = makeTree;

package/dist/lib/data/visible-nodes-hook.d.ts

@@ -0,0 +1,2 @@
+import { TreeProps, Node, IdObj } from "../types";
+export declare function useVisibleNodes<T extends IdObj>(props: TreeProps<T>): Node<T>[];

package/dist/lib/data/visible-nodes-hook.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVisibleNodes = void 0;
+var react_1 = require("react");
+var enrich_tree_1 = require("./enrich-tree");
+var flatten_tree_1 = require("./flatten-tree");
+function useVisibleNodes(props) {
+    var root = (0, react_1.useMemo)(function () {
+        return (0, enrich_tree_1.enrichTree)(props.data, props.hideRoot, props.getChildren, props.getIsOpen);
+    }, [props.data, props.hideRoot, props.getChildren, props.getIsOpen]);
+    return (0, react_1.useMemo)(function () { return (0, flatten_tree_1.flattenTree)(root); }, [root]);
+}
+exports.useVisibleNodes = useVisibleNodes;

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

@@ -1,4 +1,7 @@
-import { bound, indexOf, isFolder } from "../utils";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeDrop = void 0;
+var utils_1 = require("../utils");
 function measureHover(el, offset) {
     var rect = el.getBoundingClientRect();
     var x = offset.x - Math.round(rect.x);
@@ -16,7 +19,7 @@ function getNodesAroundCursor(node, prev, next, hover) {
         // Put the cursor below the last item which is "prev"
         return [prev, null];
     }
-    if (isFolder(node)) {
+    if ((0, utils_1.isFolder)(node)) {
         if (!hover.inMiddle && hover.inTopHalf) {
             return [prev, node];
         }
@@ -40,17 +43,17 @@ function getDropLocation(nodeAboveCursor, level, hover) {
     if (!drop) {
         return [null, 0];
     }
-    if (isFolder(drop) && drop.isOpen) {
+    if ((0, utils_1.isFolder)(drop) && drop.isOpen) {
         // keep args the same
     }
-    else if (isFolder(drop) && hover.inMiddle) {
+    else if ((0, utils_1.isFolder)(drop) && hover.inMiddle) {
         // keep args the same
     }
     else {
         while (drop.parent && drop.level > level) {
             drop = drop.parent;
         }
-        dropIndex = indexOf(drop) + 1;
+        dropIndex = (0, utils_1.indexOf)(drop) + 1;
         dropParent = drop.parent;
     }
     return [dropParent, dropIndex];
@@ -70,9 +73,9 @@ function getDropLevel(hovering, aboveCursor, belowCursor, indent) {
         max = aboveCursor.level;
         min = belowCursor.level;
     }
-    return bound(hoverLevel, min, max);
+    return (0, utils_1.bound)(hoverLevel, min, max);
 }
-export function computeDrop(_a) {
+function computeDrop(_a) {
     var _b, _c;
     var element = _a.element, offset = _a.offset, indent = _a.indent, node = _a.node, prevNode = _a.prevNode, nextNode = _a.nextNode;
     var hovering = measureHover(element, offset);
@@ -103,3 +106,4 @@ export function computeDrop(_a) {
             },
     };
 }
+exports.computeDrop = computeDrop;

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

@@ -1,13 +1,16 @@
-import { useEffect } from "react";
-import { useDrag } from "react-dnd";
-import { getEmptyImage } from "react-dnd-html5-backend";
-import { useIsSelected, useSelectedIds, useStaticContext } from "../context";
-import { setCursorLocation } from "../reducer";
-export function useDragHook(node) {
-    var treeView = useStaticContext();
-    var isSelected = useIsSelected();
-    var ids = useSelectedIds();
-    var _a = useDrag(function () { return ({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragHook = void 0;
+var react_1 = require("react");
+var react_dnd_1 = require("react-dnd");
+var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+var context_1 = require("../context");
+var reducer_1 = require("../reducer");
+function useDragHook(node) {
+    var treeView = (0, context_1.useStaticContext)();
+    var isSelected = (0, context_1.useIsSelected)();
+    var ids = (0, context_1.useSelectedIds)();
+    var _a = (0, react_dnd_1.useDrag)(function () { return ({
         type: "NODE",
         item: function () { return ({
             id: node.id,
@@ -17,7 +20,7 @@ export function useDragHook(node) {
             isDragging: m.isDragging(),
         }); },
         end: function (item, monitor) {
-            treeView.dispatch(setCursorLocation(null));
+            treeView.dispatch((0, reducer_1.setCursorLocation)(null));
             var drop = monitor.getDropResult();
             if (drop && drop.parentId) {
                 treeView.onMove(item.dragIds, drop.parentId, drop.index);
@@ -25,8 +28,9 @@ export function useDragHook(node) {
             }
         },
     }); }, [ids, node]), isDragging = _a[0].isDragging, ref = _a[1], preview = _a[2];
-    useEffect(function () {
-        preview(getEmptyImage());
+    (0, react_1.useEffect)(function () {
+        preview((0, react_dnd_html5_backend_1.getEmptyImage)());
     }, [preview]);
     return [{ isDragging: isDragging }, ref];
 }
+exports.useDragHook = useDragHook;

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

@@ -1,11 +1,14 @@
-import { useDrop } from "react-dnd";
-import { useStaticContext } from "../context";
-import { setCursorLocation } from "../reducer";
-import { isDecendent, isFolder } from "../utils";
-import { computeDrop } from "./compute-drop";
-export function useDropHook(el, node, prev, next) {
-    var treeView = useStaticContext();
-    var _a = useDrop(function () { return ({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropHook = void 0;
+var react_dnd_1 = require("react-dnd");
+var context_1 = require("../context");
+var reducer_1 = require("../reducer");
+var utils_1 = require("../utils");
+var compute_drop_1 = require("./compute-drop");
+function useDropHook(el, node, prev, next) {
+    var treeView = (0, context_1.useStaticContext)();
+    var _a = (0, react_dnd_1.useDrop)(function () { return ({
         accept: "NODE",
         canDrop: function (item) {
             for (var _i = 0, _a = item.dragIds; _i < _a.length; _i++) {
@@ -13,7 +16,7 @@ export function useDropHook(el, node, prev, next) {
                 var drag = treeView.getNode(id);
                 if (!drag)
                     return false;
-                if (isFolder(drag) && isDecendent(node, drag))
+                if ((0, utils_1.isFolder)(drag) && (0, utils_1.isDecendent)(node, drag))
                     return false;
             }
             return true;
@@ -23,7 +26,7 @@ export function useDropHook(el, node, prev, next) {
                 var offset = m.getClientOffset();
                 if (!el.current || !offset)
                     return;
-                var cursor = computeDrop({
+                var cursor = (0, compute_drop_1.computeDrop)({
                     element: el.current,
                     offset: offset,
                     indent: treeView.indent,
@@ -31,17 +34,17 @@ export function useDropHook(el, node, prev, next) {
                     prevNode: prev,
                     nextNode: next,
                 }).cursor;
-                treeView.dispatch(setCursorLocation(cursor));
+                treeView.dispatch((0, reducer_1.setCursorLocation)(cursor));
             }
             else {
-                treeView.dispatch(setCursorLocation(null));
+                treeView.dispatch((0, reducer_1.setCursorLocation)(null));
             }
         },
         drop: function (item, m) {
             var offset = m.getClientOffset();
             if (!el.current || !offset)
                 return;
-            var _a = computeDrop({
+            var _a = (0, compute_drop_1.computeDrop)({
                 element: el.current,
                 offset: offset,
                 indent: treeView.indent,
@@ -54,3 +57,4 @@ export function useDropHook(el, node, prev, next) {
     }); }, [node, prev, el, treeView]), ref = _a[1];
     return ref;
 }
+exports.useDropHook = useDropHook;

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

@@ -1,5 +1,8 @@
-import { bound } from "../utils";
-export function measureHover(el, offset, indent) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureHover = void 0;
+var utils_1 = require("../utils");
+function measureHover(el, offset, indent) {
     var nextEl = el.nextElementSibling;
     var prevEl = el.previousElementSibling;
     var rect = el.getBoundingClientRect();
@@ -12,6 +15,7 @@ export function measureHover(el, offset, indent) {
     var inMiddle = y > pad && y < height - pad;
     var maxLevel = Number(inBottomHalf ? el.dataset.level : prevEl ? prevEl.dataset.level : 0);
     var minLevel = Number(inTopHalf ? el.dataset.level : nextEl ? nextEl.dataset.level : 0);
-    var level = bound(Math.floor(x / indent), minLevel, maxLevel);
+    var level = (0, utils_1.bound)(Math.floor(x / indent), minLevel, maxLevel);
     return { level: level, inTopHalf: inTopHalf, inBottomHalf: inBottomHalf, inMiddle: inMiddle };
 }
+exports.measureHover = measureHover;

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

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

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOuterDrop = void 0;
+var react_dnd_1 = require("react-dnd");
+var context_1 = require("../context");
+var reducer_1 = require("../reducer");
+var compute_drop_1 = require("./compute-drop");
+function useOuterDrop() {
+    var tree = (0, context_1.useStaticContext)();
+    // In case we drop an item at the bottom of the list
+    var _a = (0, react_dnd_1.useDrop)(function () { return ({
+        accept: "NODE",
+        hover: function (item, m) {
+            if (!m.isOver({ shallow: true }))
+                return;
+            var offset = m.getClientOffset();
+            if (!tree.listRef.current || !offset)
+                return;
+            var cursor = (0, compute_drop_1.computeDrop)({
+                element: tree.listRef.current,
+                offset: offset,
+                indent: tree.indent,
+                node: null,
+                prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
+                nextNode: null,
+            }).cursor;
+            tree.dispatch((0, reducer_1.setCursorLocation)(cursor));
+        },
+        drop: function (item, m) {
+            if (m.didDrop())
+                return;
+            console.log("drop!!");
+            var offset = m.getClientOffset();
+            if (!tree.listRef.current || !offset)
+                return;
+            var _a = (0, compute_drop_1.computeDrop)({
+                element: tree.listRef.current,
+                offset: offset,
+                indent: tree.indent,
+                node: null,
+                prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
+                nextNode: null,
+            }), parentId = _a.parentId, index = _a.index;
+            return { parentId: parentId, index: index };
+        },
+    }); }, [tree]), drop = _a[1];
+    drop(tree.listRef);
+}
+exports.useOuterDrop = useOuterDrop;

package/dist/lib/index.d.ts

@@ -1,2 +1,2 @@
-export { TreeList } from "./components/tree-list";
+export { Tree } from "./components/tree";
 export type { NodeRenderer, NodeState, NodeHandlers } from "./types";

package/dist/lib/index.js

@@ -1 +1,5 @@
-export { TreeList } from "./components/tree-list";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tree = void 0;
+var tree_1 = require("./components/tree");
+Object.defineProperty(exports, "Tree", { enumerable: true, get: function () { return tree_1.Tree; } });

package/dist/lib/reducer.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,8 +10,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { Selection } from "./selection/selection";
-export var initState = function () { return ({
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reducer = exports.stepDown = exports.stepUp = exports.edit = exports.selectId = exports.select = exports.setVisibleIds = exports.setCursorLocation = exports.initState = void 0;
+var selection_1 = require("./selection/selection");
+var initState = function () { return ({
     visibleIds: [],
     cursorLocation: null,
     editingId: null,
@@ -19,40 +22,48 @@ export var initState = function () { return ({
         ids: [],
     },
 }); };
-export var setCursorLocation = function (location) { return ({
+exports.initState = initState;
+var setCursorLocation = function (location) { return ({
     type: "SET_CURSOR_LOCATION",
     location: location,
 }); };
-export var setVisibleIds = function (ids, // index to id
+exports.setCursorLocation = setCursorLocation;
+var setVisibleIds = function (ids, // index to id
 idMap // id to index
 ) { return ({
     type: "SET_VISIBLE_IDS",
     ids: ids,
     idMap: idMap,
 }); };
-export var select = function (index, meta, shift) { return ({
+exports.setVisibleIds = setVisibleIds;
+var select = function (index, meta, shift) { return ({
     type: "SELECT",
     index: index,
     meta: meta,
     shift: shift,
 }); };
-export var selectId = function (id) { return ({
+exports.select = select;
+var selectId = function (id) { return ({
     type: "SELECT_ID",
     id: id,
 }); };
-export var edit = function (id) { return ({
+exports.selectId = selectId;
+var edit = function (id) { return ({
     type: "EDIT",
     id: id,
 }); };
-export var stepUp = function (shift, ids) { return ({
+exports.edit = edit;
+var stepUp = function (shift, ids) { return ({
     type: "STEP_UP",
     shift: shift,
 }); };
-export var stepDown = function (shift, ids) { return ({
+exports.stepUp = stepUp;
+var stepDown = function (shift, ids) { return ({
     type: "STEP_DOWN",
     shift: shift,
 }); };
-export function reducer(state, action) {
+exports.stepDown = stepDown;
+function reducer(state, action) {
     switch (action.type) {
         case "EDIT":
             return __assign(__assign({}, state), { editingId: action.id });
@@ -64,7 +75,7 @@ export function reducer(state, action) {
                 return __assign(__assign({}, state), { cursorLocation: action.location });
             }
         case "SELECT":
-            var s = Selection.parse(state.selection.data, state.visibleIds);
+            var s = selection_1.Selection.parse(state.selection.data, state.visibleIds);
             if (action.meta) {
                 if (s.contains(action.index)) {
                     s.deselect(action.index);
@@ -86,7 +97,7 @@ export function reducer(state, action) {
         case "SELECT_ID":
             return __assign(__assign({}, state), { selection: __assign(__assign({}, state.selection), { ids: [action.id] }) });
         case "STEP_UP":
-            var s3 = Selection.parse(state.selection.data, state.visibleIds);
+            var s3 = selection_1.Selection.parse(state.selection.data, state.visibleIds);
             var f = s3.getFocus();
             if (action.shift) {
                 s3.extend(f - 1);
@@ -99,7 +110,7 @@ export function reducer(state, action) {
                     ids: s3.getSelectedItems(),
                 } });
         case "STEP_DOWN":
-            var s6 = Selection.parse(state.selection.data, state.visibleIds);
+            var s6 = selection_1.Selection.parse(state.selection.data, state.visibleIds);
             var f2 = s6.getFocus();
             if (action.shift) {
                 s6.extend(f2 + 1);
@@ -113,7 +124,7 @@ export function reducer(state, action) {
                 } });
         case "SET_VISIBLE_IDS":
             var ids = state.selection.ids;
-            var s2 = new Selection([], null, "none", state.visibleIds);
+            var s2 = new selection_1.Selection([], null, "none", state.visibleIds);
             for (var _i = 0, ids_1 = ids; _i < ids_1.length; _i++) {
                 var id = ids_1[_i];
                 if (id in action.idMap)
@@ -127,6 +138,7 @@ export function reducer(state, action) {
             return state;
     }
 }
+exports.reducer = reducer;
 function equal(a, b) {
     if (a === b)
         return true;