Tree

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

Usage

API

Components

DaffTreeComponent

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

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

@Component()
class DaffTreeComponent implements OnInit, OnChanges {
  flatTree: DaffTreeFlatNode[] = []

  @Input() renderMode: DaffTreeRenderMode
  @Input() tree: DaffTreeData<unknown>

  ngOnChanges(changes: SimpleChanges): void
  trackByTreeElement(
    index: number
    el: any
  ): any
}

Properties

flatTree

DaffTreeFlatNode[]

Default	`[]`
Description	The flattened tree data. You can iterate through this if you want to inspect the resulting array structure we computed to render the tree.

() Methods

Parameters

Parameter	`changes: SimpleChanges`
Description

Parameters

Parameter	`index: number`
Description

Parameter	`el: any`
Description

Inputs

renderMode

DaffTreeRenderMode

Default –

Description

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.

tree

DaffTreeData

Default	–
Description	The tree data you would like to render.

Directives

DaffTreeItemDirective

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

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

@Directive()
class DaffTreeItemDirective {
  @HostBinding() depth: number
  @HostBinding() 
  get selectedClass(): boolean
  @HostBinding() openClass: boolean = false

  @Input() node: DaffTreeFlatNode
  @Input() selected: boolean = false

  toggleParent(node: DaffTreeFlatNode): void
  toggleTree(node: DaffTreeFlatNode): void
}

Properties

depth

number

Default	–
Description	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

boolean

Default	–
Description	The CSS class indicating whether or not the tree is `selected`.

openClass

boolean

Default	`false`
Description	The CSS class indicating whether or not the tree is `open`.

() Methods

Parameters

Parameter	`node: DaffTreeFlatNode`
Description

Parameters

Parameter	`node: DaffTreeFlatNode`
Description

Inputs

node

DaffTreeFlatNode

Default	–
Description	The DaffTreeFlatNode associated with this specific tree item.

selected

boolean

Default	`false`
Description	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.

Modules

DaffTreeModule

Deprecated

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

@NgModule()
class DaffTreeModule {}

Types

DaffTreeData

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

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.

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

DaffTreeRenderMode

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

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).

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

Constants

daffTransformTree

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

Transform a tree-like structure into a DaffTreeData.

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