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

feat(text-input): moar code for clear input button

Browse Source 
references #586
This commit is contained in:
Brandy Carney
2015-12-29 21:13:21 -05:00
parent e761ab908b
commit 9c4a4ba5a7
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ionic/components/text-input/text-input.ts
View File

@ -1,4 +1,4 @@
import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input} from 'angular2/core'; import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input, ContentChild} from 'angular2/core';
import {NgIf} from 'angular2/common'; import {NgIf} from 'angular2/common';
import {NavController} from '../nav/nav-controller'; import {NavController} from '../nav/nav-controller';
@ -67,16 +67,20 @@ import {Button} from '../button/button';
'<div class="item-inner">' + '<div class="item-inner">' +
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'<input [type]="type" aria-hidden="true" scroll-assist *ngIf="scrollAssist">' + '<input [type]="type" aria-hidden="true" scroll-assist *ngIf="scrollAssist">' +
'<button clear *ngIf="clearInput" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' + '<button clear *ngIf="clearInput && value" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
'</div>', '</div>',
directives: [NgIf, forwardRef(() => InputScrollAssist), Button] directives: [NgIf, forwardRef(() => InputScrollAssist), forwardRef(() => TextInputElement), Button]
}) })
export class TextInput { export class TextInput {
@ContentChild(forwardRef(() => TextInputElement)) textInputElement;
/** /**
* @private * @private
*/ */
@Input() clearInput: any; @Input() clearInput: any;
value: any = '';
constructor( constructor(
form: Form, form: Form,
elementRef: ElementRef, elementRef: ElementRef,
@ -120,13 +124,6 @@ export class TextInput {
this.input && this.input.elementRef.nativeElement.classList.contains(className); this.input && this.input.elementRef.nativeElement.classList.contains(className);
} }
/**
* @private
*/
clearTextInput() {
console.log("Should clear input");
}
/** /**
* @private * @private
*/ */
@ -164,7 +161,7 @@ export class TextInput {
*/ */
ngAfterViewInit() { ngAfterViewInit() {
if (this.input && this.label) { if (this.input && this.label) {
// if there is an input and an label // if there is an input and a label
// then give the label an ID // then give the label an ID
// and tell the input the ID of who it's labelled by // and tell the input the ID of who it's labelled by
this.input.labelledBy(this.label.id); this.input.labelledBy(this.label.id);
@ -189,6 +186,14 @@ export class TextInput {
}; };
} }
/**
* @private
*/
clearTextInput() {
console.log("Should clear input");
console.log(this.textInputElement.value);
}
/** /**
* @private * @private
*/ */
@ -427,6 +432,7 @@ export class TextInput {
*/ */
hasValue(inputValue) { hasValue(inputValue) {
this.renderer.setElementClass(this.elementRef, 'input-has-value', inputValue && inputValue !== ''); this.renderer.setElementClass(this.elementRef, 'input-has-value', inputValue && inputValue !== '');
this.value = inputValue;
} }
/** /**
@ -499,7 +505,7 @@ export class TextInputElement {
@Attribute('type') type: string, @Attribute('type') type: string,
elementRef: ElementRef, elementRef: ElementRef,
renderer: Renderer, renderer: Renderer,
@Optional() wrapper: TextInput, @Optional() wrapper: TextInput
) { ) {
this.type = type; this.type = type;
this.elementRef = elementRef; this.elementRef = elementRef;