Skip to content

Commit 613f2b4

Browse files
Anu6isAnu6is
authored
Merge pull request #36 from 0phois/pr/33
MudStaticRadioGroup/MudStaticRadio: Initial implementation
2 parents 01f78b3 + 3543c7a commit 613f2b4

File tree

16 files changed

+571
-5
lines changed

16 files changed

+571
-5
lines changed

‎demo/StaticSample/StaticSample.Client/StaticSample.Client.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<ItemGroup>
1212
<PackageReference Include="Blazr.RenderState.WASM" Version="1.0.0" />
1313
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.10" />
14-
<PackageReference Include="MudBlazor" Version="8.2.0" />
14+
<PackageReference Include="MudBlazor" Version="8.*" />
1515
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="8.0.10" />
1616
</ItemGroup>
1717

‎demo/StaticSample/StaticSample/StaticSample.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<PrivateAssets>all</PrivateAssets>
1818
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
1919
</PackageReference>
20-
<PackageReference Include="MudBlazor" Version="8.2.0" />
20+
<PackageReference Include="MudBlazor" Version="8.*" />
2121
</ItemGroup>
2222

2323
<ItemGroup>

‎src/Components/MudStaticRadio.razor‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
@namespace MudBlazor.StaticInput
2+
3+
@typeparam T
4+
@inherits MudRadio<T>
5+
6+
<MudInputControl Class="@Classname" Style="@Style" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
7+
<InputContent>
8+
<label class="@LabelClassname" style="@Style" id="@($"static-radio-container-{_elementId}")" @onclick:stopPropagation="@StopClickPropagation">
9+
<span tabindex="0" class="@IconClassname">
10+
<input id="@($"static-radio-{_elementId}")" tabindex="-1" @attributes="UserAttributes" type="radio" role="radio"
11+
class="mud-radio-input static-radio-input" checked="@_isChecked" disabled="@GetDisabledState()" name="@(_isChecked ? ParentGroup?.GroupName : "")" value="@Value"
12+
aria-checked="@(_isChecked.ToString().ToLower())" aria-disabled="@(GetDisabledState().ToString().ToLower())" @onclick:preventDefault="@GetReadOnlyState()" />
13+
<MudIcon Icon="@(ParentGroup.CheckedIcon ?? CheckedIcon)" Color="HasErrors ? Color.Error : ParentGroup?.Color ?? this.Color" Size="@Size" Disabled="@Disabled"
14+
id="@($"radio-checked-icon-{_elementId}")" style="@($"display: {_checkedStyle}")" />
15+
<MudIcon Icon="@(ParentGroup.UncheckedIcon ?? UncheckedIcon)" Color="HasErrors ? Color.Error : ParentGroup?.UncheckedColor ?? this.UncheckedColor ?? Color.Inherit"
16+
Size="@Size" Disabled="@Disabled" id="@($"radio-unchecked-icon-{_elementId}")" style="@($"display: {_uncheckedStyle}")" />
17+
</span>
18+
@if (!string.IsNullOrEmpty(Label))
19+
{
20+
<MudText Color="HasErrors ? Color.Error : Color.Inherit">@Label</MudText>
21+
}
22+
@if (ChildContent is not null)
23+
{
24+
<MudText Color="HasErrors ? Color.Error : Color.Inherit">
25+
@ChildContent
26+
</MudText>
27+
}
28+
</label>
29+
</InputContent>
30+
</MudInputControl>
31+
32+
@code {
33+
[CascadingParameter]
34+
private MudStaticRadioGroup<T>? ParentGroup { get; set; }
35+
36+
[Parameter]
37+
public Expression<Func<T?>>? ValueExpression { get; set; }
38+
39+
private bool _isChecked;
40+
private readonly string _elementId = Guid.NewGuid().ToString()[..8];
41+
private string _checkedStyle => _isChecked ? "block" : "none";
42+
private string _uncheckedStyle => _isChecked ? "none" : "block";
43+
44+
protected override void OnInitialized()
45+
{
46+
if (ParentGroup is null)
47+
throw new InvalidOperationException($"{nameof(MudStaticRadio<T>)} must be used inside a {nameof(MudStaticRadioGroup<T>)}");
48+
49+
if (ParentGroup!.SelectedValue is not null)
50+
_isChecked = ParentGroup!.SelectedValue!.Equals(Value);
51+
52+
base.OnInitialized();
53+
}
54+
55+
protected override void OnParametersSet()
56+
{
57+
UserAttributes["data-static-component"] = true;
58+
59+
base.OnParametersSet();
60+
}
61+
}
62+
63+
<script>
64+
document.addEventListener("DOMContentLoaded", function () {
65+
document.querySelectorAll('.static-radio-input').forEach(function (radio) {
66+
radio.addEventListener('change', function () {
67+
const parentContainer = radio.closest("[role='radiogroup']");
68+
if (!parentContainer) return;
69+
70+
parentContainer.querySelectorAll('.static-radio-input').forEach(function (r) {
71+
if (r !== radio) {
72+
r.checked = false;
73+
r.removeAttribute("name");
74+
r.setAttribute("checked", false);
75+
r.setAttribute("aria-checked", false);
76+
}
77+
78+
const radioId = r.id.split('-')[2];
79+
const checkedIcon = document.getElementById(`radio-checked-icon-${radioId}`);
80+
const uncheckedIcon = document.getElementById(`radio-unchecked-icon-${radioId}`);
81+
82+
if (r.checked) {
83+
checkedIcon.style.display = 'block';
84+
uncheckedIcon.style.display = 'none';
85+
r.setAttribute("checked", true);
86+
r.setAttribute("aria-checked", true);
87+
r.setAttribute("name", "@ParentGroup?.GroupName");
88+
} else {
89+
checkedIcon.style.display = 'none';
90+
uncheckedIcon.style.display = 'block';
91+
}
92+
});
93+
});
94+
});
95+
});
96+
</script>

