Tesserae - Tree

Tree

Description

A component that displays a hierarchical list

A tree displays hierarchical data. Nodes can be expanded or collapsed to reveal nested data.

Supports synchronous and asynchronous loading of child nodes.

API reference

class

Tree

public sealed class Tree : ComponentBase<Tree, HTMLUListElement>, IContainer<Tree.Item, Tree.Item>

A vertically-stacked tree view with expand / collapse, keyboard navigation, selection and arbitrary item rendering.

Constructors

Constructor

Tree

public Tree()

Initializes a new instance of this class.

Properties

Property

Tree.SelectedItem

public Item SelectedItem { get; private set; }

Gets the currently selected item.

Methods

Method

Tree.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

Tree.OnSelected

public Tree OnSelected(ComponentEventHandler<Tree, Item> onSelected)

Registers a callback invoked when the selected event fires.

Method

Tree.SelectionEnabled

public Tree SelectionEnabled(bool enabled = true)

Enables or disables item selection on the tree.

Method

Tree.Add

public void Add(Item component)

Adds the given item to the component.

Method

Tree.Clear

public void Clear()

Clears the component's current state.

Method

Tree.Replace

public void Replace(Item newComponent, Item oldComponent)

Replaces an existing item with a new one.

Method

Tree.Items

public Tree Items(params Item[] children)

Adds the given items to the component.

Events

Event

Tree.SelectedItemChanged

public event ComponentEventHandler<Tree, Item> SelectedItemChanged

Raised when selected item changed occurs.

Samples

Basic Synchronous Tree

tree-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = new Tree().Items(
                new Tree.Item("samples/ConsoleApp...", UIcons.Folder).Expanded().Items(
                    new Tree.Item("ConsoleApp1.csproj", UIcons.File).Selected(),
                    new Tree.Item("Program.cs", UIcons.File)
                ),
                new Tree.Item("src", UIcons.Folder).Expanded().Items(
                    new Tree.Item("MarkdownRende...", UIcons.Folder).Expanded().Items(
                        new Tree.Item("MarkdownConve...", UIcons.File),
                        new Tree.Item("Slides", UIcons.Folder).Expanded().Items(
                            new Tree.Item("Blocks", UIcons.Folder).Expanded().Items(
                                new Tree.Item("HeadingRe...", UIcons.File),
                                new Tree.Item("HeadingRe...", UIcons.File)
                            ),
                            new Tree.Item("SlideDocume...", UIcons.File)
                        )
                    ),
                    new Tree.Item("MarkdownRende...", UIcons.Folder).Expanded().Items(
                        new Tree.Item("MarkdownRende...", UIcons.File),
                        new Tree.Item("Program.cs", UIcons.File)
                    ),
                    new Tree.Item("MarkdownRenderer...", UIcons.File)
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Asynchronous Tree

tree-2-sample.js

using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = new Tree().Items(
                new Tree.Item("Lazy Loaded Folder", UIcons.Folder).ItemsAsync(async () =>
                {
                    await Task.Delay(1000);
                    return new[]
                    {
                        new Tree.Item("Async Child 1", UIcons.File),
                        new Tree.Item("Async Child 2", UIcons.File)
                    };
                })
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Selectable Tree

tree-3-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = new Tree().SelectionEnabled().Items(
                new Tree.Item("Root 1", UIcons.Folder).Expanded().Items(
                    new Tree.Item("Child A", UIcons.File),
                    new Tree.Item("Child B", UIcons.File)
                ),
                new Tree.Item("Root 2", UIcons.Folder).Expanded().Items(
                    new Tree.Item("Child C", UIcons.File).Selected(),
                    new Tree.Item("Child D", UIcons.File)
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

File-System Tree with Selection Events

This sample models a realistic project layout. OnSelected on the Tree fires every time the user clicks an item, so we mirror the path of the selected node in a panel beside the tree.

tree-4-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var selected = TextBlock("(none)").SemiBold();

            var tree = new Tree().SelectionEnabled().Items(
                new Tree.Item("my-app", UIcons.Folder).Expanded().Items(
                    new Tree.Item("src", UIcons.Folder).Expanded().Items(
                        new Tree.Item("components", UIcons.Folder).Expanded().Items(
                            new Tree.Item("Button.tsx",  UIcons.File),
                            new Tree.Item("Avatar.tsx",  UIcons.File),
                            new Tree.Item("Sidebar.tsx", UIcons.File)
                        ),
                        new Tree.Item("hooks", UIcons.Folder).Items(
                            new Tree.Item("useTheme.ts", UIcons.File),
                            new Tree.Item("useAuth.ts",  UIcons.File)
                        ),
                        new Tree.Item("index.tsx", UIcons.File)
                    ),
                    new Tree.Item("public", UIcons.Folder).Items(
                        new Tree.Item("favicon.ico", UIcons.File),
                        new Tree.Item("logo.svg",    UIcons.File)
                    ),
                    new Tree.Item("package.json", UIcons.File),
                    new Tree.Item("README.md",    UIcons.File)
                )
            ).OnSelected((s, item) => selected.Text(item.Text));

            var component = HStack().WS().H(380).Children(
                tree.MinWidth(260.px()),
                VStack().Padding(16.px()).Grow().Children(
                    Label("Selected file: ").SetContent(selected),
                    TextBlock("Click a node in the tree to update this panel.").Small().Secondary().PT(8)
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Tree

Description

API reference

Constructors

Tree

Properties

Tree.SelectedItem

Methods

Tree.Render

Tree.OnSelected

Tree.SelectionEnabled

Tree.Add

Tree.Clear

Tree.Replace

Tree.Items

Events

Tree.SelectedItemChanged

Samples

Basic Synchronous Tree

Asynchronous Tree

Selectable Tree

File-System Tree with Selection Events

See also