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

Misc 6

Browse Source
This commit is contained in:
Manuel Mtz-Almeida
2017-03-29 19:32:26 +02:00
parent 8eef99d82f
commit 84e84d3280
4 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/datetime/datetime.ts
View File

@ -498,7 +498,7 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
picker.addButton({ picker.addButton({
text: this.cancelText, text: this.cancelText,
role: 'cancel', role: 'cancel',
handler: () => this.ionCancel.emit(null) handler: () => this.ionCancel.emit(this)
}); });
picker.addButton({ picker.addButton({
text: this.doneText, text: this.doneText,

3
src/components/searchbar/searchbar.ts
View File

@ -287,8 +287,8 @@ export class Searchbar extends BaseInput<string> {
* Update the Searchbar input value when the input changes * Update the Searchbar input value when the input changes
*/ */
inputChanged(ev: any) { inputChanged(ev: any) {
this.ionInput.emit(ev);
this.value = ev.target.value; this.value = ev.target.value;
this.ionInput.emit(ev);
} }
/** /**
@ -331,6 +331,7 @@ export class Searchbar extends BaseInput<string> {
let value = this._value; let value = this._value;
if (isPresent(value) && value !== '') { if (isPresent(value) && value !== '') {
this.value = ''; // DOM WRITE this.value = ''; // DOM WRITE
this.ionInput.emit(ev);
} }
}, 16 * 4); }, 16 * 4);
this._shouldBlur = false; this._shouldBlur = false;

12
src/components/searchbar/test/basic/pages/root-page/root-page.html
View File

@ -1,33 +1,33 @@
<ion-content> <ion-content>
<h5 padding-left> Search - Default </h5> <h5 padding-left> Search - Default </h5>
<ion-searchbar [(ngModel)]="defaultSearch" type="tel" showCancelButton debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar> <ion-searchbar [(ngModel)]="defaultSearch" type="tel" showCancelButton debounce="500" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<h5 padding-left> Search - Animated </h5> <h5 padding-left> Search - Animated </h5>
<ion-searchbar animated="true" showCancelButton debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar> <ion-searchbar animated="true" showCancelButton debounce="500" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<p padding-left> <p padding-left>
defaultSearch: <b>{{ defaultSearch }}</b> defaultSearch: <b>{{ defaultSearch }}</b>
</p> </p>
<h5 padding-left> Search - Custom Placeholder </h5> <h5 padding-left> Search - Custom Placeholder </h5>
<ion-searchbar [autocorrect]="isAutocorrect" showCancelButton="true" [autocomplete]="isAutocomplete" [spellcheck]="isSpellcheck" type="number" [(ngModel)]="customPlaceholder" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" placeholder="Filter Schedules"></ion-searchbar> <ion-searchbar [autocorrect]="isAutocorrect" showCancelButton="true" [autocomplete]="isAutocomplete" [spellcheck]="isSpellcheck" type="number" placeholder="Filter Schedules" [(ngModel)]="customPlaceholder" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<p padding-left> <p padding-left>
customPlaceholder: <b>{{ customPlaceholder }}</b> customPlaceholder: <b>{{ customPlaceholder }}</b>
</p> </p>
<h5 padding-left> Search - No Cancel Button </h5> <h5 padding-left> Search - No Cancel Button </h5>
<ion-searchbar autocorrect="off" autocomplete="off" spellcheck="true" type="text" [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" showCancelButton="false"></ion-searchbar> <ion-searchbar autocorrect="off" autocomplete="off" spellcheck="true" type="text" [(ngModel)]="defaultCancel" showCancelButton="false" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<p padding-left> <p padding-left>
defaultCancel: <b>{{ defaultCancel }}</b> defaultCancel: <b>{{ defaultCancel }}</b>
</p> </p>
<h5 padding-left> Search - Custom Cancel Button Danger </h5> <h5 padding-left> Search - Custom Cancel Button Danger </h5>
<ion-searchbar (ionInput)="triggerInput($event)" showCancelButton (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" color="danger"></ion-searchbar> <ion-searchbar showCancelButton cancelButtonText="Really Long Cancel" color="danger" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<h5 padding-left> Search - Value passed </h5> <h5 padding-left> Search - Value passed </h5>
<ion-searchbar value="mysearch" showCancelButton (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" color="dark"></ion-searchbar> <ion-searchbar value="mysearch" cancelButtonText="Really Long Cancel" color="dark" showCancelButton (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<h5 padding-left> Search - Mode iOS</h5> <h5 padding-left> Search - Mode iOS</h5>
<ion-searchbar mode="ios" animated="true" showCancelButton placeholder="Search"></ion-searchbar> <ion-searchbar mode="ios" animated="true" showCancelButton placeholder="Search"></ion-searchbar>

14
src/components/searchbar/test/basic/pages/root-page/root-page.ts
View File

@ -19,23 +19,27 @@ export class RootPage {
} }
onClearSearchbar(ev: any) { onClearSearchbar(ev: any) {
console.log('ionClear', ev.value); console.log('ionClear', ev);
} }
onCancelSearchbar(ev: any) { onCancelSearchbar(ev: any) {
console.log('ionCancel', ev.value); console.log('ionCancel', ev);
} }
triggerInput(ev: any) { triggerInput(ev: any) {
console.log('ionInput', ev.value); console.log('ionInput', ev);
}
changedInput(ev: any) {
console.log('ionChange', ev);
} }
inputBlurred(ev: any) { inputBlurred(ev: any) {
console.log('ionBlur', ev.value); console.log('ionBlur', ev);
} }
inputFocused(ev: any) { inputFocused(ev: any) {
console.log('ionFocus', ev.value); console.log('ionFocus', ev);
} }
ngAfterViewInit() { ngAfterViewInit() {