Tesserae

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.

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.ToString()).Expanded().Items(
                    new Tree.Item("ConsoleApp1.csproj", UIcons.File.ToString()).Selected(),
                    new Tree.Item("Program.cs", UIcons.File.ToString())
                ),
                new Tree.Item("src", UIcons.Folder.ToString()).Expanded().Items(
                    new Tree.Item("MarkdownRende...", UIcons.Folder.ToString()).Expanded().Items(
                        new Tree.Item("MarkdownConve...", UIcons.File.ToString()),
                        new Tree.Item("Slides", UIcons.Folder.ToString()).Expanded().Items(
                            new Tree.Item("Blocks", UIcons.Folder.ToString()).Expanded().Items(
                                new Tree.Item("HeadingRe...", UIcons.File.ToString()),
                                new Tree.Item("HeadingRe...", UIcons.File.ToString())
                            ),
                            new Tree.Item("SlideDocume...", UIcons.File.ToString())
                        )
                    ),
                    new Tree.Item("MarkdownRende...", UIcons.Folder.ToString()).Expanded().Items(
                        new Tree.Item("MarkdownRende...", UIcons.File.ToString()),
                        new Tree.Item("Program.cs", UIcons.File.ToString())
                    ),
                    new Tree.Item("MarkdownRenderer...", UIcons.File.ToString())
                )
            );

            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.ToString()).ItemsAsync(async () =>
                {
                    await Task.Delay(1000);
                    return new[]
                    {
                        new Tree.Item("Async Child 1", UIcons.File.ToString()),
                        new Tree.Item("Async Child 2", UIcons.File.ToString())
                    };
                })
            );

            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.ToString()).Expanded().Items(
                    new Tree.Item("Child A", UIcons.File.ToString()),
                    new Tree.Item("Child B", UIcons.File.ToString())
                ),
                new Tree.Item("Root 2", UIcons.Folder.ToString()).Expanded().Items(
                    new Tree.Item("Child C", UIcons.File.ToString()).Selected(),
                    new Tree.Item("Child D", UIcons.File.ToString())
                )
            );

            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.ToString()).Expanded().Items(
                    new Tree.Item("src", UIcons.Folder.ToString()).Expanded().Items(
                        new Tree.Item("components", UIcons.Folder.ToString()).Expanded().Items(
                            new Tree.Item("Button.tsx",  UIcons.File.ToString()),
                            new Tree.Item("Avatar.tsx",  UIcons.File.ToString()),
                            new Tree.Item("Sidebar.tsx", UIcons.File.ToString())
                        ),
                        new Tree.Item("hooks", UIcons.Folder.ToString()).Items(
                            new Tree.Item("useTheme.ts", UIcons.File.ToString()),
                            new Tree.Item("useAuth.ts",  UIcons.File.ToString())
                        ),
                        new Tree.Item("index.tsx", UIcons.File.ToString())
                    ),
                    new Tree.Item("public", UIcons.Folder.ToString()).Items(
                        new Tree.Item("favicon.ico", UIcons.File.ToString()),
                        new Tree.Item("logo.svg",    UIcons.File.ToString())
                    ),
                    new Tree.Item("package.json", UIcons.File.ToString()),
                    new Tree.Item("README.md",    UIcons.File.ToString())
                )
            ).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().Muted().PT(8)
                )
            );

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