feat(SelectRegion): update switch board logic (#600)

* refactor: 移除 JSObjectReference 初始化

* refactor: 更新细节

* fix: 修复脚本错误

* chore: 增加全局命名空间

* refactor: 更新样式

Author: ArgoZhang

src/components/BootstrapBlazor.Region/BootstrapBlazor.Region.csproj

@@ -22,6 +22,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Using Include="Microsoft.AspNetCore.Components" />
     <Using Include="Microsoft.JSInterop" />
   </ItemGroup>
 

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

@@ -1,6 +1,6 @@
 @namespace BootstrapBlazor.Components
 @inherits PopoverSelectBase<string>
-@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Region/Components/SelectRegion.razor.js", JSObjectReference = true)]
+@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Region/Components/SelectRegion.razor.js")]
 
 @if (IsShowLabel)
 {

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

@@ -2,8 +2,6 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
-using Microsoft.AspNetCore.Components;
-
 namespace BootstrapBlazor.Components;
 
 /// <summary>
@@ -177,11 +175,11 @@ private void ResetValue()
 
     private async Task OnClearValue()
     {
-        _provinceValue = "";
-        _cityValue = "";
+        _provinceValue = null;
+        _cityValue = null;
         _countyValue = new();
-        _detailValue = "";
-        CurrentValue = "";
+        _detailValue = null;
+        CurrentValue = null;
 
         _currentViewMode = RegionViewMode.Province;
 
@@ -226,6 +224,9 @@ private HashSet<string> GetDetails()
     private void OnClickProvince(string value)
     {
         _provinceValue = value;
+        _cityValue = null;
+        _countyValue = new();
+        _detailValue = null;
         _currentViewMode = RegionViewMode.City;
 
         CurrentValue = _provinceValue;
@@ -234,6 +235,8 @@ private void OnClickProvince(string value)
     private void OnClickCity(string value)
     {
         _cityValue = value;
+        _countyValue = new();
+        _detailValue = null;
         _currentViewMode = RegionViewMode.County;
 
         CurrentValue = $"{_provinceValue}-{_cityValue}";
@@ -242,6 +245,7 @@ private void OnClickCity(string value)
     private void OnClickCounty(CountyItem item)
     {
         _countyValue = item;
+        _detailValue = null;
         _currentViewMode = RegionViewMode.Detail;
 
         CurrentValue = $"{_provinceValue}-{_cityValue}-{_countyValue.Name}";
@@ -259,22 +263,16 @@ private async Task OnClickDetail(string value)
     private void OnSwitchProvinceView()
     {
         _currentViewMode = RegionViewMode.Province;
-        _cityValue = "";
-        _countyValue = new();
-        _detailValue = "";
     }
 
     private void OnSwitchCityView()
     {
         _currentViewMode = RegionViewMode.City;
-        _countyValue = new();
-        _detailValue = "";
     }
 
     private void OnSwitchCountyView()
     {
         _currentViewMode = RegionViewMode.County;
-        _detailValue = "";
     }
 
     private void OnSwitchDetailView()

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

@@ -71,12 +71,12 @@
         color: #777;
     }
 
-        .bb-region-body ul li.active {
-            background-color: #e3e3e3;
+        .bb-region-body ul li:hover {
+            background-color: #e9ecef;
             color: #000;
         }
 
-        .bb-region-body ul li:hover {
+        .bb-region-body ul li.active {
             background-color: #e3e3e3;
             color: #000;
         }

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

@@ -25,6 +25,6 @@ export function dispose(id) {
 
     const { popover } = region;
     if (popover) {
-        Popover.dispose(select.popover);
+        Popover.dispose(popover);
     }
 }