fix(sidebar): sidebar state observable (#2729)

src/framework/theme/components/sidebar/sidebar.service.ts

@@ -5,8 +5,8 @@
  */
 
 import { Injectable } from '@angular/core';
-import { Subject, Observable, Observer } from 'rxjs';
-import { share, refCount } from 'rxjs/operators';
+import { Subject, Observable, Observer, ReplaySubject } from 'rxjs';
+import { share, refCount, publish } from 'rxjs/operators';
 import { NbSidebarResponsiveState, NbSidebarState } from './sidebar.component';
 
 export const getSidebarState$ = new Subject<{ tag: string, observer: Observer<NbSidebarState> }>();
@@ -99,24 +99,24 @@ export class NbSidebarService {
  }
 
  /**
- * Returns sidebar state
+ * Returns sidebar state observable which emits once
  * @param {string} tag If you have multiple sidebars on the page, mark them with `tag` input property and pass it here
  * to specify which sidebar state you need
  */
  getSidebarState(tag?: string): Observable<NbSidebarState> {
- const observer = new Subject<NbSidebarState>();
+ const observer = new ReplaySubject<NbSidebarState>(1);
  getSidebarState$.next({ observer, tag });
- return observer.pipe(refCount());
+ return observer.pipe(publish(), refCount());
  }
 
  /**
- * Returns sidebar responsive state
+ * Returns sidebar state observable which emits once
  * @param {string} tag If you have multiple sidebars on the page, mark them with `tag` input property and pass it here
  * to specify which sidebar responsive state you need
  */
  getSidebarResponsiveState(tag?: string): Observable<NbSidebarResponsiveState> {
- const observer = new Subject<NbSidebarResponsiveState>();
+ const observer = new ReplaySubject<NbSidebarResponsiveState>();
  getSidebarResponsiveState$.next({ observer, tag });
- return observer.pipe(refCount());
+ return observer.pipe(publish(), refCount());
  }
 }

src/framework/theme/components/sidebar/sidebar.spec.ts

@@ -19,6 +19,7 @@ import {
  NbMediaBreakpoint,
  NbThemeService,
  NbMediaBreakpointsService,
+ NbSidebarResponsiveState,
 } from '@nebular/theme';
 
 @Component({
@@ -224,5 +225,44 @@ describe('NbSidebarComponent', () => {
 
  expect(sidebarComponent.state).toEqual('expanded');
  });
+
+ it('Should return default sidebar state', (done: DoneFn) => {
+ const sidebarService: NbSidebarService = TestBed.inject(NbSidebarService);
+ fixture.detectChanges();
+ sidebarService.getSidebarState().subscribe((state: NbSidebarState) => {
+ expect(state).toBe('expanded');
+ done();
+ });
+ });
+
+ it('Should return changed sidebar state', (done: DoneFn) => {
+ const sidebarService: NbSidebarService = TestBed.inject(NbSidebarService);
+ sidebarComponent.collapse();
+ fixture.detectChanges();
+ sidebarService.getSidebarState().subscribe((state: NbSidebarState) => {
+ expect(state).toBe('collapsed');
+ done();
+ });
+ });
+
+ it('Should return default sidebar responsive state', (done: DoneFn) => {
+ const sidebarService: NbSidebarService = TestBed.inject(NbSidebarService);
+ fixture.detectChanges();
+ sidebarService.getSidebarResponsiveState().subscribe((state: NbSidebarResponsiveState) => {
+ expect(state).toBe('pc');
+ done();
+ });
+ });
+
+ it('Should return changed sidebar responsive state', (done: DoneFn) => {
+ const sidebarService: NbSidebarService = TestBed.inject(NbSidebarService);
+ themeService.setBreakpointTo('md');
+ sidebarComponent.responsive = true;
+ fixture.detectChanges();
+ sidebarService.getSidebarResponsiveState().subscribe((state: NbSidebarResponsiveState) => {
+ expect(state).toBe('tablet');
+ done();
+ });
+ });
  });
 });