javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(searchbar): emit blur and focus events

Browse Source 
closes #795
This commit is contained in:
Brandy Carney
2015-12-22 15:57:53 -05:00
parent 9395ed14f7
commit f30b9889df
3 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ionic/components/searchbar/searchbar.ts
View File

@ -47,6 +47,8 @@ export class SearchbarInput {
* @property {string} [placeholder=Search] - Sets input placeholder to the value passed in * @property {string} [placeholder=Search] - Sets input placeholder to the value passed in
* *
* @property {Any} [input] - Expression to evaluate when the Searchbar input has changed * @property {Any} [input] - Expression to evaluate when the Searchbar input has changed
* @property {Any} [blur] - Expression to evaluate when the Searchbar input has blurred
* @property {Any} [focus] - Expression to evaluate when the Searchbar input has focused
* @property {Any} [cancel] - Expression to evaluate when the cancel button is clicked. * @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. * @property {Any} [clear] - Expression to evaluate when the clear input button is clicked.
* *
@ -75,6 +77,8 @@ export class Searchbar extends Ion {
@Input() ngModel: any; @Input() ngModel: any;
@Output() input: EventEmitter<Searchbar> = new EventEmitter(); @Output() input: EventEmitter<Searchbar> = new EventEmitter();
@Output() blur: EventEmitter<Searchbar> = new EventEmitter();
@Output() focus: EventEmitter<Searchbar> = new EventEmitter();
@Output() cancel: EventEmitter<Searchbar> = new EventEmitter(); @Output() cancel: EventEmitter<Searchbar> = new EventEmitter();
@Output() clear: EventEmitter<Searchbar> = new EventEmitter(); @Output() clear: EventEmitter<Searchbar> = new EventEmitter();
@ -147,6 +151,8 @@ export class Searchbar extends Ion {
* Sets the Searchbar to focused and aligned left on input focus. * Sets the Searchbar to focused and aligned left on input focus.
*/ */
inputFocused() { inputFocused() {
this.focus.emit(this);
this.isFocused = true; this.isFocused = true;
this.shouldLeftAlign = true; this.shouldLeftAlign = true;
} }
@ -164,6 +170,8 @@ export class Searchbar extends Ion {
this.blurInput = true; this.blurInput = true;
return; return;
} }
this.blur.emit(this);
this.isFocused = false; this.isFocused = false;
this.shouldLeftAlign = this.value && this.value.trim() != ''; this.shouldLeftAlign = this.value && this.value.trim() != '';
} }

8
ionic/components/searchbar/test/floating/index.ts
View File

@ -27,4 +27,12 @@ class E2EApp {
triggerInput(searchbar) { triggerInput(searchbar) {
console.log("Triggered input", searchbar); console.log("Triggered input", searchbar);
} }
inputBlurred(searchbar) {
console.log("Blurred input", searchbar);
}
inputFocused(searchbar) {
console.log("Focused input", searchbar);
}
} }

2
ionic/components/searchbar/test/floating/main.html
View File

@ -1,6 +1,6 @@
<ion-content> <ion-content>
<h5 padding-left> Search - Default </h5> <h5 padding-left> Search - Default </h5>
<ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar> <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
<p padding-left> <p padding-left>
defaultSearch: <b>{{ defaultSearch }}</b> defaultSearch: <b>{{ defaultSearch }}</b>