updates for search component isCollapsible option (#337)

blackbaud · Feb 7, 2017 · 92b2c25 · 92b2c25
1 parent e30f869
commit 92b2c25
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 43 deletions.
diff --git a/src/app/components/grid/index.html b/src/app/components/grid/index.html
@@ -12,7 +12,6 @@
     </sky-demo-page-property>
     <sky-demo-page-property
         propertyName="selectedColumnIds"
-        defaultValue=""
         isOptional="true"
     >
       Specifies the columns to be displayed by the grid. Will match the <code>id</code> or <code>field</code> of the column. If no array is provided, then all columns are shown.
@@ -28,15 +27,13 @@
     </sky-demo-page-property>
     <sky-demo-page-property
         propertyName="height"
-        defaultValue="category"
         isOptional="true"
     >
       Specifies the height of the grid.
       Acceptable values: <code>number</code>.
     </sky-demo-page-property>
     <sky-demo-page-property
         propertyName="width"
-        defaultValue="category"
         isOptional="true"
     >
       Specifies the width of the grid.

diff --git a/src/app/components/list-view-grid/index.html b/src/app/components/list-view-grid/index.html
@@ -6,23 +6,20 @@
   <sky-demo-page-properties>
     <sky-demo-page-property
         propertyName="name"
-        defaultValue=""
         isOptional="false"
     >
       Specifies the name of the view.
       Acceptable values: <code>string</code>.
     </sky-demo-page-property>
     <sky-demo-page-property
         propertyName="hiddenColumns"
-        defaultValue=""
         isOptional="true"
     >
       Specifies the columns to be hidden by default. Will match off of the id or field of the item.
       Acceptable values: <code>Array of strings or Observable Array of strings</code>.
     </sky-demo-page-property>
     <sky-demo-page-property
         propertyName="displayedColumns"
-        defaultValue=""
         isOptional="true"
     >
       Specifies columns to be displayed by default. Will match off of the id or field of the item.
@@ -54,7 +51,6 @@
     </sky-demo-page-property>
     <sky-demo-page-property
         propertyName="search"
-        defaultValue=""
         isOptional="true"
     >
       Specify a search function to apply on the view data.

diff --git a/src/app/components/search/index.html b/src/app/components/search/index.html
@@ -7,7 +7,6 @@
     <sky-demo-page-property
       propertyName="searchText"
       isOptional="true"
-
     >
       Specifies search text for the input.
     </sky-demo-page-property>
@@ -17,6 +16,13 @@
       defaultValue="Find in this list">
       Specifies placeholder text for the search input.
     </sky-demo-page-property>
+    <sky-demo-page-property
+      propertyName="isCollapsible"
+      isOptional="true"
+      defaultValue="true"
+    >
+      Specifies whether the search input should collapse into a search button on small screens.
+    </sky-demo-page-property>
   </sky-demo-page-properties>
 
   <sky-demo-page-properties sectionHeading="Search events">

diff --git a/src/modules/search/fixtures/search.component.fixture.html b/src/modules/search/fixtures/search.component.fixture.html
@@ -1,5 +1,6 @@
 <sky-search
   [searchText]="searchText"
+  [isCollapsible]="isCollapsible"
   [placeholderText]="placeholderText"
   (searchApply)="searchApplied($event)"
   (searchChange)="searchChanged($event)">

diff --git a/src/modules/search/fixtures/search.component.fixture.ts b/src/modules/search/fixtures/search.component.fixture.ts
@@ -18,6 +18,8 @@ export class SearchTestComponent {
   public searchText: string;
   public placeholderText: string;
 
+  public isCollapsible: boolean;
+
   public lastSearchTextApplied: string;
   public lastSearchTextChanged: string;
 

diff --git a/src/modules/search/search.component.spec.ts b/src/modules/search/search.component.spec.ts
@@ -74,7 +74,6 @@ describe('Search component', () => {
     nativeElement = fixture.nativeElement as HTMLElement;
     component = fixture.componentInstance;
     element = fixture.debugElement as DebugElement;
-    fixture.detectChanges();
   });
 
   afterEach(() => {
@@ -187,7 +186,12 @@ describe('Search component', () => {
       .toHaveCssClass('sky-search-dismiss-absolute');
   }
 
-  it('should apply search text on enter press', () => {
+  describe('standard search', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+       it('should apply search text on enter press', () => {
 
     setInput('my search text');
     let inputEl = element.query(By.css('input'));
@@ -347,4 +351,35 @@ describe('Search component', () => {
       }));
     });
   });
+
+  describe('isCollapsible false', () => {
+    it('do nothing when open button pressed', async(() => {
+      component.isCollapsible = false;
+      fixture.detectChanges();
+      triggerXsBreakpoint().then(() => {
+        fixture.detectChanges();
+        verifySearchOpenFullScreen();
+        triggerOpenButton().then(() => {
+          fixture.detectChanges();
+          verifySearchOpenFullScreen();
+        });
+      });
+    }));
+  });
+ });
+
+ describe('initialize to isCollapsible false', () => {
+   it('should do nothing when open button pressed', async(() => {
+     component.isCollapsible = false;
+      fixture.detectChanges();
+      triggerXsBreakpoint().then(() => {
+        fixture.detectChanges();
+        verifySearchOpenFullScreen();
+        triggerOpenButton().then(() => {
+          fixture.detectChanges();
+          verifySearchOpenFullScreen();
+        });
+      });
+   }));
+ });
 });
diff --git a/src/modules/search/search.component.ts b/src/modules/search/search.component.ts
@@ -70,6 +70,9 @@ export class SkySearchComponent implements OnDestroy, OnInit, OnChanges {
   @Input()
   public searchText: string;
 
+  @Input()
+  public isCollapsible: boolean = true;
+
   @Input()
   public get placeholderText(): string {
     if (this._placeholderText === undefined) {
@@ -100,13 +103,13 @@ export class SkySearchComponent implements OnDestroy, OnInit, OnChanges {
   ) {}
 
   public ngOnInit() {
-
-    this.breakpointSubscription = this.mediaQueryService.subscribe(
-      (args: SkyMediaBreakpoints) => {
-        this.mediaQueryCallback(args);
-      }
-    );
-
+    if (this.searchShouldCollapse()) {
+      this.breakpointSubscription = this.mediaQueryService.subscribe(
+        (args: SkyMediaBreakpoints) => {
+          this.mediaQueryCallback(args);
+        }
+      );
+    }
   }
 
   public ngOnChanges(changes: SimpleChanges) {
@@ -154,40 +157,46 @@ export class SkySearchComponent implements OnDestroy, OnInit, OnChanges {
   }
 
   public toggleSearchInput(showInput: boolean) {
-    if (showInput) {
-      this.inputAnimate = INPUT_SHOWN_STATE;
-    } else {
-      this.inputAnimate = INPUT_HIDDEN_STATE;
+    if (this.searchShouldCollapse()) {
+      if (showInput) {
+        this.inputAnimate = INPUT_SHOWN_STATE;
+      } else {
+        this.inputAnimate = INPUT_HIDDEN_STATE;
+      }
     }
   }
 
   public inputAnimationStart(event: AnimationTransitionEvent) {
-    this.searchAdapter.startInputAnimation(this.elRef);
+    if (this.searchShouldCollapse()) {
+      this.searchAdapter.startInputAnimation(this.elRef);
 
-    if (event.toState === INPUT_SHOWN_STATE
-      && this.mediaQueryService.current === SkyMediaBreakpoints.xs) {
-      this.mobileSearchShown = true;
-      this.searchButtonShown = false;
+      if (event.toState === INPUT_SHOWN_STATE
+        && this.mediaQueryService.current === SkyMediaBreakpoints.xs) {
+        this.mobileSearchShown = true;
+        this.searchButtonShown = false;
+      }
     }
   }
 
   public inputAnimationEnd(event: AnimationTransitionEvent) {
+    if (this.searchShouldCollapse()) {
+      this.searchAdapter.endInputAnimation(this.elRef);
 
-    this.searchAdapter.endInputAnimation(this.elRef);
+      this.searchButtonShown = event.toState === INPUT_HIDDEN_STATE
+        && this.mediaQueryService.current === SkyMediaBreakpoints.xs;
 
-    this.searchButtonShown = event.toState === INPUT_HIDDEN_STATE
-      && this.mediaQueryService.current === SkyMediaBreakpoints.xs;
-
-    if ((event.toState === INPUT_HIDDEN_STATE
-      && this.mediaQueryService.current === SkyMediaBreakpoints.xs)
-      || this.mediaQueryService.current !== SkyMediaBreakpoints.xs) {
-      this.mobileSearchShown = false;
+      if ((event.toState === INPUT_HIDDEN_STATE
+        && this.mediaQueryService.current === SkyMediaBreakpoints.xs)
+        || this.mediaQueryService.current !== SkyMediaBreakpoints.xs) {
+        this.mobileSearchShown = false;
+      }
     }
-
   }
 
   public ngOnDestroy() {
-    this.breakpointSubscription.unsubscribe();
+    if (this.breakpointSubscription) {
+      this.breakpointSubscription.unsubscribe();
+    }
   }
 
   private searchBindingChanged(changes: SimpleChanges) {
@@ -197,17 +206,23 @@ export class SkySearchComponent implements OnDestroy, OnInit, OnChanges {
 
   private shouldOpenInput() {
     return this.searchText !== '' &&
-      this.mediaQueryService.current === SkyMediaBreakpoints.xs;
+      this.mediaQueryService.current === SkyMediaBreakpoints.xs && this.searchShouldCollapse();
   }
 
   private mediaQueryCallback(args: SkyMediaBreakpoints) {
-    if (args === SkyMediaBreakpoints.xs) {
-      this.inputAnimate = INPUT_HIDDEN_STATE;
-    } else if (this.inputAnimate !== INPUT_SHOWN_STATE) {
-      this.inputAnimate = INPUT_SHOWN_STATE;
-    } else {
-      this.mobileSearchShown = false;
+    if (this.searchShouldCollapse()) {
+      if (args === SkyMediaBreakpoints.xs) {
+        this.inputAnimate = INPUT_HIDDEN_STATE;
+      } else if (this.inputAnimate !== INPUT_SHOWN_STATE) {
+        this.inputAnimate = INPUT_SHOWN_STATE;
+      } else {
+        this.mobileSearchShown = false;
+      }
     }
     this.changeRef.markForCheck();
   }
+
+  private searchShouldCollapse() {
+    return this.isCollapsible || this.isCollapsible === undefined;
+  }
 }