erikvullings / mithril-tree-component

A tree component for mithril.

mithril-tree-component

A tree component for Mithril that supports drag-and-drop, as well as selecting, creating and deleting items. You can play with it here.

Functionality:

• Drag-and-drop to move items (if editable.canUpdate is true).
• Create and delete tree items (if editable.canDelete and editable.canDeleteParent is true).
• Configurable properties for:
  • id property: unique id of the item.
  • parentId property: id of the parent.
  • name property: display title. Alternatively, provide your own component.
  • maxDepth: when specified, and editable.canCreate is true, do not add children that would exceed this depth, where depth is 0 for root items, 1 for children, etc.
  • isOpen: to indicate whether the tree should show the children. If not provided, the open/close state is maintained internally. This slightly affects the behaviour of the tree, e.g. after creating items, the parent is not automatically opened.
  • create: can be used to add your own TreeItem creation logic.
• Callback events:
  • onSelect: when a tree item is selected.
  • onBefore[Create | Update | Delete]: can be used to intercept (and block) tree item actions. If the onBeforeX call returns false, the action is stopped.
  • on[Create | Update | Delete]: when the creation is done.
  • When using async functions or promises, please make sure to call m.redraw() when you are done.

This repository contains two projects:

• An example project, showcasing the usage of the component.
• The mithril-tree-component itself.

Installation

The tree component is available on npm or can be used directly from unpkg.

npm i mithril-tree-component

Usage

npm i mithril-tree-component

From the example project. There you can also find some CSS styles.

import m from 'mithril';
import { unflatten } from '../utils';
import { TreeContainer, ITreeOptions, ITreeItem, uuid4 } from 'mithril-tree-component';

interface IMyTree extends ITreeItem {
  id: number | string;
  parentId: number | string;
  title: string;
}

export const TreeView = () => {
  const data: IMyTree[] = [
    { id: 1, parentId: 0, title: 'My id is 1' },
    { id: 2, parentId: 1, title: 'My id is 2' },
    { id: 3, parentId: 1, title: 'My id is 3' },
    { id: 4, parentId: 2, title: 'My id is 4' },
    { id: 5, parentId: 0, title: 'My id is 5' },
    { id: 6, parentId: 0, title: 'My id is 6' },
    { id: 7, parentId: 4, title: 'My id is 7' },
  ];
  const tree = unflatten(data);
  const options = {
    id: 'id',
    parentId: 'parentId',
    isOpen: 'isOpen',
    name: 'title',
    onSelect: (ti, isSelected) => console.log(`On ${isSelected ? 'select' : 'unselect'}: ${ti.title}`),
    onBeforeCreate: ti => console.log(`On before create ${ti.title}`),
    onCreate: ti => console.log(`On create ${ti.title}`),
    onBeforeDelete: ti => console.log(`On before delete ${ti.title}`),
    onDelete: ti => console.log(`On delete ${ti.title}`),
    onBeforeUpdate: (ti, action, newParent) =>
      console.log(`On before ${action} update ${ti.title} to ${newParent ? newParent.title : ''}.`),
    onUpdate: ti => console.log(`On update ${ti.title}`),
    create: (parent?: IMyTree) => {
      const item = {} as IMyTree;
      item.id = uuid4();
      if (parent) {
        item.parentId = parent.id;
      }
      item.title = `Created at ${new Date().toLocaleTimeString()}`;
      return item as ITreeItem;
    },
    editable: { canCreate: true, canDelete: true, canUpdate: true, canDeleteParent: false },
  } as ITreeOptions;
  return {
    view: () =>
      m('.row', [
        m('.col.s6', [m('h3', 'Mithril-tree-component'), m(TreeContainer, { tree, options })]),
        m('.col.s6', [m('h3', 'Tree data'), m('pre', m('code', JSON.stringify(tree, null, 2)))]),
      ]),
  };
};

Development

I prefer to use pnpm to install all libs only once on my PC, so if you aren't using it yet, please try it out.

npm i -g pnpm
pnpm m i
npm start

Contributing

Pull requests and stars are always welcome.

For bugs and feature requests, please create an issue.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

mithril-tree-component's Issues

When options.isOpen is undefined, the parent is not opened on creating children.

I.e. when you don't use an item property to store the isOpen state, the parent is displayed as being open, but his child is not shown.

Using async functions in the handlers

It would be good if we could use async functions or promises in the handlers, e.g. to update a value in a database via a REST call.

It would require, though, that the user issues an m.redraw() call when finished, as mithril will not know when the call is done.

Implement max-depth

When to stop adding new children to a tree item.

Make open/close (expand) state internal

When an isOpen property is specified, it is used to indicate whether a node is open (i.e. shows its children) or closed. However, this is not always desirable, since it means that different tree components that are attached to the same tree, always have the same open/closed state.
If the isOpen property is not specified, maintain the open/closed state internally.

Non-typescript version?

Specs don't allow typescript for our project, any chance you have a compiled non-typescript version?

Implement view component

Currently, we can only use the title/name for display. Allow the user to provide a Component.

how to add ondblclick event to TreeItem?

Is there any way to add ondblclick event to selected TreeItem via options?