fix(DockView): theme parameter not work (#5705)

* feat: 增加 ThemeChangedAsync 回调方法

* doc: 增加样式切换逻辑

* refactor: 增加 IThemeProvider 联动

* doc: 增加描述

* refactor: 移除更新 Pre 组件主题代码提高可读性

* refactor: 增加主题联动功能

* doc: 更新 DockView 主题切换功能

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -31,7 +31,7 @@
     <PackageReference Include="BootstrapBlazor.Chart" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="9.0.0" />
-    <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.5" />
+    <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.7" />
     <PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.ElementIcon" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.FileViewer" Version="9.0.0" />

src/BootstrapBlazor.Server/Components/Components/Header.razor

@@ -48,5 +48,5 @@
     </ul>
     <a class="btn btn-bd-download d-none d-lg-block mb-3 mb-md-0 ms-md-3" target="_blank" href="@DownloadUrl">@DownloadText</a>
     <div class="navbar-version ms-2">@_versionString</div>
-    <ThemeProvider class="ms-2 d-none d-lg-block" OnThemeChangedAsync="OnThemeChangedAsync"></ThemeProvider>
+    <ThemeProvider class="ms-2 d-none d-lg-block"></ThemeProvider>
 </header>

src/BootstrapBlazor.Server/Components/Components/Header.razor.cs

@@ -57,6 +57,4 @@ protected override void OnInitialized()
         TutorialsText ??= Localizer[nameof(TutorialsText)];
         _versionString = $"v{PackageVersionService.Version}";
     }
-
-    private Task OnThemeChangedAsync(ThemeValue themeName) => InvokeVoidAsync("updateTheme", themeName, WebsiteOption.CurrentValue.AssetRootPath);
 }

src/BootstrapBlazor.Server/Components/Components/Header.razor.js

@@ -1,5 +1,4 @@
-import { switchTheme as syncTheme } from "./Pre.razor.js"
-import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
+import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export function init(id) {
     const scrollTop = () => (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop
@@ -17,10 +16,6 @@ export function init(id) {
     });
 }
 
-export async function updateTheme(theme, assetPath) {
-    await syncTheme(theme, assetPath);
-}
-
 export function dispose(id) {
     EventHandler.off(document, 'scroll');
 }

src/BootstrapBlazor.Server/Components/Components/Pre.razor.cs

@@ -29,6 +29,10 @@ public partial class Pre
     [NotNull]
     private CodeSnippetService? CodeSnippetService { get; set; }
 
+    [Inject]
+    [NotNull]
+    private IThemeProvider? ThemeProviderService { get; set; }
+
     /// <summary>
     /// 获得/设置 子组件 CodeFile 为空时生效
     /// </summary>
@@ -67,6 +71,16 @@ public partial class Pre
 
     private string? CopiedText { get; set; }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        ThemeProviderService.ThemeChangedAsync += OnThemeChanged;
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -189,4 +203,12 @@ private string FindCodeSnippetByName(string code)
 
     [GeneratedRegex(@"<Tips[\s\S]*>[\s\S]*?</Tips>")]
     private static partial Regex TipsRegex();
+
+    private async Task OnThemeChanged(string themeName)
+    {
+        if (themeName == "light" || themeName == "dark")
+        {
+            await InvokeVoidAsync("switchTheme", themeName);
+        }
+    }
 }

src/BootstrapBlazor.Server/Components/Components/Pre.razor.js

@@ -78,14 +78,14 @@ export async function highlight(id) {
     }
 }
 
