react-arborist 0.1.14 → 0.2.0-beta.0

package/src/tree-api.ts

@@ -0,0 +1,129 @@
+import memoizeOne from "memoize-one";
+import { Dispatch } from "react";
+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";
+
+export class TreeApi<T = unknown> {
+  constructor(
+    public dispatch: Dispatch<Action>,
+    public state: StateContext,
+    public props: TreeProviderProps<T>,
+    public list: FixedSizeList | undefined
+  ) {}
+
+  assign(
+    dispatch: Dispatch<Action>,
+    state: StateContext,
+    props: TreeProviderProps<T>,
+    list: FixedSizeList | undefined
+  ) {
+    this.dispatch = dispatch;
+    this.state = state;
+    this.props = props;
+    this.list = list;
+  }
+
+  getNode(id: string): Node<unknown> | null {
+    if (id in this.idToIndex)
+      return this.visibleNodes[this.idToIndex[id]] || null;
+    else return null;
+  }
+
+  getSelectedIds() {
+    return this.state.selection.ids;
+  }
+
+  edit(id: string | number | null) {
+    this.dispatch(actions.edit(id ? id.toString() : null));
+  }
+
+  select(index: number | null, meta: boolean, shift: boolean) {
+    this.dispatch(actions.select(index, meta, shift));
+  }
+
+  selectUpwards(shiftKey: boolean) {
+    this.dispatch(actions.stepUp(shiftKey, this.visibleIds));
+  }
+
+  selectDownwards(shiftKey: boolean) {
+    this.dispatch(actions.stepDown(shiftKey, this.visibleIds));
+  }
+
+  hideCursor() {
+    this.dispatch(actions.setCursorLocation({ type: "none" }));
+  }
+
+  showCursor(cursor: Cursor) {
+    this.dispatch(actions.setCursorLocation(cursor));
+  }
+
+  scrollToId(id: string) {
+    if (!this.list) return;
+    const index = this.idToIndex[id];
+    if (index) {
+      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(() => {
+        const index = this.idToIndex[id];
+        if (index) {
+          this.list?.scrollToItem(index, "start");
+        }
+      });
+    }
+  }
+
+  open(id: string) {
+    this.props.onToggle(id, true);
+  }
+
+  openParents(id: string) {
+    const node = dfs(this.props.root, id);
+    let parent = node?.parent;
+
+    while (parent) {
+      this.open(parent.id);
+      parent = parent.parent;
+    }
+  }
+
+  get visibleIds() {
+    return getIds(this.visibleNodes);
+  }
+
+  get idToIndex() {
+    return createIndex(this.visibleNodes);
+  }
+
+  get visibleNodes() {
+    return createList(this.props.root);
+  }
+}
+
+const getIds = memoizeOne((nodes: Node[]) => nodes.map((n) => n.id));
+const createIndex = memoizeOne((nodes: Node[]) => {
+  return nodes.reduce<{ [id: string]: number }>((map, node, index) => {
+    map[node.id] = index;
+    return map;
+  }, {});
+});
+const createList = memoizeOne(flattenTree);
+
+function dfs(node: Node<unknown>, id: string): Node<unknown> | null {
+  if (!node) return null;
+  if (node.id === id) return node;
+  if (node.children) {
+    for (let child of node.children) {
+      const result = dfs(child, id);
+      if (result) return result;
+    }
+  }
+  return null;
+}

package/src/types.ts

