♻ refactor: working on move alert to masablazor

src/Masa.Blazor/Components/Alert/AlertTypes.cs

@@ -0,0 +1,11 @@
+namespace BlazorComponent
+{
+    public enum AlertTypes
+    {
+        None = 0,
+        Success,
+        Info,
+        Warning,
+        Error
+    }
+}

src/Masa.Blazor/Components/Alert/MAlert.razor

@@ -0,0 +1,86 @@
+@namespace Masa.Blazor
+@inherits BDomComponentBase
+
+<CascadingValue Value="IsDark" Name="IsDark">
+    @if (Transition != null)
+    {
+        <Transition Name="@Transition">
+            <ShowTransitionElement Value="Value"
+                                   Tag="@Tag"
+                                   role="alert"
+                                   Class="@CssProvider.GetClass()"
+                                   Style="@CssProvider.GetStyle()"
+                                   id="@Id">
+                @RenderWrapper()
+            </ShowTransitionElement>
+        </Transition>
+    }
+    else
+    {
+        <Element Tag="@Tag"
+                 role="alert"
+                 Class="@CssProvider.GetClass()"
+                 style="@CssProvider.GetStyle()"
+                 id="@Id">
+            @RenderWrapper()
+        </Element>
+    }
+</CascadingValue>
+
+@code {
+
+    private RenderFragment RenderWrapper() => __builder =>
+    {
+        <div class="@CssProvider.GetClass("wrapper")"
+             style="@CssProvider.GetStyle("wrapper")">
+            @if (IsShowIcon)
+            {
+                <MIcon Color="@IconColor"
+                       Dark="@IsDarkTheme"
+                       Class="m-alert__icon">
+                    @IconContent
+                </MIcon>
+            }
+
+            <div class="@CssProvider.GetClass("content")">
+                @if (HasTitle)
+                {
+                    <div class="@CssProvider.GetClass("title")">
+                        @if (TitleContent == null)
+                        {
+                            @Title
+                        }
+                        else
+                        {
+                            @TitleContent
+                        }
+                    </div>
+                }
+
+                @ChildContent
+            </div>
+
+
+            @if (Border != Borders.None)
+            {
+                <div class="@CssProvider.GetClass("border")"
+                     style="@CssProvider.GetStyle("border")">
+                </div>
+            }
+
+            @if (Dismissible)
+            {
+                <MButton Class="m-alert__dismissible"
+                         Color="@IconColor"
+                         Dark="@IsDarkTheme"
+                         Icon
+                         Small
+                         OnClick="@HandleOnDismiss"
+                         aria-label="@CloseLabel">
+                    <MIcon Dark="@IsDarkTheme">@CloseIcon</MIcon>
+                </MButton>
+            }
+        </div>
+    };
+
+}

src/Masa.Blazor/Components/Alert/MAlert.cs → src/Masa.Blazor/Components/Alert/MAlert.razor.cs

@@ -1,10 +1,52 @@
 namespace Masa.Blazor;
 
-public class MAlert : BAlert
+public partial class MAlert : BDomComponentBase, IThemeable
 {
     [Inject]
     private MasaBlazor MasaBlazor { get; set; } = null!;
 
+    [Parameter]
+    public string? Transition { get; set; }
+
+    [Parameter]
+    public Borders Border { get; set; }
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    [MasaApiParameter("$cancel")]
+    public string CloseIcon { get; set; } = "$cancel";
+
+    [Parameter]
+    [MasaApiParameter("Close")]
+    public virtual string CloseLabel { get; set; } = "Close";
+
+    [Parameter]
+    public string? Color { get; set; }
+
+    [Parameter]
+    public virtual bool Dismissible { get; set; }
+
+    [Parameter]
+    [MasaApiParameter("div")]
+    public string Tag { get; set; } = "div";
+
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter]
+    public RenderFragment? TitleContent { get; set; }
+
+    [Parameter]
+    public AlertTypes Type { get; set; }
+
+    [Parameter]
+    public bool Value { get; set; } = true;
+
+    [Parameter]
+    public EventCallback<bool> ValueChanged { get; set; }
+
     [Parameter]
     public StringBoolean? Icon { get; set; }
 
@@ -53,6 +95,33 @@ public class MAlert : BAlert
     [Parameter]
     public StringNumber? Width { get; set; }
 
+    [Parameter]
+    public bool Dark { get; set; }
+
+    [Parameter]
+    public bool Light { get; set; }
+
+    [CascadingParameter(Name = "IsDark")]
+    public bool CascadingIsDark { get; set; }
+
+    public bool IsDark
+    {
+        get
+        {
+            if (Dark)
+            {
+                return true;
+            }
+
+            if (Light)
+            {
+                return false;
+            }
+
+            return CascadingIsDark;
+        }
+    }
+
     private string ComputedType => Type != AlertTypes.None ? Type.ToString().ToLower() : "";
 
     private string ComputedColor => Color ?? ComputedType;
@@ -94,6 +163,12 @@ public class MAlert : BAlert
 
     private bool IndependentTheme => (IsDirtyParameter(nameof(Dark)) && Dark) || (IsDirtyParameter(nameof(Light)) && Light);
 
