react-arborist 0.1.1 → 0.1.5

package/README.md

@@ -1,9 +1,23 @@
 # React Arborist
 
-*A full-featured tree component for React.*
+A full-featured tree component for React. 
 
-![React Arborist Demo](http://g.recordit.co/XGrsubdORi.gif)
+The tree is a ubiquitous UI component in software applications. There are already many libraries that provide this componet for React apps, but none were full-featured enough to stand on their own.
 
+This libraries provides all the common features expected in a tree viewer. You can select one or many nodes to drag and drop into new positions, open and close folders, render an inline form for renaming, efficiently show thousands of items with virtualization, and provide your own node renderer to control the style.
+
+![Demo](https://user-images.githubusercontent.com/3460638/131920177-c47c34e5-d3e3-4826-937d-b366f527cdfe.gif)
+
+## Installation
+
+```
+yarn add react-arborist
+```
+
+```
+npm install react-arborist
+```
+    
 ## Features
 
 * sortable

package/dist/lib/components/drop-cursor.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,12 +10,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-import { useStaticContext } from "../context";
-export function DropCursor(_a) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropCursor = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_dom_1 = require("react-dom");
+var context_1 = require("../context");
+function DropCursor(_a) {
     var root = _a.root, cursor = _a.cursor;
-    var treeView = useStaticContext();
+    var treeView = (0, context_1.useStaticContext)();
     if (!cursor || !root || cursor.index === null || cursor.level === null)
         return null;
     var top = treeView.rowHeight * cursor.index;
@@ -26,8 +29,9 @@ export function DropCursor(_a) {
         left: left + "px",
         right: treeView.indent + "px",
     };
-    return createPortal(_jsx(DefaultCursor, { style: style }, void 0), root);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(DefaultCursor, { style: style }, void 0), root);
 }
+exports.DropCursor = DropCursor;
 var placeholderStyle = {
     display: "flex",
     alignItems: "center",
@@ -45,5 +49,5 @@ var circleStyle = {
 };
 function DefaultCursor(_a) {
     var style = _a.style;
-    return (_jsxs("div", __assign({ style: __assign(__assign({}, placeholderStyle), style) }, { children: [_jsx("div", { style: __assign({}, circleStyle) }, void 0), _jsx("div", { style: __assign({}, lineStyle) }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: __assign(__assign({}, placeholderStyle), style) }, { children: [(0, jsx_runtime_1.jsx)("div", { style: __assign({}, circleStyle) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: __assign({}, lineStyle) }, void 0)] }), void 0));
 }

package/dist/lib/components/preview.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function Preview(): JSX.Element | null;

package/dist/lib/components/preview.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,9 +10,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDragLayer } from "react-dnd";
-import { useStaticContext } from "../context";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Preview = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_dnd_1 = require("react-dnd");
+var context_1 = require("../context");
 var layerStyles = {
     position: "fixed",
     pointerEvents: "none",
@@ -33,9 +36,9 @@ var getCountStyle = function (offset) {
     var x = offset.x, y = offset.y;
     return { transform: "translate(" + (x + 10) + "px, " + (y + 10) + "px)" };
 };
-export function Preview() {
-    var treeView = useStaticContext();
-    var _a = useDragLayer(function (m) { return ({
+function Preview() {
+    var treeView = (0, context_1.useStaticContext)();
+    var _a = (0, react_dnd_1.useDragLayer)(function (m) { return ({
         isDragging: m.isDragging(),
         offset: m.getSourceClientOffset(),
         mouse: m.getClientOffset(),
@@ -46,7 +49,7 @@ export function Preview() {
     var node = treeView.getNode(item.id);
     if (!node)
         return null;
-    return (_jsxs("div", __assign({ style: layerStyles }, { children: [_jsx("div", __assign({ className: "row preview", style: getStyle(offset) }, { children: _jsx(treeView.renderer, { preview: true, node: node, props: {}, state: {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: layerStyles }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "row preview", style: getStyle(offset) }, { children: (0, jsx_runtime_1.jsx)(treeView.renderer, { preview: true, node: node, props: { style: {}, ref: function () { } }, state: {
                         isEditing: false,
                         isSelected: false,
                         isHoveringOverChild: false,
@@ -56,5 +59,6 @@ export function Preview() {
                         toggleIsSelected: function () { },
                         toggleIsOpen: function () { },
                         rename: function () { },
-                    } }, void 0) }), void 0), item.dragIds.length > 1 && (_jsx("div", __assign({ className: "selected-count", style: getCountStyle(mouse) }, { children: item.dragIds.length }), void 0))] }), void 0));
+                    } }, void 0) }), void 0), item.dragIds.length > 1 && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "selected-count", style: getCountStyle(mouse) }, { children: item.dragIds.length }), void 0))] }), void 0));
 }
+exports.Preview = Preview;

package/dist/lib/components/row.d.ts

@@ -1,7 +1,7 @@
-import { CSSProperties } from "react";
+import React, { CSSProperties } from "react";
 declare type Props = {
     style: CSSProperties;
     index: number;
 };
-export declare const Row: import("react").NamedExoticComponent<Props>;
+export declare const Row: React.NamedExoticComponent<Props>;
 export {};

package/dist/lib/components/row.js

@@ -1,27 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useMemo, useRef } from "react";
-import { useCursorParentId, useEditingId, useIsSelected, useStaticContext, } from "../context";
-import { useDragHook } from "../dnd/drag-hook";
-import { useDropHook } from "../dnd/drop-hook";
-import { edit, select } from "../reducer";
-export var Row = memo(function Row(_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var context_1 = require("../context");
+var drag_hook_1 = require("../dnd/drag-hook");
+var drop_hook_1 = require("../dnd/drop-hook");
+var reducer_1 = require("../reducer");
+exports.Row = (0, react_1.memo)(function Row(_a) {
     var index = _a.index, style = _a.style;
-    var treeView = useStaticContext();
-    var selected = useIsSelected();
+    var treeView = (0, context_1.useStaticContext)();
+    var selected = (0, context_1.useIsSelected)();
     var node = treeView.visibleNodes[index];
     var next = treeView.visibleNodes[index + 1] || null;
     var prev = treeView.visibleNodes[index - 1] || null;
-    var cursorParentId = useCursorParentId();
-    var el = useRef(null);
-    var _b = useDragHook(node), isDragging = _b[0].isDragging, dragRef = _b[1];
-    var dropRef = useDropHook(el, node, prev, next);
-    var isEditing = node.id === useEditingId();
+    var cursorParentId = (0, context_1.useCursorParentId)();
+    var el = (0, react_1.useRef)(null);
+    var _b = (0, drag_hook_1.useDragHook)(node), isDragging = _b[0].isDragging, dragRef = _b[1];
+    var dropRef = (0, drop_hook_1.useDropHook)(el, node, prev, next);
+    var isEditing = node.id === (0, context_1.useEditingId)();
     var isSelected = selected(index);
     var nextSelected = next && selected(index + 1);
     var prevSelected = prev && selected(index - 1);
     var isHoveringOverChild = node.id === cursorParentId;
     var isOpen = node.isOpen;
-    var state = useMemo(function () {
+    var state = (0, react_1.useMemo)(function () {
         return {
             isEditing: isEditing,
             isDragging: isDragging,
@@ -40,19 +43,19 @@ export var Row = memo(function Row(_a) {
         isOpen,
         isDragging,
     ]);
-    var props = useMemo(function () { return ({
+    var props = (0, react_1.useMemo)(function () { return ({
         style: style,
         ref: function (n) {
             el.current = n;
             dragRef(dropRef(n));
         },
     }); }, [style, dragRef, dropRef]);
-    var handlers = useMemo(function () {
+    var handlers = (0, react_1.useMemo)(function () {
         return {
             toggleIsSelected: function (e) {
                 if (node.rowIndex === null)
                     return;
-                treeView.dispatch(select(node.rowIndex, e.metaKey, e.shiftKey));
+                treeView.dispatch((0, reducer_1.select)(node.rowIndex, e.metaKey, e.shiftKey));
             },
             toggleIsOpen: function (e) {
                 e.stopPropagation();
@@ -60,21 +63,21 @@ export var Row = memo(function Row(_a) {
             },
             toggleIsEditing: function () {
                 if (isEditing) {
-                    treeView.dispatch(edit(null));
+                    treeView.dispatch((0, reducer_1.edit)(null));
                 }
                 else {
-                    treeView.dispatch(edit(node.id));
+                    treeView.dispatch((0, reducer_1.edit)(node.id));
                 }
             },
             rename: function (name) {
                 if (name.trim())
                     treeView.onRename(node.id, name);
-                treeView.dispatch(edit(null));
+                treeView.dispatch((0, reducer_1.edit)(null));
             },
         };
     }, [treeView, node, isEditing]);
-    var Renderer = useMemo(function () {
-        return memo(treeView.renderer);
+    var Renderer = (0, react_1.useMemo)(function () {
+        return (0, react_1.memo)(treeView.renderer);
     }, [treeView.renderer]);
-    return (_jsx(Renderer, { preview: false, node: node, props: props, state: state, indent: treeView.indent * node.level, handlers: handlers }, void 0));
+    return ((0, jsx_runtime_1.jsx)(Renderer, { preview: false, node: node, props: props, state: state, indent: treeView.indent * node.level, handlers: handlers }, void 0));
 });

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

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

package/dist/lib/components/tree.js

@@ -0,0 +1,37 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tree = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_dnd_1 = require("react-dnd");
+var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+var react_window_1 = require("react-window");
+var context_1 = require("../context");
+var visible_nodes_hook_1 = require("../data/visible-nodes-hook");
+var outer_drop_hook_1 = require("../dnd/outer-drop-hook");
+var utils_1 = require("../utils");
+var preview_1 = require("./preview");
+var row_1 = require("./row");
+function Tree(props) {
+    return ((0, jsx_runtime_1.jsx)(context_1.TreeViewProvider, __assign({ handle: props.handle, visibleNodes: (0, visible_nodes_hook_1.useVisibleNodes)(props), listRef: (0, react_1.useRef)(null), renderer: props.children, width: props.width, height: props.height, indent: props.indent || 12, rowHeight: props.rowHeight || 24, onClose: props.onClose || utils_1.noop, onMove: props.onMove || utils_1.noop, onOpen: props.onOpen || utils_1.noop, onRename: props.onRename || utils_1.noop }, { children: (0, jsx_runtime_1.jsxs)(react_dnd_1.DndProvider, __assign({ backend: react_dnd_html5_backend_1.HTML5Backend }, { children: [(0, jsx_runtime_1.jsx)(OuterDrop, { children: (0, jsx_runtime_1.jsx)(List, { className: props.className }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(preview_1.Preview, {}, void 0)] }), void 0) }), void 0));
+}
+exports.Tree = Tree;
+function OuterDrop(props) {
+    (0, outer_drop_hook_1.useOuterDrop)();
+    return props.children;
+}
+function List(props) {
+    var tree = (0, context_1.useStaticContext)();
+    return ((0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, __assign({ className: props.className, outerRef: tree.listRef, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight }, { children: row_1.Row }), void 0));
+}

package/dist/lib/context.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { StaticContext, TreeViewProviderProps } from "./types";
+import { IdObj, StaticContext, TreeProviderProps } from "./types";
 export declare function useCursorParentId(): string | null;
-export declare function useStaticContext(): StaticContext;
+export declare function useStaticContext(): StaticContext<IdObj>;
 export declare function useDispatch(): never;
 export declare function useSelectedIds(): string[];
 export declare function useIsSelected(): (index: number | null) => boolean;
 export declare function useEditingId(): string | null;
-export declare function TreeViewProvider(props: TreeViewProviderProps): JSX.Element;
+export declare function TreeViewProvider<T>(props: TreeProviderProps<T>): JSX.Element;

package/dist/lib/context.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,84 +10,93 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useImperativeHandle, useLayoutEffect, useMemo, useReducer, } from "react";
-import { DropCursor } from "./components/drop-cursor";
-import { edit, initState, reducer, select, selectId, setVisibleIds, } from "./reducer";
-import { Selection } from "./selection/selection";
-import { useSelectionKeys } from "./selection/selection-hook";
-var CursorParentId = createContext(null);
-export function useCursorParentId() {
-    return useContext(CursorParentId);
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeViewProvider = exports.useEditingId = exports.useIsSelected = exports.useSelectedIds = exports.useDispatch = exports.useStaticContext = exports.useCursorParentId = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var drop_cursor_1 = require("./components/drop-cursor");
+var reducer_1 = require("./reducer");
+var selection_1 = require("./selection/selection");
+var selection_hook_1 = require("./selection/selection-hook");
+var CursorParentId = (0, react_1.createContext)(null);
+function useCursorParentId() {
+    return (0, react_1.useContext)(CursorParentId);
 }
-var Static = createContext(null);
-export function useStaticContext() {
-    var value = useContext(Static);
+exports.useCursorParentId = useCursorParentId;
+var Static = (0, react_1.createContext)(null);
+function useStaticContext() {
+    var value = (0, react_1.useContext)(Static);
     if (!value)
         throw new Error("Context must be in a provider");
     return value;
 }
-var DispatchContext = createContext(null);
-export function useDispatch() {
-    var dispatch = useContext(DispatchContext);
+exports.useStaticContext = useStaticContext;
+var DispatchContext = (0, react_1.createContext)(null);
+function useDispatch() {
+    var dispatch = (0, react_1.useContext)(DispatchContext);
     if (!dispatch)
         throw new Error("No dispatch provided");
     return dispatch;
 }
-var SelectionContext = createContext(null);
-export function useSelectedIds() {
-    var value = useContext(SelectionContext);
+exports.useDispatch = useDispatch;
+var SelectionContext = (0, react_1.createContext)(null);
+function useSelectedIds() {
+    var value = (0, react_1.useContext)(SelectionContext);
     if (!value)
         throw new Error("Must provide selection context");
     return value.ids;
 }
-export function useIsSelected() {
-    var value = useContext(SelectionContext);
+exports.useSelectedIds = useSelectedIds;
+function useIsSelected() {
+    var value = (0, react_1.useContext)(SelectionContext);
     if (!value)
         throw new Error("Must provide selection context");
-    var s = useMemo(function () { return Selection.parse(value.data, []); }, [value.data]);
+    var s = (0, react_1.useMemo)(function () { return selection_1.Selection.parse(value.data, []); }, [value.data]);
     return function (i) { return s.contains(i); };
 }
-var EditingIdContext = createContext(null);
-export function useEditingId() {
-    return useContext(EditingIdContext);
+exports.useIsSelected = useIsSelected;
+var EditingIdContext = (0, react_1.createContext)(null);
+function useEditingId() {
+    return (0, react_1.useContext)(EditingIdContext);
 }
-export function TreeViewProvider(props) {
+exports.useEditingId = useEditingId;
+function TreeViewProvider(props) {
     var _a;
-    var _b = useReducer(reducer, initState()), state = _b[0], dispatch = _b[1];
-    var visibleIds = useMemo(function () { return props.visibleNodes.map(function (n) { return n.id; }); }, [props.visibleNodes]);
-    useSelectionKeys(props.listRef, dispatch, visibleIds);
-    var idToIndex = useMemo(function () {
+    var _b = (0, react_1.useReducer)(reducer_1.reducer, (0, reducer_1.initState)()), state = _b[0], dispatch = _b[1];
+    var visibleIds = (0, react_1.useMemo)(function () { return props.visibleNodes.map(function (n) { return n.id; }); }, [props.visibleNodes]);
+    (0, selection_hook_1.useSelectionKeys)(props.listRef, dispatch, visibleIds);
+    var idToIndex = (0, react_1.useMemo)(function () {
         return props.visibleNodes.reduce(function (map, node, index) {
             map[node.id] = index;
             return map;
         }, {});
     }, [props.visibleNodes]);
-    var staticValue = useMemo(function () { return (__assign(__assign({}, props), { dispatch: dispatch, getNode: function (id) {
+    var staticValue = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props), { dispatch: dispatch, getNode: function (id) {
             if (id in idToIndex)
                 return props.visibleNodes[idToIndex[id]] || null;
             else
                 return null;
         } })); }, [props, idToIndex]);
-    useLayoutEffect(function () {
-        dispatch(setVisibleIds(visibleIds, idToIndex));
+    (0, react_1.useLayoutEffect)(function () {
+        dispatch((0, reducer_1.setVisibleIds)(visibleIds, idToIndex));
     }, [idToIndex, visibleIds]);
-    useImperativeHandle(props.handle, function () { return ({
+    (0, react_1.useImperativeHandle)(props.handle, function () { return ({
         selectedIds: state.selection.ids,
         selectId: function (id) {
             var node = staticValue.getNode(id);
             if (node && node.rowIndex) {
-                dispatch(select(node.rowIndex, false, false));
+                dispatch((0, reducer_1.select)(node.rowIndex, false, false));
             }
             else {
-                dispatch(selectId(id));
+                dispatch((0, reducer_1.selectId)(id));
             }
         },
         edit: function (id) {
-            dispatch(edit(id));
+            dispatch((0, reducer_1.edit)(id));
         },
     }); }, [staticValue, state.selection.ids]);
     return (
     // @ts-ignore
-    _jsx(Static.Provider, __assign({ value: staticValue }, { children: _jsx(EditingIdContext.Provider, __assign({ value: state.editingId }, { children: _jsxs(SelectionContext.Provider, __assign({ value: state.selection }, { children: [_jsx(CursorParentId.Provider, __assign({ value: ((_a = state.cursorLocation) === null || _a === void 0 ? void 0 : _a.parentId) || null }, { children: props.children }), void 0), _jsx(DropCursor, { root: props.listRef.current, cursor: state.cursorLocation }, void 0)] }), void 0) }), void 0) }), void 0));
+    (0, jsx_runtime_1.jsx)(Static.Provider, __assign({ value: staticValue }, { children: (0, jsx_runtime_1.jsx)(EditingIdContext.Provider, __assign({ value: state.editingId }, { children: (0, jsx_runtime_1.jsxs)(SelectionContext.Provider, __assign({ value: state.selection }, { children: [(0, jsx_runtime_1.jsx)(CursorParentId.Provider, __assign({ value: ((_a = state.cursorLocation) === null || _a === void 0 ? void 0 : _a.parentId) || null }, { children: props.children }), void 0), (0, jsx_runtime_1.jsx)(drop_cursor_1.DropCursor, { root: props.listRef.current, cursor: state.cursorLocation }, void 0)] }), void 0) }), void 0) }), void 0));
 }
+exports.TreeViewProvider = TreeViewProvider;

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

@@ -0,0 +1,2 @@
+import { IdObj, Node } from "../types";
+export declare function enrichTree<T extends IdObj>(model: T, hideRoot?: boolean, getChildren?: (m: T) => T[] | undefined, getIsOpen?: (m: T) => boolean): Node<T>;

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.enrichTree = void 0;
+var defaultGetIsOpen = function (m) { return m.isOpen; };
+var defaultGetChildren = function (m) { return m.children; };
+function createNode(model, level, parent, children, isOpen) {
+    return {
+        id: model.id,
+        level: level,
+        parent: parent,
+        children: children,
+        isOpen: isOpen,
+        model: model,
+        rowIndex: null,
+    };
+}
+function enrichTree(model, hideRoot, getChildren, getIsOpen) {
+    if (hideRoot === void 0) { hideRoot = false; }
+    if (getChildren === void 0) { getChildren = defaultGetChildren; }
+    if (getIsOpen === void 0) { getIsOpen = defaultGetIsOpen; }
+    function visitSelfAndChildren(model, level, parent) {
+        var isOpen = getIsOpen(model);
+        var node = createNode(model, level, parent, null, isOpen);
+        var children = getChildren(model);
+        if (children) {
+            node.children = children.map(function (child) {
+                return visitSelfAndChildren(child, level + 1, node);
+            });
+        }
+        return node;
+    }
+    return visitSelfAndChildren(model, hideRoot ? -1 : 0, null);
+}
+exports.enrichTree = enrichTree;