javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +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: {
'showCancel': false,
'cancelText': 'Cancel',
'placeholder': 'Search'
'placeholder': 'Search',
'cancelAction': function() {
console.log('Default Cancel');
}
}
})
@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-search-icon"></div>
<input (focus)="inputFocused()" (blur)="inputBlurred()"
(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
<div class="search-bar-close-icon"></div>
(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder" [(ng-model)]="value">
<div class="search-bar-close-icon" (click)="clearInput()"></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 {
/**
* TODO
@ -71,28 +75,20 @@ export class SearchBar extends Ion {
*/
writeValue(value) {
this.value = value;
console.log('writeValue', value);
this.renderer.setElementProperty(this.elementRef, 'value', this.value);
}
registerOnChange(val) {
console.log('registerONChange', val);
}
registerOnTouched(val) {
console.log('register on touched', val);
}
inputChanged(event) {
this.value = event.target.value;
console.log('Search changed', this.value);
this.ngControl.valueAccessor.writeValue(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() {
@ -103,6 +99,11 @@ export class SearchBar extends Ion {
this.isFocused = false;
this.shouldLeftAlign = this.value.trim() != '';
}
clearInput() {
this.value = '';
this.ngControl.control.updateValue('');
}
}
/*
@ -117,13 +118,11 @@ export class SearchPipe extends Pipe {
}
transform(value, ...args) {
console.log('Transforming', value, args);
return value;
//return `${value} state:${this.state ++}`;
}
create(cdRef) {
console.log('REF', 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]
})
}
myCancelAction = function() {
console.log('myCancelAction');
}
}