refactor(TreeView): support Search function (#4944)

* chore: bump version 9.19-beta07

Co-Authored-By: AApuci <[email protected]>

* doc: 更新搜索示例代码

* doc: 移除扁平化数据源示例

* refactor: 重构 ToFlat 返回值数据结构

* refactor: 重构搜索数据集逻辑

* doc: 更新搜索示例

* refactor: 更改搜索设计

* refactor: 更新滚动脚本

* refactor: 移除 IsReset 参数

* refactor: 更新示例

* refactor: 更新 TreeView 单元测试

* test: 更新 Table 单元测试

* test: 更新 SelectTree 单元测试

* revert: 撤销更新

* test: 更新单元测试

---------

Co-authored-by: AApuci <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor

@@ -39,9 +39,6 @@
         <div>@((MarkupString)Localizer["TreeViewCheckboxTips2"].Value)</div>
     </section>
     <section ignore class="row form-inline">
-        <div class="col-12 col-lg-auto">
-            <RadioList IsButton="true" @bind-Value="@IsReset" Items="@ResetItems" Color="Color.Success" ShowLabel="true" DisplayText="@Localizer["TreeViewNormalRadioListDisplayText"]"></RadioList>
-        </div>
         <div class="col-12 col-lg-auto">
             <Checkbox DisplayText="@Localizer["TreeViewCheckboxCheckBoxDisplayText1"]" ShowAfterLabel="true" @bind-Value="@AutoCheckChildren"></Checkbox>
             <Checkbox DisplayText="@Localizer["TreeViewCheckboxCheckBoxDisplayText2"]" ShowAfterLabel="true" @bind-Value="@AutoCheckParent" class="ms-3"></Checkbox>
@@ -50,7 +47,7 @@
             <Button Text="@Localizer["TreeViewCheckboxButtonText"]" OnClick="@OnRefresh"></Button>
         </div>
     </section>
-    <TreeView TItem="TreeFoo" Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" IsReset="@IsReset" AutoCheckChildren="@AutoCheckChildren" AutoCheckParent="@AutoCheckParent"></TreeView>
+    <TreeView TItem="TreeFoo" Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" AutoCheckChildren="@AutoCheckChildren" AutoCheckParent="@AutoCheckParent"></TreeView>
     <ConsoleLogger @ref="Logger2"></ConsoleLogger>
 </DemoBlock>
 
@@ -173,26 +170,26 @@
 <DemoBlock Title="@Localizer["TreeViewShowSearchTitle"]"
            Introduction="@Localizer["TreeViewShowSearchIntro"]"
            Name="ShowSearch">
-    <TreeView TItem="TreeFoo" Items="@SearchItems" ShowSearch="true" OnSearchAsync="@OnSearchAsync"></TreeView>
+    <TreeView TItem="TreeFoo" Items="@SearchItems1" ShowSearch="true" OnSearchAsync="@OnSearchAsync"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewFixedSearchTitle"]"
            Introduction="@Localizer["TreeViewFixedSearchIntro"]"
            Name="IsFixedSearch">
-    <TreeView TItem="TreeFoo" Items="@SearchItems" ShowSearch="true" OnSearchAsync="@OnSearchAsync" IsFixedSearch="true" style="height: 180px;"></TreeView>
+    <TreeView TItem="TreeFoo" Items="@SearchItems2" ShowSearch="true" OnSearchAsync="@OnSearchAsync" IsFixedSearch="true" style="height: 180px;"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewMaxSelectedCountTitle"]"
            Introduction="@Localizer["TreeViewMaxSelectedCountIntro"]"
            Name="MaxSelectedCount">
     <section ignore>@((MarkupString)Localizer["TreeViewMaxSelectedCountDesc"].Value)</section>
-    <TreeView TItem="TreeFoo" Items="@SearchItems" ShowCheckbox="true" AutoCheckChildren="true" AutoCheckParent="true"
+    <TreeView TItem="TreeFoo" Items="@MaxItems" ShowCheckbox="true" AutoCheckChildren="true" AutoCheckParent="true"
               MaxSelectedCount="2" OnMaxSelectedCountExceed="OnMaxSelectedCountExceed"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewEnableKeyboardArrowUpDownTitle"]"
            Introduction="@Localizer["TreeViewEnableKeyboardArrowUpDownIntro"]"
-           Name="Normal">
+           Name="EnableKeyboard">
     <section ignore>@_selectedValue</section>
     <TreeView TItem="TreeFoo" Items="@KeyboardItems" OnTreeItemClick="@OnTreeItemKeyboardClick" style="height: 160px;"
               EnableKeyboard="true" ClickToggleNode="false" ClickToggleCheck="false" ShowCheckbox="true" />
@@ -211,7 +208,7 @@
     </div>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TreeViewFlatTitle"]"
+@* <DemoBlock Title="@Localizer["TreeViewFlatTitle"]"
            Introduction="@Localizer["TreeViewFlatIntro"]"
            Name="FlatItems">
     <section ignore>
@@ -220,7 +217,7 @@
     <TreeView TItem="TreeFoo" Items="@FlatItems" ShowCheckbox="true"
                 AutoCheckChildren="true" AutoCheckParent="true"></TreeView>
 </DemoBlock>
-
+ *@
 <AttributeTable Items="@GetAttributes()"></AttributeTable>
 
 <AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttribute"]"></AttributeTable>

src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor.cs

@@ -53,7 +53,11 @@ public sealed partial class TreeViews
 
     private List<TreeViewItem<TreeFoo>>? AsyncItems { get; set; }
 
-    private List<TreeViewItem<TreeFoo>>? SearchItems { get; set; } = TreeFoo.GetTreeItems();
+    private List<TreeViewItem<TreeFoo>>? MaxItems { get; set; } = TreeFoo.GetTreeItems();
+
+    private List<TreeViewItem<TreeFoo>>? SearchItems1 { get; set; } = TreeFoo.GetTreeItems();
+
+    private List<TreeViewItem<TreeFoo>>? SearchItems2 { get; set; } = TreeFoo.GetTreeItems();
 
     private List<TreeViewItem<TreeFoo>> VirtualizeItems { get; } = TreeFoo.GetVirtualizeTreeItems();
 
@@ -89,14 +93,6 @@ private static List<TreeViewItem<TreeFoo>> GetCheckedItems()
         return ret;
     }
 
