ModalDialog
This commit is contained in:
parent
69413494c5
commit
4f635b573c
@ -1,8 +1,8 @@
|
|||||||
@if (IsVisible)
|
@if (IsVisible)
|
||||||
{
|
{
|
||||||
<div class="modal fade show" tabindex="-1">
|
<div class="modal fade show" tabindex="-1" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))">
|
||||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" >
|
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" >
|
||||||
<div class="modal-content">
|
<div class="modal-content" @onclick="PreventClose">
|
||||||
<div class="modal-header" >
|
<div class="modal-header" >
|
||||||
<h3 class="modal-title">@Title</h3>
|
<h3 class="modal-title">@Title</h3>
|
||||||
</div>
|
</div>
|
||||||
@ -10,7 +10,7 @@
|
|||||||
@Content
|
@Content
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-secondary" @onclick="@(()=>CloseModal())">@CloseButtonText</button>
|
<button type="button" class="btn btn-secondary" @onclick="@(()=>CloseModal())">@CancelButtonText</button>
|
||||||
<button type="button" class="btn btn-core" @onclick="@(()=>CloseModal(true))">@OKButtonText</button>
|
<button type="button" class="btn btn-core" @onclick="@(()=>CloseModal(true))">@OKButtonText</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,16 +1,19 @@
|
|||||||
using Connected.Services.Modal;
|
using Connected.Services.Modal;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class ModalDialog: IDisposable
|
public partial class ModalDialog: IDisposable
|
||||||
{
|
{
|
||||||
[Inject] ModalDialogService? ModalService { get; set; }
|
[Inject] ModalDialogService? ModalService { get; set; }
|
||||||
|
|
||||||
|
protected ElementReference root;
|
||||||
protected bool IsVisible { get; set; }
|
protected bool IsVisible { get; set; }
|
||||||
protected string? Title { get; set; }
|
protected string? Title { get; set; }
|
||||||
protected RenderFragment? Content { get; set; }
|
protected RenderFragment? Content { get; set; }
|
||||||
|
|
||||||
protected EventCallback OnConfirm { get; set; }
|
protected bool OverlayClickToClose { get; set; } = true;
|
||||||
|
protected Event OnConfirm { get; set; }
|
||||||
|
|
||||||
protected override void OnInitialized()
|
protected override void OnInitialized()
|
||||||
{
|
{
|
||||||
@ -18,7 +21,8 @@ public partial class ModalDialog: IDisposable
|
|||||||
ModalService.OnClose += CloseModal;
|
ModalService.OnClose += CloseModal;
|
||||||
}
|
}
|
||||||
|
|
||||||
public void ShowModal(string title, RenderFragment content, EventCallback o, string CancelButtonText = "Cancel", string OKButtonText = "OK")
|
|
||||||
|
public void ShowModal(string title, RenderFragment content, Event onConfirm, string CancelButtonText = "Cancel", string OKButtonText = "OK")
|
||||||
{
|
{
|
||||||
Title = title;
|
Title = title;
|
||||||
Content = content;
|
Content = content;
|
||||||
@ -27,21 +31,7 @@ public partial class ModalDialog: IDisposable
|
|||||||
this.OKButtonText = OKButtonText;
|
this.OKButtonText = OKButtonText;
|
||||||
this.CancelButtonText = CancelButtonText;
|
this.CancelButtonText = CancelButtonText;
|
||||||
|
|
||||||
OnConfirm = o;
|
OnConfirm = onConfirm;
|
||||||
|
|
||||||
StateHasChanged();
|
|
||||||
}
|
|
||||||
|
|
||||||
public void ShowModal(string title, MarkupString content, EventCallback o, string CancelButtonText = "Cancel", string OKButtonText = "OK")
|
|
||||||
{
|
|
||||||
Title = title;
|
|
||||||
Content = new RenderFragment(x => x.AddContent(1, content));
|
|
||||||
IsVisible = true;
|
|
||||||
|
|
||||||
this.OKButtonText = OKButtonText;
|
|
||||||
this.CancelButtonText = CancelButtonText;
|
|
||||||
|
|
||||||
OnConfirm = o;
|
|
||||||
|
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
@ -52,7 +42,7 @@ public partial class ModalDialog: IDisposable
|
|||||||
Title = "";
|
Title = "";
|
||||||
Content = null;
|
Content = null;
|
||||||
if (OkClicked)
|
if (OkClicked)
|
||||||
OnConfirm.InvokeAsync();
|
OnConfirm.Delegate.DynamicInvoke(OnConfirm.args);
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,13 +55,31 @@ public partial class ModalDialog: IDisposable
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[Parameter]
|
|
||||||
public EventCallback OnOkClick { get; set; }
|
|
||||||
|
|
||||||
[Parameter]
|
|
||||||
public string OKButtonText { get; set; } ="OK";
|
public string OKButtonText { get; set; } ="OK";
|
||||||
|
|
||||||
[Parameter]
|
|
||||||
public string CancelButtonText { get; set; } = "Cancel";
|
public string CancelButtonText { get; set; } = "Cancel";
|
||||||
|
|
||||||
|
public void CheckEscape(KeyboardEventArgs args)
|
||||||
|
{
|
||||||
|
var key = args.Key.ToLower();
|
||||||
|
if (key.Equals("escape"))
|
||||||
|
{
|
||||||
|
CloseModal();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public void CloseIfEnabled(MouseEventArgs args)
|
||||||
|
{
|
||||||
|
if (OverlayClickToClose)
|
||||||
|
{
|
||||||
|
CloseModal();
|
||||||
|
}
|
||||||
|
OverlayClickToClose = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void PreventClose(MouseEventArgs args)
|
||||||
|
{
|
||||||
|
OverlayClickToClose = false;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
@ -3,15 +3,15 @@
|
|||||||
namespace Connected.Services.Modal;
|
namespace Connected.Services.Modal;
|
||||||
public class ModalDialogService
|
public class ModalDialogService
|
||||||
{
|
{
|
||||||
public event Action<string, RenderFragment, EventCallback, string, string> OnShow;
|
public event Action<string, RenderFragment, Event, string, string> OnShow;
|
||||||
public event Action<bool> OnClose;
|
public event Action<bool> OnClose;
|
||||||
|
|
||||||
public void ShowDialog(string title, RenderFragment content, EventCallback OnConfirm, string CancelButtonText="Cancel", string OKButtonText="OK")
|
public void ShowDialog(string title, RenderFragment content, Event OnConfirm, string CancelButtonText="Cancel", string OKButtonText="OK")
|
||||||
{
|
{
|
||||||
OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText);
|
OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText);
|
||||||
}
|
}
|
||||||
|
|
||||||
public void ShowDialog(string title, MarkupString contentMarkup, EventCallback OnConfirm, string CancelButtonText = "Cancel", string OKButtonText = "OK")
|
public void ShowDialog(string title, MarkupString contentMarkup, Event OnConfirm, string CancelButtonText = "Cancel", string OKButtonText = "OK")
|
||||||
{
|
{
|
||||||
var content = new RenderFragment(x => x.AddContent(1, contentMarkup));
|
var content = new RenderFragment(x => x.AddContent(1, contentMarkup));
|
||||||
OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText);
|
OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText);
|
||||||
|
12
src/Connected.Components/Services/Modal/ModalEvent.cs
Normal file
12
src/Connected.Components/Services/Modal/ModalEvent.cs
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
namespace Connected.Services.Modal;
|
||||||
|
public class Event
|
||||||
|
{
|
||||||
|
public Delegate Delegate;
|
||||||
|
public object[] args;
|
||||||
|
|
||||||
|
public Event(Delegate Delegate, object[] Args)
|
||||||
|
{
|
||||||
|
this.Delegate = Delegate;
|
||||||
|
this.args = Args;
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user