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

Datepicker fix, NumberInput fix, ToggleGlyphButton fix

Browse Source
features/rewrite/nuberstepper
markosteger 2 years ago
parent b51801b3ba
commit 9806a21f48
10 changed files with 205 additions and 148 deletions
Show Stats Download Patch File Download Diff File

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

@ -36,20 +36,36 @@
Step4
</FormWizardStep>
</FormWizard>
<DatePicker
CloseOnDateSelect=true
@bind-SelectedDate=@date>
<DatePicker @bind-SelectedDate=@date>
</DatePicker>
<NumberStepper @bind-Value=number></NumberStepper>
<NumberStepper @bind-Value=number ></NumberStepper>
<Button OnClick="ChangeErrorText" >Error text</Button>
<NumberInput @bind-Value=@dnumber Step=0.03 DecimalPlaces=2 HelperText="Helper text" ErrorText="@ErrorText" Clearable=true></NumberInput>
<p>Selected date is @date.ToString()</p>
<p>Number is: @number.ToString()</p>
<p>DNumber is: @dnumber.ToString()</p>
@code {
DateTime date = DateTime.Today;
double dnumber = 0;
int number = 0;
string ErrorText = "";
public void ChangeErrorText()
{
if (string.IsNullOrEmpty(ErrorText))
ErrorText = "Test string: Error has ocurred!";
else
ErrorText = string.Empty;
//StateHasChanged();
}
}

12
src/Connected.Components/Components/DatePicker.razor
Unescape View File