-    private bool IsReset { get; set; }
-
-    private List<SelectedItem> ResetItems { get; } =
-    [
-        new("True", "Reset"),
-        new("False", "Keep")
-    ];
-
     [Inject, NotNull]
     private ToastService? ToastService { get; set; }
 
@@ -226,11 +222,19 @@ private Task SelectedItemOnChanged(SelectedItem selectedItem)
         return ret;
     }
 
-    private Task OnSearchAsync(string searchText)
+    private static async Task<List<TreeViewItem<TreeFoo>>?> OnSearchAsync(string searchText)
     {
-        SearchItems = string.IsNullOrEmpty(searchText) ? TreeFoo.GetTreeItems() : [];
-        StateHasChanged();
-        return Task.CompletedTask;
+        await Task.Delay(20);
+
+        List<TreeViewItem<TreeFoo>>? items = null;
+        if (!string.IsNullOrEmpty(searchText))
+        {
+            items =
+            [
+                new TreeViewItem<TreeFoo>(new TreeFoo() { Text = searchText }) { Text = searchText },
+            ];
+        }
+        return items;
     }
 
     private static async Task<IEnumerable<TreeViewItem<TreeFoo>>> OnExpandVirtualNodeAsync(TreeViewItem<TreeFoo> node)

src/BootstrapBlazor/Components/Select/SelectTree.razor

@@ -20,7 +20,7 @@
         <span class="@AppendClassName"><i class="@DropdownIcon"></i></span>
     </div>
     <div class="dropdown-menu">
