fix(components/switcher): fix async support for selected switcher #1476

apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html

@@ -0,0 +1,25 @@
+<h2>Static</h2>
+
+<prizm-switcher [switchers]="switchers" [selectedSwitcherIdx]="selectedIndex"></prizm-switcher>
+
+<br />
+<br />
+
+<h2>Async</h2>
+<prizm-switcher [switchers]="(switchers$ | async)!" [selectedSwitcherIdx]="selectedIndex"></prizm-switcher>
+
+<br />
+<br />
+
+<h2>Inverse attribute ordering</h2>
+
+<prizm-switcher [selectedSwitcherIdx]="selectedIndex" [switchers]="switchers"></prizm-switcher>
+
+<br />
+<br />
+
+<button class="margin-right" (click)="toggleIndex()" prizmButton>
+ Update index. Current index is {{ selectedIndex }}
+</button>
+
+<button (click)="toggleSwitchers()" prizmButton>Update switchers</button>

apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.less

@@ -0,0 +1,3 @@
+.margin-right {
+ margin-right: 24px;
+}

apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts

@@ -0,0 +1,63 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { PrizmSwitcherItem } from '@prizm-ui/components';
+import { PrizmDestroyService } from '@prizm-ui/helpers';
+import { BehaviorSubject, switchMap, takeUntil, tap, timer } from 'rxjs';
+
+@Component({
+ selector: 'prizm-switcher-async-example',
+ templateUrl: './switcher-async-example.component.html',
+ styleUrls: ['./switcher-async-example.component.less'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ providers: [PrizmDestroyService],
+})
+export class SwitcherAsyncExampleComponent {
+ public selectedIndex = 1;
+ public readonly switchersSetA: PrizmSwitcherItem[] = [
+ {
+ title: 'Таблицы',
+ },
+ {
+ title: 'Графики',
+ },
+ {
+ title: 'Мнемосхемы',
+ disabled: true,
+ },
+ {
+ title: 'Дашборды',
+ },
+ ];
+
+ public readonly switchersSetB: PrizmSwitcherItem[] = [
+ {
+ title: 'Москва',
+ },
+ {
+ title: 'Санкт-Петербург',
+ },
+ ];
+
+ public switchers: PrizmSwitcherItem[] = this.switchersSetA;
+
+ public readonly switchers$ = timer(100).pipe(
+ switchMap(() => this.switchers$$),
+ tap(value => (this.switchers = value)),
+ takeUntil(this.destroy$)
+ );
+
+ private readonly switchers$$: BehaviorSubject<PrizmSwitcherItem[]> = new BehaviorSubject<
+ PrizmSwitcherItem[]
+ >(this.switchersSetA);
+
+ constructor(private readonly destroy$: PrizmDestroyService) {}
+
+ public toggleIndex(): void {
+ this.selectedIndex === 1 ? (this.selectedIndex = 2) : (this.selectedIndex = 1);
+ }
+
+ public toggleSwitchers(): void {
+ this.switchers === this.switchersSetA
+ ? this.switchers$$.next(this.switchersSetB)
+ : this.switchers$$.next(this.switchersSetA);
+ }
+}

apps/doc/src/app/components/switcher/switcher-example.component.html

@@ -7,6 +7,10 @@
  <prizm-switcher-basic-example></prizm-switcher-basic-example>
  </prizm-doc-example>
 
+ <prizm-doc-example id="async" [content]="exampleAsyncSwitcher" heading="Async">
+ <prizm-switcher-async-example></prizm-switcher-async-example>
+ </prizm-doc-example>
+
  <prizm-doc-example id="innerL" [content]="exampleInnerLSwitcher" heading="Type inner, size L">
  <prizm-switcher-inner-l-example></prizm-switcher-inner-l-example>
  </prizm-doc-example>

apps/doc/src/app/components/switcher/switcher-example.component.ts

@@ -39,6 +39,11 @@ export class SwitcherExampleComponent {
  HTML: import('./examples/switcher-basic-example/switcher-basic-example.component.html?raw'),
  };
 
+ public readonly exampleAsyncSwitcher: TuiDocExample = {
+ TypeScript: import('./examples/switcher-async-example/switcher-async-example.component?raw'),
+ HTML: import('./examples/switcher-async-example/switcher-async-example.component.html?raw'),
+ };
+
  public readonly exampleInnerLSwitcher: TuiDocExample = {
  TypeScript: import('./examples/switcher-inner-l-example/switcher-inner-l-example.component?raw'),
  HTML: import('./examples/switcher-inner-l-example/switcher-inner-l-example.component.html?raw'),

apps/doc/src/app/components/switcher/switcher-example.module.ts

@@ -4,7 +4,7 @@ import { SwitcherExampleComponent } from './switcher-example.component';
 import { prizmDocGenerateRoutes, PrizmAddonDocModule } from '@prizm-ui/doc';
 import { RouterModule } from '@angular/router';
 import { SwitcherBasicExampleComponent } from './examples/switcher-basic-example/switcher-basic-example.component';
-import { PrizmSwitcherModule } from '@prizm-ui/components';
+import { PrizmButtonComponent, PrizmSwitcherModule } from '@prizm-ui/components';
 import { SwitcherInnerLExampleComponent } from './examples/switcher-inner-l-example/switcher-inner-l-example.component';
 import { SwitcherInnerMExampleComponent } from './examples/switcher-inner-m-example/switcher-inner-m-example.component';
 import { SwitcherOuterMExampleComponent } from './examples/switcher-outer-m-example/switcher-outer-m-example.component';
@@ -13,6 +13,7 @@ import { SwitcherOuterSExampleComponent } from './examples/switcher-outer-s-exam
 import { SwitcherWithIconExampleComponent } from './examples/switcher-with-icon-example/switcher-with-icon-example.component';
 import { SwitcherOnlyIconExampleComponent } from './examples/switcher-only-icon-example/switcher-only-icon-example.component';
 import { ReactiveFormsModule } from '@angular/forms';
+import { SwitcherAsyncExampleComponent } from './examples/switcher-async-example/switcher-async-example.component';
 
 @NgModule({
  declarations: [
@@ -25,13 +26,15 @@ import { ReactiveFormsModule } from '@angular/forms';
  SwitcherOuterSExampleComponent,
  SwitcherWithIconExampleComponent,
  SwitcherOnlyIconExampleComponent,
+ SwitcherAsyncExampleComponent,
  ],
  imports: [
  CommonModule,
  PrizmAddonDocModule,
  RouterModule.forChild(prizmDocGenerateRoutes(SwitcherExampleComponent)),
  PrizmSwitcherModule,
  ReactiveFormsModule,
+ PrizmButtonComponent,
  ],
 })
 export class SwitcherExampleModule {}

libs/components/src/lib/components/switcher/switcher.component.ts

@@ -5,9 +5,11 @@ import {
  EventEmitter,
  HostBinding,
  Input,
+ OnChanges,
  Optional,
  Output,
  Self,
+ SimpleChanges,
 } from '@angular/core';
 import { PrizmSwitcherItem, PrizmSwitcherSize, PrizmSwitcherType } from './switcher.interface';
 import { prizmDefaultProp } from '@prizm-ui/core';
@@ -17,6 +19,8 @@ import { noop } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { PrizmSwitcherItemComponent } from './components/switcher-item/switcher-item.component';
 import { PrizmSwitcherHintDirective } from './directives/switcher-hint.directive';
+import { prizmHasChanges } from '@prizm-ui/helpers';
+import { INITIAL_SWITHCER_INDEX } from './swithcer.const';
 
 @Component({
  selector: 'prizm-switcher',
@@ -26,11 +30,7 @@ import { PrizmSwitcherHintDirective } from './directives/switcher-hint.directive
  standalone: true,
  imports: [CommonModule, PrizmSwitcherHintDirective, PrizmSwitcherItemComponent],
 })
-export class PrizmSwitcherComponent extends PrizmAbstractTestId implements ControlValueAccessor {
- onChange: (v: number) => void = noop;
- onTouched: () => void = noop;
- private selectedSwitcherIdx_ = 0;
-
+export class PrizmSwitcherComponent extends PrizmAbstractTestId implements ControlValueAccessor, OnChanges {
  @Input()
  @prizmDefaultProp()
  public size: PrizmSwitcherSize = 'l';
@@ -45,13 +45,7 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
 
  @Input()
  @prizmDefaultProp()
- public set selectedSwitcherIdx(idx: number) {
- const item = this.switchers[idx];
- if (item) this.selectSwitcher(item, idx);
- }
- get selectedSwitcherIdx() {
- return this.selectedSwitcherIdx_;
- }
+ public selectedSwitcherIdx: number = INITIAL_SWITHCER_INDEX;
 
  @Input()
  @HostBinding('class.full-width')
@@ -62,6 +56,9 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
 
  override readonly testId_ = 'ui_switcher';
 
+ onChange: (v: number) => void = noop;
+ onTouched: () => void = noop;
+
  constructor(
  public readonly cdRef: ChangeDetectorRef,
  @Optional() @Self() public readonly ngControl: NgControl
@@ -71,11 +68,16 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
  this.ngControl.valueAccessor = this;
  }
  }
+ ngOnChanges(changes: SimpleChanges): void {
+ if (prizmHasChanges(changes, 'selectedSwitcherIdx') && prizmHasChanges(changes, 'switchers')) {
+ this.setActiveSwitcherOnChange();
+ }
+ }
  public selectSwitcher(item: PrizmSwitcherItem, idx: number): void {
  if (this.ngControl?.disabled) return;
  if (item.disabled) return;
  if (this.selectedSwitcherIdx === idx) return;
- this.selectedSwitcherIdxChange.emit((this.selectedSwitcherIdx_ = idx));
+ this.selectedSwitcherIdxChange.emit((this.selectedSwitcherIdx = idx));
  this.onChange(this.selectedSwitcherIdx);
  }
 
@@ -92,4 +94,11 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
  public setDisabledState(isDisabled: boolean): void {
  this.cdRef.markForCheck();
  }
+
+ private setActiveSwitcherOnChange(): void {
+ const idx =
+ this.selectedSwitcherIdx <= this.switchers.length ? this.selectedSwitcherIdx : INITIAL_SWITHCER_INDEX;
+ const item = this.switchers[idx];
+ if (item) this.selectSwitcher(item, idx);
+ }
 }

libs/components/src/lib/components/switcher/swithcer.const.ts

@@ -0,0 +1 @@
+export const INITIAL_SWITHCER_INDEX = 0;