From 1b8a9c3a9330b1d3e2115ffc45323aa3b3a33e65 Mon Sep 17 00:00:00 2001 From: James Yeung Date: Thu, 8 Feb 2024 12:58:16 +0800 Subject: [PATCH] fix(module: select): DropdownRender doesn't pass original content into renderfargment (#3675) * fix(module: select): dropdown render doesn't pass original content into renderfargment * fix select box width * fix aria-label --- components/select/Select.razor | 156 ++++++++++-------- components/select/Select.razor.cs | 5 +- components/select/SelectOption.razor | 2 +- .../Select/demo/CustomDropdownMenu.razor | 51 +++--- .../Components/Select/demo/ListboxStyle.razor | 42 +++++ .../Components/Select/demo/list-box-style.md | 18 ++ 6 files changed, 169 insertions(+), 105 deletions(-) create mode 100644 site/AntDesign.Docs/Demos/Components/Select/demo/ListboxStyle.razor create mode 100644 site/AntDesign.Docs/Demos/Components/Select/demo/list-box-style.md diff --git a/components/select/Select.razor b/components/select/Select.razor index 3d9048a4..e7d36b1d 100644 --- a/components/select/Select.razor +++ b/components/select/Select.razor @@ -21,81 +21,13 @@ OverlayLeaveCls="ant-slide-up-leave ant-slide-up-leave-active ant-slide-up">
- @if (SelectOptions != null) - { -
-
-
- @if (CustomTagSelectOptionItem != null) - { - - - - - - - } - @SelectOptions - @if (AddedTags != null) - { - foreach (var selectOption in AddedTags) - { - - - - - - - } - } -
-
-
- } - else if (SelectOptions == null && !AllOptionsHidden()) - { -
-
-
- @{ - @if (!IsGroupingEnabled) - { - @selectOptionsRender((this, ItemTemplate)) - } - else - { - - - - } - } -
-
-
- } - @if (AllOptionsHidden()) - { -
- @if (NotFoundContent != null) - { - @NotFoundContent - } - else - { - - } -
- } - @if (DropdownRender != null) { - @DropdownRender(default) + @DropdownRender(RenderOptionDropdown()) + } + else + { + @RenderOptionDropdown() }
@@ -164,4 +96,82 @@ ; + + RenderFragment RenderOptionDropdown() + { + @if (SelectOptions != null) + { + return @
+
+
+ @if (CustomTagSelectOptionItem != null) + { + + + + + + + } + @SelectOptions + @if (AddedTags != null) + { + foreach (var selectOption in AddedTags) + { + + + + + + + } + } +
+
+
+ ; + } + else if (SelectOptions == null && !AllOptionsHidden()) + { + return@
+
+
+ @{ + @if (!IsGroupingEnabled) + { + @selectOptionsRender((this, ItemTemplate)) + } + else + { + + + + } + } +
+
+
; + } + @if (AllOptionsHidden()) + { + return@
+ @if (NotFoundContent != null) + { + @NotFoundContent + } + else + { + + } +
+ ; + } + + return builder => { }; + } + } diff --git a/components/select/Select.razor.cs b/components/select/Select.razor.cs index 006fb975..d11ff5f3 100644 --- a/components/select/Select.razor.cs +++ b/components/select/Select.razor.cs @@ -137,9 +137,9 @@ namespace AntDesign [Parameter] public string DropdownMaxWidth { get; set; } = "auto"; /// - /// Customize dropdown content. + /// Customize dropdown content. The context is the original content. /// - [Parameter] public Func DropdownRender { get; set; } + [Parameter] public RenderFragment DropdownRender { get; set; } /// /// The name of the property to be used as a group indicator. @@ -328,6 +328,7 @@ namespace AntDesign /// Specifies predicate for disabled options /// [Parameter] public Func DisabledPredicate { get => _getDisabled; set => _getDisabled = value; } + /// /// Used when Mode = default - The value is used during initialization and when pressing the Reset button within Forms. /// diff --git a/components/select/SelectOption.razor b/components/select/SelectOption.razor index 7c46e4e6..5a7f10d3 100644 --- a/components/select/SelectOption.razor +++ b/components/select/SelectOption.razor @@ -8,7 +8,7 @@ class="@ClassMapper.Class" role="option" aria-selected="@IsSelected" - aria-label="@(ItemTemplate != null ? ItemTemplate(Model.Item) : InternalLabel)" + aria-label="@InternalLabel" style="@InnerStyle" @onclick="@OnClick" @onmouseenter="@OnMouseEnter"> diff --git a/site/AntDesign.Docs/Demos/Components/Select/demo/CustomDropdownMenu.razor b/site/AntDesign.Docs/Demos/Components/Select/demo/CustomDropdownMenu.razor index eaea3153..b2ee705d 100644 --- a/site/AntDesign.Docs/Demos/Components/Select/demo/CustomDropdownMenu.razor +++ b/site/AntDesign.Docs/Demos/Components/Select/demo/CustomDropdownMenu.razor @@ -6,10 +6,23 @@ LabelName="@nameof(Person.Name)" Placeholder="custom dropdown render" OnSelectedItemChanged="OnSelectedItemChangedHandler" - Style="width: 240px;" - DropdownRender="@DropdownRender"> + Style="width: 240px;"> + +
+ @originNode + + +
+ -

+
+

Selected Value: @_selectedValue
Selected Item Name: @_selectedItem?.Name @@ -33,7 +46,7 @@ _list = new List { new Person {Id = 1, Name = "Jack"}, - new Person {Id = 2, Name = "Lucy"} + new Person {Id = 2, Name = "Lucy"} }; } @@ -42,33 +55,13 @@ _selectedItem = value; } - private RenderFragment DropdownRender(RenderFragment originNode) - { - RenderFragment customDropdownRender = - @; - - return customDropdownRender; - } - private void AddItem(MouseEventArgs args) { - if (!string.IsNullOrWhiteSpace(_name)) - { + if (!string.IsNullOrWhiteSpace(_name)) + { int newId = _list.Count() + 1; - _list.Add(new Person {Id = newId, Name = _name}); - _name = string.Empty; - } + _list.Add(new Person { Id = newId, Name = _name }); + _name = string.Empty; + } } } diff --git a/site/AntDesign.Docs/Demos/Components/Select/demo/ListboxStyle.razor b/site/AntDesign.Docs/Demos/Components/Select/demo/ListboxStyle.razor new file mode 100644 index 00000000..774f8ebd --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Select/demo/ListboxStyle.razor @@ -0,0 +1,42 @@ +@using AntDesign.Docs.Services + + + +@inject IconListService _iconListService +@code +{ + private Dictionary> _lstIcons; + private List _currentNames; + + protected override void OnInitialized() + { + _lstIcons = _iconListService.GetIcons().ToDictionary(x => x.Category, x => x.IconNames); + base.OnInitialized(); + } + + private void OnChange(string tab) + { + _currentNames = _lstIcons[tab]; + } +} diff --git a/site/AntDesign.Docs/Demos/Components/Select/demo/list-box-style.md b/site/AntDesign.Docs/Demos/Components/Select/demo/list-box-style.md new file mode 100644 index 00000000..b4dc3d32 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Select/demo/list-box-style.md @@ -0,0 +1,18 @@ +--- +order: 23 +title: + zh-CN: 自定义下拉框样式 + en-US: Custom listbox style +--- + +## zh-CN + +下拉框默认是列表样式，可利用 `ListboxStyle` 属性自定义样式。 + +本示例为图标选择器。 + +## en-US + +The drop-down box defaults to a list style and can be customized with `ListboxStyle`. + +This example is an icon selector. \ No newline at end of file