ReturnModal - modal that returns values
This commit is contained in:
parent
54da322cd0
commit
125fa85d6e
@ -1,49 +1,33 @@
|
|||||||
@page "/"
|
@page "/"
|
||||||
@using Connected.Models;
|
|
||||||
@using Connected.Components;
|
@using Connected.Components;
|
||||||
|
@using Connected.Models.Modal;
|
||||||
|
@using Connected.Services;
|
||||||
|
|
||||||
|
@inject ModalDialogService modalDialog;
|
||||||
|
|
||||||
|
|
||||||
<h1 style="text-align:center;">Component Sandbox</h1>
|
<h1 style="text-align:center;">Component Sandbox</h1>
|
||||||
|
|
||||||
<Grid>
|
|
||||||
@for (int i = 0; i < 5; i++)
|
|
||||||
{
|
|
||||||
int num = i;
|
|
||||||
<GridRow>
|
|
||||||
<GridRowContent>
|
|
||||||
Fixed content @num.ToString()
|
|
||||||
</GridRowContent>
|
|
||||||
<GridRowContent Collapsable=true>
|
|
||||||
Collapsable content @num.ToString()
|
|
||||||
</GridRowContent>
|
|
||||||
</GridRow>
|
|
||||||
}
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<p>Izbran datum je: @date</p>
|
<Button OnClick="OpenValueDialog">Open dialog</Button>
|
||||||
|
|
||||||
<FormWizard Id="Wizard1">
|
<ReturnModal ReturnType="int" @bind-Visible=@ResultDialogShown @bind-Value=@value Title="Dialog1">
|
||||||
<FormWizardStep Name="Step1">
|
<NumberInput @bind-Value=@value></NumberInput>
|
||||||
Step1
|
</ReturnModal>
|
||||||
</FormWizardStep>
|
|
||||||
<FormWizardStep Name="Step2">
|
<p>Modal value @value.ToString()</p>
|
||||||
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 {
|
@code {
|
||||||
DateTime date = DateTime.Today;
|
DateTime date = DateTime.Today;
|
||||||
|
|
||||||
|
int value = 0;
|
||||||
|
bool ResultDialogShown = false;
|
||||||
|
|
||||||
|
|
||||||
|
private void OpenValueDialog()
|
||||||
|
{
|
||||||
|
ResultDialogShown = !ResultDialogShown;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
}
|
}
|
22
src/Connected.Components/Components/ReturnModal.razor
Normal file
22
src/Connected.Components/Components/ReturnModal.razor
Normal file
@ -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>
|
||||||
|
}
|
71
src/Connected.Components/Components/ReturnModal.razor.cs
Normal file
71
src/Connected.Components/Components/ReturnModal.razor.cs
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -5,6 +5,4 @@ public class ModalOptions
|
|||||||
public bool DisableBackdropClick { get; set; } = false;
|
public bool DisableBackdropClick { get; set; } = false;
|
||||||
public bool NoHeader { get; set; } = false;
|
public bool NoHeader { get; set; } = false;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
5
src/Connected.Components/Models/Modal/ModalResult.cs
Normal file
5
src/Connected.Components/Models/Modal/ModalResult.cs
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
namespace Connected.Models.Modal;
|
||||||
|
internal class ModalResult
|
||||||
|
{
|
||||||
|
public object Result { get; set; }
|
||||||
|
}
|
@ -1,5 +1,4 @@
|
|||||||
using Connected.Components;
|
using Connected.Models.Modal;
|
||||||
using Connected.Models.Modal;
|
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
namespace Connected.Services;
|
namespace Connected.Services;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user