createTree

constant

const createTree: WidgetFactory<TreeWidget>

Create a tree widget with given config props

Param

an optional tree config

Returns

a TreeWidget

getTreeDefaultConfig

function

getTreeDefaultConfig(): TreeProps

Retrieve a shallow copy of the default Tree config

Returns

TreeProps

the default Tree config

NormalizedTreeItem

interface

Normalized TreeItem object

Properties
ariaLabel

ariaLabel: string

Accessibility label for the node

children

children: NormalizedTreeItem[]

An array of children nodes

isExpanded?

optional isExpanded: boolean

If true the node is expanded

label

label: string

String title of the node

level

level: number

Level in the hierarchy, starts with 0 for a root node

TreeApi

interface

Interface representing the API for a Tree component.

TreeDirectives

interface

Interface representing various directives used in the Tree component.

Properties
itemAttributesDirective

itemAttributesDirective: Directive<{ item: NormalizedTreeItem; }>

Directive to handle attributes for the tree item

itemToggleDirective

itemToggleDirective: Directive<{ item: NormalizedTreeItem; }>

Directive to handle toggle for the tree item

navigationDirective

navigationDirective: Directive

Directive to attach navManager for the tree

TreeItem

interface

Represents a tree item component.

Extended by
Properties
ariaLabel?

optional ariaLabel: string

Optional accessibility label for the node

children?

optional children: TreeItem[]

Optional array of children nodes

isExpanded?

optional isExpanded: boolean

If true the node is expanded

label

label: string

String title of the node

TreeProps

interface

Interface representing the properties for the Tree component.

Properties
ariaLabel?

optional ariaLabel: string

Optional accessibility label for the tree if there is no explicit label

Default Value

''

ariaLabelToggleFn

ariaLabelToggleFn: (label) => string

Return the value for the 'aria-label' attribute of the toggle

Parameters
label

string

tree item label

Returns

string

Default Value
(label: string) => `Toggle ${label}`
className

className: string

CSS classes to be applied on the widget main container

Default Value

''

nodes

nodes: TreeItem[]

Array of the tree nodes to display

Default Value

[]

onExpandToggle

onExpandToggle: (node) => void

An event emitted when the user toggles the expand of the TreeItem.

Event payload is equal to the TreeItem clicked.

Parameters
node

NormalizedTreeItem

Returns

void

Default Value
() => {}
Methods
navSelector

navSelector(node): NodeListOf<HTMLElement>

Retrieves expand items of the TreeItem

Parameters
node

HTMLElement

HTML element that is representing the expand item

Returns

NodeListOf<HTMLElement>

Default Value
(node: HTMLElement) => node.querySelectorAll('button')

TreeState

interface

Represents the state of a Tree component.

Properties
ariaLabel?

optional ariaLabel: string

Optional accessibility label for the tree if there is no explicit label

Default Value

''

className

className: string

CSS classes to be applied on the widget main container

Default Value

''

expandedMap

expandedMap: object

Getter of expanded state for each tree node

get

get(item): undefined | boolean

Parameters

####### item

NormalizedTreeItem

Returns

undefined | boolean

normalizedNodes

normalizedNodes: NormalizedTreeItem[]

Array of normalized tree nodes

TreeWidget

type alias

TreeWidget = Widget<TreeProps, TreeState, TreeApi, TreeDirectives>

Represents a Tree widget component.