From b00b7bca6a72949d7d4a1ce6b1d7251004ccf74b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Sat, 19 Dec 2015 14:04:28 -0500 Subject: [PATCH] refactor(searchbar): fixed searchbar when undefined value is passed or no ngModel at all, fixed style of cancel button on hover removed unused broken searchbar tests. references #247 --- ionic/components/searchbar/searchbar.ios.scss | 4 + ionic/components/searchbar/searchbar.ts | 81 +++++++++++-------- .../searchbar/test/floating/index.ts | 2 - .../searchbar/test/floating/main.html | 16 +++- .../components/searchbar/test/model/index.ts | 43 ---------- .../searchbar/test/toolbar/index.ts | 4 + 6 files changed, 69 insertions(+), 81 deletions(-) delete mode 100644 ionic/components/searchbar/test/model/index.ts diff --git a/ionic/components/searchbar/searchbar.ios.scss b/ionic/components/searchbar/searchbar.ios.scss index 71e146e473..563ecdb0f9 100644 --- a/ionic/components/searchbar/searchbar.ios.scss +++ b/ionic/components/searchbar/searchbar.ios.scss @@ -186,6 +186,10 @@ ion-searchbar { ion-searchbar[#{$color-name}] { .searchbar-ios-cancel { color: $color-value; + + &:hover:not(.disable-hover) { + color: color-shade($color-value); + } } } diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index b21738b375..33a5f101b9 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -1,10 +1,11 @@ -import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter} from 'angular2/core'; +import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter, Optional} from 'angular2/core'; import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common'; import {Ion} from '../ion'; import {Config} from '../../config/config'; import {Icon} from '../icon/icon'; import {Button} from '../button/button'; +import {isDefined} from '../../util/util'; /** @@ -78,7 +79,7 @@ export class Searchbar extends Ion { @Output() clear: EventEmitter = new EventEmitter(); value: string = ''; - blurInput = true; + blurInput: boolean = true; @HostBinding('class.searchbar-focused') isFocused; @@ -98,43 +99,16 @@ export class Searchbar extends Ion { constructor( elementRef: ElementRef, config: Config, - ngControl: NgControl + @Optional() ngControl: NgControl ) { super(elementRef, config); + // If the user passed a ngControl we need to set the valueAccessor if (ngControl) { - this.ngControl = ngControl; - this.ngControl.valueAccessor = this; + ngControl.valueAccessor = this; } } - /** - * @private - * Write a new value to the element. - */ - public writeValue(value: any) { - this.value = value; - } - - public onChange = (_:any) => {}; - public onTouched = () => {}; - - /** - * @private - * Set the function to be called when the control receives a change event. - */ - public registerOnChange(fn:(_:any) => {}):void { - this.onChange = fn; - } - - /** - * @private - * Set the function to be called when the control receives a touch event. - */ - public registerOnTouched(fn:() => {}):void { - this.onTouched = fn; - } - /** * @private * On Initialization check for attributes @@ -149,9 +123,25 @@ export class Searchbar extends Ion { this.placeholder = this.placeholder || 'Search'; if (this.ngModel) this.value = this.ngModel; + this.onChange(this.value); + this.shouldLeftAlign = this.value && this.value.trim() != ''; } + /** + * @private + * After View Initialization check the value + */ + ngAfterViewInit() { + // If the user passes an undefined variable to ngModel this will warn + // and set the value to an empty string + if (!isDefined(this.value)) { + console.warn('Searchbar was passed an undefined value in ngModel. Please make sure the variable is defined.'); + this.value = ''; + this.onChange(this.value); + } + } + /** * @private * Sets the Searchbar to focused and aligned left on input focus. @@ -202,4 +192,31 @@ export class Searchbar extends Ion { this.clearInput(); this.blurInput = true; } + + /** + * @private + * Write a new value to the element. + */ + public writeValue(value: any) { + this.value = value; + } + + public onChange = (_:any) => {}; + public onTouched = () => {}; + + /** + * @private + * Set the function to be called when the control receives a change event. + */ + public registerOnChange(fn:(_:any) => {}):void { + this.onChange = fn; + } + + /** + * @private + * Set the function to be called when the control receives a touch event. + */ + public registerOnTouched(fn:() => {}):void { + this.onTouched = fn; + } } diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts index f02e06b17a..d13a79cb3d 100644 --- a/ionic/components/searchbar/test/floating/index.ts +++ b/ionic/components/searchbar/test/floating/index.ts @@ -11,8 +11,6 @@ class E2EApp { defaultSearch: string = 'test'; customPlaceholder: string = ''; defaultCancel: string = ''; - customCancel: string = ''; - customCancelAction: string = ''; constructor() { diff --git a/ionic/components/searchbar/test/floating/main.html b/ionic/components/searchbar/test/floating/main.html index 3d135a58a2..49fde59f8c 100644 --- a/ionic/components/searchbar/test/floating/main.html +++ b/ionic/components/searchbar/test/floating/main.html @@ -3,15 +3,23 @@

- Default Search: {{ defaultSearch }} + defaultSearch: {{ defaultSearch }}

Search - Custom Placeholder
- + + +

+ customPlaceholder: {{ customPlaceholder }} +

Search - Hide Cancel Button
- + + +

+ defaultCancel: {{ defaultCancel }} +

Search - Custom Cancel Button Danger
- + diff --git a/ionic/components/searchbar/test/model/index.ts b/ionic/components/searchbar/test/model/index.ts deleted file mode 100644 index 9aeda952f4..0000000000 --- a/ionic/components/searchbar/test/model/index.ts +++ /dev/null @@ -1,43 +0,0 @@ -import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common'; - -import {App} from 'ionic/ionic'; -import {SearchPipe} from 'ionic/components/searchbar/searchbar'; - - -function randomTitle() { - var items = ['Soylent', 'Pizza', 'Pumpkin', 'Apple', 'Bologna', 'Turkey', 'Kabob', 'Salad', 'Fruit bowl', 'Fish Tacos', 'Chimichongas', 'Meatloaf']; - return items[Math.floor(Math.random() * items.length)]; -} - -@App({ - templateUrl: 'main.html', - providers: [NgControl], - directives: [FORM_DIRECTIVES] -}) -class E2EApp { - constructor() { - var fb = new FormBuilder(); - - this.searchQuery = ''; - - this.items = [] - for(let i = 0; i < 100; i++) { - this.items.push({ - title: randomTitle() - }) - } - } - - getItems() { - var q = this.searchQuery; - if(q.trim() == '') { - return this.items; - } - return this.items.filter((v) => { - if(v.title.toLowerCase().indexOf(q.toLowerCase()) >= 0) { - return true; - } - return false; - }) - } -} diff --git a/ionic/components/searchbar/test/toolbar/index.ts b/ionic/components/searchbar/test/toolbar/index.ts index bf5a6c4b9d..a0c90e1e25 100644 --- a/ionic/components/searchbar/test/toolbar/index.ts +++ b/ionic/components/searchbar/test/toolbar/index.ts @@ -7,6 +7,10 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar'; templateUrl: 'main.html' }) class E2EApp { + defaultToolbarSearch: string = ''; + primaryToolbarSearch: string = ''; + dangerToolbarSearch: string = ''; + lightToolbarSearch: string = ''; constructor() {