Skip to content

Commit 3c07dff

Browse files
ArgoZhangArgoZhang
authored
feat(CssBuilder): add AddStyle method (#5272)
* feat: 增加 AddStyle 方法 * test: 增加单元测试 * refactor: use AddStyle method * doc: 重构代码 * refactor: 重构代码
1 parent b479cb1 commit 3c07dff

File tree

8 files changed

+142
-12
lines changed

8 files changed

+142
-12
lines changed

‎src/BootstrapBlazor/Components/Affix/Affix.razor.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ public partial class Affix
4040
.Build();
4141

4242
private string? StyleString => CssBuilder.Default("position: sticky;")
43-
.AddClass($"z-index: {ZIndex};", ZIndex.HasValue)
44-
.AddClass($"{Position.ToDescriptionString()}: {Offset}px;")
43+
.AddStyle("z-index", $"{ZIndex}", ZIndex.HasValue)
44+
.AddStyle($"{Position.ToDescriptionString()}", $"{Offset}px")
4545
.AddStyleFromAttributes(AdditionalAttributes)
4646
.Build();
4747
}

‎src/BootstrapBlazor/Components/Captcha/Captcha.razor.cs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ public partial class Captcha
2020
/// 获得 组件宽度
2121
/// </summary>
2222
private string? StyleString => CssBuilder.Default()
23-
.AddClass($"width: {Width + 42}px;", Width > 0)
23+
.AddStyle("width", $"{Width + 42}px", Width > 0)
2424
.Build();
2525

2626
/// <summary>
2727
/// 获得 加载图片失败样式
2828
/// </summary>
2929
private string? FailedStyle => CssBuilder.Default()
30-
.AddClass($"width: {Width}px;", Width > 0)
31-
.AddClass($"height: {Height}px;", Height > 0)
30+
.AddStyle("width", $"{Width}px", Width > 0)
31+
.AddStyle("height", $"{Height}px", Height > 0)
3232
.Build();
3333

3434
/// <summary>

‎src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@ public partial class Drawer
1919
.Build();
2020

2121
private string? StyleString => CssBuilder.Default()
22-
.AddClass($"--bb-drawer-position: {Position};", !string.IsNullOrEmpty(Position))
22+
.AddStyle("--bb-drawer-position", $"{Position}", !string.IsNullOrEmpty(Position))
2323
.AddStyleFromAttributes(AdditionalAttributes)
2424
.Build();
2525

2626
/// <summary>
2727
/// 获得 抽屉 Style 字符串
2828
/// </summary>
2929
private string? DrawerStyleString => CssBuilder.Default()
30-
.AddClass($"--bb-drawer-width: {Width};", !string.IsNullOrEmpty(Width) && Placement != Placement.Top && Placement != Placement.Bottom)
31-
.AddClass($"--bb-drawer-height: {Height};", !string.IsNullOrEmpty(Height) && (Placement == Placement.Top || Placement == Placement.Bottom))
30+
.AddStyle("--bb-drawer-width", $"{Width}", !string.IsNullOrEmpty(Width) && Placement != Placement.Top && Placement != Placement.Bottom)
31+
.AddStyle("--bb-drawer-height", $"{Height}", !string.IsNullOrEmpty(Height) && (Placement == Placement.Top || Placement == Placement.Bottom))
3232
.Build();
3333

3434
/// <summary>

‎src/BootstrapBlazor/Components/EditorForm/EditorForm.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ public partial class EditorForm<TModel> : IShowLabel
5050
.Build();
5151

5252
private string? FormStyleString => CssBuilder.Default()
53-
.AddClass($"--bb-row-label-width: {LabelWidth}px;", LabelWidth.HasValue)
53+
.AddStyle("--bb-row-label-width", $"{LabelWidth}px", LabelWidth.HasValue)
5454
.Build();
5555

5656
/// <summary>

‎src/BootstrapBlazor/Components/Label/BootstrapLabel.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ public partial class BootstrapLabel
3636
.Build();
3737

3838
private string? StyleString => CssBuilder.Default()
39-
.AddClass($"--bb-row-label-width: {LabelWidth}px;", LabelWidth.HasValue)
39+
.AddStyle($"--bb-row-label-width", $"{LabelWidth}px", LabelWidth.HasValue)
4040
.Build();
4141

4242
/// <summary>

‎src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ public partial class ValidateForm
131131
private string? ShowAllInvalidResultString => ShowAllInvalidResult ? "true" : null;
132132

133133
private string? StyleString => CssBuilder.Default()
134-
.AddClass($"--bb-row-label-width: {LabelWidth}px;", LabelWidth.HasValue)
134+
.AddStyle("--bb-row-label-width", $"{LabelWidth}px", LabelWidth.HasValue)
135135
.Build();
136136

137137
/// <summary>

‎src/BootstrapBlazor/Utils/CssBuilder.cs‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,71 @@ public CssBuilder AddClassFromAttributes(IDictionary<string, object>? additional
106106
}
107107

