feat(addon-doc): improve UX when switch global dark mode on API page

taiga-family · Sep 19, 2024 · b5b9531 · b5b9531
1 parent c1c51c0
commit b5b9531
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/projects/addon-doc/components/demo/index.html b/projects/addon-doc/components/demo/index.html
@@ -4,7 +4,7 @@
             size="s"
             tuiSwitch
             type="checkbox"
-            [ngModel]="dark"
+            [ngModel]="dark()"
             (ngModelChange)="onModeChange($event)"
         />
         {{ texts[0] }}
@@ -23,7 +23,7 @@
 <div
     tuiResizable
     class="t-wrapper"
-    [attr.tuiTheme]="dark ? 'dark' : 'light'"
+    [attr.tuiTheme]="theme()"
     [class.t-wrapper_transparent]="!opaque"
 >
     <div class="t-content">

diff --git a/projects/addon-doc/components/demo/index.ts b/projects/addon-doc/components/demo/index.ts
@@ -1,14 +1,18 @@
 import {JsonPipe, Location, NgIf, NgTemplateOutlet} from '@angular/common';
-import type {ElementRef, OnInit} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
+    computed,
     ContentChild,
+    type ElementRef,
     inject,
     Input,
+    type OnInit,
+    signal,
     TemplateRef,
     ViewChild,
 } from '@angular/core';
+import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';
 import type {AbstractControl} from '@angular/forms';
 import {FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import type {Params, UrlTree} from '@angular/router';
@@ -29,6 +33,7 @@ import {TuiSwitch} from '@taiga-ui/kit/components/switch';
 import {TuiChevron} from '@taiga-ui/kit/directives/chevron';
 import {TuiSelectModule} from '@taiga-ui/legacy/components/select';
 import {TuiTextfieldControllerModule} from '@taiga-ui/legacy/directives/textfield-controller';
+import {skip} from 'rxjs';
 
 const MIN_WIDTH = 160;
 
@@ -75,14 +80,21 @@ export class TuiDocDemo implements OnInit {
     private readonly locationRef = inject(Location);
     private readonly urlSerializer = inject(UrlSerializer);
     private readonly urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
+    private readonly darkMode = inject(TUI_DARK_MODE);
 
     @ContentChild(TemplateRef)
     protected readonly template: TemplateRef<Record<string, unknown>> | null = null;
 
-    protected dark = tuiCoerceValueIsTrue(
-        this.params.darkMode ?? inject(TUI_DARK_MODE)(),
+    protected theme = computed(() => (this.dark() ? 'dark' : 'light'));
+
+    protected dark = signal(
+        tuiCoerceValueIsTrue(this.params.darkMode ?? this.darkMode()),
     );
 
+    protected readonly $ = toObservable(this.darkMode)
+        .pipe(skip(1), takeUntilDestroyed())
+        .subscribe((mode) => this.onModeChange(mode));
+
     protected testForm?: FormGroup;
 
     protected readonly updateOnVariants = ['change', 'blur', 'submit'] as const;
@@ -91,7 +103,7 @@ export class TuiDocDemo implements OnInit {
         this.params.updateOn || this.updateOnVariants[0];
 
     protected opaque = tuiCoerceValueIsTrue(this.params.sandboxOpaque ?? true);
-    protected expanded = tuiCoerceValueIsTrue(this.params.sandboxExpanded ?? false);
+    protected expanded = tuiCoerceValueIsTrue(this.params.sandboxExpanded ?? true);
     protected sandboxWidth = tuiToInteger(this.params.sandboxWidth);
     protected readonly texts = inject(TUI_DOC_DEMO_TEXTS);
 
@@ -115,9 +127,9 @@ export class TuiDocDemo implements OnInit {
         this.updateUrl({sandboxWidth: this.sandboxWidth});
     }
 
-    protected onModeChange(dark: boolean): void {
-        this.dark = dark;
-        this.updateUrl({sandboxWidth: this.sandboxWidth, darkMode: this.dark});
+    protected onModeChange(darkMode: boolean): void {
+        this.dark.set(darkMode);
+        this.updateUrl({sandboxWidth: this.sandboxWidth, darkMode});
     }
 
     protected toggleDetails(): void {