@asup/tree-of-notes

REACT treeview, because I couldn't quite find what I wanted.

Works with/needs bootstrap, react-bootstrap, react-bootstrap-icons. Uses a context menu to facilitate Add/Rename/Remove actions.

Installation

# with npm
npm install @asup/tree-of-nodes

Tree-of-nodes Usage

import { iNodeUpdate, TreeNodeData, TreeOfNodes } from '@asup/tree-of-nodes';
import '@asup/tree-of-nodes/dist/style.css';

... inside REACT component

<TreeOfNodes<T>
  id: string;
  nodeList: TreeNodeData<T>[];
  roots: Key[];
  multiSelect?: boolean;
  selectedIds?: Key | Key[];
  handleSelect?: (ret: Key | Key []) => void;
  onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
  onRemove?: (childId: Key) => Promise<iNodeUpdate>;
  onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
  canRemoveRoot?: boolean;
  canRenameRoot?: boolean;
  canAddChildren?: boolean;
  canRemoveChildren?: boolean;
  canRenameChildren?: boolean;
  nodeHighlight?: string;
  textHighlight?: string;
  />

The component expects a list of nodes of type TreeNodeData<T> with unique React.Keys.

Properties

| Prop | Description | Default | | :---------------- | :---------------------------------------------------------------------------------------------- | :----------------: | | id | HTML id attribute | | | nodeList | Array of node data | | | roots | One or more node Keys to use as the root of the tree | | | multiSelect | Allow selection of more than 1 id | false | | selectedIds | Currently selected list | | | handleSelect | Function called when a node is clicked (selected), this should be used to update the selectedId | () => {return;} | | onAdd | Function called when a new node is added, this should be used to update the nodeList | | | onRemove | Function called when a node is removed, this should be used to update the nodeList | | | onRename | Function called when a node is renamed, this should be used to update the nodeList | | | canRemoveRoot | Allows removal of a root node in combination with specification of onRemove function | false | | canRenameRoot | Allows renaming of a root node in combination with specification of onRename function | false | | canAddChildren | Allows addition of children in combination with specification of onAdd function | false | | canRemoveChildren | Allows renaming of non-root nodes in combination with specification of onRemove function | false | | canRenameChildren | Allows renaming of non-root nodes in combination with specification of onRename function | false | | nodeHighlight | Selected node highlight colour | red | | textHighlight | Selected text highlight colour | rgba(255,0,0,0.2 | | spellCheck | Use/disable browser spell check | 'true' |

TreeNodeData

Required format for list of nodes, includes a holder for any type of data, which is there specified in the TreeOfNodes specification.

export type TreeNodeData<T> = {
  id: Key;
  label: string;
  parentId?: Key;
  data: T;
};

iNodeUpdate

Use this format to return from update functions.

export interface iNodeUpdate {
  success: boolean;
  ErrorText?: string;
}

Handling clicks

Context menu clicks on a node will result in a context menu being displayed with "Add", "Rename" and "Delete" options being displayed.

Clicks on an expander will either expand or close the node's clidren

Clicks on a name will select that item

Clicks on a checkbox will select that item and all its descendents.

Single item selection

To handle one (and only one) item being selected, it is suggested to use these base options

  <TreeOfNodes<T>
    id={'...'}
    nodeList={[...]}
    roots={[...]}
    selected={selected}
    handleSelect={async (i) => {
      setSelected([i]);
    }}
  />

Multiple item selection

To handle multiple selections, it is suggested to use these base options

  <TreeOfNodes<T>
    id={'...'}
    nodeList={[...]}
    roots={[...]}
    showCheckBox
    selected={selected}
    handleSelect={async (i) => {
      if (Array.isArray(i)) {
        setSelected(
          selected.includes(i[0])
            ? selected.filter((s) => !i.includes(s))
            : [...selected, ...i.filter((n) => !selected.includes(n))],
        );
      } else {
        setSelected(
          selected.includes(i) ? selected.filter((s) => s !== i) : [...selected, i],
        );
      }
    }}
  />