From 53dd312b39c508a4c893d3c78d5e082ed12db168 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 18 Dec 2015 18:04:15 -0500 Subject: [PATCH] refactor(searchbar): fixing event emitters, outputs and inputs, removing ngControl requirement from Searchbar --- ionic/components/searchbar/searchbar.ts | 75 +++++++------------ .../searchbar/test/floating/index.ts | 16 ++-- .../searchbar/test/floating/main.html | 8 +- ionic/components/text-input/text-input.ts | 2 - 4 files changed, 39 insertions(+), 62 deletions(-) diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index 88dd159e66..29e300027f 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -1,5 +1,4 @@ -import {ElementRef, Renderer, Component, Directive} from 'angular2/core'; -import {Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter, Optional} from 'angular2/core'; +import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter} from 'angular2/core'; import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common'; import {Ion} from '../ion'; @@ -25,14 +24,7 @@ export class SearchbarInput { this.onChange(ev.target.value); } - constructor( - @Optional ngControl: NgControl, - elementRef: ElementRef, - renderer: Renderer - ) { - this.renderer = renderer; - this.elementRef = elementRef; - + constructor(ngControl: NgControl) { if (!ngControl) return; this.ngControl = ngControl; @@ -77,7 +69,7 @@ export class SearchbarInput { * * @usage * ```html - * + * * ``` * * @property {string} [cancelButtonText=Cancel] - Sets the cancel button text to the value passed in @@ -86,6 +78,7 @@ export class SearchbarInput { * * @property {Any} [input] - Expression to evaluate when the Searchbar input has changed * @property {Any} [cancel] - Expression to evaluate when the cancel button is clicked. + * @property {Any} [clear] - Expression to evaluate when the clear input button is clicked. * * @see {@link /docs/v2/components#search Search Component Docs} */ @@ -93,23 +86,27 @@ export class SearchbarInput { selector: 'ion-searchbar', template: '
' + - '' + '
' + - '' + + '' + '' + '
' + - '', + '', directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput] }) export class Searchbar extends Ion { - @Input cancelButtonText: string; - @Input hideCancelButton: any; - @Input placeholder: string; + @ViewChild(SearchbarInput) searchbarInput; - // @Output input: EventEmitter = new EventEmitter(); - @Output cancel: EventEmitter = new EventEmitter(); + @Input() cancelButtonText: string; + @Input() hideCancelButton: any; + @Input() placeholder: string; + @Input() ngModel: any; + + @Output() input: EventEmitter = new EventEmitter(); + @Output() cancel: EventEmitter = new EventEmitter(); + @Output() clear: EventEmitter = new EventEmitter(); @HostBinding('class.searchbar-focused') isFocused; @@ -118,30 +115,19 @@ export class Searchbar extends Ion { * @private * Check if the Searchbar has a value and left align if so */ - private shouldLeftAlign() { - return this.searchbarInput && this.searchbarInput.value && this.searchbarInput.value.trim() != ''; - } + private get shouldLeftAlign() { + return this.value && this.value.trim() != ''; + }; - @ViewChild(SearchbarInput) searchbarInput; - - query: string = ''; + value: string = ''; blurInput = true; constructor( elementRef: ElementRef, config: Config, - ngControl: NgControl, - renderer: Renderer ) { super(elementRef, config); - this.renderer = renderer; this.elementRef = elementRef; - - // If there is no control then we shouldn't do anything - if (!ngControl) return; - - this.ngControl = ngControl; - this.ngControl.valueAccessor = this; } /** @@ -156,6 +142,9 @@ export class Searchbar extends Ion { this.cancelButtonText = this.cancelButtonText || 'Cancel'; this.placeholder = this.placeholder || 'Search'; + + if (this.ngModel) this.value = this.ngModel; + console.log(this.value); } /** @@ -187,9 +176,9 @@ export class Searchbar extends Ion { * Clears the input field and triggers the control change. */ clearInput() { - this.searchbarInput.writeValue(''); - this.searchbarInput.onChange(''); + this.value = ''; this.blurInput = false; + this.clear.emit(this); } /** @@ -198,19 +187,9 @@ export class Searchbar extends Ion { * the clearInput function doesn't want the input to blur * then calls the custom cancel function if the user passed one in. */ - cancelSearchbar(ev, value) { + cancelSearchbar() { this.clearInput(); this.blurInput = true; - console.log("should cancel"); - this.cancel.next(); + this.cancel.emit(this); } - - /** - * @private - * Updates the value of query - */ - updateQuery(value) { - this.query = value; - this.input.emit(); - } } diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts index 342d36b12b..f106043615 100644 --- a/ionic/components/searchbar/test/floating/index.ts +++ b/ionic/components/searchbar/test/floating/index.ts @@ -18,15 +18,15 @@ class E2EApp { } - onCancelSearchbar(ev) { - console.log("Clicked cancel action with", ev); + onClearSearchbar(searchbar) { + // console.log("Clicked clear input on", searchbar.value); } - triggerInput(ev) { - // The defaultSearch doesn't get updated before this function is called - // so we have to wrap it in a timeout - setTimeout(() => { - console.log("Triggered input", ev); - }); + onCancelSearchbar(searchbar) { + console.log("Clicked cancel button with", searchbar.value); + } + + triggerInput(searchbar) { + // console.log("Triggered input", searchbar.value); } } diff --git a/ionic/components/searchbar/test/floating/main.html b/ionic/components/searchbar/test/floating/main.html index 318bcb9fab..3d135a58a2 100644 --- a/ionic/components/searchbar/test/floating/main.html +++ b/ionic/components/searchbar/test/floating/main.html @@ -1,17 +1,17 @@
Search - Default
- +

Default Search: {{ defaultSearch }}

Search - Custom Placeholder
- +
Search - Hide Cancel Button
- +
Search - Custom Cancel Button Danger
- + diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index f64ffb1218..78cc86fc9f 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -489,10 +489,8 @@ export class TextInputElement { } ngOnInit() { - if (this.ngModel) console.log("Value", this.ngModel); if (this.ngModel) this.value = this.ngModel; this.wrapper && this.wrapper.hasValue(this.value); - console.log(this.value); } focusChange(changed) {