feat: 增加虚拟化功能

Author: ArgoZhang

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor

@@ -1,4 +1,5 @@
 @namespace BootstrapBlazor.Components
+@using Microsoft.AspNetCore.Components.Web.Virtualization
 @typeparam TValue
 @inherits PopoverCompleteBase<TValue>
 
@@ -18,22 +19,53 @@
     <span class="form-select-append"><i class="@Icon"></i></span>
     <span class="form-select-append ac-loading"><i class="@LoadingIcon"></i></span>
     <ul class="dropdown-menu">
-        @foreach (var item in Rows)
+        @if (IsVirtualize)
         {
-            <li @key="@item" class="dropdown-item" @onclick="() => OnClickItem(item)">
-                @if (ItemTemplate != null)
+            <div class="dropdown-menu-body dropdown-virtual">
+                @if (OnQueryAsync == null)
                 {
-                    @ItemTemplate(item)
+                    <Virtualize ItemSize="RowHeight" OverscanCount="OverscanCount" Items="@GetVirtualItems()" ChildContent="RenderRow">
+                    </Virtualize>
                 }
                 else
                 {
-                    <div>@GetDisplayText(item)</div>
+                    <Virtualize ItemSize="RowHeight" OverscanCount="OverscanCount" ItemsProvider="LoadItems"
+                                Placeholder="RenderPlaceHolderRow" ItemContent="RenderRow" @ref="_virtualizeElement">
+                    </Virtualize>
                 }
-            </li>
+            </div>
         }
-        @if (ShowNoDataTip && Rows.Count == 0)
+        else if (ShowNoDataTip && Rows.Count == 0)
         {
             <li class="dropdown-item">@NoDataTip</li>
         }
+        else
+        {
+            <div class="dropdown-menu-body">
+                @foreach (var item in Rows)
+                {
+                    @RenderRow(item)
+                }
+            </div>
+        }
     </ul>
 </div>
+
+@code {
+    RenderFragment<TValue> RenderRow => item =>
+    @<li @key="@item" class="dropdown-item" @onclick="() => OnClickItem(item)">
+        @if (ItemTemplate != null)
+        {
+            @ItemTemplate(item)
+        }
+        else
+        {
+            <div>@GetDisplayText(item)</div>
+        }
+    </li>;
+
+    RenderFragment<PlaceholderContext> RenderPlaceHolderRow => context =>
+    @<div class="dropdown-item">
+        <div class="is-ph"></div>
+    </div>;
+}

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
+using Microsoft.AspNetCore.Components.Web.Virtualization;
 using Microsoft.Extensions.Localization;
 
 namespace BootstrapBlazor.Components;
@@ -97,6 +98,33 @@ public partial class AutoFill<TValue>
     [Parameter]
     public bool IsVirtualize { get; set; }
 
+    /// <summary>
+    /// Gets or sets the row height for virtual scrolling. Default is 33.
+    /// </summary>
+    /// <remarks>Effective when <see cref="IsVirtualize"/> is set to true.</remarks>
+    [Parameter]
+    public float RowHeight { get; set; } = 33f;
+
+    /// <summary>
+    /// Gets or sets the overscan count for virtual scrolling. Default is 4.
+    /// </summary>
+    /// <remarks>Effective when <see cref="IsVirtualize"/> is set to true.</remarks>
+    [Parameter]
+    public int OverscanCount { get; set; } = 4;
+
+    /// <summary>
+    /// Gets or sets the callback method for loading virtualized items.
+    /// </summary>
+    [Parameter]
+    [NotNull]
+    public Func<VirtualizeQueryOption, Task<QueryData<TValue>>>? OnQueryAsync { get; set; }
+
+    /// <summary>
+    /// Gets or sets whether the select component is clearable. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool IsClearable { get; set; }
+
     [Inject]
     [NotNull]
     private IStringLocalizer<AutoComplete>? Localizer { get; set; }
@@ -107,6 +135,9 @@ public partial class AutoFill<TValue>
 
     private List<TValue>? _filterItems;
 
+    [NotNull]
+    private Virtualize<TValue>? _virtualizeElement = default;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -142,6 +173,34 @@ private async Task OnClickItem(TValue val)
 
     private List<TValue> Rows => _filterItems ?? [.. Items];
 
+    private int _totalCount;
+    private TValue? _itemsCache;
+    private ItemsProviderResult<TValue> _result;
+
+    private async ValueTask<ItemsProviderResult<TValue>> LoadItems(ItemsProviderRequest request)
+    {
+        // 有搜索条件时使用原生请求数量
+        // 有总数时请求剩余数量
+        var count = _totalCount == 0 ? request.Count : Math.Min(request.Count, _totalCount - request.StartIndex);
+        var data = await OnQueryAsync(new() { StartIndex = request.StartIndex, Count = count });
+
+        _itemsCache = default;
+        _totalCount = data.TotalCount;
+        var items = data.Items ?? [];
+        _result = new ItemsProviderResult<TValue>(items, _totalCount);
+        return _result;
+    }
+
+    private List<TValue> GetVirtualItems()
+    {
+        var items = new List<TValue>();
+        if (Items != null)
+        {
+            items.AddRange(Items);
+        }
+        return items;
+    }
+
     /// <summary>
     /// Triggers the filter method.
     /// </summary>

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.scss

@@ -1,7 +1,3 @@
 .auto-fill {
-    --bb-af-dropdown-max-height: var(--bb-dropdown-max-height);
-
-    .dropdown-menu {
-        max-height: var(--bb-af-dropdown-max-height);
-    }
+    --bb-dropdown-max-height: 330px;
 }