Upgrade modal use cases and functions
Add modal types
This commit is contained in:
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…
x
Reference in New Issue
Block a user