react-arborist 0.1.1 → 0.1.5

package/dist/lib/selection/range.js

@@ -1,3 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Range = void 0;
 var Range = /** @class */ (function () {
     function Range(start, end) {
         this.start = start;
@@ -39,4 +42,4 @@ var Range = /** @class */ (function () {
     };
     return Range;
 }());
-export { Range };
+exports.Range = Range;

package/dist/lib/selection/selection-hook.js

@@ -1,17 +1,20 @@
-import { useEffect } from "react";
-import { stepDown, stepUp } from "../reducer";
-export function useSelectionKeys(ref, dispatch, ids) {
-    useEffect(function () {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectionKeys = void 0;
+var react_1 = require("react");
+var reducer_1 = require("../reducer");
+function useSelectionKeys(ref, dispatch, ids) {
+    (0, react_1.useEffect)(function () {
         var el = ref.current;
         el === null || el === void 0 ? void 0 : el.setAttribute("tabindex", "0");
         var cb = function (e) {
             if (e.code === "ArrowDown") {
                 e.preventDefault();
-                dispatch(stepDown(e.shiftKey, ids));
+                dispatch((0, reducer_1.stepDown)(e.shiftKey, ids));
             }
             else if (e.code === "ArrowUp") {
                 e.preventDefault();
-                dispatch(stepUp(e.shiftKey, ids));
+                dispatch((0, reducer_1.stepUp)(e.shiftKey, ids));
             }
         };
         el === null || el === void 0 ? void 0 : el.addEventListener("keydown", cb);
@@ -20,3 +23,4 @@ export function useSelectionKeys(ref, dispatch, ids) {
         };
     }, [ref, dispatch, ids]);
 }
+exports.useSelectionKeys = useSelectionKeys;

package/dist/lib/selection/selection.js

@@ -1,4 +1,7 @@
-import { Range } from "./range";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selection = void 0;
+var range_1 = require("./range");
 var Selection = /** @class */ (function () {
     function Selection(ranges, currentIndex, direction, items) {
         var _this = this;
@@ -123,7 +126,7 @@ var Selection = /** @class */ (function () {
         return true;
     };
     Selection.prototype.addRange = function (start, end) {
-        var r = new Range(start, end);
+        var r = new range_1.Range(start, end);
         // Keep ranges sorted by start
         var index = this.ranges.findIndex(function (r) { return r.start >= start; });
         if (index === -1)
@@ -186,4 +189,4 @@ var Selection = /** @class */ (function () {
     };
     return Selection;
 }());
-export { Selection };
+exports.Selection = Selection;

package/dist/lib/selection/selection.test.js

@@ -1,10 +1,12 @@
-import { Selection } from "./selection";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var selection_1 = require("./selection");
 var createSelection = function () {
     var ranges = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         ranges[_i] = arguments[_i];
     }
-    return new Selection(ranges);
+    return new selection_1.Selection(ranges);
 };
 describe("select", function () {
     test("select one after end", function () {

package/dist/lib/types.d.ts

@@ -1,27 +1,28 @@
-import { ComponentType, ForwardedRef, MouseEvent, MouseEventHandler, MutableRefObject, ReactElement } from "react";
+import { ComponentType, CSSProperties, MouseEvent, MouseEventHandler, MutableRefObject, ReactElement, Ref } from "react";
 import { Action } from "./reducer";
 import { SelectionData } from "./selection/selection";
-export declare type Node<M extends NodeModel = NodeModel> = {
+export declare type Node<T = unknown> = {
     id: string;
-    model: M;
+    model: T;
     level: number;
-    children: Node<M>[] | null;
-    parent: Node<M> | null;
+    children: Node<T>[] | null;
+    parent: Node<T> | null;
     isOpen: boolean;
     rowIndex: number | null;
 };
-export declare type NodesById = {
-    [id: string]: Node;
+export declare type NodesById<T> = {
+    [id: string]: Node<T>;
 };
-export declare type NodeModel = {
+export interface IdObj {
     id: string;
-    children?: NodeModel[];
-    isOpen?: boolean;
-};
-export declare type NodeRendererProps<M extends NodeModel> = {
+}
+export declare type NodeRendererProps<T> = {
     preview: boolean;
-    node: Node<M>;
-    props: object;
+    node: Node<T>;
+    props: {
+        style: CSSProperties;
+        ref: Ref<any>;
+    };
     indent: number;
     state: NodeState;
     handlers: NodeHandlers;
@@ -38,67 +39,70 @@ export declare type NodeHandlers = {
     toggleIsEditing: () => void;
     rename: (name: string) => void;
 };
-export declare type NodeRenderer<M extends NodeModel = NodeModel> = ComponentType<NodeRendererProps<M>>;
+export declare type NodeRenderer<T> = ComponentType<NodeRendererProps<T>>;
 export declare type OnMove = (dragIds: string[], parentId: string | null, index: number) => void;
 export declare type IdHandler = (id: string) => void;
 export declare type RenameHandler = (id: string, name: string) => void;
-export declare type NodeClickHandler = (e: MouseEvent, n: Node) => void;
+export declare type NodeClickHandler<T> = (e: MouseEvent, n: Node<T>) => void;
 export declare type IndexClickHandler = (e: MouseEvent, index: number) => void;
 export declare type SelectedCheck = (index: number) => boolean;
 export declare type CursorLocation = {
-    parentId: string | null;
     index: number | null;
     level: number | null;
+    parentId: string | null;
 };
 export declare type DragItem = {
-    id: string;
     dragIds: string[];
+    id: string;
 };
 export declare type SelectionState = {
-    ids: string[];
     data: SelectionData | null;
+    ids: string[];
 };
 export declare type StateContext = {
-    visibleIds: string[];
-    editingId: string | null;
     cursorLocation: CursorLocation | null;
+    editingId: string | null;
     selection: SelectionState;
+    visibleIds: string[];
 };
-export declare type TreeViewProps = {
-    children: NodeRenderer<any>;
-    data: NodeModel;
-    width: number;
+export interface TreeProps<T> {
+    children: NodeRenderer<T>;
+    data: T;
     height: number;
+    width: number;
+    className?: string | undefined;
+    getChildren?: (model: T) => T[] | undefined;
+    getIsOpen?: (model: T) => boolean;
+    handle?: Ref<TreeHandle>;
+    hideRoot?: boolean;
     indent?: number;
-    rowHeight?: number;
+    onClose?: IdHandler;
     onMove?: OnMove;
     onOpen?: IdHandler;
-    onClose?: IdHandler;
     onRename?: RenameHandler;
-    className?: string | undefined;
-    hideRoot?: boolean;
-};
-export declare type TreeViewProviderProps = {
-    handle: ForwardedRef<TreeViewHandle>;
-    renderer: NodeRenderer<any>;
-    visibleNodes: Node[];
-    listRef: MutableRefObject<HTMLDivElement | null>;
+    rowHeight?: number;
+}
+export declare type TreeProviderProps<T> = {
     children: ReactElement;
-    indent: number;
-    rowHeight: number;
-    width: number;
+    handle?: Ref<TreeHandle>;
     height: number;
+    indent: number;
+    listRef: MutableRefObject<HTMLDivElement | null>;
+    onClose: IdHandler;
     onMove: OnMove;
     onOpen: IdHandler;
-    onClose: IdHandler;
     onRename: RenameHandler;
+    renderer: NodeRenderer<any>;
+    rowHeight: number;
+    visibleNodes: Node<T>[];
+    width: number;
 };
-export declare type StaticContext = TreeViewProviderProps & {
+export declare type StaticContext<T> = TreeProviderProps<T> & {
     dispatch: (a: Action) => void;
-    getNode: (id: string) => Node | null;
+    getNode: (id: string) => Node<T> | null;
 };
-export declare type TreeViewHandle = {
+export declare type TreeHandle = {
+    edit: (id: string) => void;
     selectedIds: string[];
     selectId: (id: string) => void;
-    edit: (id: string) => void;
 };

package/dist/lib/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/lib/utils.d.ts

@@ -1,13 +1,9 @@
-import { Node, NodeModel } from "./types";
+import { Node } from "./types";
 export declare function bound(n: number, min: number, max: number): number;
 export declare const isFolder: (node: Node<any>) => boolean;
-export declare const isHiddenRoot: (node: Node) => boolean;
 /**
  * Is first param a decendent of the second param
  */
 export declare const isDecendent: (a: Node, b: Node) => boolean;
 export declare const indexOf: (node: Node) => number;
-export declare function enrichTree(model: NodeModel, hideRoot?: boolean): Node;
-export declare function flattenTree(root: Node): Node[];
-export declare function createNode(model: NodeModel, level: number, parent: Node | null, children: Node[] | null): Node;
 export declare function noop(): void;

package/dist/lib/utils.js

@@ -1,12 +1,16 @@
-export function bound(n, min, max) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noop = exports.indexOf = exports.isDecendent = exports.isFolder = exports.bound = void 0;
+function bound(n, min, max) {
     return Math.max(Math.min(n, max), min);
 }
-export var isFolder = function (node) { return !!node.children; };
-export var isHiddenRoot = function (node) { return node.id === "HIDDEN"; };
+exports.bound = bound;
+var isFolder = function (node) { return !!node.children; };
+exports.isFolder = isFolder;
 /**
  * Is first param a decendent of the second param
  */
-export var isDecendent = function (a, b) {
+var isDecendent = function (a, b) {
     var n = a;
     while (n) {
         if (n.id === b.id)
@@ -15,49 +19,12 @@ export var isDecendent = function (a, b) {
     }
     return false;
 };
-export var indexOf = function (node) {
+exports.isDecendent = isDecendent;
+var indexOf = function (node) {
     if (!node.parent)
         throw Error("Node does not have a parent");
     return node.parent.children.findIndex(function (c) { return c.id === node.id; });
 };
-export function enrichTree(model, hideRoot) {
-    if (hideRoot === void 0) { hideRoot = false; }
-    function visitSelfAndChildren(m, level, parent) {
-        var n = createNode(m, level, parent, null);
-        if (m.children) {
-            n.children = m.children.map(function (child) {
-                return visitSelfAndChildren(child, level + 1, n);
-            });
-        }
-        return n;
-    }
-    return visitSelfAndChildren(model, hideRoot ? -1 : 0, null);
-}
-export 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;
-}
-export function createNode(model, level, parent, children) {
-    return {
-        id: model.id,
-        level: level,
-        parent: parent,
-        children: children,
-        isOpen: !!model.isOpen,
-        model: model,
-        rowIndex: null,
-    };
-}
-export function noop() { }
+exports.indexOf = indexOf;
+function noop() { }
+exports.noop = noop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "0.1.1",
+  "version": "0.1.5",
   "license": "MIT",
   "files": [
     "dist/lib"
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "tsc --noEmit false --outDir dist --declaration",
+    "build": "tsc --noEmit false --outDir dist --declaration --module CommonJS",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -37,8 +37,8 @@
     ]
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": ">= 16.14",
+    "react-dom": ">= 16.14"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.4",
@@ -46,8 +46,8 @@
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^16.8.0",
+    "@types/react-dom": "^16.8.0",
     "@types/react-window": "^1.8.5",
     "classnames": "^2.3.1",
     "react": "^17.0.2",

package/dist/lib/components/tree-list.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { TreeViewHandle, TreeViewProps } from "../types";
-export declare const TreeList: import("react").ForwardRefExoticComponent<TreeViewProps & import("react").RefAttributes<TreeViewHandle>>;

package/dist/lib/components/tree-list.js

@@ -1,75 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef } from "react";
-import { DndProvider, useDrop } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { FixedSizeList } from "react-window";
-import { TreeViewProvider, useStaticContext } from "../context";
-import { computeDrop } from "../dnd/compute-drop";
-import { setCursorLocation } from "../reducer";
-import { enrichTree, flattenTree, noop } from "../utils";
-import { Preview } from "./preview";
-import { Row } from "./row";
-function TreeListComponent(props, ref) {
-    var root = useMemo(function () { return enrichTree(props.data, props.hideRoot); }, [props.data, props.hideRoot]);
-    var visibleNodes = useMemo(function () { return flattenTree(root); }, [root]);
-    var listRef = useRef(null);
-    return (_jsx(TreeViewProvider, __assign({ handle: ref, visibleNodes: visibleNodes, listRef: listRef, renderer: props.children, width: props.width, height: props.height, indent: props.indent || 12, rowHeight: props.rowHeight || 24, onClose: props.onClose || noop, onMove: props.onMove || noop, onOpen: props.onOpen || noop, onRename: props.onRename || noop }, { children: _jsxs(DndProvider, __assign({ backend: HTML5Backend }, { children: [_jsx(OuterDrop, { children: _jsx(List, { className: props.className }, void 0) }, void 0), _jsx(Preview, {}, void 0)] }), void 0) }), void 0));
-}
-function OuterDrop(props) {
-    var treeList = useStaticContext();
-    // In case we drop an item at the bottom of the list
-    var _a = useDrop(function () { return ({
-        accept: "NODE",
-        hover: function (item, m) {
-            if (!m.isOver({ shallow: true }))
-                return;
-            var offset = m.getClientOffset();
-            if (!treeList.listRef.current || !offset)
-                return;
-            var cursor = computeDrop({
-                element: treeList.listRef.current,
-                offset: offset,
-                indent: treeList.indent,
-                node: null,
-                prevNode: treeList.visibleNodes[treeList.visibleNodes.length - 1],
-                nextNode: null,
-            }).cursor;
-            treeList.dispatch(setCursorLocation(cursor));
-        },
-        drop: function (item, m) {
-            if (m.didDrop())
-                return;
-            console.log("drop!!");
-            var offset = m.getClientOffset();
-            if (!treeList.listRef.current || !offset)
-                return;
-            var _a = computeDrop({
-                element: treeList.listRef.current,
-                offset: offset,
-                indent: treeList.indent,
-                node: null,
-                prevNode: treeList.visibleNodes[treeList.visibleNodes.length - 1],
-                nextNode: null,
-            }), parentId = _a.parentId, index = _a.index;
-            return { parentId: parentId, index: index };
-        },
-    }); }, [treeList]), drop = _a[1];
-    drop(treeList.listRef);
-    return props.children;
-}
-function List(props) {
-    var treeList = useStaticContext();
-    return (_jsx(FixedSizeList, __assign({ className: props.className, outerRef: treeList.listRef, itemCount: treeList.visibleNodes.length, height: treeList.height, width: treeList.width, itemSize: treeList.rowHeight }, { children: Row }), void 0));
-}
-export var TreeList = forwardRef(TreeListComponent);