‎src/Components/MudStaticRadioGroup.razor‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@namespace MudBlazor.StaticInput
2+
@using MudBlazor.Interfaces
3+
4+
@typeparam T
5+
@inherits MudRadioGroup<T>
6+
7+
<MudInputControl Class="@Classname" Style="@Style" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
8+
<InputContent>
9+
<CascadingValue Value="this" IsFixed="false">
10+
<CascadingValue TValue="IForm" Value="null">
11+
<CascadingValue TValue="bool" Name="ParentDisabled" Value="@GetDisabledState()">
12+
<CascadingValue TValue="bool" Name="ParentReadOnly" Value="@GetReadOnlyState()">
13+
<div id="@($"static-radio-group-{_elementId}")" role="radiogroup" @attributes="UserAttributes" class="@GetInputClass()"
14+
style="@InputStyle" required="@Required" aria-required="@Required.ToString().ToLowerInvariant()">
15+
<input type="hidden" id="@($"empty-radio-{_elementId}")" name="@(_valueSelected ? "" : GroupName)" value="@SelectedValue" />
16+
17+
@ChildContent
18+
</div>
19+
</CascadingValue>
20+
</CascadingValue>
21+
</CascadingValue>
22+
</CascadingValue>
23+
</InputContent>
24+
</MudInputControl>
25+
26+
@code {
27+
[CascadingParameter(Name = "ParentDisabled")]
28+
private bool ParentIsDisabled { get; set; }
29+
30+
[CascadingParameter(Name = "ParentReadOnly")]
31+
private bool ParentIsReadOnly { get; set; }
32+
33+
[Parameter]
34+
public Expression<Func<T?>>? ValueExpression { get; set; }
35+
36+
/// <summary>
37+
/// The color to use when in an checked state
38+
/// </summary>
39+
[Parameter]
40+
public Color? Color { get; set; }
41+
42+
/// <summary>
43+
/// The color to use when in an unchecked state
44+
/// </summary>
45+
[Parameter]
46+
public Color? UncheckedColor { get; set; }
47+
48+
// /// <summary>
49+
// /// The icon displayed when in a checked state.
50+
// /// </summary>
51+
[Parameter]
52+
public string? CheckedIcon { get; set; }
53+
54+
// /// <summary>
55+
// /// The icon displayed when in an unchecked state.
56+
// /// </summary>
57+
[Parameter]
58+
public string? UncheckedIcon { get; set; }
59+
60+
public string GroupName { get; set; } = string.Empty;
61+
public T? SelectedValue { get; set; }
62+
63+
private bool _valueSelected;
64+
private readonly string _elementId = Guid.NewGuid().ToString()[..8];
65+
66+
protected override void OnInitialized()
67+
{
68+
if (ValueExpression is not null)
69+
{
70+
var expression = ValueExpression.ToString();
71+
var index = expression.LastIndexOf(").", StringComparison.Ordinal);
72+
73+
if (index > 0)
74+
{
75+
GroupName = expression[(index + 2)..];
76+
}
77+
78+
var compiledExpression = ValueExpression!.Compile();
79+
80+
SelectedValue = compiledExpression();
81+
_valueSelected = SelectedValue is not null;
82+
}
83+
84+
base.OnInitialized();
85+
}
86+
}

‎src/Components/MudStaticRadioGroup.razor.cs‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
using Microsoft.AspNetCore.Components;
2+
using MudBlazor.Utilities;
3+
4+
namespace MudBlazor.StaticInput;
5+
6+
public partial class MudStaticRadioGroup<T> : MudRadioGroup<T>
7+
{
8+
/**********************************************
9+
* Hide these inherited properties to prevent *
10+
* consumers from modifying them directly. *
11+
**********************************************/
12+
protected new T? Value { get; set; }
13+
protected new EventCallback<T?> ValueChanged { get; set; }
14+
15+
private string GetInputClass() =>
16+
new CssBuilder("mud-radio-group")
17+
.AddClass(InputClass)
18+
.Build();
19+
20+
internal bool GetDisabledState() => Disabled || ParentIsDisabled;
21+
internal bool GetReadOnlyState() => ReadOnly || ParentIsReadOnly;
22+
}

