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

Fix(search-bar): Fix the cancel button to clear input value. Update done/cancel button to call a cancel function

Browse Source
This commit is contained in:
jbavari
2015-10-06 16:58:15 -06:00
parent 9b60da4308
commit 7d9b8f7ec9
2 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ionic/components/search-bar/search-bar.ts
View File

@ -25,7 +25,10 @@ import {IonicComponent, IonicView} from '../../config/decorators';
defaultProperties: { defaultProperties: {
'showCancel': false, 'showCancel': false,
'cancelText': 'Cancel', 'cancelText': 'Cancel',
'placeholder': 'Search' 'placeholder': 'Search',
'cancelAction': function() {
console.log('Default Cancel');
}
} }
}) })
@IonicView({ @IonicView({
@ -33,11 +36,12 @@ import {IonicComponent, IonicView} from '../../config/decorators';
<div class="search-bar-input-container" [class.left-align]="shouldLeftAlign"> <div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">
<div class="search-bar-search-icon"></div> <div class="search-bar-search-icon"></div>
<input (focus)="inputFocused()" (blur)="inputBlurred()" <input (focus)="inputFocused()" (blur)="inputBlurred()"
(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder"> (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder" [(ng-model)]="value">
<div class="search-bar-close-icon"></div> <div class="search-bar-close-icon" (click)="clearInput()"></div>
</div> </div>
<button *ng-if="showCancel" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>` <button *ng-if="showCancel" (click)="cancelAction()" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>`
}) })
export class SearchBar extends Ion { export class SearchBar extends Ion {
/** /**
* TODO * TODO
@ -71,28 +75,20 @@ export class SearchBar extends Ion {
*/ */
writeValue(value) { writeValue(value) {
this.value = value; this.value = value;
console.log('writeValue', value);
this.renderer.setElementProperty(this.elementRef, 'value', this.value); this.renderer.setElementProperty(this.elementRef, 'value', this.value);
} }
registerOnChange(val) { registerOnChange(val) {
console.log('registerONChange', val);
} }
registerOnTouched(val) { registerOnTouched(val) {
console.log('register on touched', val);
} }
inputChanged(event) { inputChanged(event) {
this.value = event.target.value; this.value = event.target.value;
console.log('Search changed', this.value);
this.ngControl.valueAccessor.writeValue(this.value); this.ngControl.valueAccessor.writeValue(this.value);
this.ngControl.control.updateValue(this.value); this.ngControl.control.updateValue(this.value);
// this.ngControl.valueAccessor.updateValue(this.value);
// this.ngControl.updateValue(this.value);
// TODO: Better way to do this?
//this.controlDirective._control().updateValue(event.target.value);
} }
inputFocused() { inputFocused() {
@ -103,6 +99,11 @@ export class SearchBar extends Ion {
this.isFocused = false; this.isFocused = false;
this.shouldLeftAlign = this.value.trim() != ''; this.shouldLeftAlign = this.value.trim() != '';
} }
clearInput() {
this.value = '';
this.ngControl.control.updateValue('');
}
} }
/* /*
@ -117,13 +118,11 @@ export class SearchPipe extends Pipe {
} }
transform(value, ...args) { transform(value, ...args) {
console.log('Transforming', value, args);
return value; return value;
//return `${value} state:${this.state ++}`; //return `${value} state:${this.state ++}`;
} }
create(cdRef) { create(cdRef) {
console.log('REF', cdRef);
return new SearchPipe(cdRef); return new SearchPipe(cdRef);
} }
} }

3
ionic/components/search-bar/test/floating/index.ts
View File

@ -18,4 +18,7 @@ class IonicApp {
toolbarSearchQuery: ['', Validators.required] toolbarSearchQuery: ['', Validators.required]
}) })
} }
myCancelAction = function() {
console.log('myCancelAction');
}
} }