feat(module: select): add virtualization support (#2654)

* add virtualization support

* fix doc

Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
m-khrapunov 2022-09-01 12:50:27 +03:00 committed by James Yeung
parent 77f0021591
commit 3d760446d2
4 changed files with 48 additions and 16 deletions

View File

@ -67,18 +67,7 @@
@{
@if (!IsGroupingEnabled)
{
foreach (var selectOption in SortedSelectOptionItems)
{
<CascadingValue Value="@ItemTemplate" Name="ItemTemplate">
<CascadingValue Value="@selectOption.InternalId" Name="InternalId">
<SelectOption
@key="@selectOption.InternalId"
TItemValue="TItemValue"
TItem="TItem">
</SelectOption>
</CascadingValue>
</CascadingValue>
}
@selectOptionsRender((this, SortedSelectOptionItems, ItemTemplate))
}
else
{
@ -145,3 +134,37 @@
</div>
</CascadingValue>
</CascadingValue>
@code
{
static RenderFragment<(Select<TItemValue, TItem> select, IEnumerable<SelectOptionItem<TItemValue, TItem>> selectOptionItems, RenderFragment<TItem> itemTemplate)> selectOptionsRender = ctx =>
@<Template>
@{ #if NET5_0_OR_GREATER }
@if(ctx.select.EnableVirtualization)
{
<Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize
Items=@(ctx.selectOptionItems is ICollection<SelectOptionItem<TItemValue, TItem>> optionsCollection ? optionsCollection : ctx.selectOptionItems.ToList())
ChildContent="optionRender(ctx.itemTemplate)"/>
}
else
{
#endif
<ForeachLoop
Items=@(ctx.selectOptionItems is ICollection<SelectOptionItem<TItemValue, TItem>> optionsCollection ? optionsCollection : ctx.selectOptionItems.ToList())
ChildContent="optionRender(ctx.itemTemplate)"/>
#if NET5_0_OR_GREATER
}
@{ #endif }
</Template>;
static Func<RenderFragment<TItem>, RenderFragment<SelectOptionItem<TItemValue, TItem>>> optionRender =
itemTemplate => option =>
@<CascadingValue Value=@itemTemplate Name="ItemTemplate">
<CascadingValue Value="@option.InternalId" Name="InternalId">
<SelectOption @key="@option.InternalId"
TItemValue="TItemValue"
TItem="TItem">
</SelectOption>
</CascadingValue>
</CascadingValue>;
}

View File

@ -33,6 +33,14 @@ namespace AntDesign
/// </summary>
[Parameter] public bool Bordered { get; set; } = true;
#if NET5_0_OR_GREATER
/// <summary>
/// Whether to enable virtualization feature or not, only works for .NET 5 and higher
/// </summary>
[Parameter]
public bool EnableVirtualization { get; set; }
#endif
private bool _dataSourceHasChanged = false;
private IEnumerable<TItem> _dataSourceCopy;
private IEnumerable<TItem> _dataSourceShallowCopy;

View File

@ -10,7 +10,8 @@
TItemValue="string"
TItem="LabeledValue"
OnSelectedItemsChanged="OnSelectedItemsChangedHandler"
EnableSearch>
EnableSearch
EnableVirtualization>
</Select>
@code
{
@ -34,7 +35,7 @@
protected override void OnInitialized()
{
const int min = 0;
const int max = 200;
const int max = 2000;
_options = new List<LabeledValue>();
for (var i = min; max > i; i++)

View File

@ -7,8 +7,8 @@ title:
## zh-CN
Virtualization is currently not implemented.
当需要展示大量数据时,可以设置 `EnableVirtualization=true` 启用虚拟化。此功能需要用 .NET 5 以上。
## en-US
Virtualization is currently not implemented.
Improve performance with `EnableVirtualization=true` when you have many options, .NET 5 or higher framework is required.