ReturnModal - modal that returns values

src/Connected.Components.Showcase.Runner/Pages/Index.razor

@@ -1,49 +1,33 @@
 @page "/"
-@using Connected.Models;
 @using Connected.Components;
+@using Connected.Models.Modal;
+@using Connected.Services;
+
+@inject ModalDialogService modalDialog;
 
 
 <h1 style="text-align:center;">Component Sandbox</h1>
 
-<Grid>
+
-    @for (int i = 0; i < 5; i++)
+<Button OnClick="OpenValueDialog">Open dialog</Button>
-    {
+
-        int num = i;
+<ReturnModal ReturnType="int" @bind-Visible=@ResultDialogShown @bind-Value=@value Title="Dialog1">
-        <GridRow>
+    <NumberInput @bind-Value=@value></NumberInput>
-            <GridRowContent>
+</ReturnModal>
-                Fixed content @num.ToString()
+
-            </GridRowContent>
+<p>Modal value @value.ToString()</p>
-            <GridRowContent Collapsable=true>
+
-                Collapsable content @num.ToString()
-            </GridRowContent>
-        </GridRow>
-    }
-</Grid>
-
-<p>Izbran datum je: @date</p>
-
-<FormWizard Id="Wizard1">
-    <FormWizardStep Name="Step1">
-        Step1
-    </FormWizardStep>
-    <FormWizardStep Name="Step2">
-        Step2
-    </FormWizardStep>
-    <FormWizardStep Name="Step3">
-        Step3
-    </FormWizardStep>
-    <FormWizardStep Name="Step4">
-        Step4
-    </FormWizardStep>
-</FormWizard>
-<DatePicker 
-CloseOnDateSelect=true
-@bind-SelectedDate=@date>
- 
-</DatePicker>
-
-<p>Selected date is @date.ToString()</p>
 
 @code {
     DateTime date = DateTime.Today;
+
+    int value = 0;
+    bool ResultDialogShown = false;
+
+
+    private void OpenValueDialog()
+    {
+        ResultDialogShown = !ResultDialogShown;
+        StateHasChanged();
+    }    
 }

src/Connected.Components/Components/ReturnModal.razor

@@ -0,0 +1,22 @@
+@typeparam ReturnType
+
+@using Connected.Models.Modal;
+@if (Visible)
+{
+    <div class="modal fade show" tabindex="-1">
+        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                        <h3 class="modal-title">@Title</h3>
+                </div>
+                <div class="modal-body">
+                    @ChildContent
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-sm btn-core" @onclick="@(()=>CloseModal())">Zapri</button>
+                    <button type="button" class="btn btn-sm btn-info" @onclick="@(()=>CloseModal(true))">Ok</button>
+                </div>
+            </div>
+        </div>
+    </div>
+}

src/Connected.Components/Components/ReturnModal.razor.cs

@@ -0,0 +1,71 @@
+using Connected.Models.Modal;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Connected.Components;
+public partial class ReturnModal<ReturnType>
+{
+	[Parameter]
+	public bool Visible { get; set; } = false;
+
+	[Parameter]
+	public EventCallback<bool> VisibleChanged { get; set; }
+
+	[Parameter]
+	public string Title { get; set; } = string.Empty;
+
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+	protected bool OverlayClickToClose { get; set; } = true;
+
+	private ReturnType initialValue { get; set; }
+
+	[Parameter]
+	public ReturnType Value { get; set; } = default;
+
+	[Parameter]
+	public EventCallback<ReturnType> ValueChanged { get; set; }
+
+	protected ModalOptions? ModalOptions { get; set; }
+
+	public async Task CloseModal(bool returnResult = false)
+	{
+		Visible = false;
+		VisibleChanged.InvokeAsync(Visible);
+		Title = "";
+		ChildContent = null;
+		StateHasChanged();
+		if (!returnResult)
+			await ValueChanged.InvokeAsync(initialValue);
+		else
+			initialValue = Value;
+	}
+
+
+	public void CheckEscape(KeyboardEventArgs args)
+	{
+		if (!ModalOptions.DisableEscKey)
+		{
+			var key = args.Key.ToLower();
+			if (key.Equals("escape"))
+			{
+				CloseModal();
+			}
+		}
+	}
+
+	public void CloseIfEnabled(MouseEventArgs args)
+	{
+		CloseModal();
+	}
+
+	public void PreventClose(MouseEventArgs args)
+	{
+		OverlayClickToClose = false;
+	}
+
+	protected override async Task OnInitializedAsync()
+	{
+			initialValue = Value;
+	}
+}

src/Connected.Components/Models/Modal/ModalOptions.cs

@@ -5,6 +5,4 @@ public class ModalOptions
 	public bool DisableBackdropClick { get; set; } = false;
 	public bool NoHeader { get; set; } = false;
 
-
-
 }

src/Connected.Components/Models/Modal/ModalResult.cs

@@ -0,0 +1,5 @@
+namespace Connected.Models.Modal;
+internal class ModalResult
+{
+	public object Result { get; set; }
+}

src/Connected.Components/Services/ModalDialogService.cs

@@ -1,5 +1,4 @@
-using Connected.Components;
+using Connected.Models.Modal;
-using Connected.Models.Modal;
 using Microsoft.AspNetCore.Components;
 
 namespace Connected.Services;