feat(SelectTree): add ShowSearch parameter (#5037)

* feat: 增加 ShowSearch 参数

* refactor: 重构固定 Search 栏样式兼容 Select-Tree

* test: 更新 TreeView 单元测试

* test: 更新 SelectTree 单元测试

Co-Authored-By: Alex chow <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor/Components/Select/SelectTree.razor

@@ -8,7 +8,7 @@
     <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
 <div @attributes="AdditionalAttributes" id="@Id" class="@ClassName">
-    <div class="dropdown-toggle" data-bs-toggle="@ToggleString" data-bs-auto-close="outside" data-bs-offset="@OffsetString" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString">
+    <div class="dropdown-toggle" data-bs-toggle="@ToggleString" data-bs-auto-close="outside" data-bs-offset="@OffsetString" data-bs-placement="@PlacementString" data-bs-custom-class="@SelectTreeCustomClassString">
         @if (IsEditable)
         {
             <input type="text" id="@InputId" disabled="@Disabled" placeholder="@PlaceHolder" class="@InputClassName" value="@CurrentValueAsString" @onchange="@OnChange" />
@@ -20,7 +20,11 @@
         <span class="@AppendClassName"><i class="@DropdownIcon"></i></span>
     </div>
     <div class="dropdown-menu">
-        <TreeView TItem="TValue" Items="@Items" ShowIcon="ShowIcon" OnTreeItemClick="OnItemClick" ModelEqualityComparer="@ModelEqualityComparer" CustomKeyAttribute="@CustomKeyAttribute" OnExpandNodeAsync="@OnExpandNodeAsync" />
+        <TreeView TItem="TValue" Items="@Items" ShowIcon="ShowIcon"
+                  OnTreeItemClick="OnItemClick" ModelEqualityComparer="@ModelEqualityComparer"
+                  ShowSearch="ShowSearch" ShowResetSearchButton="ShowResetSearchButton"
+                  IsFixedSearch="IsFixedSearch"
+                  CustomKeyAttribute="@CustomKeyAttribute" OnExpandNodeAsync="@OnExpandNodeAsync" />
     </div>
     @if (!IsPopover)
     {

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

@@ -120,6 +120,24 @@ public partial class SelectTree<TValue> : IModelEqualityComparer<TValue>
     [Parameter]
     public bool IsEditable { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示搜索栏 默认 false 不显示
+    /// </summary>
+    [Parameter]
+    public bool ShowSearch { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否固定搜索栏 默认 false 不固定
+    /// </summary>
+    [Parameter]
+    public bool IsFixedSearch { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否显示重置搜索栏按钮 默认 true 显示
+    /// </summary>
+    [Parameter]
+    public bool ShowResetSearchButton { get; set; } = true;
+
     [Inject]
     [NotNull]
     private IStringLocalizer<SelectTree<TValue>>? Localizer { get; set; }
@@ -149,6 +167,10 @@ public partial class SelectTree<TValue> : IModelEqualityComparer<TValue>
     [NotNull]
     private IIconTheme? IconTheme { get; set; }
 
+    private string? SelectTreeCustomClassString => CssBuilder.Default(CustomClassString)
+        .AddClass("select-tree", IsPopover)
+        .Build();
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

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

@@ -1,7 +1,11 @@
-.select-tree {
+.select-tree {
     --bb-select-tree-dropdown-max-height: var(--bb-dropdown-max-height);
-}
 
-    .select-tree .dropdown-menu {
+    .dropdown-menu {
         max-height: var(--bb-select-tree-dropdown-max-height);
+
+        .tree-view {
+            max-height: calc(var(--bb-select-tree-dropdown-max-height) - var(--bs-dropdown-padding-y) * 2 - 2px);
+        }
     }
+}

src/BootstrapBlazor/Components/TreeView/TreeView.razor

@@ -44,7 +44,7 @@ else
         }
         @if (IsVirtualize)
         {
-            <div class="tree-root is-virtual scroll" tabindex="0">
+            <div class="tree-root is-virtual" tabindex="0">
                 <Virtualize ItemSize="RowHeight" OverscanCount="10" Items="@Rows">
                     <ItemContent>
                         @RenderTreeRow(context)
@@ -54,7 +54,7 @@ else
         }
         else
         {
-            <div class="tree-root scroll" tabindex="0">
+            <div class="tree-root" tabindex="0">
                 @foreach (var item in Rows)
                 {
                     @RenderTreeRow(item)

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

@@ -17,7 +17,7 @@ public partial class TreeView<TItem> : IModelEqualityComparer<TItem>
     /// <summary>
     /// 获得 按钮样式集合
     /// </summary>
-    private string? ClassString => CssBuilder.Default("tree-view")
+    private string? ClassString => CssBuilder.Default("tree-view scroll")
         .AddClass("is-fixed-search", ShowSearch && IsFixedSearch)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();

src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss

@@ -18,11 +18,15 @@
     height: 100%;
 
     .tree-search {
-        margin-block-end: .5rem;
+        padding: var(--bb-tree-padding);
+        padding-bottom: .5rem;
+        background-color: var(--bs-body-bg);
     }
 
-    &.is-fixed-search .tree-root {
-        height: calc(100% - var(--bb-tree-search-height));
+    &.is-fixed-search .tree-search {
+        position: sticky;
+        top: 0;
+        z-index: 5;
     }
 
     .tree-root {

test/UnitTest/Components/SelectTreeTest.cs

@@ -204,6 +204,31 @@ public void IsActive_Ok()
         Assert.Contains("active", nodes[1].ClassName);
     }
 
+    [Fact]
+    public void ShowSearch_Ok()
+    {
+        var items = TreeFoo.GetTreeItems();
+        var cut = Context.RenderComponent<SelectTree<TreeFoo>>(builder =>
+        {
+            builder.Add(p => p.Items, items);
+            builder.Add(p => p.Value, new TreeFoo() { Id = "1020", Text = "Navigation Two" });
+            builder.Add(p => p.ShowSearch, true);
+        });
+        cut.Contains("tree-search");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.ShowResetSearchButton, true);
+        });
+        cut.Contains("tree-search-reset");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsFixedSearch, true);
+        });
+        cut.Contains("is-fixed-search");
+    }
+
     private List<TreeViewItem<string>> BindItems { get; } =
     [
         new TreeViewItem<string>("Test1")

test/UnitTest/Components/TreeViewTest.cs

@@ -516,7 +516,7 @@ public async Task IsVirtualize_Ok()
             pb.Add(a => a.IsVirtualize, false);
             pb.Add(a => a.Items, items);
         });
-        cut.Contains("tree-root scroll");
+        cut.Contains("tree-root");
 
         cut.SetParametersAndRender(pb =>
         {
@@ -537,7 +537,7 @@ public async Task IsVirtualize_Ok()
                 return [node1, node2];
             });
         });
-        cut.Contains("tree-root is-virtual scroll");
+        cut.Contains("tree-root is-virtual");
 
         // 触发第一个节点展开
         await cut.InvokeAsync(() => cut.Find(".node-icon.visible").Click());