fix(demo): use new sidebar implementation

graycoreio · Jul 21, 2023 · e1a6122 · e1a6122
1 parent 22d293c
commit e1a6122
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 7 deletions.
diff --git a/apps/demo/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html b/apps/demo/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html
@@ -1,4 +1,4 @@
-<daff-sidebar-viewport (backdropClicked)="close()" mode="over" [opened]="showSidebar$ | async">
-    <demo-sidebar ngProjectAs="daff-sidebar"></demo-sidebar>
+<daff-sidebar-viewport (backdropClicked)="close()">
+    <demo-sidebar ngProjectAs="daff-sidebar:not([side='right'])" side="left" mode="under" [open]="showSidebar$ | async"></demo-sidebar>
     <ng-content></ng-content>
 </daff-sidebar-viewport>
diff --git a/.../demo/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts b/.../demo/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts
@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  Input,
+} from '@angular/core';
 import {
   waitForAsync,
   ComponentFixture,
@@ -13,8 +16,10 @@ import {
 
 import {
   DaffSidebarModule,
+  DaffSidebarSide,
   DaffSidebarViewportComponent,
 } from '@daffodil/design';
+import { DaffSidebarMode } from '@daffodil/design';
 
 import {
   ToggleSidebar,
@@ -26,7 +31,14 @@ import * as fromDemoSidebar from '../../reducers';
 import { SidebarViewportContainer } from './sidebar-viewport.component';
 
 @Component({ selector: 'demo-sidebar', template: '' })
-class MockSidebarContainer {}
+class MockSidebarContainer {
+  @Input() side: DaffSidebarSide;
+
+  @Input() mode: DaffSidebarMode;
+
+  @Input() open: boolean;
+
+}
 
 describe('SidebarViewportContainer', () => {
   let component: SidebarViewportContainer;
@@ -74,8 +86,8 @@ describe('SidebarViewportContainer', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should set the `daff-sidebar-viewport` mode to over', () => {
-    expect(sidebarViewport.mode).toEqual('over');
+  it('should set the `daff-sidebar` mode to under', () => {
+    expect(sidebarContainer.mode).toEqual('under');
   });
 
   it('should call close when the `daff-sidebar-viewport` emits `backdropClicked`', () => {

diff --git a/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.html b/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.html
@@ -1,4 +1,4 @@
-<daff-sidebar class="demo-sidebar" (escapePressed)="onClose()">
+<daff-sidebar class="demo-sidebar" [side]="side" [mode]="mode" (escapePressed)="onClose()" [open]="open">
   <span class="demo-sidebar__close" (click)="onClose()"><fa-icon [icon]="faTimes"></fa-icon></span>
   <demo-sidebar-list [tree]="tree$ | async" *ngIf="(treeLoading$ | async) === false"></demo-sidebar-list>
   <div class="demo-sidebar__error" *ngFor="let error of (treeErrors$ | async)"> {{ error }}</div>

diff --git a/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.spec.ts b/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.spec.ts
@@ -5,6 +5,7 @@ import {
   TestBed,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { provideMockStore } from '@ngrx/store/testing';
 import {
@@ -49,6 +50,7 @@ describe('SidebarContainer', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
+        NoopAnimationsModule,
         DaffSidebarModule,
         FontAwesomeModule,
         DaffLoadingIconModule,

diff --git a/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.ts b/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.ts
@@ -1,12 +1,21 @@
 import {
+  ChangeDetectionStrategy,
   Component,
+  forwardRef,
+  Input,
   OnInit,
+  ViewChild,
 } from '@angular/core';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
 import { DaffStateError } from '@daffodil/core/state';
+import {
+  DaffSidebarSide,
+  DaffSidebarMode,
+  DaffSidebarComponent,
+} from '@daffodil/design';
 import { DaffNavigationTree } from '@daffodil/navigation';
 import {
   DaffNavigationFacade,
@@ -20,8 +29,23 @@ import * as fromDemoSidebar from '../../reducers/index';
   selector: 'demo-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss'],
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  providers: [{ provide: DaffSidebarComponent, useExisting: forwardRef(() => SidebarContainer ) }],
 })
 export class SidebarContainer implements OnInit {
+
+  @Input() side: DaffSidebarSide;
+
+  @Input() mode: DaffSidebarMode;
+
+  @Input() open: boolean;
+
+  @ViewChild(DaffSidebarComponent) sidebar: DaffSidebarComponent;
+
+  get width() {
+    return this.sidebar.width;
+  }
+
   faTimes = faTimes;
   tree$: Observable<DaffNavigationTree>;
   treeLoading$: Observable<boolean>;