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

ModalDialog - fixed ESC key press event

Browse Source
This commit is contained in:
markosteger 2023-02-27 13:12:06 +01:00
parent a1e5043db8
commit 2a8aac91df
6 changed files with 62 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Connected.Components/Components/ModalDialog.razor
View File

@ -1,12 +1,12 @@
@using Connected.Models.Modal; @using Connected.Models.Modal;
@if (IsVisible) @if (IsVisible)
{ {
<div class="modal fade show" tabindex="-1" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))"> <div class="modal fade show" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))" tabindex="-1" @ref="@root">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" @ref="@root" > <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
<div class="modal-content" @onclick="PreventClose"> <div class="modal-content" @onclick="PreventClose">
@if (!ModalOptions.NoHeader) @if (!ModalOptions.NoHeader)
{ {
<div class="modal-header" > <div class="modal-header">
<h3 class="modal-title">@Title</h3> <h3 class="modal-title">@Title</h3>
</div> </div>
} }
@ -14,7 +14,7 @@
@Content @Content
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
@foreach(ModalButton button in buttons) @foreach (ModalButton button in buttons)
{ {
<button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button> <button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
} }

23
src/Connected.Components/Components/ModalDialog.razor.cs
View File

@ -1,5 +1,5 @@
using Connected.Models.Modal; using Connected.Models.Modal;
using Connected.Services.Modal; using Connected.Services;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.Web;
@ -19,7 +19,6 @@ public partial class ModalDialog : IDisposable
protected ModalOptions? ModalOptions { get; set; } protected ModalOptions? ModalOptions { get; set; }
protected override void OnInitialized() protected override void OnInitialized()
{ {
ModalService.OnShow += ShowModal; ModalService.OnShow += ShowModal;
@ -51,15 +50,23 @@ public partial class ModalDialog : IDisposable
{ {
if (button.CloseDialogOnClick) if (button.CloseDialogOnClick)
{ {
IsVisible = false; CloseModal();
Title = "";
Content = null;
} }
button.OnClickEvent.Delegate.DynamicInvoke(button.OnClickEvent.args); button.OnClickEvent.Delegate.DynamicInvoke(button.OnClickEvent.args);
} }
StateHasChanged(); StateHasChanged();
} }
public void CloseModal()
{
IsVisible = false;
Title = "";
Content = null;
StateHasChanged();
}
public void Dispose() public void Dispose()
{ {
if (ModalService is not null) if (ModalService is not null)
@ -71,12 +78,12 @@ public partial class ModalDialog : IDisposable
public void CheckEscape(KeyboardEventArgs args) public void CheckEscape(KeyboardEventArgs args)
{ {
if (ModalOptions.CloseOnEscKey) if (!ModalOptions.DisableEscKey)
{ {
var key = args.Key.ToLower(); var key = args.Key.ToLower();
if (key.Equals("escape")) if (key.Equals("escape"))
{ {
CloseModal(null); CloseModal();
} }
} }
} }
@ -87,7 +94,7 @@ public partial class ModalDialog : IDisposable
{ {
if (OverlayClickToClose) if (OverlayClickToClose)
{ {
CloseModal(null); CloseModal();
} }
} }
OverlayClickToClose = true; OverlayClickToClose = true;

3
src/Connected.Components/Models/Modal/ModalButton.cs
View File

@ -1,10 +1,9 @@
using Connected.Enums; using Connected.Enums;
using Connected.Services.Modal; using Connected.Services;
namespace Connected.Models.Modal; namespace Connected.Models.Modal;
public class ModalButton public class ModalButton
{ {
ModalDialogService _dialogService;
public Event OnClickEvent { get; set; } public Event OnClickEvent { get; set; }
public ModalButtonType ModalButtonType { get; set; } = ModalButtonType.RegularButton; public ModalButtonType ModalButtonType { get; set; } = ModalButtonType.RegularButton;
public string ButtonText { get; set; } public string ButtonText { get; set; }

2
src/Connected.Components/Models/Modal/ModalOptions.cs
View File

@ -1,7 +1,7 @@
namespace Connected.Models.Modal; namespace Connected.Models.Modal;
public class ModalOptions public class ModalOptions
{ {
public bool CloseOnEscKey { get; set; } = true; public bool DisableEscKey { get; set; } = false;
public bool DisableBackdropClick { get; set; } = false; public bool DisableBackdropClick { get; set; } = false;
public bool NoHeader { get; set; } = false; public bool NoHeader { get; set; } = false;

28
src/Connected.Components/Services/ModalDialogService.cs Normal file
View File

@ -0,0 +1,28 @@
using Connected.Components;
using Connected.Models.Modal;
using Microsoft.AspNetCore.Components;
namespace Connected.Services;
public class ModalDialogService
{
public event Action<string, RenderFragment, List<ModalButton>, ModalOptions> OnShow;
public event Action OnClose;
public void ShowDialog(string title, RenderFragment content, List<ModalButton> buttons, ModalOptions options)
{
OnShow?.Invoke(title, content, buttons, options);
}
public void ShowDialog(string title, MarkupString contentMarkup, List<ModalButton> buttons, ModalOptions options)
{
var content = new RenderFragment(x => x.AddContent(1, contentMarkup));
OnShow?.Invoke(title, content, buttons, options);
}
public void Close()
{
OnClose?.Invoke();
}
}

3
src/Connected.Components/Services/ServiceCollectionExtensions.cs
View File

@ -1,5 +1,4 @@
using Connected.Services.Modal; using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.DependencyInjection;
namespace Connected.Services; namespace Connected.Services;