Skip to content

Commit e66d73b

Browse files
YomodoJeffrey Janglimckaragoz
authored
ComboBox: Refactored HandleKeyDown (#319)
* -Changed LockScroll default to true -Reworked HandleKeyDown -PageUp and PageDown can be used -Full list-cycling -Select mode: List now always shows -Clicking clear now always shows list * DeactiveAllItems refinement * Refined HandleOnBlur * Refined CloseMenu * Refined ComboxboxExample1 * Corrected casing for MudComboBox * Corrected casing for MudComboBox * Added parameter: OpenMenuAfterClear * Force rename * Force rename for correct casing * Final code tweaks * Fix selecting last item from list * Fixed cycling through menu * Added parameters: TextColor, CheckBoxCheckedColor, CheckBoxUnCheckedColor, CheckBoxSize * Restored original chip color * Fix Tests * Restored doc filenames * Changed checked checkbox color to Primary color * Docs Names * Fixed checkbox colors * Added IndeterminateIcon to MudCheckBox * Add Key Definition on Docs --------- Co-authored-by: Jeffrey Jangli <Jeffrey.Jangli@kpn.com> Co-authored-by: mckaragoz <78308169+mckaragoz@users.noreply.github.com>
1 parent d41ca2d commit e66d73b

18 files changed

Lines changed: 411 additions & 369 deletions

File tree

CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxClearableTest.razor renamed to CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboBoxClearableTest.razor

File renamed without changes.

CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxEventCountTest.razor renamed to CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboBoxEventCountTest.razor

File renamed without changes.

CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxInitialValueTest.razor renamed to CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboBoxInitialValueTest.razor

File renamed without changes.

CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxMultiSelectEditableTest.razor renamed to CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboBoxMultiSelectEditableTest.razor

File renamed without changes.

CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxMultiSelectTest1.razor renamed to CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboBoxMultiSelectTest1.razor

File renamed without changes.

CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxMultiSelectTest2.razor renamed to CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboBoxMultiSelectTest2.razor

File renamed without changes.

CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxMultiSelectTest3.razor renamed to CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboBoxMultiSelectTest3.razor

File renamed without changes.

CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxTest1.razor renamed to CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboBoxTest1.razor

File renamed without changes.

CodeBeam.MudBlazor.Extensions.UnitTests/Components/ComboboxTests.cs

Lines changed: 55 additions & 40 deletions
Large diffs are not rendered by default.

CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@namespace MudExtensions
22
@using MudExtensions.Enums;
3+
@using System.Runtime.InteropServices;
34
@typeparam T
45
@inherits MudBaseInputExtended<T>
56

@@ -10,7 +11,7 @@
1011
Error="@Error" ErrorText="@ErrorText" ErrorId="@ErrorId" Disabled="@Disabled" @onmousedown="@ToggleMenu" Required="@Required" ForId="@FieldId">
1112
<InputContent>
1213
@*DataVisualiserStyle="@($"min-height: 1.1876em;{(HasValue(Value) && Editable == true ? "padding-bottom: 0px" : null)}")"*@
13-
<MudInputExtended @ref="_inputReference" T="string" InputType="@(Editable && MultiSelection == false ? InputType.Text : InputType.Hidden)"
14+
<MudInputExtended @ref="_inputReference" T="string" InputType="@(Editable && !MultiSelection ? InputType.Text : InputType.Hidden)"
1415
Class="@InputClassname" Style="@InputStyle" Margin="@Margin" Placeholder="@Placeholder"
1516
Variant="@Variant" Immediate="true"
1617
TextUpdateSuppression="false"
@@ -27,18 +28,25 @@
2728

2829
<DataVisualiser>
2930
<div style="flex-basis: content; flex-grow: 0">
30-
@if (HasValue(Value) == false && string.IsNullOrEmpty(Placeholder) == false)
31+
@if (!HasValue(Value) && !string.IsNullOrWhiteSpace(Placeholder))
3132
{
3233
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
3334
}
3435
else if (InputPresenter == ValuePresenter.Chip)
3536
{
36-
<MudChipSet Class="d-flex flex-wrap mud-width-full" AllClosable="ChipCloseable" OnClose="ChipClosed">
37-
@foreach (var item in Items?.Where(x => (MultiSelection ? SelectedValues.Contains(x.Value) : Value?.Equals(x.Value) == true)) ?? new List<MudComboBoxItem<T>>())
38-
{
39-
<MudChip Class="@ChipClass" Value="item.Value" Text="@(ToStringFunc != null ? ToStringFunc.Invoke(item.Value) : string.IsNullOrEmpty(item.Text) ? Converter.Set(item.Value) : item.Text)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" @onmousedown:stopPropagation />
37+
<MudChipSet Class="d-flex flex-wrap mud-width-full" AllClosable="@ChipCloseable" OnClose="@ChipClosed">
38+
@{
39+
var collection = Items.Where(x => (MultiSelection ? SelectedValues.Contains(x.Value) : Value?.Equals(x.Value) == true))?.ToList();
40+
if (collection is not null)
41+
{
42+
foreach (var item in CollectionsMarshal.AsSpan(collection))
43+
{
44+
<MudChip Class="@ChipClass" Value="@item.Value" Text="@(ToStringFunc is not null ? ToStringFunc.Invoke(item.Value) : string.IsNullOrWhiteSpace(item.Text) ? Converter.Set(item.Value) : item.Text)"
45+
Color="@Color" Size="@ChipSize" Variant="@ChipVariant" @onmousedown:stopPropagation />
46+
}
47+
}
4048
}
41-
@*@if (ItemCollection != null)
49+
@*@if (ItemCollection is not null)
4250
{
4351
foreach (var item in ItemCollection.Where(x => SelectedValues.Contains(x)))
4452
{
@@ -47,49 +55,51 @@
4755
}
4856
else
4957
{
50-
foreach (var item in Items?.Where(x => (MultiSelection ? SelectedValues.Contains(x.Value) : Value?.Equals(x.Value) == true)) ?? new List<MudComboboxItem<T>>())
58+
foreach (var item in Items.Where(x => (MultiSelection ? SelectedValues.Contains(x.Value) : Value?.Equals(x.Value) == true)) ?? new List<MudComboBoxItem<T>>())
5159
{
52-
<MudChip Class="@ChipClass" Value="item.Value" Text="@(ToStringFunc != null ? ToStringFunc.Invoke(item.Value) : string.IsNullOrEmpty(item.Text) ? Converter.Set(item.Value) : item.Text)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" @onmousedown:stopPropagation />
60+
<MudChip Class="@ChipClass" Value="item.Value" Text="@(ToStringFunc is not null ? ToStringFunc.Invoke(item.Value) : string.IsNullOrWhiteSpace(item.Text) ? Converter.Set(item.Value) : item.Text)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" @onmousedown:stopPropagation />
5361
}
5462
}*@
5563
</MudChipSet>
5664
}
57-
else if (InputPresenter == ValuePresenter.Text && (Editable == false || (MultiSelection == true && Editable == true)))
65+
else if (InputPresenter == ValuePresenter.Text && (!Editable || (MultiSelection && Editable)))
5866
{
5967
<div style="white-space: break-spaces">@_dataVisualiserText</div>
6068
}
6169
else if (InputPresenter == ValuePresenter.ItemContent)
6270
{
63-
if (SelectedValues == null)
71+
if (SelectedValues is null)
6472
{
6573
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
6674

6775
}
68-
else if (ItemTemplate != null)
76+
else if (ItemTemplate is not null)
6977
{
70-
if (Value != null)
78+
if (Value is not null)
7179
{
7280
@ItemTemplate(Items.FirstOrDefault(x => x.Value.Equals(Value)))
7381
}
74-
else if (!string.IsNullOrEmpty(Placeholder))
82+
else if (!string.IsNullOrWhiteSpace(Placeholder))
7583
{
7684
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
7785
}
7886
}
79-
else if (Items.FirstOrDefault(x => x.Value.Equals(Value))?.ChildContent != null)
87+
else if (Items.FirstOrDefault(x => x.Value.Equals(Value))?.ChildContent is not null)
8088
{
8189
if (MultiSelection)
8290
{
83-
@foreach (var item in Items.Where(x => SelectedValues.Contains(x.Value)))
91+
foreach (var item in CollectionsMarshal.AsSpan(Items))
8492
{
85-
<MudRender>@item.ChildContent</MudRender>
93+
if (SelectedValues.Contains(item.Value))
94+
{
95+
<MudRender>@item.ChildContent</MudRender>
96+
}
8697
}
8798
}
8899
else
89100
{
90101
<MudRender>@Items.FirstOrDefault(x => x.Value.Equals(Value))?.ChildContent</MudRender>
91102
}
92-
93103
}
94104
else
95105
{
@@ -100,7 +110,7 @@
100110
</DataVisualiser>
101111
<ChildContent>
102112
<div class="@TemplateClass">
103-
@if (HasValue(Value) == false && string.IsNullOrEmpty(Placeholder) == false)
113+
@if (!HasValue(Value) && !string.IsNullOrWhiteSpace(Placeholder))
104114
{
105115
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
106116
}
@@ -120,7 +130,8 @@
120130
{
121131
<div class="pa-2">
122132
<MudTextFieldExtended id="@($"{_elementId}-autocomplete")" @ref="@_searchbox" T="string" @bind-Value="@_searchString" Margin="Margin.Dense"
123-
Variant="Variant.Outlined" Immediate="true" OnKeyDown="@SearchBoxHandleKeyDown" OnKeyUp="@SearchBoxHandleKeyUp" Clearable="@SearchBoxClearable">
133+
Variant="Variant.Outlined" Immediate="true" OnKeyDown="@SearchBoxHandleKeyDown" OnKeyUp="@SearchBoxHandleKeyUp"
134+
Clearable="@SearchBoxClearable">
124135
<AdornmentEnd>
125136
<MudIcon Icon="@Icons.Material.Filled.Search" Color="@Color" />
126137
</AdornmentEnd>
@@ -131,16 +142,22 @@
131142
@if (SelectAll)
132143
{
133144
<div class="@($"mud-combobox-item mud-combobox-item-clickable mud-combobox-item-{Dense.ToDescriptionString()} mud-ripple d-flex")" @onclick="SelectAllItems" @onclick:stopPropagation="true">
134-
<MudCheckBox Class="mx-4" @bind-Checked="@_allSelected" Color="@Color" @onclick="@SelectAllItems" Dense="true" />
135-
<MudText Typo="GetTypo()">@SelectAllText</MudText>
145+
<MudCheckBox Class="mx-4" Dense
146+
@bind-Checked="@_allSelected" @onclick="@SelectAllItems"
147+
IndeterminateIcon="@IndeterminateIcon"
148+
Size="@CheckBoxSize"
149+
Color="@EffectiveCheckBoxCheckedColor"
150+
UnCheckedColor="@EffectiveCheckBoxUnCheckedColor" />
151+
152+
<MudText Typo="GetTypo()" Color="@TextColor">@SelectAllText</MudText>
136153
</div>
137154
<MudDivider />
138155
}
139156
</div>
140157
}
141158

142159
@ChildContent
143-
@if (NoItemsContent != null && !HasEligibleItems())
160+
@if (NoItemsContent is not null && !HasEligibleItems())
144161
{
145162
<div class="pa-2">
146163
@NoItemsContent

0 commit comments

Comments
 (0)