mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-15 01:11:52 +08:00
d64388c0ab
* feat(module:select): add MaxTagTextLength, MaxTagCount & MaxTagPlaceHolder * feat(module:select): responsive maxTagCount using window.resize * docs(module:select): MaxTagCount functionality * fix docs Co-authored-by: ElderJames <shunjiey@hotmail.com>
300 lines
15 KiB
C#
300 lines
15 KiB
C#
@using AntDesign
|
|
@namespace AntDesign.Select.Internal
|
|
@typeparam TItemValue
|
|
@typeparam TItem
|
|
|
|
@if (ParentSelect.SelectMode == SelectMode.Default)
|
|
{
|
|
<div class="@Prefix-selector" @ref="@Ref" style="@(ParentSelect.PrefixIcon is null?"":"padding-left: 4px;")">
|
|
@if (ParentSelect.PrefixIcon != null)
|
|
{
|
|
<span class="@Prefix-prefix" unselectable="on" aria-hidden="true" style="user-select: none;display:flex;align-items: center;padding-right: 4px;">
|
|
@ParentSelect.PrefixIcon
|
|
</span>
|
|
}
|
|
<span class="@Prefix-selection-search" style="@_inputWidth">
|
|
<input @ref="ParentSelect._inputRef"
|
|
@oninput="OnInput"
|
|
@onkeyup="OnKeyUp"
|
|
@onkeydown="OnKeyDown"
|
|
@onfocus="OnFocus"
|
|
@onblur="OnBlur"
|
|
@attributes=@AdditonalAttributes()
|
|
@onkeypress="@OnKeyPressEventHandler"
|
|
@onkeypress:preventDefault="@_suppressInput"
|
|
@onkeypress:stopPropagation="true"
|
|
@bind-value="@SearchValue"
|
|
id="@ParentSelect.Id"
|
|
role="combobox"
|
|
class="@Prefix-selection-search-input"
|
|
autocomplete="off"
|
|
aria-owns="@(ParentSelect.Id)_list"
|
|
aria-expanded="@IsOverlayShow"
|
|
aria-autocomplete="list"
|
|
aria-controls="@(ParentSelect.Id)_list"
|
|
style="@_inputStyle"/>
|
|
</span>
|
|
@if (ShowPlaceholder)
|
|
{
|
|
<span class="@Prefix-selection-placeholder">@Placeholder</span>
|
|
}
|
|
else
|
|
{
|
|
var selectedItem = ParentSelect.SelectedOptionItems.FirstOrDefault();
|
|
if (string.IsNullOrEmpty(SearchValue) && selectedItem != null)
|
|
{
|
|
@if (ParentLabelTemplate != null)
|
|
{
|
|
<CascadingValue Value="this" Name="SelectContent">
|
|
<CascadingValue Value="@selectedItem" Name="SelectOption">
|
|
@ParentLabelTemplate(selectedItem.Item)
|
|
</CascadingValue>
|
|
</CascadingValue>
|
|
}
|
|
else
|
|
{
|
|
<span class="@Prefix-selection-item">
|
|
@selectedItem.Label
|
|
</span>
|
|
}
|
|
}
|
|
}
|
|
</div>
|
|
|
|
@if (ParentSelect.SuffixIcon != null)
|
|
{
|
|
<span class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;" @onclick="@ParentSelect.OnArrowClick" @onclick:stopPropagation="true">
|
|
@ParentSelect.SuffixIcon
|
|
</span>
|
|
}
|
|
else if (ParentSelect.Loading)
|
|
{
|
|
<span class="ant-select-arrow ant-select-arrow-loading" unselectable="on" aria-hidden="true" style="user-select: none;">
|
|
<Icon Type="loading"></Icon>
|
|
</span>
|
|
}
|
|
else
|
|
{
|
|
if (ShowArrowIcon)
|
|
{
|
|
<span class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;" @onclick="@ParentSelect.OnArrowClick" @onclick:stopPropagation="true">
|
|
@if (ParentSelect.IsSearchEnabled && IsOverlayShow)
|
|
{
|
|
if (ShowSearchIcon)
|
|
{
|
|
<Icon Type="search"></Icon>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<Icon Type="down"></Icon>
|
|
}
|
|
</span>
|
|
}
|
|
else
|
|
{
|
|
<span class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;" @onclick="@ParentSelect.OnArrowClick" @onclick:stopPropagation="true">
|
|
@if (ParentSelect.IsSearchEnabled && IsOverlayShow)
|
|
{
|
|
if (ShowSearchIcon)
|
|
{
|
|
<Icon Type="search"></Icon>
|
|
}
|
|
}
|
|
</span>
|
|
}
|
|
|
|
@if (!ParentSelect.Disabled && ParentSelect.AllowClear && ParentSelect.HasValue)
|
|
{
|
|
<span class="ant-select-clear" unselectable="on" aria-hidden="true" style="user-select: none;" @onclick="OnClearClick" @onclick:stopPropagation="true">
|
|
<Icon Type="close-circle" Theme="fill"></Icon>
|
|
</span>
|
|
}
|
|
}
|
|
|
|
}
|
|
else //ParentSelect.SelectMode != SelectMode.Default
|
|
{
|
|
<div class="@Prefix-selector" @ref="@Ref" style="@(ParentSelect.PrefixIcon is null?"":"padding-left: 4px;")" >
|
|
<div class="@Prefix-selection-overflow" @ref="@_overflow">
|
|
@if (ParentSelect.PrefixIcon != null)
|
|
{
|
|
<div class="@Prefix-selection-overflow-item" style="opacity: 1;order:-100;">
|
|
<span @ref="@_prefixRef" class="@Prefix-prefix" unselectable="on" aria-hidden="true" style="user-select: none;display:flex;align-items: center;padding-right: 4px;min-height:28px;">
|
|
@ParentSelect.PrefixIcon
|
|
</span>
|
|
</div>
|
|
}
|
|
@if (!ShowPlaceholder)
|
|
{
|
|
var selectedItems = ParentSelect.SelectedOptionItems;
|
|
@if (ParentSelect.HasTagCount)
|
|
{
|
|
@for (int i = 0; i < Math.Min(ParentSelect.MaxTagCount.AsT0, selectedItems.Count); i++)
|
|
{
|
|
var selectedOption = selectedItems[i];
|
|
<div class="@Prefix-selection-overflow-item" style="@OverflowStyle(i)">
|
|
@if (ParentLabelTemplate != null)
|
|
{
|
|
<CascadingValue Value="this" Name="SelectContent">
|
|
<CascadingValue Value="@selectedOption" Name="SelectOption">
|
|
@ParentLabelTemplate(selectedOption.Item)
|
|
</CascadingValue>
|
|
</CascadingValue>
|
|
}
|
|
else
|
|
{
|
|
<span class="@Prefix-selection-item">
|
|
<span class="@Prefix-selection-item-content">@FormatLabel(selectedOption.Label)</span>
|
|
<span unselectable="on" aria-hidden="true" style="user-select: none;" class="@Prefix-selection-item-remove"
|
|
@onmousedown="()=> OnRemoveSelected.InvokeAsync(selectedOption)" onclick="event.stopPropagation()">
|
|
<Icon Type="close"></Icon>
|
|
</span>
|
|
</span>
|
|
}
|
|
</div>
|
|
}
|
|
@if (selectedItems.Count > ParentSelect.MaxTagCount.AsT0)
|
|
{
|
|
<div class="@Prefix-selection-overflow-item @Prefix-selection-overflow-item-rest" style="opacity: 1;">
|
|
@if (ParentMaxTagPlaceholerTemplate != null)
|
|
{
|
|
<CascadingValue Value="this" Name="SelectContent">
|
|
@ParentMaxTagPlaceholerTemplate(selectedItems.Skip(ParentSelect.MaxTagCount.AsT0).Select(i => i.Item))
|
|
</CascadingValue>
|
|
}
|
|
else
|
|
{
|
|
|
|
<span class="@Prefix-selection-item">
|
|
<span class="@Prefix-selection-item-content">+ @(selectedItems.Count - ParentSelect.MaxTagCount.AsT0)@Ellipse</span>
|
|
</span>
|
|
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
else if (ParentSelect.IsResponsive)
|
|
{
|
|
@for (int i = 0; i < selectedItems.Count; i++)
|
|
{
|
|
var selectedOption = selectedItems[i];
|
|
<div class="@Prefix-selection-overflow-item" @key="@selectedOption.InternalId" @ref="@selectedOption.SelectedTagRef" style="@OverflowStyle(i)">
|
|
@if (ParentLabelTemplate != null)
|
|
{
|
|
<CascadingValue Value="this" Name="SelectContent">
|
|
<CascadingValue Value="@selectedOption" Name="SelectOption">
|
|
@ParentLabelTemplate(selectedOption.Item)
|
|
</CascadingValue>
|
|
</CascadingValue>
|
|
}
|
|
else
|
|
{
|
|
<span class="@Prefix-selection-item">
|
|
<span class="@Prefix-selection-item-content">@FormatLabel(selectedOption.Label)</span>
|
|
<span unselectable="on" aria-hidden="true" style="user-select: none;" class="@Prefix-selection-item-remove"
|
|
@onmousedown="()=> OnRemoveSelected.InvokeAsync(selectedOption)" onclick="event.stopPropagation()">
|
|
<Icon Type="close"></Icon>
|
|
</span>
|
|
</span>
|
|
}
|
|
</div>
|
|
}
|
|
@if (selectedItems.Count > _calculatedMaxCount)
|
|
{
|
|
<div class="@Prefix-selection-overflow-item @Prefix-selection-overflow-item-rest" @key="@_internalId" @ref="@_aggregateTag" style="opacity 1; order: @(_calculatedMaxCount-1);">
|
|
@if (ParentMaxTagPlaceholerTemplate != null)
|
|
{
|
|
<CascadingValue Value="this" Name="SelectContent">
|
|
@ParentMaxTagPlaceholerTemplate(selectedItems.Skip(_calculatedMaxCount).Select(i => i.Item))
|
|
</CascadingValue>
|
|
}
|
|
else
|
|
{
|
|
<span class="@Prefix-selection-item">
|
|
<span class="@Prefix-selection-item-content">+ @(selectedItems.Count-_calculatedMaxCount)@Ellipse</span>
|
|
</span>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
string firstAfterPrefix = $"max-width: {GetFirstItemMaxWidth()}%;";
|
|
@foreach (var selectedOption in selectedItems)
|
|
{
|
|
<div class="@Prefix-selection-overflow-item" style="opacity: 1;@firstAfterPrefix">
|
|
@if (ParentLabelTemplate != null)
|
|
{
|
|
<CascadingValue Value="this" Name="SelectContent">
|
|
<CascadingValue Value="@selectedOption" Name="SelectOption">
|
|
@ParentLabelTemplate(selectedOption.Item)
|
|
</CascadingValue>
|
|
</CascadingValue>
|
|
}
|
|
else
|
|
{
|
|
<span class="@Prefix-selection-item">
|
|
<span class="@Prefix-selection-item-content">@FormatLabel(selectedOption.Label)</span>
|
|
<span unselectable="on" aria-hidden="true" style="user-select: none;" class="@Prefix-selection-item-remove"
|
|
@onmousedown="()=> OnRemoveSelected.InvokeAsync(selectedOption)" onclick="event.stopPropagation()">
|
|
<Icon Type="close"></Icon>
|
|
</span>
|
|
</span>
|
|
}
|
|
</div>
|
|
firstAfterPrefix = "max-width: 98%;";
|
|
}
|
|
}
|
|
}
|
|
<div class="@Prefix-selection-overflow-item @Prefix-selection-overflow-item-suffix" style="opacity: 1; order: @(ParentSelect.IsResponsive?_calculatedMaxCount-1:1)">
|
|
<div class="@Prefix-selection-search" style="@_inputWidth">
|
|
<input @ref="ParentSelect._inputRef"
|
|
@oninput="OnInput"
|
|
@onkeyup="OnKeyUp"
|
|
@onkeydown="OnKeyDown"
|
|
@onfocus="OnFocus"
|
|
@onblur="OnBlur"
|
|
@attributes=@AdditonalAttributes()
|
|
@onkeypress="@OnKeyPressEventHandler"
|
|
@onkeypress:preventDefault="@_suppressInput"
|
|
@onkeypress:stopPropagation="true"
|
|
@bind-value="@SearchValue"
|
|
id="@ParentSelect.Id"
|
|
role="combobox"
|
|
class="@Prefix-selection-search-input"
|
|
autocomplete="off"
|
|
aria-owns="@(ParentSelect.Id)_list"
|
|
aria-expanded="@IsOverlayShow"
|
|
aria-autocomplete="list"
|
|
aria-controls="@(ParentSelect.Id)_list"
|
|
style="@_inputStyle"/>
|
|
<span class="@Prefix-selection-search-mirror" aria-hidden="true"> </span>
|
|
</div>
|
|
</div>
|
|
@if (ShowPlaceholder)
|
|
{
|
|
<span class="@Prefix-selection-placeholder" style="@(ParentSelect.PrefixIcon != null?"margin-left: 7px;":"")">@Placeholder</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@if (ParentSelect.SuffixIcon != null)
|
|
{
|
|
<span @ref="@_suffixRef" class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;" @onclick="@ParentSelect.OnArrowClick" @onclick:stopPropagation="true">
|
|
@ParentSelect.SuffixIcon
|
|
</span>
|
|
}
|
|
else if (ParentSelect.Loading)
|
|
{
|
|
<span @ref="@_suffixRef" class="ant-select-arrow ant-select-arrow-loading" unselectable="on" aria-hidden="true" style="user-select: none;">
|
|
<Icon Type="loading"></Icon>
|
|
</span>
|
|
}
|
|
@if (!ParentSelect.Disabled && ParentSelect.AllowClear && ParentSelect.HasValue)
|
|
{
|
|
<span @ref="@_suffixRef" class="ant-select-clear" unselectable="on" aria-hidden="true" style="user-select: none;" @onclick="OnClearClickAsync" @onclick:stopPropagation="true">
|
|
<Icon Type="close-circle" Theme="fill"></Icon>
|
|
</span>
|
|
}
|
|
} |