ModalDialog - added ModalButton class, ModalButtonType enum, relocation of classes outside the Services folder to Models/Modal
This commit is contained in:
parent
422da4d079
commit
ff3a36eb64
@ -1,7 +1,8 @@
|
|||||||
@if (IsVisible)
|
@using Connected.Models.Modal;
|
||||||
|
@if (IsVisible)
|
||||||
{
|
{
|
||||||
<div class="modal fade show" tabindex="-1" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))">
|
<div class="modal fade show" tabindex="-1" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))">
|
||||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" >
|
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" @ref="@root" >
|
||||||
<div class="modal-content" @onclick="PreventClose">
|
<div class="modal-content" @onclick="PreventClose">
|
||||||
@if (!ModalOptions.NoHeader)
|
@if (!ModalOptions.NoHeader)
|
||||||
{
|
{
|
||||||
@ -13,8 +14,10 @@
|
|||||||
@Content
|
@Content
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-secondary" @onclick="@(()=>CloseModal())">@CancelButtonText</button>
|
@foreach(ModalButton button in buttons)
|
||||||
<button type="button" class="btn btn-core" @onclick="@(()=>CloseModal(true))">@OKButtonText</button>
|
{
|
||||||
|
<button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,9 +1,10 @@
|
|||||||
using Connected.Services.Modal;
|
using Connected.Models.Modal;
|
||||||
|
using Connected.Services.Modal;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Microsoft.AspNetCore.Components.Web;
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class ModalDialog: IDisposable
|
public partial class ModalDialog : IDisposable
|
||||||
{
|
{
|
||||||
[Inject] ModalDialogService? ModalService { get; set; }
|
[Inject] ModalDialogService? ModalService { get; set; }
|
||||||
|
|
||||||
@ -11,54 +12,51 @@ public partial class ModalDialog: IDisposable
|
|||||||
protected bool IsVisible { get; set; }
|
protected bool IsVisible { get; set; }
|
||||||
protected string? Title { get; set; }
|
protected string? Title { get; set; }
|
||||||
protected RenderFragment? Content { get; set; }
|
protected RenderFragment? Content { get; set; }
|
||||||
|
|
||||||
protected bool OverlayClickToClose { get; set; } = true;
|
protected bool OverlayClickToClose { get; set; } = true;
|
||||||
protected Event? OnOk { get; set; }
|
|
||||||
|
|
||||||
protected Event? OnClose { get; set; }
|
protected List<ModalButton> buttons { get; set; } = new();
|
||||||
|
|
||||||
protected ModalOptions? ModalOptions { get; set; }
|
protected ModalOptions? ModalOptions { get; set; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
protected override void OnInitialized()
|
protected override void OnInitialized()
|
||||||
{
|
{
|
||||||
ModalService.OnShow += ShowModal;
|
ModalService.OnShow += ShowModal;
|
||||||
ModalService.OnClose += CloseModal;
|
ModalService.OnClose += CloseModal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||||
|
{
|
||||||
|
if (IsVisible)
|
||||||
|
await root.FocusAsync();
|
||||||
|
}
|
||||||
|
|
||||||
public void ShowModal(string title, RenderFragment content, Event OnOk = null, Event OnClose = null, ModalOptions options = null, string CancelButtonText = "Cancel", string OKButtonText = "OK")
|
|
||||||
|
public void ShowModal(string title, RenderFragment content, List<ModalButton> buttons, ModalOptions options)
|
||||||
{
|
{
|
||||||
Title = title;
|
Title = title;
|
||||||
Content = content;
|
Content = content;
|
||||||
IsVisible = true;
|
IsVisible = true;
|
||||||
|
|
||||||
this.OKButtonText = OKButtonText;
|
|
||||||
this.CancelButtonText = CancelButtonText;
|
|
||||||
|
|
||||||
ModalOptions = options;
|
ModalOptions = options;
|
||||||
|
this.buttons = buttons;
|
||||||
this.OnOk = OnOk;
|
|
||||||
this.OnClose = OnClose;
|
|
||||||
|
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
|
||||||
public void CloseModal(bool OkClicked = false)
|
public void CloseModal(ModalButton? button)
|
||||||
|
{
|
||||||
|
if (button is not null)
|
||||||
|
{
|
||||||
|
if (button.CloseDialogOnClick)
|
||||||
{
|
{
|
||||||
IsVisible = false;
|
IsVisible = false;
|
||||||
Title = "";
|
Title = "";
|
||||||
Content = null;
|
Content = null;
|
||||||
if (OkClicked)
|
|
||||||
{
|
|
||||||
if (OnOk is not null)
|
|
||||||
OnOk.Delegate.DynamicInvoke(OnOk.args);
|
|
||||||
}
|
}
|
||||||
else
|
button.OnClickEvent.Delegate.DynamicInvoke(button.OnClickEvent.args);
|
||||||
{
|
|
||||||
if (OnClose is not null)
|
|
||||||
OnClose.Delegate.DynamicInvoke(OnClose.args);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -71,24 +69,26 @@ public partial class ModalDialog: IDisposable
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public string OKButtonText { get; set; } ="OK";
|
|
||||||
|
|
||||||
public string CancelButtonText { get; set; } = "Cancel";
|
|
||||||
|
|
||||||
public void CheckEscape(KeyboardEventArgs args)
|
public void CheckEscape(KeyboardEventArgs args)
|
||||||
|
{
|
||||||
|
if (ModalOptions.CloseOnEscKey)
|
||||||
{
|
{
|
||||||
var key = args.Key.ToLower();
|
var key = args.Key.ToLower();
|
||||||
if (key.Equals("escape"))
|
if (key.Equals("escape"))
|
||||||
{
|
{
|
||||||
CloseModal();
|
CloseModal(null);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public void CloseIfEnabled(MouseEventArgs args)
|
public void CloseIfEnabled(MouseEventArgs args)
|
||||||
|
{
|
||||||
|
if (!ModalOptions.DisableBackdropClick)
|
||||||
{
|
{
|
||||||
if (OverlayClickToClose)
|
if (OverlayClickToClose)
|
||||||
{
|
{
|
||||||
CloseModal();
|
CloseModal(null);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
OverlayClickToClose = true;
|
OverlayClickToClose = true;
|
||||||
}
|
}
|
||||||
|
13
src/Connected.Components/Enums/ModalButtonType.cs
Normal file
13
src/Connected.Components/Enums/ModalButtonType.cs
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
using System;
|
||||||
|
using System.Collections.Generic;
|
||||||
|
using System.Linq;
|
||||||
|
using System.Text;
|
||||||
|
using System.Threading.Tasks;
|
||||||
|
|
||||||
|
namespace Connected.Enums;
|
||||||
|
public enum ModalButtonType
|
||||||
|
{
|
||||||
|
OkButton,
|
||||||
|
CancelButton,
|
||||||
|
RegularButton
|
||||||
|
}
|
37
src/Connected.Components/Models/Modal/ModalButton.cs
Normal file
37
src/Connected.Components/Models/Modal/ModalButton.cs
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
using Connected.Enums;
|
||||||
|
using Connected.Services.Modal;
|
||||||
|
|
||||||
|
namespace Connected.Models.Modal;
|
||||||
|
public class ModalButton
|
||||||
|
{
|
||||||
|
ModalDialogService _dialogService;
|
||||||
|
public Event OnClickEvent { get; set; }
|
||||||
|
public ModalButtonType ModalButtonType { get; set; } = ModalButtonType.RegularButton;
|
||||||
|
public string ButtonText { get; set; }
|
||||||
|
|
||||||
|
public bool CloseDialogOnClick { get; set; } = true;
|
||||||
|
|
||||||
|
public ModalButton(Event OnClickEvent, string ButtonText, ModalButtonType ModalButtonType = ModalButtonType.RegularButton, bool CloseDialogOnClick = true)
|
||||||
|
{
|
||||||
|
this.OnClickEvent = OnClickEvent;
|
||||||
|
this.ButtonText = ButtonText;
|
||||||
|
this.ModalButtonType= ModalButtonType;
|
||||||
|
this.CloseDialogOnClick = CloseDialogOnClick;
|
||||||
|
}
|
||||||
|
|
||||||
|
public string GetButtonClass
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
switch (this.ModalButtonType)
|
||||||
|
{
|
||||||
|
case ModalButtonType.CancelButton:
|
||||||
|
return "btn-sm btn-core";
|
||||||
|
case ModalButtonType.OkButton:
|
||||||
|
return "btn-sm btn-info";
|
||||||
|
default:
|
||||||
|
return "btn-sm btn-secondary";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
12
src/Connected.Components/Models/Modal/ModalEvent.cs
Normal file
12
src/Connected.Components/Models/Modal/ModalEvent.cs
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
namespace Connected.Models.Modal;
|
||||||
|
public class Event
|
||||||
|
{
|
||||||
|
public Delegate Delegate;
|
||||||
|
public object[] args;
|
||||||
|
|
||||||
|
public Event(Delegate Delegate, object[] Args)
|
||||||
|
{
|
||||||
|
this.Delegate = Delegate;
|
||||||
|
args = Args;
|
||||||
|
}
|
||||||
|
}
|
10
src/Connected.Components/Models/Modal/ModalOptions.cs
Normal file
10
src/Connected.Components/Models/Modal/ModalOptions.cs
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
namespace Connected.Models.Modal;
|
||||||
|
public class ModalOptions
|
||||||
|
{
|
||||||
|
public bool CloseOnEscKey { get; set; } = true;
|
||||||
|
public bool DisableBackdropClick { get; set; } = false;
|
||||||
|
public bool NoHeader { get; set; } = false;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
@ -1,24 +1,28 @@
|
|||||||
using Microsoft.AspNetCore.Components;
|
using Connected.Components;
|
||||||
|
using Connected.Models.Modal;
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
namespace Connected.Services.Modal;
|
namespace Connected.Services.Modal;
|
||||||
public class ModalDialogService
|
public class ModalDialogService
|
||||||
{
|
{
|
||||||
public event Action<string, RenderFragment, Event, Event, ModalOptions, string, string> OnShow;
|
public event Action<string, RenderFragment, List<ModalButton>, ModalOptions> OnShow;
|
||||||
public event Action<bool> OnClose;
|
public event Action<ModalButton?> OnClose;
|
||||||
|
|
||||||
public void ShowDialog(string title, RenderFragment content, Event OnConfirm, Event OnCancel, ModalOptions options, string CancelButtonText="Cancel", string OKButtonText="OK")
|
public void ShowDialog(string title, RenderFragment content, List<ModalButton> buttons, ModalOptions options)
|
||||||
{
|
{
|
||||||
OnShow?.Invoke(title, content, OnConfirm, OnCancel, options, OKButtonText, CancelButtonText);
|
OnShow?.Invoke(title, content, buttons, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
public void ShowDialog(string title, MarkupString contentMarkup, Event OnConfirm, Event OnCancel, ModalOptions options, string CancelButtonText = "Cancel", string OKButtonText = "OK")
|
public void ShowDialog(string title, MarkupString contentMarkup, List<ModalButton> buttons, ModalOptions options)
|
||||||
{
|
{
|
||||||
var content = new RenderFragment(x => x.AddContent(1, contentMarkup));
|
var content = new RenderFragment(x => x.AddContent(1, contentMarkup));
|
||||||
OnShow?.Invoke(title, content, OnConfirm, OnCancel, options, OKButtonText, CancelButtonText);
|
OnShow?.Invoke(title, content, buttons, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
public void Close(bool OkClicked)
|
public void Close(ModalButton? button)
|
||||||
{
|
{
|
||||||
OnClose?.Invoke(OkClicked);
|
OnClose?.Invoke(button);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user