‎src/MudBlazor.StaticInput.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
<ItemGroup>
2424
<PackageReference Include="Microsoft.AspNetCore.Http.Abstractions" Version="2.3.0" />
25-
<PackageReference Include="MudBlazor" Version="8.2.0" />
25+
<PackageReference Include="MudBlazor" Version="8.*" />
2626
</ItemGroup>
2727

2828
<ItemGroup Condition=" '$(TargetFramework)' == 'net8.0' ">

‎tests/StaticInput.UnitTests.Viewer/Components/Tests/Radio/RadioColorsTest.razor‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@using System.ComponentModel.DataAnnotations
2+
3+
@inject NavigationManager NavigationManager
4+
5+
<EditForm Model="Input" method="post" OnValidSubmit="OnValidSubmit" FormName="confirm">
6+
<DataAnnotationsValidator />
7+
<MudStack Row="true" AlignItems="AlignItems.Center">
8+
<MudStaticRadioGroup @bind-Value="Input.SelectedValue" For="() => Input.SelectedValue">
9+
<MudStaticRadio T="string" Value="@("A")" Color="Color.Primary" UncheckedColor="Color.Error" Size="Size.Medium">
10+
Option A
11+
</MudStaticRadio>
12+
<MudStaticRadio T="string" Value="@("B")" Color="Color.Primary" UncheckedColor="Color.Info" Size="Size.Medium">
13+
Option B
14+
</MudStaticRadio>
15+
</MudStaticRadioGroup>
16+
<MudStaticButton FormAction="FormAction.Submit" Color="Color.Primary" Variant="Variant.Filled">Submit</MudStaticButton>
17+
</MudStack>
18+
</EditForm>
19+
20+
@code {
21+
[SupplyParameterFromForm]
22+
private InputModel Input { get; set; } = new();
23+
24+
private void OnValidSubmit() => NavigationManager.NavigateTo("");
25+
26+
private sealed class InputModel
27+
{
28+
public string? SelectedValue { get; set; }
29+
}
30+
}

‎tests/StaticInput.UnitTests.Viewer/Components/Tests/Radio/RadioDisabledTest.razor‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@using System.ComponentModel.DataAnnotations
2+
3+
@inject NavigationManager NavigationManager
4+
5+
<EditForm Model="Input" method="post" OnValidSubmit="OnValidSubmit" FormName="confirm">
6+
<DataAnnotationsValidator />
7+
<MudStack Row="true" AlignItems="AlignItems.Center">
8+
<MudStaticRadioGroup @bind-Value="Input.SelectedValue" For="() => Input.SelectedValue" Color="Color.Primary">
9+
<MudStaticRadio T="string" Value="@("A")" Size="Size.Medium">
10+
Option A
11+
</MudStaticRadio>
12+
<MudStaticRadio T="string" Value="@("B")" Size="Size.Medium" Disabled>
13+
Option B
14+
</MudStaticRadio>
15+
<MudStaticRadio T="string" Value="@("C")" Size="Size.Medium">
16+
Option C
17+
</MudStaticRadio>
18+
</MudStaticRadioGroup>
19+
<MudStaticButton FormAction="FormAction.Submit" Color="Color.Primary" Variant="Variant.Filled">Submit</MudStaticButton>
20+
</MudStack>
21+
</EditForm>
22+
23+
@code {
24+
[SupplyParameterFromForm]
25+
private InputModel Input { get; set; } = new();
26+
27+
private void OnValidSubmit() => NavigationManager.NavigateTo("");
28+
29+
private sealed class InputModel
30+
{
31+
public string? SelectedValue { get; set; }
32+
}
33+
}

‎tests/StaticInput.UnitTests.Viewer/Components/Tests/Radio/RadioGroupTest.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<MudStaticRadioGroup @bind-Value="SelectedValue">
2+
<MudStaticRadio Value="@("A")">
3+
Option A
4+
</MudStaticRadio>
5+
6+
<MudStaticRadio Value="@("B")">
7+
Option B
8+
</MudStaticRadio>
9+
</MudStaticRadioGroup>
10+
11+
@code {
12+
private string SelectedValue { get; set; } = "A";
13+
}

‎tests/StaticInput.UnitTests.Viewer/Components/Tests/Radio/RadioIconTest.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<MudStaticRadioGroup @bind-Value="SelectedValue" CheckedIcon="@Icons.Material.Filled.CheckBox" UncheckedIcon="@Icons.Material.Filled.CheckBoxOutlineBlank">
2+
<MudStaticRadio Value="@("A")">
3+
Option A
4+
</MudStaticRadio>
5+
6+
<MudStaticRadio Value="@("B")">
7+
Option B
8+
</MudStaticRadio>
9+
</MudStaticRadioGroup>
10+
11+
@code {
12+
private string SelectedValue { get; set; } = "A";
13+
}

0 commit comments

Comments
 (0)