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

Merge pull request 'features/rewrite/numberinput' (#7) from features/rewrite/numberinput into features/rewrite/main

Browse Source 
Reviewed-on: #7

Code style needs work, will be done with future commits to allow further work now.
This commit is contained in:
Matija Koželj 2023-02-15 12:31:59 +00:00
commit d7c2b58f2e
11 changed files with 338 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/Connected.Components.Showcase.Runner/Pages/Index.razor
View File

@ -3,76 +3,39 @@
<h1 style="text-align:center;">Component Sandbox</h1>
<p>ValueDouble: @inputValueDouble.ToString()</p>
<p>ValueInt: @inputValueInt.ToString()</p>
<p>ValueText: @inputValueText</p>
<p>SimpleSelectValue: @SelectedItemValue</p>
<TextInput
Label="String"
Required="true"
ErrorText="@errorText"
@bind-Value="@inputValueText">
</TextInput>
<p>SelectedValue: @SelectedValue.ToString()</p>
<TextInput
Label="Password"
IsPassword="true"
Required="true"
ErrorText="@errorText"
@bind-Value="@inputValueText">
</TextInput>
<SimpleSelect
Items="@items"
Label="Simple select"
@bind-Value=@SelectedValue
/>
@code {
int SelectedValue;
List<SelectItem<string>> SelectFieldItems = new();
string SelectedItemValue = "";
List<int> items;
int counter { get; set; } = 0;
private string _inputText = string.Empty;
string inputValueText
private void FillItemsList()
{
get
if (items is null) items = new();
Random random = new Random(DateTime.Now.Millisecond);
for (int i = 0; i < 10; i++)
{
return _inputText;
int item = random.Next();
items.Add(item);
}
set
{
if (value.Length > 0) errorText = "Error!!!";
else errorText = "";
_inputText = value;
StateHasChanged();
}
}
double inputValueDouble = 12.756;
int inputValueInt = 12;
DateTime inputValueDate = DateTime.Now.AddDays(-10);
public void CounterIncrement()
{
counter++;
StateHasChanged();
}
string errorText = "Error!!";
protected override async Task OnInitializedAsync()
{
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 1", Value = "select item value 1", Enabled = true });
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 2", Value = "select item value 2", Enabled = true });
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 3", Value = "select item value 3", Enabled = true });
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 4", Value = "select item value 4", Enabled = true });
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 5", Value = "select item value 5", Enabled = false });
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 6", Value = "select item value 6", Enabled = true });
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 7", Value = "select item value 7", Enabled = true });
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 8", Value = "select item value 8", Enabled = false });
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 9", Value = "select item value 9", Enabled = true });
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 10", Value = "select item value 10", Enabled = true });
SelectedItemValue = SelectFieldItems[0].Value;
FillItemsList();
}
}

21
src/Connected.Components/Components/NumberInput.razor
View File

@ -5,18 +5,19 @@
@typeparam NumberType
<div class="@InputFieldClassList">
<input type="number"
<input type="text"
placeholder="@Placeholder"
step="@_step"
disabled="@Disabled"
readonly="@Readonly"
@onmousewheel="@OnMouseWheel"
@onwheel="@OnMouseWheel"
@oninput=@ChangeValueAsync
@bind-value="@Value"
@attributes="@InputAttributes">
</input>
value="@_value"
@onkeydown=@(args => ChangeValue(args))
@onkeydown:preventDefault="@_preventDefaultAction"
@oninput=@GetValueAsync
@onmousewheel=@OnMouseWheel
@onchange="@Change"
@onwheel="OnMouseWheel"
@attributes="@InputAttributes" />
<span class="highlight"></span>
<span class="bar"></span>
@ -34,6 +35,10 @@
}
<span class="input-glyph-wraper">
<span class="input-glyph">
<span style="display:inline-block">
<Glyph Width=16 Height=16 SVG="@Icons.Material.Outlined.KeyboardArrowUp" Click="StepUp" />
<Glyph Width=16 Height=16 SVG="@Icons.Material.Outlined.KeyboardArrowDown" Click="StepDown"></Glyph>
</span>
@if (Clearable && Value.ToString().Length > 0)
{
<span class="input-glyph button" @onclick="Clear">

162
src/Connected.Components/Components/NumberInput.razor.cs
View File

@ -3,11 +3,11 @@ using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using System.Numerics;
using static Connected.Colors;
namespace Connected.Components;
public partial class NumberInput<NumberType>:InputBase where NumberType : INumber<NumberType>
{
private double _step =1;
[Parameter]
public double Step {
@ -22,30 +22,56 @@ public partial class NumberInput<NumberType>:InputBase where NumberType : INumbe
}
[Parameter]
public bool DisableMouseWheel { get; set; } = false;
public bool DisableMouseWheel
{
get;
set;
} = false;
private async Task StepUp()
{
try
{
double num = (double)Convert.ChangeType(Value, typeof(double));
num += _step;
Value = AdjustDecimalPlaces((NumberType)Convert.ChangeType(num, typeof(NumberType)));
if (DecimalPlaces > 0)
num = Math.Round(num, DecimalPlaces);
Value = (NumberType)Convert.ChangeType(num, typeof(NumberType));
if (IsError) ErrorText = string.Empty;
}
catch
{
ErrorText = "Error with step up!";
Value = default(NumberType);
}
await ValueChanged.InvokeAsync(Value);
}
private async Task StepDown()
{
try
{
double num = (double)Convert.ChangeType(Value, typeof(double));
num -= _step;
Value = AdjustDecimalPlaces((NumberType)Convert.ChangeType(num, typeof(NumberType)));
if (DecimalPlaces > 0)
num = Math.Round(num, DecimalPlaces);
Value = (NumberType)Convert.ChangeType(num, typeof(NumberType));
if (IsError) ErrorText = string.Empty;
} catch
{
ErrorText = "Error with step down!";
Value = default(NumberType);
}
await ValueChanged.InvokeAsync(Value);
}
protected async Task OnMouseWheel(WheelEventArgs obj)
protected async Task OnMouseWheel(WheelEventArgs args)
{
if (DisableMouseWheel==false)
if (DisableMouseWheel == false)
{
if (!obj.ShiftKey || Disabled || Readonly)
if (args.ShiftKey || Disabled || Readonly)
return;
if (obj.DeltaY < 0)
if (args.DeltaY >= 0)
{
await StepDown();
}
@ -53,69 +79,145 @@ public partial class NumberInput<NumberType>:InputBase where NumberType : INumbe
{
await StepUp();
}
} else
{
return;
}
}
private string _value;
[Parameter]
public NumberType Value
public NumberType? Value
{
get;
set;
get
{
if (string.IsNullOrEmpty(_value)) return default(NumberType);
return (NumberType)Convert.ChangeType(_value, typeof(NumberType));
}
set
{
_value = value.ToString();
}
}
[Parameter]
public int DecimalPlaces { get; set; } =0;
[Parameter]
public EventCallback<NumberType> ValueChanged { get; set; }
public async Task ChangeValueAsync(ChangeEventArgs args)
public async Task GetValueAsync(ChangeEventArgs args)
{
if (args.Value is not null)
{
NumberType value = (NumberType)Convert.ChangeType(args.Value, typeof(NumberType));
if (value.ToString().Length <= 0)
string newVal = args.Value.ToString();
if (!newVal.Equals("0"))
{
value = (NumberType)Convert.ChangeType(0, typeof(NumberType));
if (newVal.ToString().Contains("-"))
newVal = "-" + newVal.ToString().Replace("-", "");
if (newVal.ToString().ToLower().Contains("e"))
newVal = "e" + newVal.ToString().Replace("e", "");
}
await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(AdjustDecimalPlaces(value), typeof(NumberType)));
if (string.IsNullOrEmpty(newVal))
{
await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType((NumberType)Convert.ChangeType(null, typeof(NumberType)), typeof(NumberType)));
}
else
{
if (!newVal.Equals(_value))
await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType((NumberType)Convert.ChangeType(newVal, typeof(NumberType)), typeof(NumberType)));
}
}
}
public async Task Change(ChangeEventArgs args)
{
if (args.Value is not null)
{
Value = AdjustDecimalPlaces((NumberType)Convert.ChangeType(args.Value, typeof(NumberType)));
}
ValueChanged.InvokeAsync(Value);
}
[Parameter] public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }
private bool CheckKey(string key)
{
bool result;
if (Helper.IsNumeric(key)) return true;
switch (key.ToLower())
{
case "backspace":
case "delete":
case "arrowleft":
case "arrowright":
case "-":
//case "e":
{
result = true;
break;
}
default:
{
result = false;
break;
}
}
if ((key.Equals("-") || key.Equals("-")) && _value.Contains(key)) result = false;
return result;
}
private bool _preventDefaultAction = true;
public async Task ChangeValue(KeyboardEventArgs args)
{
_preventDefaultAction= true;
if (args is not null)
{
var key = args.Key.ToString().ToLower();
if (CheckKey(key))
{
_preventDefaultAction = false;
await OnKeyDown.InvokeAsync(args);
}
} else
{
args.Key = null;
}
}
private NumberType AdjustDecimalPlaces(NumberType value)
{
NumberType result = value;
if (Helper.NumberHasDecimalPlaces(value))
{
var result = value;
if (DecimalPlaces > 0)
{
decimal rounded = (decimal)Convert.ChangeType(value, typeof(decimal));
rounded = Math.Round(rounded, DecimalPlaces);
result = (NumberType)Convert.ChangeType(rounded, typeof(NumberType));
}
double converted = Math.Round((double)Convert.ChangeType(result, typeof(double)), DecimalPlaces);
return (NumberType)Convert.ChangeType(converted, typeof(NumberType));
}
return result;
}
private async Task Clear()
{
_value = string.Empty;
await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(0, typeof(NumberType)));
}
#region Lifecycle
protected override async Task OnInitializedAsync()
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (DecimalPlaces > 0)
if (firstRender)
{
if (!DecimalPlaces.Equals(Helper.GetDecimalPlaces(Value)))
{
Value = AdjustDecimalPlaces(Value);
await ValueChanged.InvokeAsync(Value);
StateHasChanged();
}
}
}
#region Lifecycle
protected override async Task OnParametersSetAsync()
{
if (typeof(NumberType).Name.ToLower().Contains("int"))

58
src/Connected.Components/Components/SimpleSelect.razor Normal file
View File

@ -0,0 +1,58 @@
@using Connected.Models;
@typeparam ValueType
@inherits InputBase;
@if (Items is not null)
{
<div class="@InputFieldClassList">
<select type="textarea" style="height:0px;" @attributes=@InputAttributes>
</select>
@if (IsLabel)
{
<label class="label-animated">@Label</label>
}
<span class="highlight"></span>
<span class="bar">
</span>
<span class="input-glyph-wraper">
@if (Clearable)
{
<span class="input-glyph button">
<i class='bx bx-x-circle'></i>
</span>
}
<span class="input-glyph">
<i class='bx bx-caret-down'></i>
</span>
@if (IsError)
{
<span class="input-glyph error">
<i class='bx bx-error-circle'></i>
</span>
}
</span>
<div class="drop-down">
<div class="dropdown-menu p-2" aria-labelledby="dropdownMenuButton">
@if (EnableSearch)
{
<input type="text"
placeholder="Enter search string..."
class="dropdown-item"
@bind-value="@SearchText"
/>
}
@foreach (ValueType item in Items)
{
@if (item is not null)
{
<div class="dropdown-item" @onclick=@(()=>SetSelectedItem(@item))>@item.ToString()</div>
}
}
</div>
</div>
</div>
}

88
src/Connected.Components/Components/SimpleSelect.razor.cs Normal file
View File

@ -0,0 +1,88 @@
using Connected.Models;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class SimpleSelect<ValueType> : InputBase
{
[Parameter]
public ValueType Value { get; set; }
[Parameter]
public IEnumerable<ValueType> Items { get; set; }
public IEnumerable<ValueType> OriginalItems { get; set; }
[Parameter]
public bool EnableSearch { get; set; } = true;
private string _searchText { get; set; } = string.Empty;
public string SearchText
{
get
{
return _searchText;
}
set
{
_searchText = value;
FilterItems();
}
}
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)
{
//DropDownClassToggle();
await ValueChanged.InvokeAsync(item);
}
private async Task FilterItems()
{
if (string.IsNullOrEmpty(_searchText))
{
Items = OriginalItems;
}
else
{
Items = Items.Where(item => item.ToString().ToLower().Contains(_searchText.ToLower()));
}
StateHasChanged();
}
[Parameter]
public EventCallback<ValueType> ValueChanged { get; set; }
private async Task ChangeValueAsync(ChangeEventArgs args)
{
await ValueChanged.InvokeAsync((ValueType)Convert.ChangeType(args.Value, typeof(ValueType)));
}
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;
if (_searchText.Length>0) await FilterItems();
await base.OnInitializedAsync();
}
}

