feat(value-accessors): move the value accessors into @ionic/angular

This commit is contained in:
Ken Sodemann
2017-12-05 15:03:18 -06:00
committed by GitHub
parent a2b88c5cb8
commit 5641424db3
9 changed files with 85 additions and 81 deletions

View File

@ -38,9 +38,9 @@
} }
}, },
"@angular/animations": { "@angular/animations": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.1.0-rc.1.tgz",
"integrity": "sha1-LtBb+g7SLW0VUGWHhellwfv+xac=", "integrity": "sha1-e0EflmDc8aKn0d1qDWA76+8oC+I=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
@ -172,25 +172,25 @@
} }
}, },
"@angular/common": { "@angular/common": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.1.0-rc.1.tgz",
"integrity": "sha1-AnsWuNL2PrFNn7yEoKXdkZRYhdY=", "integrity": "sha1-LiTxC4k/bUfmUWpZXRvCwIEMJ1k=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/compiler": { "@angular/compiler": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.1.0-rc.1.tgz",
"integrity": "sha1-bIjDSFVY3PhRRPVe2xKZ2ZzbP+w=", "integrity": "sha1-1sS1JkLOllo6os3CU5fPEbqfRyk=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/compiler-cli": { "@angular/compiler-cli": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.1.0-rc.1.tgz",
"integrity": "sha1-YrY+ML2ukQwyKmK3b6eQ3Ups31M=", "integrity": "sha1-zb0OPIf/wCxDCf6vyXHWdOIfIDA=",
"dev": true, "dev": true,
"requires": { "requires": {
"chokidar": "1.7.0", "chokidar": "1.7.0",
@ -200,55 +200,55 @@
} }
}, },
"@angular/core": { "@angular/core": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.1.0-rc.1.tgz",
"integrity": "sha1-6UshyuRHnK7ZSGI5sGUwKpfF/U8=", "integrity": "sha1-rcO4A4I+tR7gBkKqbVSWJHe9uOE=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/forms": { "@angular/forms": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.1.0-rc.1.tgz",
"integrity": "sha1-/u7ikEHM4ifMUOJU6+zC8Z3FKe4=", "integrity": "sha1-AJl15xMG+0/injS/Di3MPrLFplM=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/http": { "@angular/http": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.1.0-rc.1.tgz",
"integrity": "sha1-k1vquir+oZLWp1ocO419/Xh2QbA=", "integrity": "sha1-HyK7ODb04RKdO+NIhFSbbTB6TxQ=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/language-service": { "@angular/language-service": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.1.0-rc.1.tgz",
"integrity": "sha1-nWa0OxQ0b8cRutimpnfIiMVzxRs=", "integrity": "sha1-HeN+4dTmEgbKBLZp0tO63iPbXBk=",
"dev": true "dev": true
}, },
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.1.0-rc.1.tgz",
"integrity": "sha1-zPyp0XLwMxN8g/L76LcC/nIExdU=", "integrity": "sha1-s499o87vvwcL2rUwD4buez8h2wc=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/platform-browser-dynamic": { "@angular/platform-browser-dynamic": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.1.0-rc.1.tgz",
"integrity": "sha1-vuHTf3MAAw7dhV7fZjEbDUkyUtU=", "integrity": "sha1-EnSnffyozWG6Y1/q4QhIf9jBErs=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/router": { "@angular/router": {
"version": "5.1.0-beta.2", "version": "5.1.0-rc.1",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-5.1.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.1.0-rc.1.tgz",
"integrity": "sha1-oiuMDgi4HIsJULmmaKqJPp8cDkw=", "integrity": "sha1-RRxDR2PDYbdbL++see2SH24DtV8=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }

View File

@ -1,13 +1,18 @@
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { BasicInputsPageComponent } from './basic-inputs-page.component'; import { IonicAngularModule } from '@ionic/angular';
import { SharedModule } from '../shared/shared.module'; import { BasicInputsPageComponent } from './basic-inputs-page.component';
import { BasicInputsPageRoutingModule } from './basic-inputs-page-routing.module'; import { BasicInputsPageRoutingModule } from './basic-inputs-page-routing.module';
@NgModule({ @NgModule({
imports: [CommonModule, FormsModule, BasicInputsPageRoutingModule, SharedModule], imports: [
BasicInputsPageRoutingModule,
CommonModule,
FormsModule,
IonicAngularModule
],
declarations: [BasicInputsPageComponent], declarations: [BasicInputsPageComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA] schemas: [CUSTOM_ELEMENTS_SCHEMA]
}) })

View File

@ -1,17 +1,17 @@
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { IonicAngularModule } from '@ionic/angular';
import { GroupInputsPageComponent } from './group-inputs-page.component'; import { GroupInputsPageComponent } from './group-inputs-page.component';
import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module'; import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module';
import { SharedModule } from '../shared/shared.module';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
FormsModule, FormsModule,
GroupInputsPageRoutingModule, GroupInputsPageRoutingModule,
SharedModule IonicAngularModule
], ],
declarations: [GroupInputsPageComponent], declarations: [GroupInputsPageComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA] schemas: [CUSTOM_ELEMENTS_SCHEMA]

View File

@ -1,22 +0,0 @@
import { NgModule } from '@angular/core';
import { IonBooleanValueAccessorDirective } from './ion-boolean-value-accessor/ion-boolean-value-accessor.directive';
import { IonRadioValueAccessorDirective } from './ion-radio-value-accessor/ion-radio-value-accessor.directive';
import { IonSelectValueAccessorDirective } from './ion-select-value-accessor/ion-select-value-accessor.directive';
import { IonTextValueAccessorDirective } from './ion-text-value-accessor/ion-text-value-accessor.directive';
@NgModule({
exports: [
IonBooleanValueAccessorDirective,
IonRadioValueAccessorDirective,
IonSelectValueAccessorDirective,
IonTextValueAccessorDirective
],
declarations: [
IonBooleanValueAccessorDirective,
IonRadioValueAccessorDirective,
IonSelectValueAccessorDirective,
IonTextValueAccessorDirective
]
})
export class SharedModule {}

View File

@ -1,13 +1,22 @@
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import {
ControlValueAccessor,
DefaultValueAccessor,
NG_VALUE_ACCESSOR
} from '@angular/forms';
// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
@Directive({ @Directive({
/* tslint:disable-next-line:directive-selector */ /* tslint:disable-next-line:directive-selector */
selector: 'ion-checkbox,ion-toggle', selector: 'ion-checkbox,ion-toggle',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonBooleanValueAccessorDirective, multi: true }] providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: IonBooleanValueAccessor,
multi: true
}
]
}) })
export class IonBooleanValueAccessorDirective implements ControlValueAccessor { export class IonBooleanValueAccessor implements ControlValueAccessor {
constructor(private element: ElementRef, private renderer: Renderer2) { constructor(private element: ElementRef, private renderer: Renderer2) {
this.onChange = () => {}; this.onChange = () => {};
this.onTouched = () => {}; this.onTouched = () => {};
@ -39,6 +48,10 @@ export class IonBooleanValueAccessorDirective implements ControlValueAccessor {
} }
setDisabledState(isDisabled: boolean): void { setDisabledState(isDisabled: boolean): void {
this.renderer.setProperty(this.element.nativeElement, 'disabled', isDisabled); this.renderer.setProperty(
this.element.nativeElement,
'disabled',
isDisabled
);
} }
} }

View File

@ -12,21 +12,19 @@ import {
NG_VALUE_ACCESSOR NG_VALUE_ACCESSOR
} from '@angular/forms'; } from '@angular/forms';
// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
@Directive({ @Directive({
/* tslint:disable-next-line:directive-selector */ /* tslint:disable-next-line:directive-selector */
selector: 'ion-radio', selector: 'ion-radio',
providers: [ providers: [
{ {
provide: NG_VALUE_ACCESSOR, provide: NG_VALUE_ACCESSOR,
useExisting: IonRadioValueAccessorDirective, useExisting: IonRadioValueAccessor,
multi: true multi: true
} }
] ]
}) })
export class IonRadioValueAccessorDirective implements ControlValueAccessor { export class IonRadioValueAccessor implements ControlValueAccessor {
@Input() value: any; @Input() value: any;
@Input() name: string;
onChange: (value: any) => void; onChange: (value: any) => void;
onTouched: () => void; onTouched: () => void;

View File

@ -1,15 +1,14 @@
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here // NOTE: May need to look at this to see if we need anything else:
// May also need to look at this to see if we need anything else:
// https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158 // https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
@Directive({ @Directive({
/* tslint:disable-next-line:directive-selector */ /* tslint:disable-next-line:directive-selector */
selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime', selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }] providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessor, multi: true }]
}) })
export class IonSelectValueAccessorDirective implements ControlValueAccessor { export class IonSelectValueAccessor implements ControlValueAccessor {
constructor(private element: ElementRef, private renderer: Renderer2) { constructor(private element: ElementRef, private renderer: Renderer2) {
this.onChange = () => {}; this.onChange = () => {};
this.onTouched = () => {}; this.onTouched = () => {};

View File

@ -1,15 +1,14 @@
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here // NOTE: May need to look at this to see if we need anything else:
// May also need to look at this to see if we need anything else:
// https://github.com/angular/angular/blob/5.0.1/packages/forms/src/directives/default_value_accessor.ts#L33-L101 // https://github.com/angular/angular/blob/5.0.1/packages/forms/src/directives/default_value_accessor.ts#L33-L101
@Directive({ @Directive({
/* tslint:disable-next-line:directive-selector */ /* tslint:disable-next-line:directive-selector */
selector: 'ion-input,ion-textarea', selector: 'ion-input,ion-textarea',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessorDirective, multi: true }] providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessor, multi: true }]
}) })
export class IonTextValueAccessorDirective implements ControlValueAccessor { export class IonTextValueAccessor implements ControlValueAccessor {
constructor(private element: ElementRef, private renderer: Renderer2) { constructor(private element: ElementRef, private renderer: Renderer2) {
this.onChange = () => {}; this.onChange = () => {};
this.onTouched = () => {}; this.onTouched = () => {};

View File

@ -1,15 +1,27 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonBooleanValueAccessor } from './directives/ion-boolean-value-accessor';
import { IonNavDelegate } from './directives/ion-nav'; import { IonNavDelegate } from './directives/ion-nav';
import { IonRadioValueAccessor } from './directives/ion-radio-value-accessor';
import { IonSelectValueAccessor } from './directives/ion-select-value-accessor';
import { IonTextValueAccessor } from './directives/ion-text-value-accessor';
import { AlertController } from './providers/alert-controller'; import { AlertController } from './providers/alert-controller';
@NgModule({ @NgModule({
declarations: [ declarations: [
IonNavDelegate IonBooleanValueAccessor,
IonNavDelegate,
IonRadioValueAccessor,
IonSelectValueAccessor,
IonTextValueAccessor
], ],
exports: [ exports: [
IonNavDelegate IonBooleanValueAccessor,
IonNavDelegate,
IonRadioValueAccessor,
IonSelectValueAccessor,
IonTextValueAccessor
], ],
schemas: [ schemas: [
CUSTOM_ELEMENTS_SCHEMA CUSTOM_ELEMENTS_SCHEMA
@ -20,4 +32,4 @@ import { AlertController } from './providers/alert-controller';
}) })
export class IonicAngularModule { export class IonicAngularModule {
} }