feat(CssBuilder): add AddStyle method (#5272)

* feat: 增加 AddStyle 方法 * test: 增加单元测试 * refactor: use AddStyle method * doc: 重构代码 * refactor: 重构代码
dotnetcore · Feb 2, 2025 · 3c07dff · 3c07dff
1 parent b479cb1
commit 3c07dff
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 12 deletions.
diff --git a/src/BootstrapBlazor/Components/Affix/Affix.razor.cs b/src/BootstrapBlazor/Components/Affix/Affix.razor.cs
@@ -40,8 +40,8 @@ public partial class Affix
         .Build();
 
     private string? StyleString => CssBuilder.Default("position: sticky;")
-        .AddClass($"z-index: {ZIndex};", ZIndex.HasValue)
-        .AddClass($"{Position.ToDescriptionString()}: {Offset}px;")
+        .AddStyle("z-index", $"{ZIndex}", ZIndex.HasValue)
+        .AddStyle($"{Position.ToDescriptionString()}", $"{Offset}px")
         .AddStyleFromAttributes(AdditionalAttributes)
         .Build();
 }
diff --git a/src/BootstrapBlazor/Components/Captcha/Captcha.razor.cs b/src/BootstrapBlazor/Components/Captcha/Captcha.razor.cs
@@ -20,15 +20,15 @@ public partial class Captcha
     /// 获得 组件宽度
     /// </summary>
     private string? StyleString => CssBuilder.Default()
-        .AddClass($"width: {Width + 42}px;", Width > 0)
+        .AddStyle("width", $"{Width + 42}px", Width > 0)
         .Build();
 
     /// <summary>
     /// 获得 加载图片失败样式
     /// </summary>
     private string? FailedStyle => CssBuilder.Default()
-        .AddClass($"width: {Width}px;", Width > 0)
-        .AddClass($"height: {Height}px;", Height > 0)
+        .AddStyle("width", $"{Width}px", Width > 0)
+        .AddStyle("height", $"{Height}px", Height > 0)
         .Build();
 
     /// <summary>

diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs
@@ -19,16 +19,16 @@ public partial class Drawer
         .Build();
 
     private string? StyleString => CssBuilder.Default()
-        .AddClass($"--bb-drawer-position: {Position};", !string.IsNullOrEmpty(Position))
+        .AddStyle("--bb-drawer-position", $"{Position}", !string.IsNullOrEmpty(Position))
         .AddStyleFromAttributes(AdditionalAttributes)
         .Build();
 
     /// <summary>
     /// 获得 抽屉 Style 字符串
     /// </summary>
     private string? DrawerStyleString => CssBuilder.Default()
-        .AddClass($"--bb-drawer-width: {Width};", !string.IsNullOrEmpty(Width) && Placement != Placement.Top && Placement != Placement.Bottom)
-        .AddClass($"--bb-drawer-height: {Height};", !string.IsNullOrEmpty(Height) && (Placement == Placement.Top || Placement == Placement.Bottom))
+        .AddStyle("--bb-drawer-width", $"{Width}", !string.IsNullOrEmpty(Width) && Placement != Placement.Top && Placement != Placement.Bottom)
+        .AddStyle("--bb-drawer-height", $"{Height}", !string.IsNullOrEmpty(Height) && (Placement == Placement.Top || Placement == Placement.Bottom))
         .Build();
 
     /// <summary>

diff --git a/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor.cs b/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor.cs
@@ -50,7 +50,7 @@ public partial class EditorForm<TModel> : IShowLabel
         .Build();
 
     private string? FormStyleString => CssBuilder.Default()
-        .AddClass($"--bb-row-label-width: {LabelWidth}px;", LabelWidth.HasValue)
+        .AddStyle("--bb-row-label-width", $"{LabelWidth}px", LabelWidth.HasValue)
         .Build();
 
     /// <summary>

diff --git a/src/BootstrapBlazor/Components/Label/BootstrapLabel.razor.cs b/src/BootstrapBlazor/Components/Label/BootstrapLabel.razor.cs
@@ -36,7 +36,7 @@ public partial class BootstrapLabel
         .Build();
 
     private string? StyleString => CssBuilder.Default()
-        .AddClass($"--bb-row-label-width: {LabelWidth}px;", LabelWidth.HasValue)
+        .AddStyle($"--bb-row-label-width", $"{LabelWidth}px", LabelWidth.HasValue)
         .Build();
 
     /// <summary>

diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs
@@ -131,7 +131,7 @@ public partial class ValidateForm
     private string? ShowAllInvalidResultString => ShowAllInvalidResult ? "true" : null;
 
     private string? StyleString => CssBuilder.Default()
-        .AddClass($"--bb-row-label-width: {LabelWidth}px;", LabelWidth.HasValue)
+        .AddStyle("--bb-row-label-width", $"{LabelWidth}px", LabelWidth.HasValue)
         .Build();
 
     /// <summary>

diff --git a/src/BootstrapBlazor/Utils/CssBuilder.cs b/src/BootstrapBlazor/Utils/CssBuilder.cs
@@ -106,7 +106,71 @@ public CssBuilder AddClassFromAttributes(IDictionary<string, object>? additional
     }
 
     /// <summary>