-export async function switchTheme(theme, assetPath) {
+export async function switchTheme(theme) {
     if (theme === 'dark') {
-        removeLink(`${assetPath}lib/highlight/vs.min.css`);
-        await addLink(`${assetPath}lib/highlight/vs2015.min.css`);
+        removeLink(`./lib/highlight/vs.min.css`);
+        await addLink(`./lib/highlight/vs2015.min.css`);
     }
     else {
-        removeLink(`${assetPath}lib/highlight/vs2015.min.css`);
-        await addLink(`${assetPath}lib/highlight/vs.min.css`);
+        removeLink(`./lib/highlight/vs2015.min.css`);
+        await addLink(`./lib/highlight/vs.min.css`);
     }
 }
 

src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor

@@ -1,5 +1,5 @@
 @inherits WebSiteModuleComponentBase
-@attribute [JSModuleAutoLoader("Components/ThemeMode.razor.js")]
+@attribute [JSModuleAutoLoader("Components/ThemeMode.razor.js", JSObjectReference = true)]
 
 <div id="@Id" class="btn btn-circle btn-fade btn-theme-mode icon-theme d-flex" @onclick:stopPropagation>
     <i class="@GetLightIconClassString"></i>

src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.cs

@@ -3,6 +3,8 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
+using Microsoft.JSInterop;
+
 namespace BootstrapBlazor.Server.Components.Components;
 
 /// <summary>
@@ -13,6 +15,10 @@ public partial class ThemeMode
     [Inject, NotNull]
     private IIconTheme? IconTheme { get; set; }
 
+    [Inject]
+    [NotNull]
+    private IThemeProvider? ThemeProvider { get; set; }
+
     private string? GetLightIconClassString => CssBuilder.Default("icon-light")
         .AddClass(_lightModeIcon)
         .Build();
@@ -35,4 +41,17 @@ protected override void OnInitialized()
         _darkModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderDarkModeIcon);
         _lightModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderLightModeIcon);
     }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(OnThemeChanged));
+
+    /// <summary>
+    /// The callback when theme changed
+    /// </summary>
+    /// <param name="themeName"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public ValueTask OnThemeChanged(string themeName) => ThemeProvider.SetThemeAsync(themeName);
 }

src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.js

@@ -1,7 +1,7 @@
 import { getTheme, switchTheme, calcCenterPosition } from "../../_content/BootstrapBlazor/modules/utility.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
-export function init(id) {
+export function init(id, invoke, method) {
     const el = document.getElementById(id);
     if (el) {
         EventHandler.on(el, 'click', e => {
@@ -15,6 +15,7 @@ export function init(id) {
 
             const rect = calcCenterPosition(el);
             switchTheme(theme, rect.x, rect.y);
+            invoke.invokeMethodAsync(method, theme);
         });
     }
 }

src/BootstrapBlazor.Server/Components/Samples/DockViews2/BaseDockView.cs

@@ -22,6 +22,10 @@ public abstract class BaseDockView : ComponentBase
     [NotNull]
     private MockDataTableDynamicService? DataTableDynamicService { get; set; }
 
+    [Inject]
+    [NotNull]
+    private IThemeProvider? ThemeProviderService { get; set; }
+
     /// <summary>
     /// 获得/设置 数据集合
     /// </summary>
@@ -39,6 +43,11 @@ public abstract class BaseDockView : ComponentBase
     /// </summary>
     protected DataTableDynamicContext? DataTableDynamicContext { get; set; }
 
+    /// <summary>
+    /// Gets or sets the theme
+    /// </summary>
+    protected DockViewTheme Theme { get; set; } = DockViewTheme.Light;
+
     /// <summary>
     /// 获得 <see cref="DynamicObjectContext"/> 实例方法
     /// </summary>
@@ -51,6 +60,8 @@ public abstract class BaseDockView : ComponentBase
     /// </summary>
     protected override void OnInitialized()
     {
+        base.OnInitialized();
+
         Items = Foo.GenerateFoo(LocalizerFoo, 50);
 
         // 模拟数据从数据库中获得
@@ -63,6 +74,22 @@ protected override void OnInitialized()
         TreeItems.AddRange(TreeFoo.GenerateFoos(LocalizerFoo, 3, 101, 1010));
 
         DataTableDynamicContext = DataTableDynamicService.CreateContext();
+
+        ThemeProviderService.ThemeChangedAsync += OnThemeChanged;
+    }
+
+    private Task OnThemeChanged(string themeName)
+    {
+        if (themeName == "dark")
+        {
+            Theme = DockViewTheme.Dark;
+        }
+        else
+        {
+            Theme = DockViewTheme.Light;
+        }
+        StateHasChanged();
+        return Task.CompletedTask;
     }
 
     /// <summary>