@@ -0,0 +1,147 @@
+import React, {
+  ComponentType,
+  CSSProperties,
+  MouseEvent,
+  MouseEventHandler,
+  MutableRefObject,
+  ReactElement,
+  Ref,
+} from "react";
+import { FixedSizeList } from "react-window";
+import { Cursor } from "./dnd/compute-drop";
+import { SelectionData } from "./selection/selection";
+import { TreeApi } from "./tree-api";
+
+// Forward ref can't forward generics without this little re-declare
+// https://fettblog.eu/typescript-react-generic-forward-refs/
+declare module "react" {
+  function forwardRef<T, P = {}>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+
+export type Node<T = unknown> = {
+  id: string;
+  model: T;
+  level: number;
+  children: Node<T>[] | null;
+  parent: Node<T> | null;
+  isOpen: boolean;
+  isDraggable: boolean;
+  isDroppable: boolean;
+  rowIndex: number | null;
+};
+
+export type NodesById<T> = { [id: string]: Node<T> };
+
+export interface IdObj {
+  id: string;
+}
+
+export type NodeRendererProps<T> = {
+  innerRef: (el: HTMLDivElement | null) => void;
+  styles: { row: CSSProperties; indent: CSSProperties };
+  data: T;
+  state: NodeState;
+  handlers: NodeHandlers;
+  tree: TreeApi<T>;
+  preview: boolean;
+};
+
+export type NodeState = {
+  isOpen: boolean;
+  isSelected: boolean;
+  isHoveringOverChild: boolean;
+  isDragging: boolean;
+  isFirstOfSelected: boolean;
+  isLastOfSelected: boolean;
+  isEditing: boolean;
+};
+
+export type NodeHandlers = {
+  toggle: MouseEventHandler;
+  select: (e: MouseEvent, selectOnClick?: boolean) => void;
+  edit: () => void;
+  submit: (name: string) => void;
+  reset: () => void;
+};
+
+export type NodeRenderer<T> = ComponentType<NodeRendererProps<T>>;
+
+export type MoveHandler = (
+  dragIds: string[],
+  parentId: string | null,
+  index: number
+) => void;
+
+export type ToggleHandler = (id: string, isOpen: boolean) => void;
+export type EditHandler = (id: string, name: string) => void;
+export type NodeClickHandler<T> = (e: MouseEvent, n: Node<T>) => void;
+export type IndexClickHandler = (e: MouseEvent, index: number) => void;
+export type SelectedCheck = (index: number) => boolean;
+
+export type CursorLocation = {
+  index: number | null;
+  level: number | null;
+  parentId: string | null;
+};
+
+export type DragItem = {
+  dragIds: string[];
+  id: string;
+};
+
+export type SelectionState = {
+  data: SelectionData | null;
+  ids: string[];
+};
+
+export type StateContext = {
+  cursor: Cursor;
+  editingId: string | null;
+  selection: SelectionState;
+  visibleIds: string[];
+};
+export interface TreeProps<T> {
+  children: NodeRenderer<T>;
+  data: T;
+  height?: number;
+  width?: number;
+  rowHeight?: number;
+  indent?: number;
+  hideRoot?: boolean;
+  onToggle?: ToggleHandler;
+  onMove?: MoveHandler;
+  onEdit?: EditHandler;
+  getChildren?: string | ((d: T) => T[]);
+  isOpen?: string | ((d: T) => boolean);
+  disableDrag?: string | boolean | ((d: T) => boolean);
+  disableDrop?: string | boolean | ((d: T) => boolean);
+  openByDefault?: boolean;
+  className?: string | undefined;
+  handle?: Ref<TreeApi<T>>;
+  onClick?: MouseEventHandler;
+  onContextMenu?: MouseEventHandler;
+}
+
+export type TreeProviderProps<T> = {
+  imperativeHandle: React.Ref<TreeApi<T>> | undefined;
+  children: ReactElement;
+  height: number;
+  indent: number;
+  listEl: MutableRefObject<HTMLDivElement | null>;
+  onToggle: ToggleHandler;
+  onMove: MoveHandler;
+  onEdit: EditHandler;
+  onClick?: MouseEventHandler;
+  onContextMenu?: MouseEventHandler;
+  renderer: NodeRenderer<any>;
+  rowHeight: number;
+  root: Node<T>;
+  width: number;
+};
+
+export type StaticContext<T> = TreeProviderProps<T> & {
+  api: TreeApi<T>;
+  list: MutableRefObject<FixedSizeList | undefined>;
+};

package/src/utils.ts

@@ -0,0 +1,35 @@
+import { Node } from "./types";
+
+export function bound(n: number, min: number, max: number) {
+  return Math.max(Math.min(n, max), min);
+}
+
+export const isFolder = (node: Node<any>) => !!node.children;
+
+export function isItem(node: Node | null) {
+  return node && !isFolder(node);
+}
+
+export function isClosed(node: Node | null) {
+  return node && isFolder(node) && !node.isOpen;
+}
+
+/**
+ * Is first param a decendent of the second param
+ */
+export const isDecendent = (a: Node, b: Node) => {
+  let n: Node | null = a;
+  while (n) {
+    if (n.id === b.id) return true;
+    n = n.parent;
+  }
+  return false;
+};
+
+export const indexOf = (node: Node) => {
+  // This should probably not throw an error, but instead return null
+  if (!node.parent) throw Error("Node does not have a parent");
+  return node.parent.children!.findIndex((c) => c.id === node.id);
+};
+
+export function noop() {}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "include": ["src/index.ts"],
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Language and Environment */
+    "target": "ES5",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "jsx": "preserve",                                /* Specify what JSX code is generated. */
+
+    /* Modules */
+    "module": "CommonJS",                                /* Specify what module code is generated. */
+    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+
+    /* Emit */
+    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+
+    /* Interop Constraints */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    
+    /* Completeness */
+    "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
+  }
+}

