Skip to content

Commit b131e1d

Browse files
ArgoZhangArgoZhang
committed
chore: 增加 SelectCity 组件
1 parent 24a00f0 commit b131e1d

7 files changed

Lines changed: 211 additions & 76 deletions

File tree

‎src/components/BootstrapBlazor.Region/Components/SelectCity.razor‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@namespace BootstrapBlazor.Components
2+
@inherits SelectRegionBase
3+
@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Region/Components/SelectRegion.razor.js")]
4+
5+
@if (IsShowLabel)
6+
{
7+
<BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
8+
}
9+
<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
10+
<div class="dropdown-toggle" data-bs-toggle="bb.dropdown" data-bs-placement="@PlacementString" data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString">
11+
<input type="text" id="@InputId" disabled="@Disabled" readonly placeholder="@PlaceHolder" class="@InputClassString" value="@CurrentValueAsString" />
12+
<span class="@AppendClassString"><i class="@DropdownIcon"></i></span>
13+
</div>
14+
@if (!IsDisabled)
15+
{
16+
<span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
17+
}
18+
<div class="dropdown-menu">
19+
@foreach(var item in GetProvinces())
20+
{
21+
<div class="bb-region-city-item">@item</div>
22+
<ul>
23+
@foreach (var city in GetCities(item))
24+
{
25+
<li class="">@city</li>
26+
}
27+
</ul>
28+
}
29+
</div>
30+
</div>

‎src/components/BootstrapBlazor.Region/Components/SelectCity.razor.cs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
2+
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
3+
// Website: https://www.blazor.zone or https://argozhang.github.io/
4+
5+
namespace BootstrapBlazor.Components;
6+
7+
/// <summary>
8+
/// SelectCity 组件
9+
/// </summary>
10+
public partial class SelectCity
11+
{
12+
private string? InputId => $"{Id}_input";
13+
14+
private string? ClassString => CssBuilder.Default("select bb-region")
15+
.AddClass("disabled", IsDisabled)
16+
.AddClassFromAttributes(AdditionalAttributes)
17+
.Build();
18+
19+
private async Task OnClearValue()
20+
{
21+
CurrentValue = "";
22+
23+
if (OnClearAsync != null)
24+
{
25+
await OnClearAsync();
26+
}
27+
}
28+
29+
private HashSet<string> GetProvinces() => RegionService.GetProvinces();
30+
31+
private HashSet<string> GetCities(string proviceName) => RegionService.GetCities(proviceName);
32+
}

‎src/components/BootstrapBlazor.Region/Components/SelectCity.razor.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.dropdown-menu {
2+
--bs-dropdown-padding-y: .5rem;
3+
--bs-dropdown-padding-x: .5rem;
4+
max-width: 400px;
5+
max-height: 400px;
6+
overflow-y: auto;
7+
}
8+
9+
.dropdown-menu ul {
10+
margin: 0;
11+
padding: 0;
12+
display: flex;
13+
flex-wrap: wrap;
14+
gap: 5px;
15+
}
16+
17+
.dropdown-menu li {
18+
list-style: none;
19+
transition: background-color .3s linear, color .3s linear;
20+
cursor: pointer;
21+
padding: 3px 12px;
22+
border-radius: var(--bs-border-radius);
23+
color: #777;
24+
}
25+
26+
27+
.dropdown-menu li.active {
28+
background-color: #e3e3e3;
29+
color: #000;
30+
}
31+
32+
.dropdown-menu li:hover {
33+
background-color: #e3e3e3;
34+
color: #000;
35+
}
36+
37+
.bb-region-city-item {
38+
padding: 3px 12px;
39+
color: #ddd;
40+
}

‎src/components/BootstrapBlazor.Region/Components/SelectRegion.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@namespace BootstrapBlazor.Components
2-
@inherits PopoverSelectBase<string>
2+
@inherits SelectRegionBase
33
@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Region/Components/SelectRegion.razor.js")]
44

55
@if (IsShowLabel)

