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 +183 -36
11 changed files with 183 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit eea562dde0 - Show all commits

2
src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj
View File

@ -24,6 +24,8 @@
<ItemGroup>
<Watch Remove="Pages\ComponentsExamples\ButtonExample.razor" />
<Watch Remove="Pages\ComponentsExamples\ModalDialogExample.razor" />
<Watch Remove="Program.cs" />
</ItemGroup>

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

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

@ -1,33 +1,20 @@
@page "/"
@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;">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>
<Button OnClick="OpenValueDialog">Open dialog</Button>
<ReturnModal ReturnType="int" @bind-Visible=@ResultDialogShown @bind-Value=@value Title="Dialog1">
<NumberInput @bind-Value=@value></NumberInput>
</ReturnModal>
<p>Modal value @value.ToString()</p>
@code {
DateTime date = DateTime.Today;
int value = 0;
bool ResultDialogShown = false;
private void OpenValueDialog()
{
ResultDialogShown = !ResultDialogShown;
StateHasChanged();
}
}

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)

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

@ -5,4 +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;
}
}

5
src/Connected.Components/Models/Modal/ModalResult.cs
View File

@ -1,5 +0,0 @@
namespace Connected.Models.Modal;
internal class ModalResult
{
public object Result { get; set; }
}

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

@ -1,5 +1,6 @@
using Connected.Models.Modal;
using Microsoft.AspNetCore.Components;
using System.ComponentModel;
namespace Connected.Services;
public class ModalDialogService
@ -7,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;
}
}