+    private bool HasTitle => !string.IsNullOrWhiteSpace(Title) || TitleContent is not null;
+
+    private RenderFragment? IconContent { get; set; }
+
+    private bool IsShowIcon { get; set; }
+
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
@@ -112,6 +187,50 @@ protected override void SetComponentClass()
     {
         base.SetComponentClass();
 
+        CssProvider
+            .UseBem("m-alert", css =>
+            {
+                css.Add("m-sheet")
+                   .AddIf("m-sheet--shaped", () => Shaped)
+                   // .AddIf("m-alert--border", () => Border != Borders.None);
+                   .Modifiers(m
+                       => m.Modifier("border", Border != Borders.None)
+                           .Add(Border, Border != Borders.None)
+                           .AddOneOf(Prominent, Dense)
+                           .Add(Text)
+                           .Add(Outlined)
+                           .AddColor(ComputedColor, HasText, !ColoredBorder)
+                           .AddElevation(Elevation)
+                           .AddRounded(Rounded, Tile)
+                           .AddTheme(IsDarkTheme, IndependentTheme)
+                   );
+            }, style =>
+            {
+                style.AddColor(ComputedColor, HasText, () => !ColoredBorder)
+                     .AddHeight(Height)
+                     .AddMaxHeight(MaxHeight)
+                     .AddMinHeight(MinHeight)
+                     .AddWidth(Width)
+                     .AddMaxWidth(MaxWidth)
+                     .AddMinWidth(MinWidth)
+                     .AddIf("display:none", () => Transition == null && !Value);
+            })
+            .Element("wrapper")
+            .Element("content")
+            .Element("title")
+            .Element("border", css =>
+            {
+                css
+                   //  .Modifiers(m
+                   //     => m.Modifier("has-color", ColoredBorder)
+                   //         // .Add(Border.ToString())
+                   //         // .AddTextColor(Color, ColoredBorder)
+                   // )
+                   .AddIf(Type.ToString().ToLower(), () => HasTypedBorder);
+            }, style => { style.AddTextColor(Color, () => ColoredBorder); });
+
+        return;
+
         CssProvider
             .Apply(cssBuilder =>
             {
@@ -155,25 +274,6 @@ protected override void SetComponentClass()
                     .AddTextColor(Color, () => ColoredBorder);
             }, styleBuilder => { styleBuilder.AddTextColor(Color, () => ColoredBorder); });
 
-        AbstractProvider
-            .Apply(typeof(BAlertWrapper<>), typeof(BAlertWrapper<MAlert>))
-            .Apply(typeof(BAlertIcon<>), typeof(BAlertIcon<MAlert>))
-            .Apply<BIcon, MIcon>(attrs =>
-            {
-                attrs[nameof(MIcon.Color)] = IconColor;
-                attrs[nameof(MIcon.Dark)] = IsDarkTheme;
-                attrs[nameof(MIcon.Class)] = "m-alert__icon";
-            })
-            .Apply(typeof(BAlertContent<>), typeof(BAlertContent<MAlert>))
-            .Apply(typeof(BAlertDismissButton<>), typeof(BAlertDismissButton<MAlert>))
-            .Apply<BButton, MButton>("dismissible", attrs =>
-            {
-                attrs[nameof(MButton.Color)] = IconColor;
-                attrs[nameof(MButton.Dark)] = IsDarkTheme;
-                attrs[nameof(MButton.Class)] = "m-alert__dismissible";
-            })
-            .Apply<BIcon, MIcon>("dismissible", attrs => { attrs[nameof(MIcon.Dark)] = IsDarkTheme; });
-
         string BorderClass() => Border switch
         {
             Borders.Left   => "m-alert__border--left",
@@ -194,4 +294,17 @@ protected override void SetComponentClass()
             _              => throw new ArgumentOutOfRangeException(nameof(Border))
         };
     }
+
+    private async Task HandleOnDismiss(MouseEventArgs args)
+    {
+        Value = false;
+        await ValueChanged.InvokeAsync(false);
+    }
+
+    [MasaApiPublicMethod]
+    public async Task ToggleAsync()
+    {
+        Value = !Value;
+        await ValueChanged.InvokeAsync(Value);
+    }
 }

test/Masa.Blazor.Test/Alert/MAlertTests.cs

@@ -1,11 +1,27 @@
-using Bunit;
+using System;
+using System.Diagnostics;
+using Bunit;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 
 namespace Masa.Blazor.Test.Alert
 {
     [TestClass]
     public class MAlertTests : TestBase
     {
+        [TestMethod]
+        public void TestLoad()
+        {
+            Stopwatch stopwatch = new Stopwatch();
+            stopwatch.Start();
+            var cut = RenderComponent<MAlert>();
+            for (int i = 0; i < 100000; i++)
+            {
+                cut.Render();
+            }
+            stopwatch.Stop();
+            Console.Out.WriteLine("MAlert took " + stopwatch.ElapsedMilliseconds + " ms to render");
+        }
+
         [TestMethod]
         public void RenderAlertWithColoredBorder()
         {

test/Masa.Blazor.Test/Masa.Blazor.Test.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net6.0</TargetFramework>
+    <TargetFramework>net7.0</TargetFramework>
     <IsPackable>false</IsPackable>
   </PropertyGroup>