108108
/// <summary>
109-
/// Adds a conditional Style when it exists in a dictionary to the builder with space separator.
109+
/// Adds a raw string to the builder that will be concatenated with the next style or value added to the builder.
110+
/// </summary>
111+
/// <param name="key">style property name</param>
112+
/// <param name="value">CSS style to conditionally add.</param>
113+
/// <returns>CssBuilder</returns>
114+
public CssBuilder AddStyle(string key, string? value)
115+
{
116+
if (!string.IsNullOrEmpty(value)) stringBuffer.Add($"{key}: {value};");
117+
return this;
118+
}
119+
120+
/// <summary>
121+
/// Adds a conditional css Style to the builder with space separator.
122+
/// </summary>
123+
/// <param name="key">style property name</param>
124+
/// <param name="value">CSS style to conditionally add.</param>
125+
/// <param name="when">Condition in which the CSS style is added.</param>
126+
/// <returns>CssBuilder</returns>
127+
public CssBuilder AddStyle(string key, string? value, bool when = true) => when ? AddStyle(key, value) : this;
128+
129+
/// <summary>
130+
/// Adds a conditional css Style to the builder with space separator.
131+
/// </summary>
132+
/// <param name="key">style property name</param>
133+
/// <param name="value">CSS style to conditionally add.</param>
134+
/// <param name="when">Condition in which the CSS Style is added.</param>
135+
/// <returns>CssBuilder</returns>
136+
public CssBuilder AddStyle(string key, string? value, Func<bool> when) => AddStyle(key, value, when());
137+
138+
/// <summary>
139+
/// Adds a conditional css Style to the builder with space separator.
140+
/// </summary>
141+
/// <param name="key">style property name</param>
142+
/// <param name="value">Function that returns a css Style to conditionally add.</param>
143+
/// <param name="when">Condition in which the CSS Style is added.</param>
144+
/// <returns>CssBuilder</returns>
145+
public CssBuilder AddStyle(string key, Func<string?> value, bool when = true) => when ? AddStyle(key, value()) : this;
146+
147+
/// <summary>
148+
/// Adds a conditional css Style to the builder with space separator.
149+
/// </summary>
150+
/// <param name="key">style property name</param>
151+
/// <param name="value">Function that returns a css Style to conditionally add.</param>
152+
/// <param name="when">Condition in which the CSS Style is added.</param>
153+
/// <returns>CssBuilder</returns>
154+
public CssBuilder AddStyle(string key, Func<string?> value, Func<bool> when) => AddStyle(key, value, when());
155+
156+
/// <summary>
157+
/// Adds a conditional nested CssBuilder to the builder with space separator.
158+
/// </summary>
159+
/// <param name="builder">CSS Style to conditionally add.</param>
160+
/// <param name="when">Condition in which the CSS Style is added.</param>
161+
/// <returns>CssBuilder</returns>
162+
public CssBuilder AddStyle(CssBuilder builder, bool when = true) => when ? AddClass(builder.Build()) : this;
163+
164+
/// <summary>
165+
/// Adds a conditional CSS Class to the builder with space separator.
166+
/// </summary>
167+
/// <param name="builder">CSS Class to conditionally add.</param>
168+
/// <param name="when">Condition in which the CSS Class is added.</param>
169+
/// <returns>CssBuilder</returns>
170+
public CssBuilder AddStyle(CssBuilder builder, Func<bool> when) => AddClass(builder, when());
171+
172+
/// <summary>
173+
/// Adds a conditional css Style when it exists in a dictionary to the builder with space separator.
110174
/// Null safe operation.
111175
/// </summary>
112176
/// <param name="additionalAttributes">Additional Attribute splat parameters</param>

‎test/UnitTest/Utils/CssBuilderTest.cs‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,51 @@ public void AddClass_When()
2121
Assert.Contains("cls_test", classString);
2222
}
2323

24+
[Fact]
25+
public void AddStyle_When()
26+
{
27+
var classString = CssBuilder.Default()
28+
.AddStyle("width", () => "cls_test", () => false)
29+
.Build();
30+
Assert.DoesNotContain("widht: cls_test;", classString);
31+
32+
classString = CssBuilder.Default()
33+
.AddStyle("width", () => "cls_test", false)
34+
.Build();
35+
Assert.DoesNotContain("widht: cls_test;", classString);
36+
37+
classString = CssBuilder.Default()
38+
.AddStyle("width", "cls_test", false)
39+
.Build();
40+
Assert.DoesNotContain("widht: cls_test;", classString);
41+
42+
classString = CssBuilder.Default()
43+
.AddStyle("width", () => "cls_test", () => true)
44+
.Build();
45+
Assert.Contains("width: cls_test;", classString);
46+
47+
classString = CssBuilder.Default()
48+
.AddStyle("width", () => "cls_test", true)
49+
.Build();
50+
Assert.Contains("width: cls_test;", classString);
51+
52+
classString = CssBuilder.Default()
53+
.AddStyle("width", "cls_test", true)
54+
.Build();
55+
Assert.Contains("width: cls_test;", classString);
56+
57+
classString = CssBuilder.Default()
58+
.AddStyle("width", "cls_test", () => true)
59+
.Build();
60+
Assert.Contains("width: cls_test;", classString);
61+
62+
classString = CssBuilder.Default()
63+
.AddStyle("width", "cls_test_width")
64+
.AddStyle("height", "cls_test_height")
65+
.Build();
66+
Assert.Equal("width: cls_test_width; height: cls_test_height;", classString);
67+
}
68+
2469
[Fact]
2570
public void AddClass_Builder()
2671
{
@@ -37,6 +82,27 @@ public void AddClass_Builder()
3782
Assert.Contains("cls_test", classString);
3883
}
3984

85+
[Fact]
86+
public void AddStyle_Builder()
87+
{
88+
var builder = CssBuilder.Default("width: cls_test_width;");
89+
90+
var classString = CssBuilder.Default()
91+
.AddStyle(builder, false)
92+
.Build();
93+
Assert.DoesNotContain("width: cls_test_width;", classString);
94+
95+
classString = CssBuilder.Default()
96+
.AddStyle(builder, () => true)
97+
.Build();
98+
Assert.Contains("width: cls_test_width;", classString);
99+
100+
classString = CssBuilder.Default()
101+
.AddStyle(builder, true)
102+
.Build();
103+
Assert.Contains("width: cls_test_width;", classString);
104+
}
105+
40106
[Fact]
41107
public void AddStyleFromAttributes_Ok()
42108
{

0 commit comments

Comments
 (0)