package/README.md

@@ -1,197 +0,0 @@
-# React Arborist
-
-A full-featured tree component for React. 
-
-The tree UI is ubiquitous in software applications. There are many tree component libraries for React, but none were full-featured enough to stand on their own.
-
-This library provides all the common features expected in a tree. 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, 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
-```
-
-## Example
-
-Render the tree data structure.
-
-```jsx
-const data = {
-  id: "The Root",
-  children: [{id: "Node A"}, {id: "Node B"}]
-}
-
-function App() {
-  return (
-    <Tree data={data}>
-      {Node}
-    </Tree>
-  );
-}
-
-function Node({ ref, styles, data}) {
-  return (
-    <div ref={ref} style={styles.row}>
-      <div style={styles.indent}>
-        {data.name}
-      </div>
-    </div>
-  )
-}
-```
-
-#### Contents
-* [Expected Data Structure](#expected-data-structure)
-* [Tree Component API](#tree-component)
-* [Node Renderer API](#node-renderer-component)
-	* [Styles Prop](#styles-prop)
-	* [State Prop](#state-prop)
-	* [Handlers Prop](#handlers-prop)
-	* [Tree Prop](#tree-prop)
-
-## Expected Data Structure
-
-The Tree component expects the data prop to be a tree-like data structure with the following type:
-
-```ts
-type Data = {
-  id: string, /* Required */
-  children?: Data[]
-  isOpen?: boolean
-}
-```
-
-If your data does not look like this, you can provide a `childrenAccessor` prop. You can also provide `isOpenAccessor`. The value can be a string or a function.
-
-```ts
-<Tree childrenAccessor="items" ... 
-// Or 
-<Tree childrenAccessor={(node) => node.items} ... 
-```
-
-## Tree Component
-
-Unlike other Tree Components, react-arborist is designed as a [controlled component](https://reactjs.org/docs/forms.html#controlled-components). This means the consumer will provide the tree data and the handlers to update it. The only state managed internally is for drag and drop, selection, and editing.
-
-| Prop | Default | Description |
-| --- | --- | --- |
-| data  | (required) | The tree data structure to render as described above. |
-| width | 300 | The width of the tree.
-| height | 500 | The height of the tree. To dynamically fill it's container, use a [hook](https://github.com/ZeeCoder/use-resize-observer) or [component](https://github.com/bvaughn/react-virtualized-auto-sizer) to gather the width and height of the Tree's parent.
-| rowHeight | 24 | The height of each row.
-| indent | 24 | The number of pixels to indent child nodes.
-| hideRoot | false | Hide the root node so that the first set of children appear as the roots.
-| onToggle | noop | Handler called when a node is opened or closed. This and the subsequent functions should update the `data` prop for the tree to re-render.
-| onMove | noop | Handler called when a user moves one or more nodes by dragging and dropping.
-| onEdit | noop | Handler called when a user performs an inline edit of the node.
-| childrenAccessor | "children" | Used to get a node's children if they exist on a property other than "children".
-| isOpenAccessor | "isOpen" | Used to get a node's openness state if it exists on a property other than "isOpen".
-| openByDefault | true | Choose if the node should be open or closed when it has an undefined openness state.
-| className | undefined | Adds a class to the containing div.
-
-The only child of the Tree Component must be a NodeRenderer function as described below.
-
-```jsx
-const NodeRenderer = ({
-  innerRef, data, styles, handlers, state, tree
-}) => ...
-
-const MyApp = () => 
-  <Tree>
-    {NodeRenderer}
-  </Tree>
-```
-
-## Node Renderer Component
-
-The Node Renderer is where you get to make the tree your own. You completely own the style and functionality. The props passed to it should enable you to do whatever you need.
-
-The most basic node renderer will look like this:
-
-```jsx
-function NodeRenderer({
-  innerRef, 
-  styles, 
-  data, 
-  state, 
-  handlers, 
-  tree
-}) {
-  return (
-    <div ref={innerRef} style={styles.row}>
-      <div style={styles.indent}>{data.id}</div>
-    </div>
-  )
-}
-```
-
-The function above is passed data for this individual node, the DOM ref used for drag and drop, the styles to position the row in the virtualized list and the styles to indent the current node according to its level in the tree.
-
-| Prop | Type | Description |
-| ---- | ---- | ----------- |
-| data | Node | A single node from the tree data structure provided. | 
-| innerRef  | Ref | Must be attached to the root element returned by the NodeRenderer. This is needed for drag and drop to work.
-| [styles](#styles-prop) | object | This is an object that contains styles for the position of the row, and the level of indentation. Each key is described below.
-| [state](#state-prop) | object | An handful of boolean values that indicate the current state of this node. See below for details.
-| [handlers](#handlers-prop) | object | A collection of handlers to attach to the DOM, that provide selectable and toggle-able behaviors. Each handler is described below.
-| [tree](#tree-prop) | TreeMonitor | This object can be used to get at the internal state of the whole tree component. For example, `tree.getSelectedNodes()`. All the methods are listed below in the Tree Prop section.
-
-### Styles Prop
-
-These are the properties on the styles object passed to the NodeRenderer.
-
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| row | CSSProperties | Since the tree only renders the rows that are currently visible, all the rows are absolutely positioned with a fixed top and left. Those styles are in this property.
-| indent | CSSProperties | This is simply a left padding set to the level of the tree multiplied by the tree indent prop.
-
-### State Prop
-
-These are the properties on the state object passed to the NodeRenderer.
-
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| isOpen | boolean | True if this node has children and the children are visible. Use this to display some type a open or closed icon. 
-| isSelected | boolean | True if this node is selected. Use this to show a "selected" state. Maybe a different background?
-| isHoveringOverChild | boolean | True if the user is dragging n node, and the node is hovering over one of this node's direct children. This can be used to indicate which folder the user is dragging an item into.
-| isDragging | boolean | True if this node is being dragged.
-| isFirstOfSelected | boolean | True if this is the first of a contiguous group of selected rows. This can be used to tastefully style a group of selected items. Maybe a different border radius on the first and last rows?
-| isLastOfSelected | boolean | True if this is the last of a contiguous group of selected rows.
-| isEditing | boolean | True if this row is being edited. When true, the renderer should return some type of form input.
-
-
-### Handlers Prop
-
-These are the properties on the handlers object passed to the NodeRenderer.
-
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| select | MouseEventHandler | Attach this to the element that tiggers selection. Maybe you want to add it to the outermost div. <br /> `<div onClick={handlers.select}>`
-| toggle | MouseEventHandler | Attach this to the element that opens and closes the node. Maybe you want to add it to the `+`/`-` icon. <br />`<icon onClick={handlers.toggle}>`
-| edit | `() => void` | Makes this node editable. This will re-render the Node with the `state.isEditing` prop set to `true`.
-| submit | `(update: string) => void` | Sends the update to the `onEdit` handler in the Tree component, and sets the `state.isEditing` prop to `false`.
-| reset | `() => void` | Re-renders with the `state.isEditing` prop set to `false`.
-
-### Tree Prop
-
-The tree monitor provides methods to get the tree's internal state. A use case might be in a right click menu. 
-
-```jsx
-// In your node renderer
-onContextMenu={() => {
-  // Do something with all the selected nodes
-  tree.getSelectedIds()
-}}
-```
-
-| Methods | Returns | Description |
-| ---- | ---- | ----------- |
-| `getSelectedIds()` | `string[]` | Get the the ids of all currently selected nodes.
-| `edit(id: string)` | `void` | Edit a node programatically.

package/dist/lib/components/drop-cursor.js

@@ -1,53 +0,0 @@
-"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.DropCursor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var context_1 = require("../context");
-function DropCursor() {
-    var treeView = (0, context_1.useStaticContext)();
-    var cursor = (0, context_1.useCursorLocation)();
-    if (!cursor || cursor.type !== "line")
-        return null;
-    var top = treeView.rowHeight * cursor.index;
-    var left = treeView.indent * cursor.level;
-    var style = {
-        position: "absolute",
-        pointerEvents: "none",
-        top: top - 2 + "px",
-        left: treeView.indent + left + "px",
-        right: treeView.indent + "px",
-    };
-    return (0, jsx_runtime_1.jsx)(DefaultCursor, { style: style }, void 0);
-}
-exports.DropCursor = DropCursor;
-var placeholderStyle = {
-    display: "flex",
-    alignItems: "center",
-};
-var lineStyle = {
-    flex: 1,
-    height: "2px",
-    background: "#4B91E2",
-    borderRadius: "1px",
-};
-var circleStyle = {
-    width: "4px",
-    height: "4px",
-    boxShadow: "0 0 0 3px #4B91E2",
-    borderRadius: "50%",
-};
-function DefaultCursor(_a) {
-    var style = _a.style;
-    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.js

@@ -1,91 +0,0 @@
-"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.Preview = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_dnd_1 = require("react-dnd");
-var context_1 = require("../context");
-var layerStyles = {
-    position: "fixed",
-    pointerEvents: "none",
-    zIndex: 100,
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%",
-};
-var getStyle = function (offset) {
-    if (!offset)
-        return { display: "none" };
-    var x = offset.x, y = offset.y;
-    return { transform: "translate(" + x + "px, " + y + "px)" };
-};
-var getCountStyle = function (offset) {
-    if (!offset)
-        return { display: "none" };
-    var x = offset.x, y = offset.y;
-    return { transform: "translate(" + (x + 10) + "px, " + (y + 10) + "px)" };
-};
-function Preview() {
-    var _a = (0, react_dnd_1.useDragLayer)(function (m) { return ({
-        offset: m.getSourceClientOffset(),
-        mouse: m.getClientOffset(),
-        item: m.getItem(),
-        isDragging: m.isDragging(),
-    }); }), offset = _a.offset, mouse = _a.mouse, item = _a.item, isDragging = _a.isDragging;
-    return ((0, jsx_runtime_1.jsxs)(Overlay, __assign({ isDragging: isDragging }, { children: [(0, jsx_runtime_1.jsx)(Position, __assign({ offset: offset }, { children: (0, jsx_runtime_1.jsx)(PreviewNode, { item: item }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(Count, { mouse: mouse, item: item }, void 0)] }), void 0));
-}
-exports.Preview = Preview;
-var Overlay = (0, react_1.memo)(function Overlay(props) {
-    if (!props.isDragging)
-        return null;
-    return (0, jsx_runtime_1.jsx)("div", __assign({ style: layerStyles }, { children: props.children }), void 0);
-});
-function Position(props) {
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "row preview", style: getStyle(props.offset) }, { children: props.children }), void 0));
-}
-function Count(props) {
-    var _a;
-    var item = props.item, mouse = props.mouse;
-    if (((_a = item === null || item === void 0 ? void 0 : item.dragIds) === null || _a === void 0 ? void 0 : _a.length) > 1)
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "selected-count", style: getCountStyle(mouse) }, { children: item.dragIds.length }), void 0));
-    else
-        return null;
-}
-var PreviewNode = (0, react_1.memo)(function PreviewNode(props) {
-    var tree = (0, context_1.useStaticContext)();
-    if (!props.item)
-        return null;
-    var node = tree.api.getNode(props.item.id);
-    if (!node)
-        return null;
-    return ((0, jsx_runtime_1.jsx)(tree.renderer, { preview: true, innerRef: function () { }, data: node.model, styles: {
-            row: {},
-            indent: { paddingLeft: node.level * tree.indent },
-        }, tree: tree.api, state: {
-            isDragging: false,
-            isEditing: false,
-            isSelected: false,
-            isFirstOfSelected: false,
-            isLastOfSelected: false,
-            isHoveringOverChild: false,
-            isOpen: node.isOpen,
-        }, handlers: {
-            edit: function () { },
-            select: function () { },
-            toggle: function () { },
-            submit: function () { },
-            reset: function () { },
-        } }, void 0));
-});