Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

features/rewrite/modaldialog #15

Merged
koma merged 3 commits from features/rewrite/modaldialog into features/rewrite/main 2023-03-15 12:50:03 +00:00
Conversation 0 Commits 3 Files Changed 11 +277 -53
11 changed files with 277 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ButtonExample.razor Normal file
View File

@ -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();
}
}

92
src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor Normal file
View File

@ -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();
}
}

55
src/Connected.Components.Showcase.Runner/Pages/Index.razor
View File

@ -1,49 +1,20 @@
@page "/"
@using Connected.Models;
@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 {
DateTime date = DateTime.Today;
}

2
src/Connected.Components/Components/Link.razor
View File

@ -3,4 +3,4 @@
href="@Url"
target="@_target">
@Text
</a>
</a>

7
src/Connected.Components/Components/Link.razor.cs
View File

@ -1,13 +1,14 @@
using Connected.Enums;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using static Connected.Colors;
namespace Connected.Components;
public partial class Link
{
/// <summary>
/// URL of the link
/// Options: Any valid web page adress
/// Options: Any valid URL adress
/// Default: string.Empty
/// </summary>
[Parameter, EditorRequired]
@ -49,7 +50,9 @@ public partial class Link
{
get
{
return new CssBuilder()
return new CssBuilder("btn")
.AddClass("btn-sm")
.AddClass("btn-link-core")
.AddClass(Class)
.Build();
}

1
src/Connected.Components/Components/ModalDialog.razor.cs
View File

@ -44,6 +44,7 @@ public partial class ModalDialog : IDisposable
StateHasChanged();
}
public void CloseModal(ModalButton? button)
{
if (button is not null)

22
src/Connected.Components/Components/ReturnModal.razor Normal file
View 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
View 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;
}
}

15
src/Connected.Components/Models/Modal/ModalOptions.cs
View File

@ -5,6 +5,21 @@ public class ModalOptions
public bool DisableBackdropClick { 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;
}
}

21
src/Connected.Components/Services/ModalDialogService.cs
View File

@ -1,6 +1,6 @@
using Connected.Components;
using Connected.Models.Modal;
using Connected.Models.Modal;
using Microsoft.AspNetCore.Components;
using System.ComponentModel;
namespace Connected.Services;
public class ModalDialogService
@ -8,15 +8,22 @@ public class ModalDialogService
public event Action<string, RenderFragment, List<ModalButton>, ModalOptions> OnShow;
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));
OnShow?.Invoke(title, content, buttons, options);
var body = new RenderFragment(x => x.AddContent(1, content));
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()

16
src/Connected.Components/Utilities/Helper.cs
View File

@ -1,4 +1,5 @@
using System;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
@ -159,4 +160,17 @@ public static class Helper
return false;
}
}
public static RenderFragment HtmlString(string raw)
{
return builder => {
builder.AddContent(0, raw);
};
}
public static MarkupString HtmlMarkup(string raw)
{
return (MarkupString)raw;
}
}