Cannot show RadzenAlert after the user closes it.

2026-07-08 18:16:08 +00:00 · 2023-12-25 10:40:11 +02:00
parent 30a7170f50
commit 0778c150b6
4 changed files with 131 additions and 108 deletions
--- a/Radzen.Blazor/Common.cs
+++ b/Radzen.Blazor/Common.cs
@@ -1690,7 +1690,7 @@ namespace Radzen
        /// <summary>
        /// Satisfied if the current value is not <see cref="string.Empty"/>.
        /// </summary>
-        IsNotEmpty, 
+        IsNotEmpty,
        /// <summary>
        /// Custom operator if not need to generate the filter.
        /// </summary>
@@ -2830,7 +2830,7 @@ namespace Radzen
            }
            return false;
        }
-        
+
        /// <summary>
        /// Method to only replace first occurence of a substring in a string
        /// </summary>
--- a/Radzen.Blazor/RadzenAlert.razor
+++ b/Radzen.Blazor/RadzenAlert.razor
@@ -1,11 +1,11 @@
@inherits RadzenComponentWithChildren
-@if (GetVisible())
+@if (visible)
 {
    <div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()" aria-live="polite">
        <div class="rz-alert-item">
            @if (ShowIcon)
            {
-               <RadzenIcon Icon="@getIcon()" IconColor="@IconColor" Class="rz-alert-icon" />
+               <RadzenIcon Icon="@GetIcon()" IconColor="@IconColor" Class="rz-alert-icon" />
            }
            <div class="rz-alert-message">
                @if (!string.IsNullOrEmpty(Title))
@@ -13,7 +13,7 @@
                <div class="rz-alert-title">@Title</div>
                }
                <div class="rz-alert-content">
-                    @if(ChildContent != null)
+                    @if (ChildContent != null)
                    {
                        @ChildContent
                    }
@@ -26,64 +26,7 @@
        </div>
        @if (AllowClose)
        {
-            if (Shade == Shade.Light || Shade == Shade.Lighter)
-            {
-                if (AlertStyle == AlertStyle.Primary)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Primary" Shade="Shade.Darker" Size="@GetCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Secondary)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Secondary" Shade="Shade.Darker" Size="@GetCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Light)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Shade="Shade.Darker" Size="@GetCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Base)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Shade="Shade.Darker" Size="@GetCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Dark)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Light" Shade="Shade.Darker" Size="@GetCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Success)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Success" Shade="Shade.Darker" Size="@GetCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Danger)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Danger" Shade="Shade.Darker" Size="@GetCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Warning)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Warning" Shade="Shade.Darker" Size="@GetCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Info)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Info" Shade="Shade.Darker" Size="@GetCloseButtonSize()" />
-                }
-            }
-            else
-            {
-                if (AlertStyle == AlertStyle.Light)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Size="@GetCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Base)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Size="@GetCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Dark)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Light" Size="@GetCloseButtonSize()" />
-                }
-                else
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Light" Size="@GetCloseButtonSize()" />
-                }
-            }
+            <RadzenButton Click=@OnClose Icon="close" Variant="Variant.Text" ButtonStyle="@GetCloseButtonStyle()" Shade="@GetCloseButtonShade()" Size="@GetCloseButtonSize()" />
        }
    </div>
 }
--- a/Radzen.Blazor/RadzenAlert.razor.cs
+++ b/Radzen.Blazor/RadzenAlert.razor.cs
@@ -99,10 +99,65 @@ namespace Radzen.Blazor
            return Size == AlertSize.ExtraSmall ? ButtonSize.ExtraSmall : ButtonSize.Small;
        }

-        bool? visible;
-        bool GetVisible()
+        Shade GetCloseButtonShade()
        {
-            return visible ?? Visible;
+            if (Shade == Shade.Light || Shade == Shade.Lighter)
+            {
+                return Shade.Darker;
+            }
+            else
+            {
+                return Shade.Default;
+            }
+        }
+
+        ButtonStyle GetCloseButtonStyle()
+        {
+            if (Shade == Shade.Light || Shade == Shade.Lighter)
+            {
+                switch (AlertStyle)
+                {
+                    case AlertStyle.Success:
+                        return ButtonStyle.Success;
+                    case AlertStyle.Danger:
+                        return ButtonStyle.Danger;
+                    case AlertStyle.Warning:
+                        return ButtonStyle.Warning;
+                    case AlertStyle.Info:
+                        return ButtonStyle.Info;
+                    case AlertStyle.Primary:
+                        return ButtonStyle.Primary;
+                    case AlertStyle.Secondary:
+                        return ButtonStyle.Secondary;
+                    case AlertStyle.Light:
+                    case AlertStyle.Base:
+                        return ButtonStyle.Dark;
+                    default:
+                        return ButtonStyle.Light;
+                }
+            }
+            else
+            {
+                switch (AlertStyle)
+                {
+                    case AlertStyle.Light:
+                    case AlertStyle.Base:
+                        return ButtonStyle.Dark;
+                    default:
+                        return ButtonStyle.Light;
+                }
+            }
+        }
+
+
+        bool visible;
+
+        /// <inheritdoc />
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            visible = Visible;
        }

        /// <inheritdoc />