-        <TreeView TItem="TValue" Items="@Items" IsReset="IsReset" ShowIcon="ShowIcon" OnTreeItemClick="OnItemClick" ModelEqualityComparer="@ModelEqualityComparer" CustomKeyAttribute="@CustomKeyAttribute" OnExpandNodeAsync="@OnExpandNodeAsync" />
+        <TreeView TItem="TValue" Items="@Items" ShowIcon="ShowIcon" OnTreeItemClick="OnItemClick" ModelEqualityComparer="@ModelEqualityComparer" CustomKeyAttribute="@CustomKeyAttribute" OnExpandNodeAsync="@OnExpandNodeAsync" />
     </div>
     @if (!IsPopover)
     {

src/BootstrapBlazor/Components/Select/SelectTree.razor.cs

@@ -120,12 +120,6 @@ public partial class SelectTree<TValue> : IModelEqualityComparer<TValue>
     [Parameter]
     public bool IsEditable { get; set; }
 
-    /// <summary>
-    /// 获得/设置 页面刷新是否重置已加载数据 默认 false
-    /// </summary>
-    [Parameter]
-    public bool IsReset { get; set; }
-
     [Inject]
     [NotNull]
     private IStringLocalizer<SelectTree<TValue>>? Localizer { get; set; }

src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs

@@ -151,13 +151,7 @@ public partial class TreeView<TItem> : IModelEqualityComparer<TItem>
     /// </summary>
     /// <remarks>通过设置 <see cref="ShowSearch"/> 开启</remarks>
     [Parameter]
-    public Func<string?, Task>? OnSearchAsync { get; set; }
-
-    /// <summary>
-    /// 获得/设置 页面刷新是否重置已加载数据 默认 false
-    /// </summary>
-    [Parameter]
-    public bool IsReset { get; set; }
+    public Func<string?, Task<List<TreeViewItem<TItem>>?>>? OnSearchAsync { get; set; }
 
     /// <summary>
     /// 获得/设置 带层次数据集合
@@ -345,11 +339,6 @@ protected override void OnParametersSet()
         SearchIcon ??= IconTheme.GetIconByKey(ComponentIcons.TreeViewSearchIcon);
         ClearSearchIcon ??= IconTheme.GetIconByKey(ComponentIcons.TreeViewResetSearchIcon);
         LoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.TreeViewLoadingIcon);
-
-        if (IsReset)
-        {
-            _rows = null;
-        }
     }
 
     /// <summary>
@@ -358,35 +347,32 @@ protected override void OnParametersSet()
     /// <returns></returns>
     protected override async Task OnParametersSetAsync()
     {
-        if (Items == null)
-        {
-            // 未提供数据显示 loading
-            return;
-        }
-
-        if (Items.Count > 0)
+        if (Items != null)
         {
-            await CheckExpand(Items);
-        }
+            if (Items.Count > 0)
+            {
+                await CheckExpand(Items);
+            }
 
-        if (ShowCheckbox && (AutoCheckParent || AutoCheckChildren))
-        {
-            // 开启 Checkbox 功能时初始化选中节点
-            TreeNodeStateCache.IsChecked(Items);
-        }
+            if (ShowCheckbox && (AutoCheckParent || AutoCheckChildren))
+            {
+                // 开启 Checkbox 功能时初始化选中节点
+                TreeNodeStateCache.IsChecked(Items);
+            }
 
-        // 从数据源中恢复当前 active 节点
-        if (_activeItem != null)
-        {
-            _activeItem = TreeNodeStateCache.Find(Items, _activeItem.Value, out _);
-        }
+            // 从数据源中恢复当前 active 节点
+            if (_activeItem != null)
+            {
+                _activeItem = TreeNodeStateCache.Find(Items, _activeItem.Value, out _);
+            }
 
-        if (_init == false)
-        {
-            // 设置 ActiveItem 默认值
-            _activeItem ??= Items.FirstOrDefaultActiveItem();
-            _activeItem?.SetParentExpand<TreeViewItem<TItem>, TItem>(true);
-            _init = true;
+            if (_init == false)
+            {
+                // 设置 ActiveItem 默认值
+                _activeItem ??= Items.FirstOrDefaultActiveItem();
+                _activeItem?.SetParentExpand<TreeViewItem<TItem>, TItem>(true);
+                _init = true;
+            }
         }
     }
 
