|
|
|
@ -1,5 +1,4 @@
|
|
|
|
using Connected.Annotations;
|
|
|
|
using Microsoft.AspNetCore.Components;
|
|
|
|
using Microsoft.AspNetCore.Components;
|
|
|
|
|
|
|
|
using Microsoft.AspNetCore.Components.Rendering;
|
|
|
|
using Microsoft.AspNetCore.Components.Rendering;
|
|
|
|
using Microsoft.AspNetCore.Components.Web;
|
|
|
|
using Microsoft.AspNetCore.Components.Web;
|
|
|
|
|
|
|
|
|
|
|
|
@ -11,72 +10,97 @@ namespace Connected.Components;
|
|
|
|
/// </summary>
|
|
|
|
/// </summary>
|
|
|
|
public class Element : UIComponent
|
|
|
|
public class Element : UIComponent
|
|
|
|
{
|
|
|
|
{
|
|
|
|
/// <summary>
|
|
|
|
/// <summary>
|
|
|
|
/// Child content
|
|
|
|
/// Child content
|
|
|
|
/// </summary>
|
|
|
|
/// </summary>
|
|
|
|
[Parameter]
|
|
|
|
[Parameter]
|
|
|
|
[Category(CategoryTypes.Element.Misc)]
|
|
|
|
public RenderFragment? ChildContent { get; set; }
|
|
|
|
public RenderFragment ChildContent { get; set; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
#region EventCallbacks
|
|
|
|
/// The HTML element that will be rendered in the root by the component
|
|
|
|
[Parameter]
|
|
|
|
/// </summary>
|
|
|
|
public EventCallback<ElementReference> RefChanged { get; set; }
|
|
|
|
[Parameter]
|
|
|
|
#endregion
|
|
|
|
[Category(CategoryTypes.Element.Misc)]
|
|
|
|
|
|
|
|
public string HtmlTag { get; set; } = "span";
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
|
|
|
/// The ElementReference to bind to.
|
|
|
|
|
|
|
|
/// Use like @bind-Ref="myRef"
|
|
|
|
|
|
|
|
/// </summary>
|
|
|
|
|
|
|
|
[Parameter]
|
|
|
|
|
|
|
|
[Category(CategoryTypes.Element.Misc)]
|
|
|
|
|
|
|
|
public ElementReference? Ref { get; set; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[Parameter] public EventCallback<ElementReference> RefChanged { get; set; }
|
|
|
|
#region Content placeholders
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
|
|
|
/// The Ref to bind to.
|
|
|
|
|
|
|
|
/// Usage: @bind-Ref="myRef"
|
|
|
|
|
|
|
|
/// </summary>
|
|
|
|
|
|
|
|
[Parameter]
|
|
|
|
|
|
|
|
public ElementReference? Ref { get; set; }
|
|
|
|
|
|
|
|
#endregion
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
#region Styling properties
|
|
|
|
/// Calling StateHasChanged to refresh the component's state
|
|
|
|
/// <summary>
|
|
|
|
/// </summary>
|
|
|
|
/// A space separated list of class names, added on top of the default class list.
|
|
|
|
public void Refresh() => StateHasChanged();
|
|
|
|
/// </summary>
|
|
|
|
|
|
|
|
[Parameter]
|
|
|
|
|
|
|
|
public string? ClassList { get; set; }
|
|
|
|
|
|
|
|
#endregion
|
|
|
|
|
|
|
|
|
|
|
|
protected override void BuildRenderTree(RenderTreeBuilder builder)
|
|
|
|
#region Behavior properties
|
|
|
|
{
|
|
|
|
/// <summary>
|
|
|
|
base.BuildRenderTree(builder);
|
|
|
|
/// The HTML element that will be rendered in the root by the component
|
|
|
|
//Open
|
|
|
|
/// </summary>
|
|
|
|
builder.OpenElement(0, HtmlTag);
|
|
|
|
[Parameter]
|
|
|
|
|
|
|
|
public string HtmlTag { get; set; } = "span";
|
|
|
|
|
|
|
|
|
|
|
|
//splatted attributes
|
|
|
|
[Parameter]
|
|
|
|
foreach (var attribute in CustomAttributes)
|
|
|
|
public bool PreventOnClickPropagation { get; set; }
|
|
|
|
{
|
|
|
|
#endregion
|
|
|
|
// checking if the value is null, we can get rid of null event handlers
|
|
|
|
|
|
|
|
// for example `@onmouseenter=@(IsOpen ? HandleEnter : null)`
|
|
|
|
|
|
|
|
// this is a powerful feature that in normal HTML elements doesn't work, because
|
|
|
|
|
|
|
|
// Blazor adds always the attribute value and creates an EventCallback
|
|
|
|
|
|
|
|
if (attribute.Value != null)
|
|
|
|
|
|
|
|
builder.AddAttribute(1, attribute.Key, attribute.Value);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
//Class
|
|
|
|
|
|
|
|
builder.AddAttribute(2, "class", AdditionalClassList);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// StopPropagation
|
|
|
|
/// <summary>
|
|
|
|
// the order matters. This has to be before content is added
|
|
|
|
/// Schedules a component's state refresh
|
|
|
|
if (HtmlTag == "button")
|
|
|
|
/// </summary>
|
|
|
|
builder.AddEventStopPropagationAttribute(5, "onclick", true);
|
|
|
|
public void Refresh() => StateHasChanged();
|
|
|
|
|
|
|
|
|
|
|
|
//Reference capture
|
|
|
|
protected override void BuildRenderTree(RenderTreeBuilder builder)
|
|
|
|
if (Ref != null)
|
|
|
|
{
|
|
|
|
{
|
|
|
|
base.BuildRenderTree(builder);
|
|
|
|
builder.AddElementReferenceCapture(6, async capturedRef =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
Ref = capturedRef;
|
|
|
|
|
|
|
|
await RefChanged.InvokeAsync(Ref.Value);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//Content
|
|
|
|
builder.OpenElement(0, HtmlTag);
|
|
|
|
builder.AddContent(10, ChildContent);
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
* Handle splatted attributes
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
foreach (var attribute in CustomAttributes)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
* Checking if the value is null, we can get rid of null event handlers,
|
|
|
|
|
|
|
|
* for example `@onmouseenter=@(IsOpen ? HandleEnter : null)`.
|
|
|
|
|
|
|
|
* This is a powerful feature that does not work in regular html elements
|
|
|
|
|
|
|
|
* because Blazor always adds the attribute value and creates an EventCallback.
|
|
|
|
|
|
|
|
* */
|
|
|
|
|
|
|
|
if (attribute.Value is not null)
|
|
|
|
|
|
|
|
builder.AddAttribute(1, attribute.Key, attribute.Value);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//Close
|
|
|
|
builder.AddAttribute(2, "class", ClassList);
|
|
|
|
builder.CloseElement();
|
|
|
|
|
|
|
|
}
|
|
|
|
/*
|
|
|
|
|
|
|
|
* Stop onclock propagation for buttons. The order matters.
|
|
|
|
|
|
|
|
* This has to be before content is added
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
if (PreventOnClickPropagation)
|
|
|
|
|
|
|
|
builder.AddEventStopPropagationAttribute(5, "onclick", true);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
* Add reference capture propagation.
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
if (Ref is not null)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
builder.AddElementReferenceCapture(6, async capturedRef =>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
Ref = capturedRef;
|
|
|
|
|
|
|
|
await RefChanged.InvokeAsync(Ref.Value);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
* Render child content
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
builder.AddContent(10, ChildContent);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
builder.CloseElement();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
Matija Koželj
2 years ago