2
src/Connected.Components/Components/TextInput.razor.cs
View File

@ -48,13 +48,11 @@ public partial class TextInput: InputBase
private async Task ChangeValueAsync(ChangeEventArgs args)
{
await ValueChanged.InvokeAsync(args.Value.ToString());
StateHasChanged();
}
private async Task Clear()
{
await ValueChanged.InvokeAsync(string.Empty);
StateHasChanged();
}

1
src/Connected.Components/Connected.Components.csproj
View File

@ -27,6 +27,7 @@
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components" Version="7.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.*-*" />
<PackageReference Include="Nerdbank.GitVersioning" Version="3.5.119" PrivateAssets="all" Condition="!Exists('packages.config')" />
</ItemGroup>

18
src/Connected.Components/Models/InputBase.cs
View File

@ -1,5 +1,7 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using static Connected.Colors;
using static System.Net.Mime.MediaTypeNames;
namespace Connected.Models;
public class InputBase : ComponentBase
@ -71,6 +73,22 @@ public class InputBase : ComponentBase
}
}
/// <summary>
/// Fired when the text value changes.
/// </summary>
[Parameter] public EventCallback<string> TextChanged { get; set; }
public string Text { get; set; }
protected virtual async Task SetTextAsync(string text)
{
if (Text != text)
{
Text = text;
await TextChanged.InvokeAsync(text);
}
}
private string _helperText = string.Empty;
[Parameter]
public string HelperText

9
src/Connected.Components/Models/SelectItem.cs
View File

@ -1,9 +0,0 @@
namespace Connected.Models
{
public class SelectItem<ValueType>
{
public string DisplayedText { get; set; }
public ValueType Value { get; set; }
public bool Enabled { get; set; }
}
}

4
src/Connected.Components/Utilities/Helper.cs
View File

@ -135,11 +135,11 @@ public static class Helper
}
}
public static bool IsVariableNumeric(string input)
public static bool IsNumeric(string input)
{
try
{
var number = Decimal.Parse(input);
var number = Double.Parse(input);
return true;
}
catch

2
src/Connected.Components/Utilities/StyleBuilder.cs
View File

@ -10,6 +10,7 @@ namespace Connected.Utilities;
public struct StyleBuilder
{
private string stringBuffer;
private string style;
/// <summary>
/// Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
@ -35,6 +36,7 @@ public struct StyleBuilder
/// <param name="prop"></param>
/// <param name="value"></param>
public StyleBuilder(string prop, string value) => stringBuffer = $"{prop}:{value};";
public StyleBuilder(string style) : this() => this.style = style;
/// <summary>
/// Adds a conditional in-line style to the builder with space separator and closing semicolon.