‎src/components/BootstrapBlazor.Region/Components/SelectRegion.razor.cs‎

Lines changed: 1 addition & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -11,75 +11,13 @@ namespace BootstrapBlazor.Components;
1111
/// </summary>
1212
public partial class SelectRegion
1313
{
14-
/// <summary>
15-
/// Gets or sets the placeholder text.
16-
/// </summary>
17-
[Parameter]
18-
public string? PlaceHolder { get; set; }
19-
20-
/// <summary>
21-
/// Gets or sets the color. The default is <see cref="Color.None"/> (no color).
22-
/// </summary>
23-
[Parameter]
24-
public Color Color { get; set; }
25-
26-
/// <summary>
27-
/// Gets or sets the dropdown icon. The default is "fa-solid fa-angle-up".
28-
/// </summary>
29-
[Parameter]
30-
[NotNull]
31-
public string? DropdownIcon { get; set; }
32-
33-
/// <summary>
34-
/// Gets or sets the callback method when the clear button is clicked. Default is null.
35-
/// </summary>
36-
[Parameter]
37-
public Func<Task>? OnClearAsync { get; set; }
38-
39-
/// <summary>
40-
/// Gets or sets the right-side clear icon. Default is fa-solid fa-angle-up.
41-
/// </summary>
42-
[Parameter]
43-
[NotNull]
44-
public string? ClearIcon { get; set; }
45-
46-
/// <summary>
47-
/// Gets or sets the <see cref="IIconTheme"/> service instance.
48-
/// </summary>
49-
[Inject]
50-
[NotNull]
51-
private IIconTheme? IconTheme { get; set; }
52-
53-
[Inject]
54-
[NotNull]
55-
private IRegionService? RegionService { get; set; }
14+
private string? InputId => $"{Id}_input";
5615

5716
private string? ClassString => CssBuilder.Default("select bb-region")
5817
.AddClass("disabled", IsDisabled)
5918
.AddClassFromAttributes(AdditionalAttributes)
6019
.Build();
6120

62-
private string? InputId => $"{Id}_input";
63-
64-
private string? InputClassString => CssBuilder.Default("form-select form-control")
65-
.AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue)
66-
.AddClass($"border-success", IsValid.HasValue && IsValid.Value)
67-
.AddClass($"border-danger", IsValid.HasValue && !IsValid.Value)
68-
.AddClass(CssClass).AddClass(ValidCss)
69-
.Build();
70-
71-
private string? AppendClassString => CssBuilder.Default("form-select-append")
72-
.AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue)
73-
.AddClass($"text-success", IsValid.HasValue && IsValid.Value)
74-
.AddClass($"text-danger", IsValid.HasValue && !IsValid.Value)
75-
.Build();
76-
77-
private string? ClearClassString => CssBuilder.Default("clear-icon")
78-
.AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None)
79-
.AddClass($"text-success", IsValid.HasValue && IsValid.Value)
80-
.AddClass($"text-danger", IsValid.HasValue && !IsValid.Value)
81-
.Build();
82-
8321
private string? GetHeaderActiveClass(RegionViewMode type) => _currentViewMode == type ? "active" : null;
8422

8523
private string? GetBodyActiveClass(RegionViewMode type) => CssBuilder.Default("bb-region-body-item")
@@ -111,9 +49,6 @@ protected override void OnParametersSet()
11149
{
11250
base.OnParametersSet();
11351

114-
DropdownIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectDropdownIcon);
115-
ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectClearIcon);
116-
11752
ResetValue();
11853
}
11954

‎src/components/BootstrapBlazor.Region/Components/SelectRegion.razor.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@
66
display: none;
77
}
88

