From d48d09b7991bfb278558d4187ca1becd00a2b8b1 Mon Sep 17 00:00:00 2001 From: Blackbaud-PatrickOFriel Date: Mon, 6 Feb 2017 16:54:03 -0500 Subject: [PATCH] updates for search component isCollapsible option --- src/app/components/grid/index.html | 3 - src/app/components/list-view-grid/index.html | 5 -- src/app/components/search/index.html | 8 +- .../fixtures/search.component.fixture.html | 1 + .../fixtures/search.component.fixture.ts | 2 + src/modules/search/search.component.spec.ts | 39 ++++++++- src/modules/search/search.component.ts | 81 +++++++++++-------- 7 files changed, 95 insertions(+), 44 deletions(-) diff --git a/src/app/components/grid/index.html b/src/app/components/grid/index.html index c1e92b715..97341b62f 100644 --- a/src/app/components/grid/index.html +++ b/src/app/components/grid/index.html @@ -12,7 +12,6 @@ Specifies the columns to be displayed by the grid. Will match the id or field of the column. If no array is provided, then all columns are shown. @@ -28,7 +27,6 @@ Specifies the height of the grid. @@ -36,7 +34,6 @@ 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 index 653e0a91a..fe996ff48 100644 --- a/src/app/components/list-view-grid/index.html +++ b/src/app/components/list-view-grid/index.html @@ -6,7 +6,6 @@ Specifies the name of the view. @@ -14,7 +13,6 @@ Specifies the columns to be hidden by default. Will match off of the id or field of the item. @@ -22,7 +20,6 @@ Specifies columns to be displayed by default. Will match off of the id or field of the item. @@ -54,7 +51,6 @@ Specify a search function to apply on the view data. @@ -62,7 +58,6 @@ Specify if the grid will have a static selector column with checkboxes. diff --git a/src/app/components/search/index.html b/src/app/components/search/index.html index 0131b54a7..2f3893f8d 100644 --- a/src/app/components/search/index.html +++ b/src/app/components/search/index.html @@ -7,7 +7,6 @@ Specifies search text for the input. @@ -17,6 +16,13 @@ defaultValue="Find in this list"> Specifies placeholder text for the search input. + + Specifies whether the search input should collapse into a search button on small screens. + diff --git a/src/modules/search/fixtures/search.component.fixture.html b/src/modules/search/fixtures/search.component.fixture.html index 48f1f081b..1556a694d 100644 --- a/src/modules/search/fixtures/search.component.fixture.html +++ b/src/modules/search/fixtures/search.component.fixture.html @@ -1,5 +1,6 @@ diff --git a/src/modules/search/fixtures/search.component.fixture.ts b/src/modules/search/fixtures/search.component.fixture.ts index 32d70aa96..e01225f87 100644 --- 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 index 448a09773..54b42d467 100644 --- 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 index 04438282c..4cecf5ee1 100644 --- a/src/modules/search/search.component.ts +++ b/src/modules/search/search.component.ts @@ -69,6 +69,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) { @@ -98,13 +101,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) { @@ -152,40 +155,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) { @@ -195,16 +204,22 @@ 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; + } } } + + private searchShouldCollapse() { + return this.isCollapsible || this.isCollapsible === undefined; + } }