Upgrade modal use cases and functions

Add modal types
features/rewrite/modals
Matija Koželj 2 years ago
parent 489fb97a2a
commit bcce62f28e

@ -1,4 +1,5 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
@namespace Connected.Components.Showcase.Runner
<ModalDialog/> <ModalDialog/>

@ -1,25 +1,25 @@
@using Connected.Models.Modal; @using Connected.Models.Modal;
@if (IsVisible) @if (IsVisible)
{ {
<div class="modal fade show" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))" tabindex="-1" @ref="@root"> <div class="@ClassList" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))" tabindex="-1" @ref="@root">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered"> <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
<div class="modal-content" @onclick="PreventClose"> <div class="modal-content" @onclick="PreventClose">
@if (!ModalOptions.NoHeader) @if (!ModalOptions.NoHeader)
{ {
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">@Title</h3> <h3 class="modal-title">@Title</h3>
</div> </div>
} }
<div class="modal-body"> <div class="modal-body">
@Content @Content
</div>
<div class="modal-footer">
@foreach (ModalButton button in buttons)
{
<button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
}
</div>
</div>
</div> </div>
</div> <div class="modal-footer">
@foreach (ModalButton button in buttons)
{
<button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
}
</div>
</div>
</div>
</div>
} }

@ -1,7 +1,10 @@
using Connected.Models.Modal; using Connected.Enums;
using Connected.Models.Modal;
using Connected.Services; using Connected.Services;
using Connected.Utilities;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.Web;
using System.Reflection;
namespace Connected.Components; namespace Connected.Components;
public partial class ModalDialog : IDisposable public partial class ModalDialog : IDisposable
@ -18,6 +21,33 @@ public partial class ModalDialog : IDisposable
protected ModalOptions? ModalOptions { get; set; } protected ModalOptions? ModalOptions { get; set; }
[Parameter]
public string? Class { get; set; }
private CssBuilder ClassList
{
get
{
return new CssBuilder()
.AddClass(Type)
.AddClass("fade")
.AddClass("show")
.AddClass(Class);
}
}
private string Type
{
get
{
var type = Helper.GetEnumDescription(ModalOptions?.Type ?? ModalType.Default);
if (!string.IsNullOrWhiteSpace(type))
type = $"-{type}";
return $"modal{type}";
}
}
protected override void OnInitialized() protected override void OnInitialized()
{ {

@ -9,4 +9,6 @@ public class Event
this.Delegate = Delegate; this.Delegate = Delegate;
args = Args; args = Args;
} }
public static Event Empty => new Event(null, null);
} }

@ -1,10 +1,14 @@
namespace Connected.Models.Modal; using Connected.Enums;
namespace Connected.Models.Modal;
public class ModalOptions public class ModalOptions
{ {
public bool DisableEscKey { get; set; } = false; public bool DisableEscKey { get; set; } = false;
public bool DisableBackdropClick { get; set; } = false; public bool DisableBackdropClick { get; set; } = false;
public bool NoHeader { get; set; } = false; public bool NoHeader { get; set; } = false;
public ModalType Type { get; set; } = ModalType.Default;
public ModalOptions() public ModalOptions()
{ {
} }

@ -1,6 +1,7 @@
using Connected.Models.Modal; using Connected.Models.Modal;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using System.ComponentModel; using System.ComponentModel;
using System.Diagnostics.CodeAnalysis;
namespace Connected.Services; namespace Connected.Services;
public class ModalDialogService public class ModalDialogService
@ -14,6 +15,25 @@ public class ModalDialogService
OnShow?.Invoke(title, body, buttons, options); OnShow?.Invoke(title, body, buttons, options);
} }
public void ShowDialog<T>(string title, RenderFragment<T> content, T model, List<ModalButton>? buttons = null, ModalOptions? options = null)
{
var body = content(model);
OnShow?.Invoke(title, body, buttons ?? new(), options ?? new());
}
public void ShowDialog<[DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)] TComponent, TModel>(string title, TModel model, List<ModalButton>? buttons = null, ModalOptions? options = null) where TComponent : Microsoft.AspNetCore.Components.IComponent where TModel : class
{
RenderFragment<TModel> fragment = (model) => __builder =>
{
__builder.OpenComponent<TComponent>(0);
__builder.AddAttribute(1, "Model", model);
__builder.CloseComponent();
};
OnShow?.Invoke(title, fragment(model), buttons ?? new(), options ?? new());
}
public void ShowDialog(string title, MarkupString content, List<ModalButton> buttons, ModalOptions options) public void ShowDialog(string title, MarkupString content, List<ModalButton> buttons, ModalOptions options)
{ {
var body = new RenderFragment(x => x.AddContent(1, content)); var body = new RenderFragment(x => x.AddContent(1, content));
@ -30,6 +50,4 @@ public class ModalDialogService
{ {
OnClose?.Invoke(); OnClose?.Invoke();
} }
} }

Loading…
Cancel
Save