Skip to content

Commit 85577c8

Browse files
mckaragozmckaragoz
authored
SelectExtended Chip Enhancement (#121)
1 parent af013d5 commit 85577c8

File tree

5 files changed

+56
-12
lines changed

5 files changed

+56
-12
lines changed

‎CodeBeam.MudExtensions/Base/MudBaseInputExtended.cs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,9 @@ protected MudBaseInputExtended() : base(new DefaultConverter<T>()) { }
224224
[Category(CategoryTypes.FormComponent.Validation)]
225225
public virtual string Pattern { get; set; }
226226

227+
[Parameter]
228+
public string MockInputStyle { get; set; }
229+
227230
/// <summary>
228231
/// Derived classes need to override this if they can be something other than text
229232
/// </summary>

‎CodeBeam.MudExtensions/Components/InputExtended/MudInputExtended.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
In Disabled state the tabindex attribute must NOT be set at all or else it will get focus on click
8484
*@
8585
<div class="@InputClassname"
86-
style="@("display:"+(InputType == InputType.Hidden && ChildContent != null ? "inline" : "none"))"
86+
style="@($"display:{(InputType == InputType.Hidden && ChildContent != null ? "inline" : "none")}; {MockInputStyle}")"
8787
@onblur="@OnBlurred" @ref="@_elementReference1">
8888
@ChildContent
8989
</div>
@@ -92,7 +92,7 @@
9292
{
9393
@*Note: this div must always be there to avoid crashes in WASM, but it is hidden most of the time except if ChildContent should be shown.*@
9494
<div class="@InputClassname"
95-
style="@("display:"+(InputType == InputType.Hidden && ChildContent != null ? "inline" : "none"))"
95+
style="@($"display:{(InputType == InputType.Hidden && ChildContent != null ? "inline" : "none")}; {MockInputStyle}")"
9696
tabindex="@(InputType == InputType.Hidden && ChildContent != null ? 0 : -1)"
9797
@onblur="@OnBlurred" @ref="@_elementReference1">
9898
@ChildContent

‎CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<MudInputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@Classname" Style="@Style"
1818
Error="@Error" ErrorText="@ErrorText" ErrorId="@ErrorId" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
1919
<InputContent>
20-
<MudInputExtended @ref="_elementReference" InputType="InputType.Hidden"
20+
<MudInputExtended @ref="_elementReference" InputType="InputType.Hidden" MockInputStyle="@(ValuePresenter == ValuePresenter.Chip ? "width: 0px" : null)"
2121
Class="@InputClassname" Style="@InputStyle" Margin="@Margin" Placeholder="@Placeholder"
2222
Variant="@Variant"
2323
TextUpdateSuppression="false"
@@ -30,6 +30,18 @@
3030
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
3131
</AdornmentEnd>
3232

33+
<DataVisualiser>
34+
@if (ValuePresenter == ValuePresenter.Chip)
35+
{
36+
<MudChipSet Class="d-flex flex-wrap mud-width-full" Style="row-gap: 4px" AllClosable="ChipCloseable" OnClose="ChipClosed">
37+
@foreach (var val in SelectedValues)
38+
{
39+
<MudChip Class="@ChipClass" Text="@Converter.Set(val)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" />
40+
}
41+
</MudChipSet>
42+
}
43+
</DataVisualiser>
44+
3345
<ChildContent>
3446
<div class="@TemplateClass">
3547
@if (Strict && !IsValueInList)
@@ -54,10 +66,7 @@
5466
}
5567
else
5668
{
57-
@foreach (var val in SelectedValues)
58-
{
59-
<MudChip Class="mt-n1" Text="@Converter.Set(val)" Color="@Color" Size="Size.Small" />
60-
}
69+
@*Chips show under DataVisualiser RenderFragment*@
6170
}
6271
}
6372
else if (ValuePresenter == ValuePresenter.ItemContent)

‎CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor.cs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,25 @@ public bool Dense
224224
[Category(CategoryTypes.List.Behavior)]
225225
public bool Virtualize { get; set; }
226226