@@ -609,21 +595,25 @@ private async Task OnEnterAsync(string? searchText)
 
     private Task OnEscAsync(string? searchText) => OnClickResetSearch();
 
+    private List<TreeViewItem<TItem>>? _searchItems;
+
     private async Task OnClickSearch()
     {
         if (OnSearchAsync != null)
         {
-            await OnSearchAsync(_searchText);
+            _searchItems = await OnSearchAsync(_searchText);
+            _rows = null;
+            StateHasChanged();
         }
     }
 
-    private async Task OnClickResetSearch()
+    private Task OnClickResetSearch()
     {
         _searchText = null;
-        if (OnSearchAsync != null)
-        {
-            await OnSearchAsync(_searchText);
-        }
+        _searchItems = null;
+        _rows = null;
+        StateHasChanged();
+        return Task.CompletedTask;
     }
 
     /// <summary>
@@ -862,11 +852,13 @@ private List<TreeViewItem<TItem>> Rows
         get
         {
             // 扁平化数据集合
-            _rows ??= Items.ToFlat<TItem>().ToList();
+            _rows ??= GetItems().ToFlat<TItem>();
             return _rows;
         }
     }
 
+    private List<TreeViewItem<TItem>> GetItems() => _searchItems ?? Items;
+
     private static string? GetTreeRowStyle(TreeViewItem<TItem> item)
     {
         var level = 0;

src/BootstrapBlazor/Components/TreeView/TreeView.razor.js

@@ -30,9 +30,9 @@ export function init(id, options) {
 
 export function scroll(id, options) {
     const el = document.getElementById(id);
-    const item = el.querySelector(".active .tree-node");
+    const item = el.querySelector(".tree-content.active");
     if (item) {
-        item.scrollIntoView(options ?? { behavior: 'smooth', block: 'start', inline: 'nearest' });
+        item.parentElement.scrollTo(0, item.offsetTop, options || { behavior: 'smooth' });
     }
 }
 

src/BootstrapBlazor/Extensions/TreeViewExtensions.cs

@@ -50,7 +50,7 @@ public static class TreeViewExtensions
     /// <typeparam name="TItem"></typeparam>
     /// <param name="source"></param>
     /// <returns></returns>
-    public static IEnumerable<TreeViewItem<TItem>> ToFlat<TItem>(this IEnumerable<TreeViewItem<TItem>> source)
+    public static List<TreeViewItem<TItem>> ToFlat<TItem>(this IEnumerable<TreeViewItem<TItem>> source)
     {
         var rows = new List<TreeViewItem<TItem>>();
         if (source != null)

test/UnitTest/Components/SelectTreeTest.cs

@@ -13,7 +13,6 @@ public void Items_Ok()
         var cut = Context.RenderComponent<SelectTree<string>>(builder =>
         {
             builder.Add(p => p.ShowIcon, true);
-            builder.Add(p => p.IsReset, false);
             builder.Add(p => p.ModelEqualityComparer, (s1, s2) => { return true; });
             builder.Add(p => p.OnExpandNodeAsync, (s) => { return Task.FromResult(new List<TreeViewItem<string>>().AsEnumerable()); });
             builder.Add(p => p.CustomKeyAttribute, typeof(string));

test/UnitTest/Components/TableTest.cs

@@ -7700,7 +7700,6 @@ public async Task GetValue_LookupServiceKey_Null()
 
         var table = cut.FindComponent<MockTable>();
         await cut.InvokeAsync(() => table.Instance.QueryAsync());
-        cut.WaitForElement("[data-bs-original-title=\"True\"]");
     }
 
     [Fact]
@@ -7728,7 +7727,6 @@ public async Task GetValue_LookupServiceKey_NullText()
 
         var table = cut.FindComponent<MockTable>();
         await cut.InvokeAsync(() => table.Instance.QueryAsync());
-        cut.WaitForElement("[data-bs-original-title=\"True\"]");
     }
 
     [Fact]