Merge remote-tracking branch 'remotes/origin/features/rewrite/nuberstepper' into features/rewrite/main
Matija Koželj
2 years ago
commit
bfdbc38cbb
@ -1,20 +1,71 @@
|
|||||||
@page "/"
|
@page "/"
|
||||||
@using Connected.Components;
|
|
||||||
@using Connected.Enums;
|
|
||||||
@using Connected.Models.Modal;
|
|
||||||
@using Connected.Models;
|
@using Connected.Models;
|
||||||
@using Connected.Services;
|
@using Connected.Components;
|
||||||
@using Connected.Utilities;
|
|
||||||
|
|
||||||
|
<h1 style="text-align:center;">Component Sandbox</h1>
|
||||||
|
|
||||||
|
<Grid>
|
||||||
|
@for (int i = 0; i < 5; i++)
|
||||||
|
{
|
||||||
|
int num = i;
|
||||||
|
<GridRow>
|
||||||
|
<GridRowContent>
|
||||||
|
Fixed content @num.ToString()
|
||||||
|
</GridRowContent>
|
||||||
|
<GridRowContent Collapsable=true>
|
||||||
|
Collapsable content @num.ToString()
|
||||||
|
</GridRowContent>
|
||||||
|
</GridRow>
|
||||||
|
}
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<p>Izbran datum je: @date</p>
|
||||||
|
|
||||||
<h1 style="text-align:center;">Component Example page</h1>
|
<FormWizard Id="Wizard1">
|
||||||
|
<FormWizardStep Name="Step1">
|
||||||
|
Step1
|
||||||
|
</FormWizardStep>
|
||||||
|
<FormWizardStep Name="Step2">
|
||||||
|
Step2
|
||||||
|
</FormWizardStep>
|
||||||
|
<FormWizardStep Name="Step3">
|
||||||
|
Step3
|
||||||
|
</FormWizardStep>
|
||||||
|
<FormWizardStep Name="Step4">
|
||||||
|
Step4
|
||||||
|
</FormWizardStep>
|
||||||
|
</FormWizard>
|
||||||
|
<DatePicker @bind-SelectedDate=@date>
|
||||||
|
|
||||||
|
</DatePicker>
|
||||||
|
|
||||||
<ul>
|
<NumberStepper @bind-Value=number ></NumberStepper>
|
||||||
<li><Link Class="m-1" Url="modal" Text="Modal dialog" Target="Target.Self" /></li>
|
|
||||||
<li><Link Class="m-1" Url="button" Text="Button" Target="Target.Self" /></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
<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 {
|
@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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
@typeparam NumberType
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="input-area">
|
||||||
|
<form>
|
||||||
|
<input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="@_value" @onchange="Change">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="input-cta-icon" @onclick="StepUp">
|
||||||
|
<svg viewBox="0 0 24 24" class="color-dark icon-root svg-icon icon-size-md"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
using Connected.Utilities;
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using System.Numerics;
|
||||||
|
|
||||||
|
namespace Connected.Components
|
||||||
|
{
|
||||||
|
public partial class NumberStepper<NumberType> where NumberType : INumber<NumberType>
|
||||||
|
|
||||||
|
{
|
||||||
|
[Parameter]
|
||||||
|
public string Class { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Increase 'Value' for the 'Step'
|
||||||
|
/// </summary>
|
||||||
|
/// <returns>'Value' increased for the 'Step' parameter</returns>
|
||||||
|
private async Task StepUp()
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var num = Helper.ConvertToType<double>(Value);
|
||||||
|
|
||||||
|
num += Step;
|
||||||
|
|
||||||
|
Value=Helper.ConvertToType<NumberType>(num);
|
||||||
|
|
||||||
|
}
|
||||||
|
catch
|
||||||
|
{
|
||||||
|
Value = default;
|
||||||
|
}
|
||||||
|
|
||||||
|
await ValueChanged.InvokeAsync(Value);
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Decrease 'Value' for the 'Step'
|
||||||
|
/// </summary>
|
||||||
|
/// <returns>'Value' decreased for the 'Step' parameter</returns>
|
||||||
|
private async Task StepDown()
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var num = Helper.ConvertToType<double>(Value);
|
||||||
|
|
||||||
|
num -= Step;
|
||||||
|
|
||||||
|
Value = Helper.ConvertToType<NumberType>(num);
|
||||||
|
|
||||||
|
}
|
||||||
|
catch
|
||||||
|
{
|
||||||
|
Value = default;
|
||||||
|
}
|
||||||
|
|
||||||
|
await ValueChanged.InvokeAsync(Value);
|
||||||
|
}
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public NumberType? Value
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
|
||||||
|
try
|
||||||
|
{
|
||||||
|
return Helper.ConvertToType<NumberType>(_value);
|
||||||
|
}
|
||||||
|
catch
|
||||||
|
{
|
||||||
|
return default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
set
|
||||||
|
{
|
||||||
|
_value = Helper.ConvertToType<double>(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
private double _value { get; set; } = 0;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Value change event
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback<NumberType> ValueChanged { get; set; }
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public double Step { get; set; } = 1;
|
||||||
|
|
||||||
|
public async Task Change(ChangeEventArgs args)
|
||||||
|
{
|
||||||
|
if (args.Value is not null)
|
||||||
|
Value = (Helper.ConvertToType<NumberType>(args.Value));
|
||||||
|
|
||||||
|
await ValueChanged.InvokeAsync(Value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue