Tree

Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.

Usage

API

DaffTreeModule

import { DaffTreeModule } from '@daffodil/design/tree'

@NgModule()
class DaffTreeModule {}

DaffTreeComponent

The DaffTreeComponent allows you to render tree structures as interactable ui.

import { DaffTreeComponent } from '@daffodil/design/tree'

@Component()
class DaffTreeComponent implements OnInit, OnChanges {
  @Input() renderMode: DaffTreeRenderMode
  flatTree: DaffTreeFlatNode[]
  @Input() tree: DaffTreeData<unknown>
  ngOnChanges(changes: SimpleChanges): void
  trackByTreeElement(
    index: number
    el: any
  ): any
}

Selector: 'ul[daff-tree]'

Properties

Name	Type	Description
@Input() renderMode	DaffTreeRenderMode	The rendering mode for nodes in the tree. Default value is 'in-dom', which means nodes are present in the DOM. Generally, `not-in-dom` is faster as there are less DOM elements to render, but there may be use-cases (like SEO) where having the tree in the DOM is relevant.
flatTree	DaffTreeFlatNode[]	The flattened tree data. You can iterate through this if you want to inspect the resulting array structure we computed to render the tree.
@Input() tree	DaffTreeData<unknown>	The tree data you would like to render.
ngOnChanges	void
trackByTreeElement	any	The track-by function used to reduce tree-item re-renders

DaffTreeItemDirective

The DaffTreeItemDirective marks elements as tree child nodes that interact with the parent tree structure.

import { DaffTreeItemDirective } from '@daffodil/design/tree'

@Directive()
class DaffTreeItemDirective {
  @HostBinding() depth: number
  @HostBinding() 
  get selectedClass()
  @HostBinding() openClass: false
  @Input() 
  get node(): DaffTreeFlatNode
  set node(value): DaffTreeFlatNode
  @Input() selected: false
  toggleParent(node: DaffTreeFlatNode)
  toggleTree(node: DaffTreeFlatNode)
}

Selector: '[daffTreeItem]'

Properties

Name	Type	Description
depth	number	A css variable indicating the depth of the tree. You can use this to style your templates if you want to use different designs at different depths.
selectedClass		The CSS class indicating whether or not the tree is `selected`.
openClass	false	The CSS class indicating whether or not the tree is `open`.
@Input() node	DaffTreeFlatNode	The `DaffTreeFlatNode` associated with this specific tree item.
@Input() selected	false	Whether or not the tree item is the currently active item. Note that there is no requirement there there only be one active item at a time.
toggleParent		Toggle the open state of the tree's parent.
toggleTree		Toggle the open state of this specific subtree tree.

DaffTreeData

A basic tree type supporting supplemental data on a tree node.

Tree elements are often slightly more than just basic titles and child items. There may be other important data that needs to be available at render time.

import { DaffTreeData } from '@daffodil/design/tree'

interface DaffTreeData<T> {
  title: string
  url: string
  id: string
  items: DaffTreeData<T>[]
  data: T
}

Properties

Name	Type	Description
title	string
url	string
id	string
items	DaffTreeData<T>[]
data	T

daffTransformTree

Transform a tree-like structure into a DaffTreeData.

import { daffTransformTree } from '@daffodil/design/tree'

const daffTransformTree: <T extends Record<any, any>, V>(tree: T, transformFn: (type: T) => DaffTreeData<V>, key: keyof T) => DaffTreeData<V>

DaffTreeRenderMode

Represents the mode of rendering for nodes in a tree UI.

'in-dom': Closed nodes are present in the Document Object Model (DOM).
'not-in-dom': Closed nodes are not present in the Document Object Model (DOM).

import { DaffTreeRenderMode } from '@daffodil/design/tree'

type DaffTreeRenderMode = 'in-dom' | 'not-in-dom'

Type	Options
DaffTreeRenderMode	`'in-dom' \| 'not-in-dom'`

DAFF_TREE_COMPONENTS

import { DAFF_TREE_COMPONENTS } from '@daffodil/design/tree'

const DAFF_TREE_COMPONENTS: readonly [typeof DaffTreeComponent, typeof DaffTreeItemDirective]