@@ -111,55 +166,59 @@ namespace Radzen.Blazor
            return $"rz-alert rz-alert-{GetAlertSize()} rz-variant-{Enum.GetName(typeof(Variant), Variant).ToLowerInvariant()} rz-{Enum.GetName(typeof(AlertStyle), AlertStyle).ToLowerInvariant()} rz-shade-{Enum.GetName(typeof(Shade), Shade).ToLowerInvariant()}";
        }

-        string getIcon()
+        string GetIcon()
        {
            if (!string.IsNullOrEmpty(Icon))
            {
                return Icon;
            }
-            else if (AlertStyle == AlertStyle.Primary)
-            {
-                return "lightbulb_outline";
-            }
-            else if (AlertStyle == AlertStyle.Secondary)
-            {
-                return "lightbulb_outline";
-            }
-            else if (AlertStyle == AlertStyle.Light)
-            {
-                return "lightbulb_outline";
-            }
-            else if (AlertStyle == AlertStyle.Base)
-            {
-                return "lightbulb_outline";
-            }
-            else if (AlertStyle == AlertStyle.Dark)
-            {
-                return "lightbulb_outline";
-            }
-            else if (AlertStyle == AlertStyle.Success)
-            {
-                return "check_circle_outline";
-            }
-            else if (AlertStyle == AlertStyle.Danger)
-            {
-                return "error_outline";
-            }
-            else if (AlertStyle == AlertStyle.Warning)
-            {
-                return "warning_amber";
-            }
-            else if (AlertStyle == AlertStyle.Info)
-            {
-                return "info_outline";
-            }

-            return "";
+            switch (AlertStyle)
+            {
+                case AlertStyle.Success:
+                    return "check_circle_outline";
+                case AlertStyle.Danger:
+                    return "error_outline";
+                case AlertStyle.Warning:
+                    return "warning_amber";
+                case AlertStyle.Info:
+                    return "info_outline";
+                default:
+                    return "lightbulb_outline";
+            }
        }

-        void Close()
+        async Task OnClose()
        {
            visible = false;
+
+            await VisibleChanged.InvokeAsync(false);
+            await Close.InvokeAsync(null);
+        }
+
+        /// <summary>
+        /// Gets or sets the callback which is invoked when the alert is shown or hidden.
+        /// </summary>
+        [Parameter]
+        public EventCallback<bool> VisibleChanged { get; set; }
+
+        /// <summary>
+        /// Gets or sets the callback which is invoked when the alert is closed by the user.
+        /// </summary>
+        [Parameter]
+        public EventCallback Close { get; set; }
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            var visibleChanged = parameters.DidParameterChange(nameof(Visible), Visible);
+
+            await base.SetParametersAsync(parameters);
+
+            if (visibleChanged)
+            {
+                visible = Visible;
+            }
        }
    }
 }
--- a/RadzenBlazorDemos/Pages/AlertConfig.razor
+++ b/RadzenBlazorDemos/Pages/AlertConfig.razor
@@ -1,4 +1,6 @@
-<RadzenStack Gap="0" class="rz-py-8 rz-px-12">
+@inject NotificationService NotificationService
+
+<RadzenStack Gap="0" class="rz-py-8 rz-px-12">
    <RadzenAlert AlertStyle="AlertStyle.Warning" Variant="Variant.Flat" Shade="Shade.Lighter">
        Alert with close button
    </RadzenAlert>
@@ -6,9 +8,28 @@
        Alert without close button
    </RadzenAlert>
    <RadzenAlert Title="Alert with Title" AlertStyle="AlertStyle.Info" Variant="Variant.Flat" Shade="Shade.Lighter">
-        Alert with close button
+        Alert with title
    </RadzenAlert>
    <RadzenAlert AlertStyle="AlertStyle.Danger" ShowIcon="false" Variant="Variant.Flat" Shade="Shade.Lighter">
        Alert without message icon
    </RadzenAlert>
-</RadzenStack>
+    <RadzenAlert @bind-Visible="visible" Close=@OnClose>
+        Toggle alert visibility and handle the <code>Close</code> event.
+    </RadzenAlert>
+    <RadzenButton Text="@ToggleButtonText" Click="@OnToggle" />
+</RadzenStack>
+@code {
+    bool visible = true;
+
+    string ToggleButtonText => visible ? "Hide alert" : "Show alert";
+
+    void OnToggle()
+    {
+        visible = !visible;
+    }
+
+    void OnClose()
+    {
+        NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "Closed", Detail = "Info" });
+    }
+}