-    /// Adds a conditional Style when it exists in a dictionary to the builder with space separator.
+    /// Adds a raw string to the builder that will be concatenated with the next style or value added to the builder.
+    /// </summary>
+    /// <param name="key">style property name</param>
+    /// <param name="value">CSS style to conditionally add.</param>
+    /// <returns>CssBuilder</returns>
+    public CssBuilder AddStyle(string key, string? value)
+    {
+        if (!string.IsNullOrEmpty(value)) stringBuffer.Add($"{key}: {value};");
+        return this;
+    }
+
+    /// <summary>
+    /// Adds a conditional css Style to the builder with space separator.
+    /// </summary>
+    /// <param name="key">style property name</param>
+    /// <param name="value">CSS style to conditionally add.</param>
+    /// <param name="when">Condition in which the CSS style is added.</param>
+    /// <returns>CssBuilder</returns>
+    public CssBuilder AddStyle(string key, string? value, bool when = true) => when ? AddStyle(key, value) : this;
+
+    /// <summary>
+    /// Adds a conditional css Style to the builder with space separator.
+    /// </summary>
+    /// <param name="key">style property name</param>
+    /// <param name="value">CSS style to conditionally add.</param>
+    /// <param name="when">Condition in which the CSS Style is added.</param>
+    /// <returns>CssBuilder</returns>
+    public CssBuilder AddStyle(string key, string? value, Func<bool> when) => AddStyle(key, value, when());
+
+    /// <summary>
+    /// Adds a conditional css Style to the builder with space separator.
+    /// </summary>
+    /// <param name="key">style property name</param>
+    /// <param name="value">Function that returns a css Style to conditionally add.</param>
+    /// <param name="when">Condition in which the CSS Style is added.</param>
+    /// <returns>CssBuilder</returns>
+    public CssBuilder AddStyle(string key, Func<string?> value, bool when = true) => when ? AddStyle(key, value()) : this;
+
+    /// <summary>
+    /// Adds a conditional css Style to the builder with space separator.
+    /// </summary>
+    /// <param name="key">style property name</param>
+    /// <param name="value">Function that returns a css Style to conditionally add.</param>
+    /// <param name="when">Condition in which the CSS Style is added.</param>
+    /// <returns>CssBuilder</returns>
+    public CssBuilder AddStyle(string key, Func<string?> value, Func<bool> when) => AddStyle(key, value, when());
+
+    /// <summary>
+    /// Adds a conditional nested CssBuilder to the builder with space separator.
+    /// </summary>
+    /// <param name="builder">CSS Style to conditionally add.</param>
+    /// <param name="when">Condition in which the CSS Style is added.</param>
+    /// <returns>CssBuilder</returns>
+    public CssBuilder AddStyle(CssBuilder builder, bool when = true) => when ? AddClass(builder.Build()) : this;
+
+    /// <summary>
+    /// Adds a conditional CSS Class to the builder with space separator.
+    /// </summary>
+    /// <param name="builder">CSS Class to conditionally add.</param>
+    /// <param name="when">Condition in which the CSS Class is added.</param>
+    /// <returns>CssBuilder</returns>
+    public CssBuilder AddStyle(CssBuilder builder, Func<bool> when) => AddClass(builder, when());
+
+    /// <summary>
+    /// Adds a conditional css Style when it exists in a dictionary to the builder with space separator.
     /// Null safe operation.
     /// </summary>
     /// <param name="additionalAttributes">Additional Attribute splat parameters</param>

diff --git a/test/UnitTest/Utils/CssBuilderTest.cs b/test/UnitTest/Utils/CssBuilderTest.cs
@@ -21,6 +21,51 @@ public void AddClass_When()
         Assert.Contains("cls_test", classString);
     }
 
+    [Fact]
+    public void AddStyle_When()
+    {
+        var classString = CssBuilder.Default()
+            .AddStyle("width", () => "cls_test", () => false)
+            .Build();
+        Assert.DoesNotContain("widht: cls_test;", classString);
+
+        classString = CssBuilder.Default()
+            .AddStyle("width", () => "cls_test", false)
+            .Build();
+        Assert.DoesNotContain("widht: cls_test;", classString);
+
+        classString = CssBuilder.Default()
+            .AddStyle("width", "cls_test", false)
+            .Build();
+        Assert.DoesNotContain("widht: cls_test;", classString);
+
+        classString = CssBuilder.Default()
+            .AddStyle("width", () => "cls_test", () => true)
+            .Build();
+        Assert.Contains("width: cls_test;", classString);
+
+        classString = CssBuilder.Default()
+            .AddStyle("width", () => "cls_test", true)
+            .Build();
+        Assert.Contains("width: cls_test;", classString);
+
+        classString = CssBuilder.Default()
+            .AddStyle("width", "cls_test", true)
+            .Build();
+        Assert.Contains("width: cls_test;", classString);
+
+        classString = CssBuilder.Default()
+            .AddStyle("width", "cls_test", () => true)
+            .Build();
+        Assert.Contains("width: cls_test;", classString);
+
+        classString = CssBuilder.Default()
+            .AddStyle("width", "cls_test_width")
+            .AddStyle("height", "cls_test_height")
+            .Build();
+        Assert.Equal("width: cls_test_width; height: cls_test_height;", classString);
+    }
+
     [Fact]
     public void AddClass_Builder()
     {
@@ -37,6 +82,27 @@ public void AddClass_Builder()
         Assert.Contains("cls_test", classString);
     }
 
+    [Fact]
+    public void AddStyle_Builder()
+    {
+        var builder = CssBuilder.Default("width: cls_test_width;");
+
+        var classString = CssBuilder.Default()
+            .AddStyle(builder, false)
+            .Build();
+        Assert.DoesNotContain("width: cls_test_width;", classString);
+
+        classString = CssBuilder.Default()
+            .AddStyle(builder, () => true)
+            .Build();
+        Assert.Contains("width: cls_test_width;", classString);
+
+        classString = CssBuilder.Default()
+            .AddStyle(builder, true)
+            .Build();
+        Assert.Contains("width: cls_test_width;", classString);
+    }
+
     [Fact]
     public void AddStyleFromAttributes_Ok()
     {