9-
.popover-region .dropdown-menu {
9+
.dropdown-menu {
1010
--bs-dropdown-padding-y: 0;
1111
}
1212

13-
.popover-region ul {
14-
margin: 0;
15-
padding: 0;
16-
}
13+
.dropdown-menu ul {
14+
margin: 0;
15+
padding: 0;
16+
}
1717

18-
.popover-region li {
19-
list-style: none;
20-
transition: background-color .3s linear, color .3s linear;
21-
}
18+
.dropdown-menu li {
19+
list-style: none;
20+
transition: background-color .3s linear, color .3s linear;
21+
}
2222

2323
.bb-region-header {
2424
width: 400px;

‎src/components/BootstrapBlazor.Region/Components/SelectRegionBase.cs‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
2+
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
3+
// Website: https://www.blazor.zone or https://argozhang.github.io/
4+
5+
using Microsoft.AspNetCore.Components;
6+
7+
namespace BootstrapBlazor.Components;
8+
9+
/// <summary>
10+
/// SelectRegion 组件基类
11+
/// </summary>
12+
public abstract class SelectRegionBase : PopoverSelectBase<string>
13+
{
14+
/// <summary>
15+
/// Gets or sets the placeholder text.
16+
/// </summary>
17+
[Parameter]
18+
public string? PlaceHolder { get; set; }
19+
20+
/// <summary>
21+
/// Gets or sets the color. The default is <see cref="Color.None"/> (no color).
22+
/// </summary>
23+
[Parameter]
24+
public Color Color { get; set; }
25+
26+
/// <summary>
27+
/// Gets or sets the dropdown icon. The default is "fa-solid fa-angle-up".
28+
/// </summary>
29+
[Parameter]
30+
[NotNull]
31+
public string? DropdownIcon { get; set; }
32+
33+
/// <summary>
34+
/// Gets or sets the callback method when the clear button is clicked. Default is null.
35+
/// </summary>
36+
[Parameter]
37+
public Func<Task>? OnClearAsync { get; set; }
38+
39+
/// <summary>
40+
/// Gets or sets the right-side clear icon. Default is fa-solid fa-angle-up.
41+
/// </summary>
42+
[Parameter]
43+
[NotNull]
44+
public string? ClearIcon { get; set; }
45+
46+
/// <summary>
47+
/// Gets or sets the <see cref="IIconTheme"/> service instance.
48+
/// </summary>
49+
[Inject]
50+
[NotNull]
51+
protected IIconTheme? IconTheme { get; set; }
52+
53+
/// <summary>
54+
/// <see cref="IRegionService"/> service instance
55+
/// </summary>
56+
[Inject]
57+
[NotNull]
58+
protected IRegionService? RegionService { get; set; }
59+
60+
/// <summary>
61+
/// 文本框样式
62+
/// </summary>
63+
protected string? InputClassString => CssBuilder.Default("form-select form-control")
64+
.AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue)
65+
.AddClass($"border-success", IsValid.HasValue && IsValid.Value)
66+
.AddClass($"border-danger", IsValid.HasValue && !IsValid.Value)
67+
.AddClass(CssClass).AddClass(ValidCss)
68+
.Build();
69+
70+
/// <summary>
71+
/// 下拉框按钮样式
72+
/// </summary>
73+
protected string? AppendClassString => CssBuilder.Default("form-select-append")
74+
.AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue)
75+
.AddClass($"text-success", IsValid.HasValue && IsValid.Value)
76+
.AddClass($"text-danger", IsValid.HasValue && !IsValid.Value)
77+
.Build();
78+
79+
/// <summary>
80+
/// 清空按钮样式
81+
/// </summary>
82+
protected string? ClearClassString => CssBuilder.Default("clear-icon")
83+
.AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None)
84+
.AddClass($"text-success", IsValid.HasValue && IsValid.Value)
85+
.AddClass($"text-danger", IsValid.HasValue && !IsValid.Value)
86+
.Build();
87+
88+
/// <summary>
89+
/// <inheritdoc/>
90+
/// </summary>
91+
protected override void OnParametersSet()
92+
{
93+
base.OnParametersSet();
94+
95+
DropdownIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectDropdownIcon);
96+
ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectClearIcon);
97+
}
98+
}

0 commit comments

Comments
 (0)