Skip to content

Commit 2c46f28

Browse files
Anu6isAnu6is
committed
update for Edit Form compatability
1 parent 8e30b8e commit 2c46f28

2 files changed

Lines changed: 61 additions & 40 deletions

File tree

‎src/Components/MudStaticRadio.razor‎

Lines changed: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,15 @@
55

66
<MudInputControl Class="@Classname" Style="@Style" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
77
<InputContent>
8-
<label class="@LabelClassname" style="@Style" id="@_elementId" @onclick:stopPropagation="@StopClickPropagation">
8+
<label class="@LabelClassname" style="@Style" id="@($"static-radio-container-{_elementId}")" @onclick:stopPropagation="@StopClickPropagation">
99
<span tabindex="0" class="@IconClassname">
1010
<input id="@($"static-radio-{_elementId}")" tabindex="-1" @attributes="UserAttributes" type="radio" role="radio"
11-
class="mud-radio-input" checked="@IsChecked" name="@ParentGroup?.Name" disabled="@GetDisabledState()" value="@Value"
12-
aria-checked="@(IsChecked.ToString().ToLower())" aria-disabled="@(GetDisabledState().ToString().ToLower())" @onclick:preventDefault="@GetReadOnlyState()" />
13-
<MudIcon id="@($"radio-svg-{_elementId}")" Disabled="@Disabled" Icon="@(IsChecked ? CheckedIcon : UncheckedIcon)" Color="HasErrors ? Color.Error : Color.Inherit" Size="@Size" />
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="@CheckedIcon" Color="HasErrors ? Color.Error : this.Color" Size="@Size" Disabled="@Disabled"
14+
id="@($"radio-checked-icon-{_elementId}")" style="@($"display: {_checkedStyle}")" />
15+
<MudIcon Icon="@UncheckedIcon" Color="HasErrors ? Color.Error : this.UncheckedColor ?? Color.Inherit" Size="@Size" Disabled="@Disabled"
16+
id="@($"radio-unchecked-icon-{_elementId}")" style="@($"display: {_uncheckedStyle}")" />
1417
</span>
1518
@if (!string.IsNullOrEmpty(Label))
1619
{
@@ -30,53 +33,64 @@
3033
[CascadingParameter]
3134
private MudStaticRadioGroup<T>? ParentGroup { get; set; }
3235

33-
private bool IsChecked => ParentGroup is not null && EqualityComparer<T>.Default.Equals(ParentGroup.Value, Value);
36+
[Parameter]
37+
public Expression<Func<T?>>? ValueExpression { get; set; }
3438

39+
private bool _isChecked;
3540
private readonly string _elementId = Guid.NewGuid().ToString()[..8];
41+
private string _checkedStyle => _isChecked ? "block" : "none";
42+
private string _uncheckedStyle => _isChecked ? "none" : "block";
3643

3744
protected override void OnInitialized()
3845
{
3946
if (ParentGroup is null)
40-
{
4147
throw new InvalidOperationException($"{nameof(MudStaticRadio<T>)} must be used inside a {nameof(MudStaticRadioGroup<T>)}");
42-
}
48+
49+
if (ParentGroup!.SelectedValue is not null)
50+
_isChecked = ParentGroup!.SelectedValue!.Equals(Value);
4351

4452
base.OnInitialized();
4553
}
4654

4755
protected override void OnParametersSet()
4856
{
49-
if (UserAttributes is null)
50-
{
51-
UserAttributes = new Dictionary<string, object?>();
52-
}
53-
5457
UserAttributes["data-static-component"] = true;
5558

5659
base.OnParametersSet();
5760
}
5861
}
5962

6063
<script>
61-
(function() {
62-
const radio = document.getElementById('static-radio-@_elementId');
63-
const svg = document.getElementById('radio-svg-@_elementId');
64-
65-
const checkedIcon = '@(CheckedIcon)';
66-
const uncheckedIcon = '@(UncheckedIcon)';
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;
6769
68-
if (radio && svg) {
69-
const handleChange = () => {
70-
svg.innerHTML = radio.checked ? checkedIcon : uncheckedIcon;
71-
};
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+
}
7277
73-
radio.addEventListener('change', handleChange);
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}`);
7481
75-
document.addEventListener('change', (e) => {
76-
if (e.target.type === 'radio' && e.target.name === radio.name && e.target !== radio) {
77-
handleChange();
78-
}
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+
});
7993
});
80-
}
81-
})();
94+
});
95+
});
8296
</script>

‎src/Components/MudStaticRadioGroup.razor‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@
1010
<CascadingValue TValue="IForm" Value="null">
1111
<CascadingValue TValue="bool" Name="ParentDisabled" Value="@GetDisabledState()">
1212
<CascadingValue TValue="bool" Name="ParentReadOnly" Value="@GetReadOnlyState()">
13-
<div role="radiogroup" @attributes="UserAttributes" class="@GetInputClass()" style="@InputStyle" required="@Required"
14-
aria-required="@Required.ToString().ToLowerInvariant()">
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+
1517
@ChildContent
1618
</div>
1719
</CascadingValue>
@@ -28,26 +30,31 @@
2830
[CascadingParameter(Name = "ParentReadOnly")]
2931
private bool ParentIsReadOnly { get; set; }
3032

31-
[Parameter]
33+
[Parameter]
3234
public Expression<Func<T?>>? ValueExpression { get; set; }
3335

34-
public string GroupName { get; private set; } = Guid.NewGuid().ToString();
36+
public string GroupName { get; set; } = string.Empty;
37+
public T? SelectedValue { get; set; }
38+
39+
private bool _valueSelected;
40+
private readonly string _elementId = Guid.NewGuid().ToString()[..8];
3541

3642
protected override void OnInitialized()
3743
{
38-
if (For is not null)
44+
if (ValueExpression is not null)
3945
{
40-
string expression = For.ToString();
41-
int index = expression.LastIndexOf(").", StringComparison.Ordinal);
46+
var expression = ValueExpression.ToString();
47+
var index = expression.LastIndexOf(").", StringComparison.Ordinal);
4248

4349
if (index > 0)
4450
{
4551
GroupName = expression[(index + 2)..];
4652
}
47-
}
48-
else
49-
{
50-
GroupName = Guid.NewGuid().ToString();
53+
54+
var compiledExpression = ValueExpression!.Compile();
55+
56+
SelectedValue = compiledExpression();
57+
_valueSelected = SelectedValue is not null;
5158
}
5259

5360
base.OnInitialized();

0 commit comments

Comments
 (0)