Merge pull request 'features/rewrite/numberinput' (#7) from features/rewrite/numberinput into features/rewrite/main
Reviewed-on: #7 Code style needs work, will be done with future commits to allow further work now.
This commit is contained in:
commit
d7c2b58f2e
@ -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();
|
||||
}
|
||||
|
||||
}
|
@ -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">
|
||||
|
@ -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
58
src/Connected.Components/Components/SimpleSelect.razor
Normal 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
88
src/Connected.Components/Components/SimpleSelect.razor.cs
Normal 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();
|
||||
}
|
||||
}
|
@ -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();
|
||||
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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; }
|
||||
}
|
||||
}
|
@ -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
|
||||
|
@ -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.
|
||||
|
Loading…
x
Reference in New Issue
Block a user