ReturnModal - modal that returns values
This commit is contained in:
parent
54da322cd0
commit
125fa85d6e
@ -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++)
|
||||
{
|
||||
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">
|
||||
<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>
|
||||
<ReturnModal ReturnType="int" @bind-Visible=@ResultDialogShown @bind-Value=@value Title="Dialog1">
|
||||
<NumberInput @bind-Value=@value></NumberInput>
|
||||
</ReturnModal>
|
||||
|
||||
</DatePicker>
|
||||
<p>Modal value @value.ToString()</p>
|
||||
|
||||
<p>Selected date is @date.ToString()</p>
|
||||
|
||||
@code {
|
||||
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 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;
|
||||
|
||||
namespace Connected.Services;
|
||||
|
Loading…
x
Reference in New Issue
Block a user