227+
/// <summary>
228+
/// If true, chips has close button and remove from SelectedValues when pressed the close button.
229+
/// </summary>
230+
[Parameter]
231+
[Category(CategoryTypes.List.Behavior)]
232+
public bool ChipCloseable { get; set; }
233+
234+
[Parameter]
235+
[Category(CategoryTypes.List.Behavior)]
236+
public string ChipClass { get; set; }
237+
238+
[Parameter]
239+
[Category(CategoryTypes.List.Behavior)]
240+
public Variant ChipVariant { get; set; } = Variant.Filled;
241+
242+
[Parameter]
243+
[Category(CategoryTypes.List.Behavior)]
244+
public Size ChipSize { get; set; } = Size.Small;
245+
227246
/// <summary>
228247
/// Parameter to define the delimited string separator.
229248
/// </summary>
@@ -1055,5 +1074,11 @@ protected override bool HasValue(T value)
10551074
else
10561075
return base.HasValue(value);
10571076
}
1077+
1078+
protected async Task ChipClosed(MudChip chip)
1079+
{
1080+
SelectedValues = SelectedValues.Where(x => x.Equals(Converter.Get(chip.Text)) == false);
1081+
await SelectedValuesChanged.InvokeAsync(SelectedValues);
1082+
}
10581083
}
10591084
}

‎ComponentViewer.Docs/Pages/Examples/SelectExtendedExample5.razor‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11

22
<MudGrid>
33
<MudItem xs="12" sm="8">
4-
<MudSelectExtended MultiSelectionTextFunc="@(_radioGroup?.SelectedOption == 1 ? new Func<List<string>, string>(GetMultiSelectionText) : null)" MultiSelection="true" ValuePresenter="_valuePresenter" @bind-Value="value" @bind-SelectedValues="options" T="string" Label="US States" AdornmentIcon="@Icons.Material.Filled.Search" AnchorOrigin="Origin.BottomCenter">
4+
<MudSelectExtended MultiSelectionTextFunc="@(_radioGroup?.SelectedOption == 1 ? new Func<List<string>, string>(GetMultiSelectionText) : null)" MultiSelection="true" ValuePresenter="_valuePresenter" @bind-Value="value" @bind-SelectedValues="options" T="string" Label="US States" AnchorOrigin="Origin.BottomCenter"
5+
ChipCloseable="_chipCloseable" ChipSize="_chipSize" ChipVariant="_chipVariant">
56
@foreach (var state in states)
67
{
78
<MudSelectItemExtended T="string" Value="@state" Text="@state" />
@@ -29,14 +30,20 @@
2930
<MudText Typo="Typo.subtitle2">}</MudText>
3031
</MudItem>
3132
</MudGrid>
32-
</MudItem>
33-
</MudGrid>
33+
<MudSwitchM3 @bind-Checked="_chipCloseable" Label="Chip Closeable" Color="Color.Primary" />
34+
<MudSelectExtended Class="mt-4" ItemCollection="@(Enum.GetValues<Variant>())" @bind-Value="_chipVariant" Label="Chip Variant" Variant="Variant.Outlined" Margin="Margin.Dense" />
35+
<MudSelectExtended Class="mt-4" ItemCollection="@(Enum.GetValues<Size>())" @bind-Value="_chipSize" Label="Chip Size" Variant="Variant.Outlined" Margin="Margin.Dense" />
36+
</MudItem>
37+
</MudGrid>
3438

35-
@code {
39+
@code {
3640
MudRadioGroup<int> _radioGroup;
37-
ValuePresenter _valuePresenter = ValuePresenter.Text;
41+
ValuePresenter _valuePresenter = ValuePresenter.Text;
3842
string value { get; set; } = "Nothing selected";
3943
IEnumerable<string> options { get; set; } = new HashSet<string>() { "Alaska", "California" };
44+
bool _chipCloseable = false;
45+
Variant _chipVariant = Variant.Filled;
46+
Size _chipSize = Size.Small;
4047

4148
private string[] states =
4249
{

0 commit comments

Comments
 (0)