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

fix(textInputs): register components, don't use Query

Browse Source
This commit is contained in:
Adam Bradley
2015-10-06 22:20:40 -05:00
parent d0a077c535
commit f7bed3e098
4 changed files with 77 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,61 +11,6 @@ import * as dom from '../../util/dom';
import {IonicPlatform} from '../../platform/platform';
/**
* TODO
*/
@Directive({
selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel]',
property: [
'tabIndex'
],
host: {
'[tabIndex]': 'tabIndex',
'[attr.aria-labelledby]': 'labelledBy',
'class': 'text-input input'
}
})
export class TextInputElement {
/**
* TODO
* @param {string} type The value of the underlying element's type attribute.
* @param {ElementRef} elementRef TODO
* @param {IonicConfig} config TODO
*/
constructor(
@Attribute('type') type: string,
elementRef: ElementRef,
config: IonicConfig
) {
this.type = type;
this.elementRef = elementRef;
this.tabIndex = this.tabIndex || '';
}
/**
* Focus the input.
*/
setFocus() {
this.elementRef.nativeElement.focus();
}
/**
* Whether the input has focus or not.
* @returns {boolean} true if the input has focus, otherwise false.
*/
get hasFocus() {
return dom.hasFocus(this.elementRef);
}
/**
* Whether the input has a value.
* @returns {boolean} true if the input has a value, otherwise false.
*/
get hasValue() {
return (this.elementRef.nativeElement.value !== '');
}
}
/**
* TODO
*/
@ -104,9 +49,7 @@ export class TextInput extends Ion {
app: IonicApp,
ngZone: NgZone,
platform: IonicPlatform,
@Optional() @Host() scrollView: Content,
@Query(TextInputElement) inputQry: QueryList<TextInputElement>,
@Query(Label) labelQry: QueryList<Label>
@Optional() @Host() scrollView: Content
) {
super(elementRef, config);
@ -118,33 +61,31 @@ export class TextInput extends Ion {
this.app = app;
this.zone = ngZone;
this.platform = platform;
this.inputQry = inputQry;
this.labelQry = labelQry;
this.keyboardHeight = this.config.get('keyboardHeight');
}
registerInputElement(textInputElement) {
this.input = textInputElement;
this.type = textInputElement.type;
textInputElement.tabIndex = -1;
}
registerLabel(label) {
this.label = label;
}
/**
* TODO
*/
onInit() {
super.onInit();
let label = this.labelQry.first;
this.input = this.inputQry.first;
if (this.input) {
this.type = this.input.type;
this.input.tabIndex = -1;
if (label) {
label.id = (label.id || 'label-' + this.id);
this.input.labelledBy = label.id;
}
if (this.input && this.label) {
this.input.labelledBy = this.label.id = (this.label.id || 'label-' + this.id);
}
let self = this;
self.scrollMove = (ev) => {
self.deregListeners();
@ -440,4 +381,62 @@ export class TextInput extends Ion {
}
/**
* TODO
*/
@Directive({
selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel]',
inputs: [
'tabIndex'
],
host: {
'[tabIndex]': 'tabIndex',
'[attr.aria-labelledby]': 'labelledBy',
'class': 'text-input input'
}
})
export class TextInputElement {
/**
* TODO
* @param {string} type The value of the underlying element's type attribute.
* @param {ElementRef} elementRef TODO
* @param {IonicConfig} config TODO
*/
constructor(
@Attribute('type') type: string,
elementRef: ElementRef,
@Optional() textInput: TextInput
) {
this.type = type;
this.elementRef = elementRef;
this.tabIndex = this.tabIndex || '';
textInput && textInput.registerInputElement(this);
}
/**
* Focus the input.
*/
setFocus() {
this.elementRef.nativeElement.focus();
}
/**
* Whether the input has focus or not.
* @returns {boolean} true if the input has focus, otherwise false.
*/
get hasFocus() {
return dom.hasFocus(this.elementRef);
}
/**
* Whether the input has a value.
* @returns {boolean} true if the input has a value, otherwise false.
*/
get hasValue() {
return (this.elementRef.nativeElement.value !== '');
}
}
const SCROLL_INTO_VIEW_DURATION = 400;