Merge pull request 'Checkbox - working example -- NumberInput,TextInput - InputAttributes initialization moved to InputBase class' (#8) from features/rewrite/checkbox into features/rewrite/main

Reviewed-on: #8
features/rewrite/toggleinput
Matija Koželj 2 years ago
commit 42d67dee07

@ -6,13 +6,21 @@
<p>SelectedValue: @SelectedValue.ToString()</p> <p>SelectedValue: @SelectedValue.ToString()</p>
<SimpleSelect <RadioGroup Name="Group1">
Items="@items" <Radio Id="radio1" Label="Group 1, Radio 1"></Radio>
Label="Simple select" <Radio Id="radio2" Label="Group 1, Radio 2"></Radio>
@bind-Value=@SelectedValue <Radio Id="radio3" Label="Group 1, Radio 3"></Radio>
/> <Radio Id="radio4" Label="Group 1, Radio 4"></Radio>
<Radio Id="radio5" Label="Group 1, Radio 5" Disabled=true></Radio>
</RadioGroup>
<RadioGroup Name="Group2" Disabled=true>
<Radio Id="radio21" Label="Group 2, Radio 1"></Radio>
<Radio Id="radio22" Label="Group 2, Radio 2"></Radio>
<Radio Id="radio23" Label="Group 2, Radio 3"></Radio>
<Radio Id="radio24" Label="Group 2, Radio 4"></Radio>
<Radio Id="radio25" Label="Group 2, Radio 5"></Radio>
</RadioGroup>
@code { @code {
int SelectedValue; int SelectedValue;

@ -0,0 +1,13 @@
@using Connected.Models;
@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>

@ -0,0 +1,21 @@
using Connected.Models;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class CheckBox: InputBase
{
[Parameter]
public bool Checked { get; set; } = false;
[Parameter, EditorRequired]
public string Id { get; set; }
[Parameter]
public EventCallback<bool> CheckedChange { get; set; }
public async Task OnChange(ChangeEventArgs args)
{
Checked = (bool)args.Value;
CheckedChange.InvokeAsync(Checked);
}
}

@ -0,0 +1,9 @@
@using Connected.Models;
@inherits InputBase;
<div>
<div class="container">
@ChildContent
</div>
</div>

@ -0,0 +1,11 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class CheckBoxGroup
{
[Parameter, EditorRequired]
public string Id { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
}

@ -228,5 +228,14 @@ public partial class NumberInput<NumberType>:InputBase where NumberType : INumbe
await base.OnParametersSetAsync(); await base.OnParametersSetAsync();
} }
#endregion protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
if (Required)
{
if (!InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true);
}
}
#endregion
} }

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

@ -0,0 +1,31 @@
using Connected.Models;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Radio: InputBase
{
[CascadingParameter]
public RadioGroup? ParentRadioGroup { get; set; }
[Parameter]
public bool Checked { get; set; } = false;
[Parameter, EditorRequired]
public string Id { get; set; }
[Parameter]
public EventCallback<bool> CheckedChange { get; set; }
public async Task OnChange(ChangeEventArgs args)
{
Checked = (bool)args.Value;
CheckedChange.InvokeAsync(Checked);
}
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
if (ParentRadioGroup.Disabled) Disabled = true;
if (!InputAttributes.ContainsKey("disabled"))
InputAttributes.Add("disabled", Disabled);
}
}

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

@ -0,0 +1,12 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class RadioGroup
{
[Parameter, EditorRequired]
public string Name { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
}

@ -7,7 +7,6 @@
@if (Items is not null) @if (Items is not null)
{ {
<div class="@InputFieldClassList"> <div class="@InputFieldClassList">
<select type="textarea" style="height:0px;" @attributes=@InputAttributes> <select type="textarea" style="height:0px;" @attributes=@InputAttributes>
</select> </select>
@if (IsLabel) @if (IsLabel)
@ -42,8 +41,7 @@
<input type="text" <input type="text"
placeholder="Enter search string..." placeholder="Enter search string..."
class="dropdown-item" class="dropdown-item"
@bind-value="@SearchText" @bind-value="@SearchText" />
/>
} }
@foreach (ValueType item in Items) @foreach (ValueType item in Items)
{ {

@ -29,30 +29,13 @@ public partial class SimpleSelect<ValueType> : InputBase
} }
} }
private string DropDownClass { get; set; } = "drop-down";
bool DropDownClicked = false;
public void DropDownClassToggle()
{
DropDownClicked = !DropDownClicked;
if (DropDownClicked)
{
DropDownClass = "";
} else
{
DropDownClass = "drop-down";
}
StateHasChanged();
}
private async Task SetSelectedItem(ValueType item) private async Task SetSelectedItem(ValueType item)
{ {
//DropDownClassToggle(); //DropDownClassToggle();
await ValueChanged.InvokeAsync(item); await ValueChanged.InvokeAsync(item);
} }
private async Task FilterItems() private void FilterItems()
{ {
if (string.IsNullOrEmpty(_searchText)) if (string.IsNullOrEmpty(_searchText))
{ {
@ -76,13 +59,18 @@ public partial class SimpleSelect<ValueType> : InputBase
protected override async Task OnParametersSetAsync() protected override async Task OnParametersSetAsync()
{ {
if (base.InputAttributes is null) base.InputAttributes = new();
if (base.Required)
{
if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true);
}
OriginalItems = Items; OriginalItems = Items;
if (_searchText.Length>0) await FilterItems(); if (_searchText.Length>0) FilterItems();
await base.OnParametersSetAsync();
}
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync(); await base.OnInitializedAsync();
if (Required)
{
if (InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true);
}
} }
} }

@ -56,14 +56,13 @@ public partial class TextInput: InputBase
} }
protected override async Task OnParametersSetAsync() protected override async Task OnInitializedAsync()
{ {
if (base.InputAttributes is null) base.InputAttributes = new(); await base.OnInitializedAsync();
if (base.Required) if (Required)
{ {
if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true); if (!InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true);
} }
await base.OnInitializedAsync(); }
}
} }

@ -1,7 +1,5 @@
using Connected.Utilities; using Connected.Utilities;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using static Connected.Colors;
using static System.Net.Mime.MediaTypeNames;
namespace Connected.Models; namespace Connected.Models;
public class InputBase : ComponentBase public class InputBase : ComponentBase
@ -124,4 +122,9 @@ public class InputBase : ComponentBase
[Parameter] [Parameter]
public string Placeholder { get; set; } = string.Empty; public string Placeholder { get; set; } = string.Empty;
protected override async Task OnInitializedAsync()
{
if (InputAttributes is null) InputAttributes = new();
}
} }

Loading…
Cancel
Save