@ -1,5 +1,4 @@
using Connected.Extensions ; using Connected.Utilities ;
using Connected.Utilities ;
using Microsoft.AspNetCore.Components ; using Microsoft.AspNetCore.Components ;
using Microsoft.AspNetCore.Components.Web ; using Microsoft.AspNetCore.Components.Web ;
@ -7,122 +6,135 @@ namespace Connected.Components;
public partial class Alert : UIComponent public partial class Alert : UIComponent
{ {
[CascadingParameter(Name = "RightToLeft")]
public bool RightToLeft { get ; set ; }
/// <summary>
/// <summary>
/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property.
/// Defines the classlist used in aligning the alert content internally.
/// </summary>
private CssBuilder CompiledAlignmentClassList
{
get
{
return new CssBuilder ( "alert-position" )
. AddClass ( $"justify-sm-{HorizontalAlignment.GetAbsolute(RightToLeft)}" ) ;
}
}
/// <summary>
/// Contains the default container classlist and the user defined classes.
/// </summary>
private CssBuilder CompiledClassList
{
get
{
return new CssBuilder ( "alert" )
. AddClass ( $"alert-{Variant}-{Severity}" )
. AddClass ( $"dense" , Dense )
. AddClass ( $"square" , Square )
. AddClass ( $"elevation-{Elevation}" )
. AddClass ( ClassList ) ;
}
}
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
public RenderFragment ? ChildContent { get ; set ; }
#region EventCallbacks
/// <summary>
/// Raised when the alert is clicked.
/// </summary>
/// </summary>
[Parameter] [Parameter]
public HorizontalAlignment Alignment { get ; set ; } = HorizontalAlignment . Start ;
public EventCallback < MouseEventArgs > Clicked { get ; set ; }
/// <summary>
/// <summary>
/// The callback, when the close glyph has been clicked.
/// The callback, when the close glyph has been clicked.
/// </summary>
/// </summary>
[Parameter] public EventCallback < Alert > CloseClicked { get ; set ; } [Parameter] public EventCallback < Alert > CloseClicked { get ; set ; }
# endregion
#region Content placeholders
/// <summary>
/// <summary>
/// Define the glyph used for the close button.
/// Define the glyph used for the close button.
/// </summary>
/// </summary>
[Parameter] [Parameter]
public string CloseGlyph { get ; set ; } = Icons . Material . Filled . Close ;
public string CloseGlyph { get ; set ; } = Icons . Material . Filled . Close ;
/// <summary>
/// <summary>
/// Sets if the alert shows a close glyph.
/// Custom glyph, leave unset to use the standard glyph which depends on the Severity .
/// </summary>
/// </summary>
[Parameter] [Parameter]
public bool CloseGlyphVisible { get ; set ; }
public string CustomGlyph { get ; set ; } = default ! ;
# endregion
#region Styling properties
/// <summary>
/// <summary>
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property .
/// </summary>
/// </summary>
[Parameter] [Parameter]
public int Elevation { set ; get ; } = 0 ;
public HorizontalAlignment HorizontalAlignment { get ; set ; } = HorizontalAlignment . Start ;
/// <summary>
/// <summary>
/// If true, rounded corners are disabled.
/// A space separated list of class names, added on top of the default class list .
/// </summary>
/// </summary>
[Parameter] [Parameter]
public bool Square { get ; set ; }
public string? ClassList { get ; set ; }
/// <summary>
/// Sets if the alert shows a close glyph.
/// </summary>
[Parameter]
public bool CloseGlyphVisible { get ; set ; }
/// <summary>
/// <summary>
/// If true, compact padding will be used.
/// If true, compact padding will be used.
/// </summary>
/// </summary>
[Parameter] [Parameter]
public bool Dense { get ; set ; }
public bool Dense { get ; set ; }
/// <summary>
/// <summary>
/// If true, no alert glyph will be used.
/// The higher the number, the heavier the drop-shadow. 0 for no shadow .
/// </summary>
/// </summary>
[Parameter] [Parameter]
public bool GlyphVisible { get ; set ; }
public int Elevation { set ; get ; } = 0 ;
/// <summary>
/// <summary>
/// The severity of the alert. This defines the color and glyph used.
/// If true, no alert glyph will be used.
/// </summary>
/// </summary>
[Parameter] [Parameter]
public Severity Severity { get ; set ; } = Severity . Normal ;
public bool GlyphVisible { get ; set ; }
/// <summary>
/// <summary>
/// The variant to use.
/// Specifies the control's display style
/// </summary>
/// </summary>
[Parameter] [CascadingParameter(Name = "RightToLeft")]
public Variant Variant { get ; set ; } = Variant . Text ;
public bool RightToLeft { get ; set ; }
/// <summary>
/// <summary>
/// Child content of the component .
/// The severity of the alert. This defines the color and glyph used .
/// </summary>
/// </summary>
[Parameter] [Parameter]
public RenderFragment ? ChildContent { get ; set ; }
public Severity Severity { get ; set ; } = Severity . Normal ;
/// <summary>
/// <summary>
/// Custom glyph, leave unset to use the standard glyph which depends on the Severity .
/// If true, rounded corners are disabled .
/// </summary>
/// </summary>
[Parameter] [Parameter]
public string Glyph { get ; set ; } = default ! ;
public bool Square { get ; set ; }
/// <summary>
/// <summary>
/// Raised when the alert is clicked
/// The variant to use.
/// </summary>
/// </summary>
[Parameter] [Parameter]
public EventCallback < MouseEventArgs > Clicked { get ; set ; }
public Variant Variant { get ; set ; } = Variant . Text ;
# endregion
protected string ClassList
{
get
{
return new CssBuilder ( "alert" )
. AddClass ( $"alert-{Variant.ToDescriptionString()}-{Severity.ToDescriptionString()}" )
. AddClass ( $"dense" , Dense )
. AddClass ( $"square" , Square )
. AddClass ( $"elevation-{Elevation}" )
. AddClass ( Class )
. Build ( ) ;
}
}
protected string ClassPosition
{
get
{
return new CssBuilder ( "alert-position" )
. AddClass ( $"justify-sm-{ConvertHorizontalAlignment(Alignment).ToDescriptionString()}" )
. Build ( ) ;
}
}
private HorizontalAlignment ConvertHorizontalAlignment ( HorizontalAlignment contentAlignment )
{
return contentAlignment switch
{
HorizontalAlignment . Right = > RightToLeft ? HorizontalAlignment . Start : HorizontalAlignment . End ,
HorizontalAlignment . Left = > RightToLeft ? HorizontalAlignment . End : HorizontalAlignment . Start ,
_ = > contentAlignment
} ;
}
internal async Task OnCloseGlyphClick ( )
{
if ( ! CloseClicked . HasDelegate )
return ;
await CloseClicked . InvokeAsync ( this ) ;
}
protected override void OnParametersSet ( )
protected override void OnParametersSet ( )
{
{
if ( ! string . IsNullOrEmpty ( ) )
if ( ! string . IsNullOrEmpty ( CustomGlyph ) )
return ;
return ;
= GetGlyphForSeverity ( Severity ) ;
CustomGlyph = GetGlyphForSeverity ( Severity ) ;
}
}
private string GetGlyphForSeverity ( Severity severity )
private string GetGlyphForSeverity ( Severity severity )
@ -137,4 +149,12 @@ public partial class Alert : UIComponent
_ = > throw new ArgumentOutOfRangeException ( nameof ( severity ) ) ,
_ = > throw new ArgumentOutOfRangeException ( nameof ( severity ) ) ,
} ;
} ;
}
}
internal async Task OnCloseGlyphClick ( )
{
if ( ! CloseClicked . HasDelegate )
return ;
await CloseClicked . InvokeAsync ( this ) ;
}
} }
Matija Koželj
2 years ago