From 3a5d96fc5ef6738d2cf5297f7579c153c8586f44 Mon Sep 17 00:00:00 2001
From: markosteger <marko.steger@gmail.com>
Date: Fri, 17 Feb 2023 12:38:26 +0100
Subject: [PATCH] new ToggleInput, Fixed binding on Radio and CheckBox

---
 .../Components/CheckBox.razor                 | 16 ++++-----
 .../Components/CheckBox.razor.cs              | 33 +++++++++++++++----
 .../Components/CheckBoxGroup.razor            | 16 +++++----
 .../Components/CheckBoxGroup.razor.cs         |  5 ++-
 .../Components/Radio.razor                    |  7 ++--
 .../Components/Radio.razor.cs                 | 19 +++++++----
 .../Components/RadioGroup.razor               |  2 --
 .../Components/RadioGroup.razor.cs            |  5 ++-
 .../Components/ToggleInput.razor              | 17 ++++++++++
 .../Components/ToggleInput.razor.cs           | 27 +++++++++++++++
 10 files changed, 113 insertions(+), 34 deletions(-)
 create mode 100644 src/Connected.Components/Components/ToggleInput.razor
 create mode 100644 src/Connected.Components/Components/ToggleInput.razor.cs

diff --git a/src/Connected.Components/Components/CheckBox.razor b/src/Connected.Components/Components/CheckBox.razor
index 899ccaf..5afe120 100644
--- a/src/Connected.Components/Components/CheckBox.razor
+++ b/src/Connected.Components/Components/CheckBox.razor
@@ -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>
\ No newline at end of file
+<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>
+
+
diff --git a/src/Connected.Components/Components/CheckBox.razor.cs b/src/Connected.Components/Components/CheckBox.razor.cs
index 12bd057..a9f51d3 100644
--- a/src/Connected.Components/Components/CheckBox.razor.cs
+++ b/src/Connected.Components/Components/CheckBox.razor.cs
@@ -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 = !Checked;
+		CheckedChanged.InvokeAsync((bool)Checked);
+	}
+
+	protected override async Task OnParametersSetAsync()
 	{
-		Checked = (bool)args.Value;
-		CheckedChange.InvokeAsync(Checked);
+		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();
 	}
 
 }
diff --git a/src/Connected.Components/Components/CheckBoxGroup.razor b/src/Connected.Components/Components/CheckBoxGroup.razor
index 68efc7c..79e7232 100644
--- a/src/Connected.Components/Components/CheckBoxGroup.razor
+++ b/src/Connected.Components/Components/CheckBoxGroup.razor
@@ -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>
\ No newline at end of file
+</CascadingValue>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/CheckBoxGroup.razor.cs b/src/Connected.Components/Components/CheckBoxGroup.razor.cs
index d1512cb..289ef29 100644
--- a/src/Connected.Components/Components/CheckBoxGroup.razor.cs
+++ b/src/Connected.Components/Components/CheckBoxGroup.razor.cs
@@ -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; }
diff --git a/src/Connected.Components/Components/Radio.razor b/src/Connected.Components/Components/Radio.razor
index 18e385e..9c307c6 100644
--- a/src/Connected.Components/Components/Radio.razor
+++ b/src/Connected.Components/Components/Radio.razor
@@ -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>
\ No newline at end of file
+</label>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Radio.razor.cs b/src/Connected.Components/Components/Radio.razor.cs
index a86a940..0d5bfda 100644
--- a/src/Connected.Components/Components/Radio.razor.cs
+++ b/src/Connected.Components/Components/Radio.razor.cs
@@ -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()
diff --git a/src/Connected.Components/Components/RadioGroup.razor b/src/Connected.Components/Components/RadioGroup.razor
index b842c61..a2e30aa 100644
--- a/src/Connected.Components/Components/RadioGroup.razor
+++ b/src/Connected.Components/Components/RadioGroup.razor
@@ -1,7 +1,5 @@
 @using Connected.Models;
 
-@inherits InputBase;
-
 <CascadingValue Value="this">
     <div>
         @if (!string.IsNullOrEmpty(Name))
diff --git a/src/Connected.Components/Components/RadioGroup.razor.cs b/src/Connected.Components/Components/RadioGroup.razor.cs
index 7b07360..2ec0b4c 100644
--- a/src/Connected.Components/Components/RadioGroup.razor.cs
+++ b/src/Connected.Components/Components/RadioGroup.razor.cs
@@ -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; }
 
-}
+}
\ No newline at end of file
diff --git a/src/Connected.Components/Components/ToggleInput.razor b/src/Connected.Components/Components/ToggleInput.razor
new file mode 100644
index 0000000..9013f65
--- /dev/null
+++ b/src/Connected.Components/Components/ToggleInput.razor
@@ -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>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/ToggleInput.razor.cs b/src/Connected.Components/Components/ToggleInput.razor.cs
new file mode 100644
index 0000000..6c4f60d
--- /dev/null
+++ b/src/Connected.Components/Components/ToggleInput.razor.cs
@@ -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);
+	}
+}