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

Datepicker fix, NumberInput fix, ToggleGlyphButton fix

Browse Source
This commit is contained in:
markosteger 2023-03-16 14:09:47 +01:00
parent b51801b3ba
commit 9806a21f48
10 changed files with 201 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,20 +36,36 @@
Step4 Step4
</FormWizardStep> </FormWizardStep>
</FormWizard> </FormWizard>
<DatePicker <DatePicker @bind-SelectedDate=@date>
CloseOnDateSelect=true
@bind-SelectedDate=@date>
</DatePicker> </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>Selected date is @date.ToString()</p>
<p>Number is: @number.ToString()</p> <p>Number is: @number.ToString()</p>
<p>DNumber is: @dnumber.ToString()</p>
@code { @code {
DateTime date = DateTime.Today; DateTime date = DateTime.Today;
double dnumber = 0;
int number = 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
View File

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

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

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

1
src/Connected.Components/Components/FormWizard.razor
View File

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

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

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

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

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

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

@ -1,6 +1,6 @@
@typeparam NumberType @typeparam NumberType
<div class="form-group-alt" style="width:50%"> <div class="form-group-alt">
<div class="input-group-content"> <div class="input-group-content">
<div class="input-cta-icon" @onclick="StepDown"> <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> <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
View File

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

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

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

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

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