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

fix(searchbar): fix left align and add elementRef back to input component

Browse Source
This commit is contained in:
Brandy Carney
2015-12-18 19:08:58 -05:00
parent 53dd312b39
commit df035003f7
1 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,9 @@ export class SearchbarInput {
this.onChange(ev.target.value); this.onChange(ev.target.value);
} }
constructor(ngControl: NgControl) { constructor(ngControl: NgControl, elementRef: ElementRef) {
this.elementRef = elementRef;
if (!ngControl) return; if (!ngControl) return;
this.ngControl = ngControl; this.ngControl = ngControl;
@ -90,8 +92,8 @@ export class SearchbarInput {
'<icon arrow-back></icon>' + '<icon arrow-back></icon>' +
'</button>' + '</button>' +
'<div class="searchbar-search-icon"></div>' + '<div class="searchbar-search-icon"></div>' +
'<input (blur)="inputBlurred()" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' + '<input [value]="value" (blur)="inputBlurred()" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
'<button clear *ngIf="query" class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' + '<button clear *ngIf="value" class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' +
'</div>' + '</div>' +
'<button clear (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>', '<button clear (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput] directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput]
@ -110,14 +112,7 @@ export class Searchbar extends Ion {
@HostBinding('class.searchbar-focused') isFocused; @HostBinding('class.searchbar-focused') isFocused;
@HostBinding('class.searchbar-left-aligned') @HostBinding('class.searchbar-left-aligned') shouldLeftAlign;
/**
* @private
* Check if the Searchbar has a value and left align if so
*/
private get shouldLeftAlign() {
return this.value && this.value.trim() != '';
};
value: string = ''; value: string = '';
blurInput = true; blurInput = true;
@ -127,7 +122,6 @@ export class Searchbar extends Ion {
config: Config, config: Config,
) { ) {
super(elementRef, config); super(elementRef, config);
this.elementRef = elementRef;
} }
/** /**
@ -144,7 +138,7 @@ export class Searchbar extends Ion {
this.placeholder = this.placeholder || 'Search'; this.placeholder = this.placeholder || 'Search';
if (this.ngModel) this.value = this.ngModel; if (this.ngModel) this.value = this.ngModel;
console.log(this.value); this.shouldLeftAlign = this.value && this.value.trim() != '';
} }
/** /**
@ -153,6 +147,7 @@ export class Searchbar extends Ion {
*/ */
inputFocused() { inputFocused() {
this.isFocused = true; this.isFocused = true;
this.shouldLeftAlign = true;
} }
/** /**
@ -164,11 +159,13 @@ export class Searchbar extends Ion {
// blurInput determines if it should blur // blurInput determines if it should blur
// if we are clearing the input we still want to stay focused in the input // if we are clearing the input we still want to stay focused in the input
if (this.blurInput == false) { if (this.blurInput == false) {
console.log(this.searchbarInput);
this.searchbarInput.elementRef.nativeElement.focus(); this.searchbarInput.elementRef.nativeElement.focus();
this.blurInput = true; this.blurInput = true;
return; return;
} }
this.isFocused = false; this.isFocused = false;
this.shouldLeftAlign = this.value && this.value.trim() != '';
} }
/** /**