Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new ToggleInput, Fixed binding on Radio and CheckBox

Browse Source
This commit is contained in:
markosteger 2023-02-17 12:38:26 +01:00
parent 31be47fb6a
commit 3a5d96fc5e
10 changed files with 113 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Connected.Components/Components/CheckBox.razor
View File

@ -2,12 +2,10 @@
@inherits InputBase;
<div class="checkbox-group">
@if (Checked)
{
<input id="@Id" name="checkbox" type="checkbox" @onchange="OnChange" @attributes=@InputAttributes checked>
} else {
<input id="@Id" name="checkbox" type="checkbox" @onchange="OnChange" @attributes=@InputAttributes>
}
<label for="@Id" class="checkbox-label">@Label</label>
</div>
<label class="checkbox-group" for="@Id">
<input class="checkbox-input" id="@Id" name="@ParentCheckBoxGroup.Name" type="checkbox" @attributes=@InputAttributes>
<div class="checkbox-fill"></div>
<label for="@Id" class="checkbox-label">@Label</label>
</label>

33
src/Connected.Components/Components/CheckBox.razor.cs
View File

@ -2,20 +2,41 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class CheckBox: InputBase
public partial class CheckBox : InputBase
{
[CascadingParameter]
public CheckBoxGroup? ParentCheckBoxGroup { get; set; }
private bool _checked { get; set; }
[Parameter]
public bool Checked { get; set; } = false;
public bool? Checked
{
get => _checked;
set => _checked = (bool)value;
}
[Parameter, EditorRequired]
public string Id { get; set; }
[Parameter]
public EventCallback<bool> CheckedChange { get; set; }
public async Task OnChange(ChangeEventArgs args)
public EventCallback<bool> CheckedChanged { get; set; }
public async Task OnChange()
{
Checked = (bool)args.Value;
CheckedChange.InvokeAsync(Checked);
Checked = !Checked;
CheckedChanged.InvokeAsync((bool)Checked);
}
protected override async Task OnParametersSetAsync()
{
await base.OnInitializedAsync();
if (ParentCheckBoxGroup.Disabled) Disabled = true;
if (!InputAttributes.ContainsKey("disabled"))
InputAttributes.Add("disabled", Disabled);
if (!InputAttributes.ContainsKey("checked"))
InputAttributes.Add("checked", Checked);
StateHasChanged();
}
}

16
src/Connected.Components/Components/CheckBoxGroup.razor
View File

@ -1,9 +1,13 @@
@using Connected.Models;
@inherits InputBase;
<div>
<div class="container">
@ChildContent
<CascadingValue Value="this">
<div>
@if (!string.IsNullOrEmpty(Name))
{
<h5>@Name</h5>
}
<div class="container">
@ChildContent
</div>
</div>
</div>
</CascadingValue>

5
src/Connected.Components/Components/CheckBoxGroup.razor.cs
View File

@ -4,7 +4,10 @@ namespace Connected.Components;
public partial class CheckBoxGroup
{
[Parameter, EditorRequired]
public string Id { get; set; }
public string Name { get; set; }
[Parameter]
public bool Disabled { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }

7
src/Connected.Components/Components/Radio.razor
View File

@ -2,7 +2,8 @@
@inherits InputBase;
<div class="radio-group">
<input id="@Id" name="@ParentRadioGroup.Name" type="radio" @onchange="OnChange" @attributes=@InputAttributes>
<label class="radio-group" for="@Id">
<input class="radio-input" id="@Id" name="@ParentRadioGroup.Name" type="radio" @onchange="OnChange" @attributes=@InputAttributes>
<div class="radio-fill"></div>
<label for="@Id" class="radio-label">@Label</label>
</div>
</label>

19
src/Connected.Components/Components/Radio.razor.cs
View File

@ -2,23 +2,30 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Radio: InputBase
public partial class Radio : InputBase
{
[CascadingParameter]
public RadioGroup? ParentRadioGroup { get; set; }
private bool _checked { get; set; }
[Parameter]
public bool Checked { get; set; } = false;
public bool? Checked
{
get => _checked;
set => _checked = (bool)value;
}
[Parameter, EditorRequired]
public string Id { get; set; }
[Parameter]
public EventCallback<bool> CheckedChange { get; set; }
public async Task OnChange(ChangeEventArgs args)
public EventCallback<bool> CheckedChanged { get; set; }
public async Task OnChange()
{
Checked = (bool)args.Value;
CheckedChange.InvokeAsync(Checked);
Checked = !Checked;
CheckedChanged.InvokeAsync((bool)Checked);
}
protected override async Task OnInitializedAsync()

2
src/Connected.Components/Components/RadioGroup.razor
View File

@ -1,7 +1,5 @@
@using Connected.Models;
@inherits InputBase;
<CascadingValue Value="this">
<div>
@if (!string.IsNullOrEmpty(Name))

5
src/Connected.Components/Components/RadioGroup.razor.cs
View File

@ -6,7 +6,10 @@ public partial class RadioGroup
[Parameter, EditorRequired]
public string Name { get; set; }
[Parameter]
public bool Disabled { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
}
}

17
src/Connected.Components/Components/ToggleInput.razor Normal file
View File

@ -0,0 +1,17 @@
@using Connected.Models;
@inherits InputBase;
<label class="toggle-group" for="@Id">
<input class="toggle-input"
type="checkbox"
name="toggle"
disabled="@Disabled"
id="@Id"
checked="@Checked"
@onchange="@OnChange"
@attributes=@InputAttributes>
<div class="toggle-fill"></div>
<label for="@Id" class="toggle-label">@Label</label>
</label>

27
src/Connected.Components/Components/ToggleInput.razor.cs Normal file
View File

@ -0,0 +1,27 @@
using Connected.Models;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class ToggleInput: InputBase
{
private bool _checked { get; set; }
[Parameter]
public bool? Checked
{
get => _checked;
set => _checked= (bool)value;
}
[Parameter, EditorRequired]
public string Id { get; set; }
[Parameter]
public EventCallback<bool> CheckedChanged { get; set; }
public async Task OnChange()
{
Checked = !Checked;
CheckedChanged.InvokeAsync((bool)Checked);
}
}