ModalDialog - fixed ESC key press event
This commit is contained in:
parent
a1e5043db8
commit
2a8aac91df
@ -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>
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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; }
|
||||||
|
@ -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
28
src/Connected.Components/Services/ModalDialogService.cs
Normal 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();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
@ -1,5 +1,4 @@
|
|||||||
using Connected.Services.Modal;
|
using Microsoft.Extensions.DependencyInjection;
|
||||||
using Microsoft.Extensions.DependencyInjection;
|
|
||||||
|
|
||||||
namespace Connected.Services;
|
namespace Connected.Services;
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user