@ -5,9 +5,9 @@
<div id="picker">
<div class="form-group">
<input type="text" value="@SelectedDate.ToString(Format)" required="required" /><span class="highlight"></span><span class="bar"></span>
<label class="label-animated">Select date</label>
<div class="input-helper-text">Some helping Text</div>
<div class="input-error-text">At least 6 characters required</div>
<label class="label-animated">@LabelText</label>
<div class="input-helper-text">@HelperText</div>
<div class="input-error-text">@ErrorText</div>
<span class="input-glyph-wraper">
<span class="input-glyph">
<span class="input-glyph button" @onclick="TogglePicker">
@ -20,7 +20,6 @@
</span>
</div>
@if (Shown)
{
<!-- DatePicker header -->
@ -96,6 +95,11 @@
<div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
}
@for (int i=0; i<offset; i++)
{
<div></div>
}
@foreach (var Date in ShowingDates)
{
<button class="item @DateChipClass(Date)" @onclick="@(()=>SetDate(Date))">

33
src/Connected.Components/Components/DatePicker.razor.cs
Unescape View File

@ -30,6 +30,15 @@ public partial class DatePicker
private List<DateTime> ShowingDates = new List<DateTime>();
[Parameter]
public string ErrorText { get; set; } = string.Empty;
[Parameter]
public string LabelText { get; set; } = "Select date";
[Parameter]
public string HelperText { get; set; } = string.Empty;
[Parameter]
public bool UseDateRange { get; set; } = false;
@ -39,6 +48,8 @@ public partial class DatePicker
[Parameter]
public string Format { get; set; } = "dd.MM.yyyy";
private int offset = 0;
private bool _readonly = false;
[Parameter]
public bool Editable
@ -84,25 +95,17 @@ public partial class DatePicker
public void SetStartStop()
{
CalendarStart = SelectedDate;
while (CalendarStart.Day != 1)
{
CalendarStart = CalendarStart.AddDays(-1);
}
CalendarStart = new DateTime(SelectedDate.Year,SelectedDate.Month,1);
CalendarEnd = CalendarStart.AddMonths(1).AddMinutes(-1);
offset=0;
DateTime temp = CalendarStart;
while (!CalendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
{
CalendarStart = CalendarStart.AddDays(-1);
offset++;
}
CalendarEnd = SelectedDate;
while (CalendarEnd.Month == SelectedDate.Month)
{
CalendarEnd = CalendarEnd.AddDays(1);
}
while (!CalendarEnd.DayOfWeek.Equals(DayOfWeek.Monday))
{
CalendarEnd = CalendarEnd.AddDays(1);
}
DateTime start = CalendarStart;
DateTime start = CalendarStart.AddDays(offset);
if (ShowingDates is null) ShowingDates = new();
ShowingDates.Clear();
while (start.CompareTo(CalendarEnd) < 0)

3
src/Connected.Components/Components/FormWizard.razor
Unescape View File

@ -1,7 +1,6 @@
<CascadingValue Value="this">
<section id="@Id" class="@ClassList" style="@StyleList">
<div class="form-outer">
<div class="form-outer ">
@ChildContent
</div>

50
src/Connected.Components/Components/NumberInput.razor
Unescape View File

@ -5,53 +5,45 @@
@typeparam NumberType
<div class="@InputFieldClassList">
<input type="text"
placeholder="@Placeholder"
step="@Step"
<input type="number"
disabled="@Disabled"
readonly="@Readonly"
required="@Required"
value="@_value"
@onkeydown=@(args => ChangeValue(args))
@onkeydown:preventDefault="@_preventDefaultAction"
@oninput=@SetValueAsync
placeholder="@Placeholder"
step="@Step"
value="@Value"
@onmousewheel=@OnMouseWheel
@onchange="@Change"
@onwheel="OnMouseWheel"
@attributes="@InputAttributes" />
@oninput=@SetNumberValueAsync
@attributes="@InputAttributes"
@onchange="@Change"
required="@Required" />
<span class="highlight"></span>
<span class="bar"></span>
@if (IsLabel)
{
<label class="label-animated">@Label</label>
}
@if (IsHelperText && !IsError)
{
<div class="input-helper-text">@HelperText</div>
}
<label class="label-animated">@Label</label>
<div class="input-helper-text">@HelperText</div>
@if (IsError)
{
<div class="input-error-text">@ErrorText</div>
}
<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 && !string.IsNullOrEmpty(Value?.ToString()))
@if (!isValueNull || IsError)
{
<span class="input-glyph-wraper">
@if (!isValueNull)
{
<span class="input-glyph button" @onclick="Clear">
<Glyph SVG="@Icons.Material.Rounded.Dangerous" />
<Glyph SVG="@Icons.Material.Rounded.Dangerous" Class="icon-root svg-icon" />
</span>
}
@if (IsError)
{
<span class="input-glyph error">
<Glyph SVG="@Icons.Material.Outlined.Error" />
<Glyph SVG="@Icons.Material.Outlined.Error" Class="icon-root svg-icon" />
</span>
}
</span>
</span>
}
</div>

213
src/Connected.Components/Components/NumberInput.razor.cs
Unescape View File

@ -42,10 +42,12 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
if (IsError)
ErrorText = string.Empty;
isValueNull = false;
}
catch
{
ErrorText = "Error with step up!";
isValueNull = true;
Value = default;
}
@ -71,11 +73,13 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
if (IsError)
ErrorText = string.Empty;
isValueNull = false;
}
catch
{
ErrorText = "Error with step down!";
Value = default;
isValueNull = true;
}
await ValueChanged.InvokeAsync(Value);
@ -104,7 +108,19 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
}
}
private string? _value;
private bool isValueNull { get; set; } = true;
private bool IsValueSet()
{
bool result = false;
if (Value is not null)
{
result= true;
}
return result;
}
//private string? _value;
/// <summary>
@ -114,28 +130,28 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
/// </summary>
[Parameter]
[EditorRequired]
public NumberType? Value
{
get
{
if (string.IsNullOrEmpty(_value))
return default;
else
{
try
{
return Helper.ConvertToType<NumberType>(_value);
} catch
{
return default;
}
}
}
set
{
_value = value?.ToString();
}
}
public NumberType? Value { get; set; } = default;
//{
// get
// {
// if (string.IsNullOrEmpty(_value))
// return default;
// else
// {
// try
// {
// return Helper.ConvertToType<NumberType>(_value);
// } catch
// {
// return default;
// }
// }
// }
// set
// {
// Value = value;
// }
//}
/// <summary>
/// Number of decimal places for Value. If set, Value is corrected when input looses focus
@ -145,33 +161,48 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
[Parameter]
public int DecimalPlaces { get; set; } = 0;
/// <summary>
/// Value change event
/// </summary>
[Parameter]
public EventCallback<NumberType> ValueChanged { get; set; }
public EventCallback<NumberType?> ValueChanged { get; set; }
//public async Task SetValueAsync(ChangeEventArgs args)
//{
// if (args.Value is not null)
// {
// var newVal = args.Value.ToString()!;
// if (!newVal.Equals("0"))
// {
// if (newVal.ToString().Contains("-"))
// newVal = "-" + newVal.ToString().Replace("-", "");
public async Task SetValueAsync(ChangeEventArgs args)
// if (newVal.ToString().ToLower().Contains("e"))
// newVal = "e" + newVal.ToString().Replace("e", "");
// }
// if (string.IsNullOrEmpty(newVal))
// await ValueChanged.InvokeAsync(default);
// if (!newVal.Equals(_value))
// await ValueChanged.InvokeAsync(Helper.ConvertToType<NumberType>(newVal));
// }
//}
public async Task SetNumberValueAsync(ChangeEventArgs args)
{
if (args.Value is not null)
{
var newVal = args.Value.ToString()!;
if (!newVal.Equals("0"))
if (!string.IsNullOrEmpty(args.Value.ToString()))
{
if (newVal.ToString().Contains("-"))
newVal = "-" + newVal.ToString().Replace("-", "");
if (newVal.ToString().ToLower().Contains("e"))
newVal = "e" + newVal.ToString().Replace("e", "");
Value = Helper.ConvertToType<NumberType>(args.Value);
isValueNull = false;
} else
{
isValueNull = true;
}
if (string.IsNullOrEmpty(newVal))
await ValueChanged.InvokeAsync(default);
if (!newVal.Equals(_value))
await ValueChanged.InvokeAsync(Helper.ConvertToType<NumberType>(newVal));
await ValueChanged.InvokeAsync(Value);
}
}
@ -179,7 +210,7 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
{
if (args.Value is not null)
Value = AdjustDecimalPlaces(Helper.ConvertToType<NumberType>(args.Value));
isValueNull = false;
await ValueChanged.InvokeAsync(Value);
}
@ -189,53 +220,53 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
[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 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;
// }
//}
/// <summary>
/// Method for adjusting decimal places provided with parameter
@ -259,8 +290,10 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
/// <returns></returns>
private async Task Clear()
{
var val = Helper.ConvertToType<NumberType>(null);
await ValueChanged.InvokeAsync(val);
//var val = Helper.ConvertToType<NumberType>(null);
Value = default(NumberType);
isValueNull = true;
await ValueChanged.InvokeAsync(Value);
}
#region Lifecycle

2
src/Connected.Components/Components/NumberStepper.razor
Unescape View File

@ -1,6 +1,6 @@
@typeparam NumberType
<div class="form-group-alt" style="width:50%">
<div class="form-group-alt">
<div class="input-group-content">
<div class="input-cta-icon" @onclick="StepDown">
<svg viewBox="0 0 24 24" class="color-dark icon-root svg-icon icon-size-md"><!--!--><g><rect fill="none" fill-rule="evenodd" height="24" width="24"></rect><rect fill-rule="evenodd" height="2" width="16" x="4" y="11"></rect></g></svg>

4
src/Connected.Components/Components/ToggleGlyphButton.razor
Unescape View File

@ -9,12 +9,12 @@
<div style="align-items:center">
@if (GlyphPosition == Position.Top)
{
<Glyph SVG="@Glyph" Color="@GlyphColor" />
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
}
@ChildContent
@if (GlyphPosition == Position.Bottom)
{
<Glyph SVG="@Glyph" Color="@GlyphColor" />
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
}
</div>
</div>

10
src/Connected.Components/Components/ToggleGlyphButton.razor.cs
Unescape View File

@ -55,6 +55,16 @@ public partial class ToggleGlyphButton: Button
[Parameter]
public Color ToggledGlyphColor { get; set; } = Color.Dark;
private string _ShownGlyph
{
get
{
if (Toggled)
return ToggledGlyph;
return Glyph;
}
}
#endregion
#region Events

2
src/Connected.Components/Connected.Components.csproj
Unescape View File

@ -28,7 +28,7 @@
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components" Version="7.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Components" Version="7.0.*" />
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.*-*" />
</ItemGroup>

Write Preview
Loading…
Cancel
Save