Skip to content

CodeInput: Changes #402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 18, 2024
Merged

CodeInput: Changes #402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions ...eam.MudBlazor.Extensions.Docs/Pages/Components/CodeInput/Examples/CodeInputExample1.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

<MudGrid>
<MudItem xs="12" sm="8" Class="d-flex flex-column gap-8 align-center justify-center" Style="height: 500px">
<MudCodeInput @ref="_textFieldGroup" T="string" @bind-Value="@_value" Count="@_count" Spacing="_spacing" Variant="@_variant" Margin="_margin"
Disabled="@_disabled" ReadOnly="@_readonly" />
<MudCodeInput T="string" @bind-Value="@_value" Count="@_count" Spacing="_spacing" Variant="@_variant" Margin="_margin"
Disabled="@_disabled" ReadOnly="@_readonly" />
</MudItem>

<MudItem xs="12" sm="4">
Expand All @@ -30,8 +30,7 @@
</MudItem>
</MudGrid>

@code{
MudCodeInput<string>? _textFieldGroup;
@code {
string? _value;
int _count = 4;
int _spacing = 2;
Expand Down
22 changes: 13 additions & 9 deletions CodeBeam.MudBlazor.Extensions/Components/CodeInput/MudCodeInput.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,19 @@
@typeparam T
@inherits MudFormComponent<T, string>

<div class="@Classname" style="@Style">
@for (int i = 0; i < Count; i++)
{
int a = i;
<MudTextFieldExtended @ref="_elementReferences[a]" T="T" Class="@InputClassname" Style="@(Margin == Margin.Dense ? "width: 32px" : "width: 42px")" MaxLength="1"
@onkeydown="HandleKeyDown" @onfocus="@(() => CheckFocus(a))" @onblur="SetValue" OnInput="OnInputHandler"
Variant="@Variant" Margin="@Margin" Disabled="Disabled" ReadOnly="ReadOnly" Immediate="true" InputType="InputType" />
}
</div>
<MudInputControl Class="@Class" Style="@Style" Error="@Error" ErrorText="@ErrorText" Required="false">
<InputContent>
<div class="@Classname" style="@InnerStyle">
@for (int i = 0; i < Count; i++)
{
int a = i;
<MudTextFieldExtended @ref="_elementReferences[a]" T="T" Class="@InputClassname" Style="@(Margin == Margin.Dense ? "width: 32px" : "width: 42px")" MaxLength="1"
@onkeydown="HandleKeyDown" @onfocus="@(() => CheckFocus(a))" @onblur="SetValue" OnInput="OnInputHandler" Error="@Error"
Variant="@Variant" Margin="@Margin" Disabled="Disabled" ReadOnly="ReadOnly" Immediate="true" InputType="InputType" />
}
</div>
</InputContent>
</MudInputControl>

<style>
.justify-text-center input {
Expand Down
60 changes: 50 additions & 10 deletions CodeBeam.MudBlazor.Extensions/Components/CodeInput/MudCodeInput.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using MudBlazor;
using MudBlazor.Interfaces;
using MudBlazor.State;
using MudBlazor.Utilities;

Expand Down Expand Up @@ -53,7 +54,8 @@ private async Task OnCountChanged()
/// </summary>
protected string? Classname =>
new CssBuilder($"d-flex gap-{Spacing}")
.AddClass(Class)
.AddClass("mud-code-input-inner")
.AddClass(InnerClass)
.Build();

/// <summary>
Expand All @@ -74,6 +76,20 @@ private async Task OnCountChanged()
[Category(CategoryTypes.FormComponent.Behavior)]
public string? InputClass { get; set; }

/// <summary>
/// The CSS classes for input container div, seperated by space.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public string? InnerClass { get; set; }

/// <summary>
/// The CSS styles for input container div.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public string? InnerStyle { get; set; }

/// <summary>
/// Type of the input element. It should be a valid HTML5 input type.
/// </summary>
Expand Down Expand Up @@ -137,8 +153,15 @@ private async Task OnCountChanged()
[Category(CategoryTypes.FormComponent.Behavior)]
public Margin Margin { get; set; }

bool _skipInputEvent = false;
bool _skipRefocus = false;
private async Task OnInputHandler()
{
if (_skipInputEvent)
{
_skipInputEvent = false;
return;
}
await FocusNext();
}

Expand All @@ -154,32 +177,49 @@ protected async Task HandleKeyDown(KeyboardEventArgs arg)
return;
}

if (RuntimeLocation.IsClientSide)
{
await Task.Delay(10);
}

if (arg.Key == "Backspace" || arg.Key == "ArrowLeft")
if (arg.Key == "Backspace" || arg.Key == "ArrowLeft" || arg.Key == "Delete")
{
_skipInputEvent = true;
_skipRefocus = true;
if (arg.Key == "Delete")
{
await _elementReferences[_lastFocusedIndex].Clear();
_skipInputEvent = false;
}
if (RuntimeLocation.IsClientSide)
{
await Task.Delay(10);
}
await FocusPrevious();
return;
}

if (arg.Key == "ArrowRight")
{
if (RuntimeLocation.IsClientSide)
{
await Task.Delay(10);
}
await FocusNext();
}

}

private int _lastFocusedIndex = 0;
/// <summary>
///
/// </summary>
/// <param name="count"></param>
protected void CheckFocus(int count)
protected async Task CheckFocus(int count)
{
_lastFocusedIndex = count;
if (_skipRefocus == true)
{
_skipRefocus = false;
return;
}
string str = Converter.Set(_theValue.Value) ?? string.Empty;
await _elementReferences[str.Length].FocusAsync();
}

/// <summary>
Expand Down Expand Up @@ -236,7 +276,7 @@ private void SyncReferences()
/// <returns></returns>
public async Task SetValue()
{
string result = "";
string result = "";
for (int i = 0; i < _count.Value; i++)
{
var val = _elementReferences[i].Value?.ToString();
Expand Down