ModalDialog

src/Connected.Components/Components/ModalDialog.razor

@@ -1,16 +1,16 @@
 @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>
                 </div>
                 <div class="modal-body">
                     @Content
                 </div>
                 <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>
                 </div>
             </div>

src/Connected.Components/Components/ModalDialog.razor.cs

@@ -1,16 +1,19 @@
 using Connected.Services.Modal;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace Connected.Components;
 public partial class ModalDialog: IDisposable
 {
 	[Inject] ModalDialogService? ModalService { get; set; }
 
+	protected ElementReference root;
 	protected bool IsVisible { get; set; }
 	protected string? Title { 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()
 	{
@@ -18,30 +21,17 @@ public partial class ModalDialog: IDisposable
 		ModalService.OnClose += CloseModal;
 	}
 
-	public void ShowModal(string title, RenderFragment content, EventCallback o, string CancelButtonText = "Cancel", string OKButtonText = "OK")
-	{
-		Title = title;
-		Content = content;
-		IsVisible = true;
-
-		this.OKButtonText = OKButtonText;
-		this.CancelButtonText = CancelButtonText;
 
-		OnConfirm = o;
+	public void ShowModal(string title, RenderFragment content, Event onConfirm, string CancelButtonText = "Cancel", string OKButtonText = "OK")
-
-		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));
+		Content = content;
 		IsVisible = true;
 
 		this.OKButtonText = OKButtonText;
 		this.CancelButtonText = CancelButtonText;
 
-		OnConfirm = o;
+		OnConfirm = onConfirm;
 
 		StateHasChanged();
 	}
@@ -52,7 +42,7 @@ public partial class ModalDialog: IDisposable
 		Title = "";
 		Content = null;
 		if (OkClicked)
-			OnConfirm.InvokeAsync();
+			OnConfirm.Delegate.DynamicInvoke(OnConfirm.args);
 		StateHasChanged();
 	}
 
@@ -65,13 +55,31 @@ public partial class ModalDialog: IDisposable
 		}
 	}
 
-	[Parameter]
-	public EventCallback OnOkClick { get; set; }
-
-	[Parameter]
 	public string OKButtonText { get; set; } ="OK";
 
-	[Parameter]
 	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;
+	}
+
 }

src/Connected.Components/Services/Modal/ModalDialogService.cs

@@ -3,15 +3,15 @@
 namespace Connected.Services.Modal;
 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 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);
 	}
 
-	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));
 		OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText);

src/Connected.Components/Services/Modal/ModalEvent.cs

@@ -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;
+	}
+}