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

refactor(all): consistent inputs

Browse Source 
fixes #8578
This commit is contained in:
Manu Mtz.-Almeida
2017-03-22 00:10:52 +01:00
committed by Manuel Mtz-Almeida
parent 54acc74fdb
commit 9a4d81b329
19 changed files with 961 additions and 1000 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/components/select/select.ts
View File

@ -1,13 +1,13 @@
import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { AfterViewInit, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ActionSheet } from '../action-sheet/action-sheet';
import { Alert } from '../alert/alert';
import { App } from '../app/app';
import { Config } from '../../config/config';
import { Form } from '../../util/form';
import { Ion } from '../ion';
import { isBlank, isCheckedProperty, isTrueProperty, deepCopy } from '../../util/util';
import { BaseInput } from '../../util/base-input';
import { isCheckedProperty, isTrueProperty, isBlank, deepCopy } from '../../util/util';
import { Item } from '../item/item';
import { NavController } from '../../navigation/nav-controller';
import { Option } from '../option/option';
@ -141,21 +141,13 @@ export const SELECT_VALUE_ACCESSOR: any = {
providers: [SELECT_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None,
})
export class Select extends Ion implements AfterContentInit, ControlValueAccessor, OnDestroy {
_disabled: any = false;
_labelId: string;
export class Select extends BaseInput<string[]> implements AfterViewInit, OnDestroy {
_multi: boolean = false;
_options: QueryList<Option>;
_values: string[] = [];
_texts: string[] = [];
_text: string = '';
_fn: Function;
_isOpen: boolean = false;
/**
* @hidden
*/
id: string;
/**
* @input {string} The text to display on the cancel button. Default: `Cancel`.
@ -190,11 +182,6 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
*/
@Input() selectedText: string = '';
/**
* @output {any} Emitted when the selection has changed.
*/
@Output() ionChange: EventEmitter<any> = new EventEmitter();
/**
* @output {any} Emitted when the selection was cancelled.
*/
@ -202,22 +189,26 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
constructor(
private _app: App,
private _form: Form,
form: Form,
public config: Config,
elementRef: ElementRef,
renderer: Renderer,
@Optional() public _item: Item,
@Optional() item: Item,
@Optional() private _nav: NavController
) {
super(config, elementRef, renderer, 'select');
super(config, elementRef, renderer, 'select', form, item, null);
}
_form.register(this);
/**
* @hidden
*/
ngAfterViewInit() {
this._initialize();
}
if (_item) {
this.id = 'sel-' + _item.registerInput('select');
this._labelId = 'lbl-' + _item.id;
this._item.setElementClass('item-select', true);
}
ngAfterContentInit() {
this._inputUpdated();
}
@HostListener('click', ['$event'])
@ -233,16 +224,14 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
@HostListener('keyup.space')
_keyup() {
if (!this._isOpen) {
this.open();
}
this.open();
}
/**
* Open the select interface.
*/
open() {
if (this._disabled) {
if (this._isFocus || this._disabled) {
return;
}
@ -284,8 +273,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
role: (input.selected ? 'selected' : ''),
text: input.text,
handler: () => {
this.onChange(input.value);
this.ionChange.emit(input.value);
this.value = input.value;
input.ionSelect.emit(input.value);
}
};
@ -340,19 +328,15 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
overlay.addButton({
text: this.okText,
handler: (selectedValues: any) => {
this.onChange(selectedValues);
this.ionChange.emit(selectedValues);
}
handler: (selectedValues: any) => this.value = selectedValues
});
}
overlay.present(selectOptions);
this._isOpen = true;
this._setFocus();
overlay.onDidDismiss(() => {
this._isOpen = false;
this._setBlur();
});
}
@ -377,20 +361,6 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
return (this._multi ? this._texts : this._texts.join());
}
/**
* @hidden
*/
checkHasValue(inputValue: any) {
if (this._item) {
let hasValue: boolean;
if (Array.isArray(inputValue)) {
hasValue = inputValue.length > 0;
} else {
hasValue = !isBlank(inputValue);
}
this._item.setElementClass('input-has-value', hasValue);
}
}
/**
* @private
@ -399,19 +369,21 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
set options(val: QueryList<Option>) {
this._options = val;
if (!this._values.length) {
if (this._values.length === 0) {
// there are no values set at this point
// so check to see who should be selected
this._values = val.filter(o => o.selected).map(o => o.value);
}
this._updOpts();
this._inputUpdated();
}
/**
* @hidden
*/
_updOpts() {
_inputUpdated() {
const val = this.value;
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this._texts = [];
if (this._options) {
@ -430,84 +402,4 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
this._text = this._texts.join(', ');
}
/**
* @input {boolean} If true, the user cannot interact with this element.
*/
@Input()
get disabled(): boolean {
return this._disabled;
}
set disabled(val: boolean) {
this._disabled = isTrueProperty(val);
this._item && this._item.setElementClass('item-select-disabled', this._disabled);
}
/**
* @hidden
*/
writeValue(val: any) {
console.debug('select, writeValue', val);
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this._updOpts();
this.checkHasValue(val);
}
/**
* @hidden
*/
ngAfterContentInit() {
this._updOpts();
}
/**
* @hidden
*/
registerOnChange(fn: Function): void {
this._fn = fn;
this.onChange = (val: any) => {
console.debug('select, onChange', val);
fn(val);
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this._updOpts();
this.checkHasValue(val);
this.onTouched();
};
}
/**
* @hidden
*/
registerOnTouched(fn: any) { this.onTouched = fn; }
/**
* @hidden
*/
onChange(val: any) {
// onChange used when there is not an formControlName
console.debug('select, onChange w/out formControlName', val);
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this._updOpts();
this.checkHasValue(val);
this.onTouched();
}
/**
* @hidden
*/
onTouched() { }
/**
* @hidden
*/
setDisabledState(isDisabled: boolean) {
this.disabled = isDisabled;
}
/**
* @hidden
*/
ngOnDestroy() {
this._form.deregister(this);
}
}