features/rewrite/modaldialog #15
@ -0,0 +1,28 @@
|
|||||||
|
@page "/button"
|
||||||
|
@using Connected.Components;
|
||||||
|
@using Connected.Enums;
|
||||||
|
@using Connected.Models.Modal;
|
||||||
|
@using Connected.Models;
|
||||||
|
@using Connected.Services;
|
||||||
|
@using Connected.Utilities;
|
||||||
|
|
||||||
|
<h1 style="text-align:center;">BUTTON EXAMPLE</h1>
|
||||||
|
|
||||||
|
<Button OnClick="(()=>TextChange())">Change text default</Button>
|
||||||
|
|
||||||
|
<Button OnClick="(()=>TextChange(Hello))">Change text to - Hello my friend</Button>
|
||||||
|
|
||||||
|
<p>Text: <h4>@text</h4></p>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
string text = "Some random text";
|
||||||
|
|
||||||
|
string Hello = "Hello my friend";
|
||||||
|
|
||||||
|
private void TextChange(string new_text="Some random text.. but new")
|
||||||
|
{
|
||||||
|
text = new_text;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,92 @@
|
|||||||
|
@page "/modal"
|
||||||
|
@using Connected.Components;
|
||||||
|
@using Connected.Enums;
|
||||||
|
@using Connected.Models.Modal;
|
||||||
|
@using Connected.Models;
|
||||||
|
@using Connected.Services;
|
||||||
|
@using Connected.Utilities;
|
||||||
|
|
||||||
|
@inject ModalDialogService modalDialog;
|
||||||
|
|
||||||
|
|
||||||
|
<h1 style="text-align:center;">MODAL DIALOG EXAMPLE</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<Button OnClick="OpenModalDialog">Open dialog</Button>
|
||||||
|
|
||||||
|
<p>Modal result: @test_modal_result</p>
|
||||||
|
|
||||||
|
<h4>Value: @value.ToString()</h4>
|
||||||
|
|
||||||
|
|
||||||
|
@code {
|
||||||
|
int value = 0;
|
||||||
|
|
||||||
|
string test_modal_result = string.Empty;
|
||||||
|
|
||||||
|
ModalOptions options = new ModalOptions();
|
||||||
|
|
||||||
|
|
||||||
|
public void OpenModalDialog()
|
||||||
|
{
|
||||||
|
modalDialog.ShowDialog(
|
||||||
|
/*
|
||||||
|
MODAL TITLE
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
"Title",
|
||||||
|
|
||||||
|
/*
|
||||||
|
MODAL CONTENT !!!starting with @
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
@<div>
|
||||||
|
<div>Change the number input aand watch the value variable behind the modal change</div>
|
||||||
|
<NumberInput @bind-Value=@value></NumberInput>
|
||||||
|
</div>,
|
||||||
|
|
||||||
|
/*
|
||||||
|
MODAL BUTTONS WITH ACTIONS
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
new List<ModalButton>()
|
||||||
|
{
|
||||||
|
new ModalButton(
|
||||||
|
new Event(ChangeText, new object[]{"OK clicked"}), //event triggered on button click
|
||||||
|
"OK", //button text
|
||||||
|
ModalButtonType.OkButton, //button type: OK, Cancel, Regular
|
||||||
|
true //close modal on click
|
||||||
|
),
|
||||||
|
new ModalButton(
|
||||||
|
new Event(ChangeText, new object[]{"Cancel clicked"}), //event triggered on button click - first parameter = method name, second parameter = method parameters --> array of objects
|
||||||
|
"Cancel", //button text
|
||||||
|
ModalButtonType.CancelButton, //button type: OK, Cancel, Regular
|
||||||
|
true //close modal on click
|
||||||
|
),
|
||||||
|
new ModalButton(
|
||||||
|
new Event(ChangeText, new object[]{"Regular clicked"}), //event triggered on button click - first parameter = method name, second parameter = method parameters --> array of objects
|
||||||
|
"Click me", //button text
|
||||||
|
ModalButtonType.RegularButton, //button type: OK, Cancel, Regular
|
||||||
|
true //close modal on click
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
/*
|
||||||
|
MODAL OPTIONS
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
new ModalOptions(false,true,false)); //modal dialog options - optional
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ChangeValue(int val)
|
||||||
|
{
|
||||||
|
value = val;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
|
||||||
|
public void ChangeText(string some_parameter)
|
||||||
|
{
|
||||||
|
test_modal_result = some_parameter;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
}
|
@ -1,49 +1,20 @@
|
|||||||
@page "/"
|
@page "/"
|
||||||
@using Connected.Models;
|
|
||||||
@using Connected.Components;
|
@using Connected.Components;
|
||||||
|
@using Connected.Enums;
|
||||||
|
@using Connected.Models.Modal;
|
||||||
|
@using Connected.Models;
|
||||||
|
@using Connected.Services;
|
||||||
|
@using Connected.Utilities;
|
||||||
|
|
||||||
|
<h1 style="text-align:center;">Component Example page</h1>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><Link Class="m-1" Url="modal" Text="Modal dialog" Target="Target.Self" /></li>
|
||||||
|
<li><Link Class="m-1" Url="button" Text="Button" Target="Target.Self" /></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
</DatePicker>
|
|
||||||
|
|
||||||
<p>Selected date is @date.ToString()</p>
|
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
DateTime date = DateTime.Today;
|
|
||||||
}
|
}
|
@ -3,4 +3,4 @@
|
|||||||
href="@Url"
|
href="@Url"
|
||||||
target="@_target">
|
target="@_target">
|
||||||
@Text
|
@Text
|
||||||
</a>
|
</a>
|
@ -1,13 +1,14 @@
|
|||||||
using Connected.Enums;
|
using Connected.Enums;
|
||||||
using Connected.Utilities;
|
using Connected.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using static Connected.Colors;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class Link
|
public partial class Link
|
||||||
{
|
{
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// URL of the link
|
/// URL of the link
|
||||||
/// Options: Any valid web page adress
|
/// Options: Any valid URL adress
|
||||||
/// Default: string.Empty
|
/// Default: string.Empty
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter, EditorRequired]
|
[Parameter, EditorRequired]
|
||||||
@ -49,7 +50,9 @@ public partial class Link
|
|||||||
{
|
{
|
||||||
get
|
get
|
||||||
{
|
{
|
||||||
return new CssBuilder()
|
return new CssBuilder("btn")
|
||||||
|
.AddClass("btn-sm")
|
||||||
|
.AddClass("btn-link-core")
|
||||||
.AddClass(Class)
|
.AddClass(Class)
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
@ -44,6 +44,7 @@ public partial class ModalDialog : IDisposable
|
|||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
public void CloseModal(ModalButton? button)
|
public void CloseModal(ModalButton? button)
|
||||||
{
|
{
|
||||||
if (button is not null)
|
if (button is not null)
|
||||||
|
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,21 @@ 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;
|
||||||
|
|
||||||
|
public ModalOptions()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
public ModalOptions(ModalOptions options)
|
||||||
|
{
|
||||||
|
DisableBackdropClick = options.DisableBackdropClick;
|
||||||
|
NoHeader = options.NoHeader;
|
||||||
|
DisableEscKey = options.DisableEscKey;
|
||||||
|
}
|
||||||
|
|
||||||
|
public ModalOptions(bool disableEscKey, bool disableBackdropClick, bool noHeader)
|
||||||
|
{
|
||||||
|
DisableEscKey = disableEscKey;
|
||||||
|
DisableBackdropClick = disableBackdropClick;
|
||||||
|
NoHeader = noHeader;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
using Connected.Components;
|
using Connected.Models.Modal;
|
||||||
using Connected.Models.Modal;
|
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using System.ComponentModel;
|
||||||
|
|
||||||
namespace Connected.Services;
|
namespace Connected.Services;
|
||||||
public class ModalDialogService
|
public class ModalDialogService
|
||||||
@ -8,15 +8,22 @@ public class ModalDialogService
|
|||||||
public event Action<string, RenderFragment, List<ModalButton>, ModalOptions> OnShow;
|
public event Action<string, RenderFragment, List<ModalButton>, ModalOptions> OnShow;
|
||||||
public event Action OnClose;
|
public event Action OnClose;
|
||||||
|
|
||||||
public void ShowDialog(string title, RenderFragment content, List<ModalButton> buttons, ModalOptions options)
|
public void ShowDialog(string title, RenderFragment Content, List<ModalButton> buttons, ModalOptions options)
|
||||||
{
|
{
|
||||||
OnShow?.Invoke(title, content, buttons, options);
|
var body = Content;
|
||||||
|
OnShow?.Invoke(title, body, buttons, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
public void ShowDialog(string title, MarkupString contentMarkup, List<ModalButton> buttons, ModalOptions options)
|
public void ShowDialog(string title, MarkupString content, List<ModalButton> buttons, ModalOptions options)
|
||||||
{
|
{
|
||||||
var content = new RenderFragment(x => x.AddContent(1, contentMarkup));
|
var body = new RenderFragment(x => x.AddContent(1, content));
|
||||||
OnShow?.Invoke(title, content, buttons, options);
|
OnShow?.Invoke(title, body, buttons, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
public void ShowDialog(string title, MarkupString content, List<ModalButton> buttons)
|
||||||
|
{
|
||||||
|
var body = new RenderFragment(x => x.AddContent(1, content));
|
||||||
|
OnShow?.Invoke(title, body, buttons, new ModalOptions());
|
||||||
}
|
}
|
||||||
|
|
||||||
public void Close()
|
public void Close()
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
using System;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using System;
|
||||||
using System.Collections.Generic;
|
using System.Collections.Generic;
|
||||||
using System.ComponentModel;
|
using System.ComponentModel;
|
||||||
using System.Linq;
|
using System.Linq;
|
||||||
@ -159,4 +160,17 @@ public static class Helper
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static RenderFragment HtmlString(string raw)
|
||||||
|
{
|
||||||
|
return builder => {
|
||||||
|
builder.AddContent(0, raw);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public static MarkupString HtmlMarkup(string raw)
|
||||||
|
{
|
||||||
|
return (MarkupString)raw;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user