From ab4ad905a89fad92ff4403374fbf0388ba87e04f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 10 Dec 2015 17:51:02 -0500 Subject: [PATCH] refactor(searchbar): converting searchbar input to use a directive references #666 --- ionic/components/searchbar/searchbar.ts | 150 ++++++++++++------ .../searchbar/test/floating/index.ts | 2 +- .../searchbar/test/floating/main.html | 4 + ionic/config/directives.ts | 3 +- 4 files changed, 107 insertions(+), 52 deletions(-) diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index 29f63d85fc..54a263e1ad 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -1,4 +1,4 @@ -import {ElementRef, Pipe, NgControl, Renderer, FORM_DIRECTIVES, NgIf, NgClass} from 'angular2/angular2'; +import {ElementRef, Pipe, NgControl, Renderer, FORM_DIRECTIVES, NgIf, NgClass, Directive, Host, forwardRef, ViewChild} from 'angular2/angular2'; import {Ion} from '../ion'; import {Config} from '../../config/config'; @@ -39,14 +39,16 @@ import {Button} from '../button/button'; '
' + '' + '
' + - '' + - '' + + '' + + '' + '
' + '', - directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button] + directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)] }) export class Searchbar extends Ion { + @ViewChild(forwardRef(() => SearchbarInput)) searchbarInput; + /** * @private * This holds the searchbar input value used for querying @@ -77,8 +79,89 @@ export class Searchbar extends Ion { */ ngAfterViewInit() { // If the user passes in a value to the model we should left align - this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != ''; - this.query = this.ngControl.value || ''; + this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != ''; + this.query = this.searchbarInput.value || ''; + } + + /** + * @private + * Sets the searchbar to focused and aligned left on input focus. + */ + inputFocused() { + this.isFocused = true; + this.shouldLeftAlign = true; + } + + /** + * @private + * Sets the searchbar to not focused and checks if it should align left + * based on whether there is a value in the searchbar or not on input blur. + */ + inputBlurred() { + this.isFocused = false; + this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != ''; + } + + /** + * @private + * Clears the input field and triggers the control change. + */ + clearInput() { + this.searchbarInput.writeValue(''); + this.searchbarInput.onChange(''); + this.query = ''; + } + + /** + * @private + * Blurs the input field, clears the input field and removes the left align + * then calls the custom cancel function if the user passed one in. + */ + cancelSearchbar(event, query) { + this.searchbarInput.elementRef.nativeElement.blur(); + this.clearInput(); + this.shouldLeftAlign = false; + + this.cancelAction && this.cancelAction(event, query); + } +} + +@Directive({ + selector: '.searchbar-input', + host: { + '(focus)': 'inputFocused()', + '(blur)': 'inputBlurred()', + '(keyup)': 'inputChanged($event)' + } +}) +export class SearchbarInput { + /** + * @private + * This holds the searchbar input value used for querying + */ + query: string; + + constructor( + @Host() searchbar: Searchbar, + elementRef: ElementRef, + renderer: Renderer + ) { + this.searchbar = searchbar; + this.renderer = renderer; + this.elementRef = elementRef; + + if (!searchbar.ngControl) return; + + this.onChange = (_) => {}; + this.onTouched = (_) => {}; + + this.ngControl = searchbar.ngControl; + this.ngControl.valueAccessor = this; + } + + ngOnInit() { + if (this.ngControl) this.value = this.ngControl.value; + console.log(this.value); } /** @@ -86,7 +169,7 @@ export class Searchbar extends Ion { * Write a new value to the element. */ writeValue(value) { - this.query = value; + this.value = value; } /** @@ -107,52 +190,19 @@ export class Searchbar extends Ion { /** * @private - * Updates the value of the control when the searchbar input changes. + * Sets the Searchbar input to focused and aligned left on input focus. */ + inputFocused() { + this.searchbar.inputFocused(); + } + + inputBlurred() { + this.searchbar.inputBlurred(); + } + inputChanged(event) { this.writeValue(event.target.value); this.onChange(event.target.value); } - /** - * @private - * Sets the searchbar to focused and aligned left on input focus. - */ - inputFocused() { - this.isFocused = true; - this.shouldLeftAlign = true; - } - - /** - * @private - * Sets the searchbar to not focused and checks if it should align left - * based on whether there is a value in the searchbar or not on input blur. - */ - inputBlurred() { - this.isFocused = false; - this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != ''; - } - - /** - * @private - * Clears the input field and triggers the control change. - */ - clearInput(event) { - this.writeValue(''); - this.onChange(''); - } - - /** - * @private - * Blurs the input field, clears the input field and removes the left align - * then calls the custom cancel function if the user passed one in. - */ - cancelSearchbar(event, query) { - this.element = this.elementRef.nativeElement.querySelector('input'); - this.element.blur(); - this.clearInput(); - this.shouldLeftAlign = false; - - this.cancelAction && this.cancelAction(event, query); - } } diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts index e375587be2..408cb474c8 100644 --- a/ionic/components/searchbar/test/floating/index.ts +++ b/ionic/components/searchbar/test/floating/index.ts @@ -8,7 +8,7 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar'; directives: [FORM_DIRECTIVES] }) class E2EApp { - defaultSearch: string; + defaultSearch: string = 'filter'; customPlaceholder: string; defaultCancel: string; customCancel: string; diff --git a/ionic/components/searchbar/test/floating/main.html b/ionic/components/searchbar/test/floating/main.html index ad7b9c4be8..8824eee667 100644 --- a/ionic/components/searchbar/test/floating/main.html +++ b/ionic/components/searchbar/test/floating/main.html @@ -2,6 +2,10 @@
Search - Default
+

+ Default Search: {{ defaultSearch }} +

+
Search - Custom Placeholder
diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts index d6d2733dc1..89f05ac377 100644 --- a/ionic/config/directives.ts +++ b/ionic/config/directives.ts @@ -23,7 +23,7 @@ import {TextInput, TextInputElement} from '../components/text-input/text-input'; import {Label} from '../components/text-input/label'; import {Segment, SegmentButton} from '../components/segment/segment'; import {RadioGroup, RadioButton} from '../components/radio/radio'; -import {Searchbar} from '../components/searchbar/searchbar'; +import {Searchbar, SearchbarInput} from '../components/searchbar/searchbar'; import {Nav} from '../components/nav/nav'; import {NavPush, NavPop} from '../components/nav/nav-push'; import {NavRouter} from '../components/nav/nav-router'; @@ -77,6 +77,7 @@ export const IONIC_DIRECTIVES = [ // Forms Searchbar, + SearchbarInput, Segment, SegmentButton, Checkbox,