[dev-v5] FluentTreeView

.github/workflows/build-core-lib.yml

@@ -46,7 +46,7 @@ jobs:
      - name: Setup .NET 9.0
        uses: actions/setup-dotnet@v4
        with:
-        dotnet-version: 9.0.x
+        dotnet-version: 9.0.203     # Waiting a fix in the 9.0.300: https://github.com/dotnet/sdk/issues/49038
         dotnet-quality: ga
 
      # Build

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TreeView/DebugPages/TreeViewDebug.razor

@@ -0,0 +1,83 @@
+@page "/treeview/debug"
+
+<h1>TreeView Debug</h1>
+
+<div>
+    SelectedId = @SelectedId;
+</div>
+
+<div>
+    Expanded1 = @Expanded1;
+    Expanded2 = @Expanded2;
+    Expanded3 = @Expanded3;
+    Expanded4 = @Expanded4;
+</div>
+
+<button onclick="Expanded(true)">Open</button>
+<button onclick="Expanded(false)">Close</button>
+<button @onclick="@(e => SelectedId = "test-3")">Select #3</button>
+
+<FluentTreeView @bind-SelectedId="@SelectedId"
+                OnExpandedChanged="@(e => Console.WriteLine($"* Expanded: {e.Id}: {e.Expanded}"))"
+                OnSelectedChanged="@(e => Console.WriteLine($"* Selected: {e.Id}"))">
+
+    <FluentTreeItem Id="test-1"
+                    Text="My item"
+                    Height="70px"
+                    @bind-Expanded="@Expanded1"
+                    IconStart="@(new Icons.Regular.Size16.ShareScreenStart())"
+                    IconEnd="@(new Icons.Regular.Size16.CallEnd())"
+                    IconAside="@(new Icons.Regular.Size16.AddCircle())"
+                    SelectedChanged="@(e => Console.WriteLine($". Selected: test-1: {e}"))">
+        <FluentTreeItem Height="unset">Sub Item</FluentTreeItem>
+    </FluentTreeItem>
+
+    <FluentTreeItem Id="test-2"
+                    Text="CollapseOnly with really long tree-item content goes here. Lorem ipsum dolor sit amet."
+                    IconStart="@(new Icons.Regular.Size16.ShareScreenStart())"
+                    IconEnd="@(new Icons.Regular.Size16.CallEnd())"
+                    IconAside="@(new Icons.Regular.Size16.AddCircle())"
+                    IconCollapsed="@(new Icons.Regular.Size16.ArrowCircleRight())"
+                    @bind-Expanded="@Expanded2"
+                    SelectedChanged="@(e => Console.WriteLine($". Selected: test-2: {e}"))">
+            <FluentTreeItem>Sub Item</FluentTreeItem>
+    </FluentTreeItem>
+
+    <FluentTreeItem Id="test-3"
+                    IconExpanded="@(new Icons.Regular.Size16.CopyArrowRight())"
+                    @bind-Expanded="@Expanded3"
+                    SelectedChanged="@(e => Console.WriteLine($". Selected: test-3: {e}"))">
+        ExpandOnly
+        <FluentTreeItem>Sub Item</FluentTreeItem>
+    </FluentTreeItem>
+
+    <FluentTreeItem Id="test-4"
+                    Text="CollapseExpand"
+                    IconCollapsed="@(new Icons.Regular.Size16.ArrowCircleRight())"
+                    IconExpanded="@(new Icons.Regular.Size16.CopyArrowRight())"
+                    @bind-Expanded="@Expanded4"
+                    SelectedChanged="@(e => Console.WriteLine($". Selected: test-4: {e}"))">
+        <FluentTreeItem>Sub Item</FluentTreeItem>
+    </FluentTreeItem>
+</FluentTreeView>
+
+<FluentDivider>Other section</FluentDivider>
+
+<script>
+
+    function Expanded(value) {
+        document.getElementById('test-1').expanded = value;
+        document.getElementById('test-2').expanded = value;
+        document.getElementById('test-3').expanded = value;
+        document.getElementById('test-4').expanded = value;
+    }
+</script>
+
+@code
+{
+    string SelectedId = "test-2";
+    bool Expanded1 = true;
+    bool Expanded2 = false;
+    bool Expanded3 = true;
+    bool Expanded4 = false;
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TreeView/Examples/SampleDataExtension.cs

@@ -0,0 +1,38 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+using Microsoft.FluentUI.AspNetCore.Components;
+using FluentUI.Demo.SampleData;
+using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons;
+
+namespace FluentUI.Demo.Client.Documentation.Components.TreeView.Examples;
+
+public static class SampleDataExtension
+{
+    /// <summary>
+    /// Converts a collection of <see cref="People.Company"/> objects into a hierarchical collection
+    /// of <see cref="TreeViewItem"/> objects.
+    /// </summary>
+    public static IEnumerable<TreeViewItem> ToTreeViewItems(this IEnumerable<People.Company> organization, bool includeIcons = false)
+    {
+        return organization.Select(company => new TreeViewItem
+        {
+            IconStart = includeIcons ? new Icons.Regular.Size16.BuildingBank().WithColor(Color.Primary) : null,
+            Id = company.Id,
+            Text = company.Name,
+            Items = company.Departments.Select(dept => new TreeViewItem
+            {
+                IconStart = includeIcons ? new Icons.Regular.Size16.ContactCardGroup().WithColor(SystemColors.Palette.DarkOrangeForeground1) : null,
+                Id = dept.Id,
+                Text = dept.Name,
+                Items = dept.Employees.Select(emp => new TreeViewItem
+                {
+                    IconStart = includeIcons ? new Icons.Regular.Size16.PersonVoice().WithColor(SystemColors.Palette.ForestBorderActive) : null,
+                    Id = emp.Id,
+                    Text = $"{emp.FirstName} {emp.LastName}",
+                }).ToArray()
+            }).ToArray()
+        }).ToArray();
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TreeView/Examples/TreeViewDefault.razor

@@ -0,0 +1,22 @@
+<p>Current selected tree item is <b>@SelectedId - @SelectedItem?.Text</b></p>
+<p>Most recently expanded/collapsed tree item is <b>@ExpandedItem?.Text</b></p>
+
+<FluentTreeView @bind-SelectedId="@SelectedId"
+                @bind-CurrentSelected="SelectedItem"
+                OnExpandedChanged="@(item => ExpandedItem = item)">
+    <FluentTreeItem Id="Item1" Text="Root item 1">
+        <FluentTreeItem Id="Item11" Text="Flowers" IconStart="@(new Icons.Regular.Size16.LeafOne())">
+            <FluentTreeItem Id="Item111" Text="Daisy" />
+            <FluentTreeItem Id="Item112" Text="Sunflower" />
+            <FluentTreeItem Id="Item113" Text="Rose" />
+        </FluentTreeItem>
+        <FluentTreeItem Id="Item12" Text="Nested item 2" />
+        <FluentTreeItem Id="Item13" Text="Nested item 3" />
+    </FluentTreeItem>
+</FluentTreeView>
+
+@code {
+    string? SelectedId;
+    FluentTreeItem? SelectedItem;
+    FluentTreeItem? ExpandedItem;
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TreeView/Examples/TreeViewItemTemplate.razor

@@ -0,0 +1,34 @@
+<div class="my-2">
+    <b>Selected item:</b> @SelectedItem?.Text
+</div>
+
+<FluentTreeView Items="@Items"
+                @bind-SelectedItem="@SelectedItem">
+    <ItemTemplate>
+        <FluentBadge Color="BadgeColor.Informative" Content="@context.Id" Style="pointer-events: none;" />
+        @context.Text
+    </ItemTemplate>
+</FluentTreeView>
+
+@code
+{
+    private ITreeViewItem? SelectedItem;
+    private IEnumerable<ITreeViewItem>? Items = new List<ITreeViewItem>();
+
+    // Read the Tree content and set the selected item
+    protected override void OnInitialized()
+    {
+        Items = GetCompanyOrganization();
+        SelectedItem = Items?.ElementAt(3);
+    }
+
+    // Example of a tree with a company organization
+    // (5 companies containing 4 departments with 10 employees)
+    private TreeViewItem[] GetCompanyOrganization()
+    {
+        return SampleData.People
+                         .GetOrganization(companyCount: 5, departmentCount: 4, employeeCount: 10)
+                         .ToTreeViewItems()
+                         .ToArray();
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TreeView/Examples/TreeViewItems.razor

@@ -0,0 +1,29 @@
+<div class="my-2">
+    <b>Selected item:</b> @SelectedItem?.Text
+</div>
+
+<FluentTreeView Items="@Items"
+                @bind-SelectedItem="@SelectedItem" />
+
+@code
+{
+    private ITreeViewItem? SelectedItem;
+    private IEnumerable<ITreeViewItem>? Items = new List<ITreeViewItem>();
+
+    // Read the Tree content and set the selected item
+    protected override void OnInitialized()
+    {
+        Items = GetCompanyOrganization();
+        SelectedItem = Items?.ElementAt(3);
+    }
+
+    // Example of a tree with a company organization
+    // (5 companies containing 4 departments with 10 employees)
+    private TreeViewItem[] GetCompanyOrganization()
+    {
+        return SampleData.People
+                         .GetOrganization(companyCount: 5, departmentCount: 4, employeeCount: 10)
+                         .ToTreeViewItems()
+                         .ToArray();
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TreeView/Examples/TreeViewMultiSelect.razor

@@ -0,0 +1,32 @@
+<div class="my-2">
+    <b>Selected items:</b> @(string.Join("; ", SelectedItems?.Select(i => i.Text) ?? []))
+</div>
+
+<FluentTreeView Items="@Items"
+                HideSelection="true"
+                SelectionMode="TreeSelectionMode.Multiple"
+                @bind-SelectedItems="@SelectedItems">
+</FluentTreeView>
+
+@code
+{
+    private IEnumerable<ITreeViewItem>? SelectedItems;
+    private IEnumerable<ITreeViewItem>? Items = new List<ITreeViewItem>();
+
+    // Read the Tree content
+    protected override void OnInitialized()
+    {
+        Items = GetCompanyOrganization();
+        SelectedItems = Items.Take(2);
+    }
+
+    // Example of a tree with a company organization
+    // (5 companies containing 4 departments with 10 employees)
+    private TreeViewItem[] GetCompanyOrganization()
+    {
+        return SampleData.People
+                         .GetOrganization(companyCount: 5, departmentCount: 4, employeeCount: 10)
+                         .ToTreeViewItems(includeIcons: false)
+                         .ToArray();
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TreeView/Examples/TreeViewMultipleSelectionVisibility.razor

@@ -0,0 +1,47 @@
+<div class="my-2">
+    <b>Selected items:</b> @(string.Join("; ", SelectedItems?.Select(i => i.Text) ?? []))
+</div>
+
+<FluentTreeView Items="@Items"
+                HideSelection="true"
+                SelectionMode="TreeSelectionMode.Multiple"
+                MultipleSelectionVisibility="@GetTreeSelectionVisibility"
+                @bind-SelectedItems="@SelectedItems">
+</FluentTreeView>
+
+@code
+{
+    private IEnumerable<ITreeViewItem>? SelectedItems;
+    private IEnumerable<ITreeViewItem>? Items = new List<ITreeViewItem>();
+
+    // Read the Tree content
+    protected override void OnInitialized()
+    {
+        Items = GetCompanyOrganization();
+    }
+
+    // Example of a custom visibility function
+    private TreeSelectionVisibility GetTreeSelectionVisibility(ITreeViewItem item)
+    {
+        return item.Id.First() switch
+        {
+            // Company or Department => collapsed checkbox
+            'C' => TreeSelectionVisibility.Collapse,
+            'D' => TreeSelectionVisibility.Hidden,
+
+            // Employee or others => visible checkbox
+            'E' => TreeSelectionVisibility.Visible,
+            _ => TreeSelectionVisibility.Visible
+        };
+    }
+
+    // Example of a tree with a company organization
+    // (5 companies containing 4 departments with 10 employees)
+    private TreeViewItem[] GetCompanyOrganization()
+    {
+        return SampleData.People
+                         .GetOrganization(companyCount: 5, departmentCount: 4, employeeCount: 10)
+                         .ToTreeViewItems(includeIcons: false)
+                         .ToArray();
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TreeView/Examples/TreeViewWithUnlimitedItems.razor

@@ -0,0 +1,49 @@
+<div class="my-2">
+    <b>Selected item:</b> @SelectedItem?.Text
+</div>
+
+<FluentTreeView Items="@Items"
+                LazyLoadItems="true"
+                @bind-SelectedItem="@SelectedItem" />
+
+@code
+{
+    private ITreeViewItem? SelectedItem;
+    private IEnumerable<ITreeViewItem>? Items = new List<ITreeViewItem>();
+
+    protected override async Task OnInitializedAsync()
+    {
+        Items = await GetItemsAsync();
+    }
+
+    // Generate a random number of items
+    // Including a "Fake" sub-item to simulate the [+]
+    private async Task<IEnumerable<ITreeViewItem>> GetItemsAsync()
+    {
+        await Task.Delay(300); // Simulate a delay for loading items
+
+        var nbItems = Random.Shared.Next(3, 9);
+
+        return Enumerable.Range(1, nbItems)
+                         .Select(i => new TreeViewItem()
+        {
+            Text = $"Item {Random.Shared.Next(1, 9999)}",
+            OnExpandedAsync = OnExpandedAsync,
+            Items = TreeViewItem.LoadingTreeViewItems("Loading..."), // "Fake" sub-item to simulate the [+]
+        }).ToArray();
+    }
+
+    // Handle the expanded event to load items
+    private async Task OnExpandedAsync(TreeViewItemExpandedEventArgs e)
+    {
+        if (e.Expanded)
+        {
+            e.CurrentItem.Items = await GetItemsAsync();
+        }
+        else
+        {
+            // Remove sub-items and add a "Fake" item to simulate the [+]
+            e.CurrentItem.Items = TreeViewItem.LoadingTreeViewItems("Loading...");
+        }
+    }
+}