feat(sidebar): breakpoints configuration for compacted states (#457)

akveo · May 31, 2018 · 56411db · 56411db
1 parent eac0ca9
commit 56411db
Showing 1 changed file with 38 additions and 14 deletions.
diff --git a/src/framework/theme/components/sidebar/sidebar.component.ts b/src/framework/theme/components/sidebar/sidebar.component.ts
@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, HostBinding, Input, OnInit, OnDestroy, ElementRef } from '@angular/core';
+import { Component, HostBinding, Input, OnInit, OnDestroy, ElementRef, OnChanges } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { takeWhile } from 'rxjs/operators';
 
@@ -106,7 +106,7 @@ export class NbSidebarFooterComponent {
     </div>
   `,
 })
-export class NbSidebarComponent implements OnInit, OnDestroy {
+export class NbSidebarComponent implements OnChanges, OnInit, OnDestroy {
 
   static readonly STATE_EXPANDED: string = 'expanded';
   static readonly STATE_COLLAPSED: string = 'collapsed';
@@ -214,7 +214,6 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
   @Input()
   set responsive(val: boolean) {
     this.responsiveValue = convertToBoolProperty(val);
-    this.toggleResponsive(this.responsiveValue);
   }
 
   /**
@@ -225,12 +224,31 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
    */
   @Input() tag: string;
 
+  // TODO: get width by the key and define only max width for the tablets and mobiles
+  /**
+   * Controls on which screen sizes sidebar should be switched to compacted state.
+   * Works only when responsive mode is on.
+   * Default values are `['xs', 'is', 'sm', 'md', 'lg']`.
+   *
+   * @type string[]
+   */
+  @Input() compactedBreakpoints: string[] = ['xs', 'is', 'sm', 'md', 'lg'];
+
+  /**
+   * Controls on which screen sizes sidebar should be switched to collapsed state.
+   * Works only when responsive mode is on.
+   * Default values are `['xs', 'is']`.
+   *
+   * @type string[]
+   */
+  @Input() collapsedBreakpoints: string[] = ['xs', 'is'];
+
   private mediaQuerySubscription: Subscription;
   private responsiveState = NbSidebarComponent.RESPONSIVE_STATE_PC;
 
   constructor(private sidebarService: NbSidebarService,
-              private themeService: NbThemeService,
-              private element: ElementRef) {
+    private themeService: NbThemeService,
+    private element: ElementRef) {
   }
 
   toggleResponsive(enabled: boolean) {
@@ -241,6 +259,12 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
     }
   }
 
+  ngOnChanges(changes) {
+    if (changes.responsive) {
+      this.toggleResponsive(this.responsiveValue);
+    }
+  }
+
   ngOnInit() {
     this.sidebarService.onToggle()
       .pipe(takeWhile(() => this.alive))
@@ -283,7 +307,7 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
       const linkChildren = ['span', 'i'];
 
       // if we clicked on span - get the link
-      if (linkChildren.indexOf(link.tagName.toLowerCase()) !== -1 && link.parentNode) {
+      if (linkChildren.includes(link.tagName.toLowerCase()) && link.parentNode) {
         link = event.target.parentNode;
       }
 
@@ -335,10 +359,10 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
 
     const closedStates = [NbSidebarComponent.STATE_COMPACTED, NbSidebarComponent.STATE_COLLAPSED];
     if (compact) {
-      this.state = closedStates.indexOf(this.stateValue) >= 0 ?
+      this.state = closedStates.includes(this.stateValue) ?
         NbSidebarComponent.STATE_EXPANDED : NbSidebarComponent.STATE_COMPACTED;
     } else {
-      this.state = closedStates.indexOf(this.stateValue) >= 0 ?
+      this.state = closedStates.includes(this.stateValue) ?
         NbSidebarComponent.STATE_EXPANDED : NbSidebarComponent.STATE_COLLAPSED;
     }
   }
@@ -347,20 +371,20 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
     return this.themeService.onMediaQueryChange()
       .subscribe(([prev, current]: [NbMediaBreakpoint, NbMediaBreakpoint]) => {
 
-        // TODO: get width by the key and define only max width for the tablets and mobiles
-        const tablet = ['xs', 'is', 'sm', 'md', 'lg'];
-        const mobile = ['xs', 'is'];
+        const isCollapsed = this.collapsedBreakpoints.includes(current.name);
+        const isCompacted = this.compactedBreakpoints.includes(current.name);
 
-        if (tablet.indexOf(current.name) !== -1) {
+        if (isCompacted) {
           this.fixed = true;
           this.compact();
           this.responsiveState = NbSidebarComponent.RESPONSIVE_STATE_TABLET;
         }
-        if (mobile.indexOf(current.name) !== -1) {
+        if (isCollapsed) {
+          this.fixed = true;
           this.collapse();
           this.responsiveState = NbSidebarComponent.RESPONSIVE_STATE_MOBILE;
         }
-        if (tablet.indexOf(current.name) === -1  && prev.width < current.width) {
+        if (!isCollapsed && !isCollapsed && prev.width < current.width) {
           this.expand();
           this.fixed = false;
           this.responsiveState = NbSidebarComponent.RESPONSIVE_STATE_PC;