Base class for 'textfield' widgets

Reduces repetitive code needed to fix MDL problems for textfield-based
components
This commit is contained in:
Denys Vuika
2016-10-11 11:03:59 +01:00
parent 1394a493f3
commit 8151d3493e
7 changed files with 67 additions and 103 deletions

View File

@@ -16,7 +16,7 @@
*/
import { Component, ElementRef, OnInit } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { TextFieldWidgetComponent } from './../textfield-widget.component';
@Component({
moduleId: module.id,
@@ -24,12 +24,12 @@ import { WidgetComponent } from './../widget.component';
templateUrl: './amount.widget.html',
styleUrls: ['./amount.widget.css']
})
export class AmountWidget extends WidgetComponent implements OnInit {
export class AmountWidget extends TextFieldWidgetComponent implements OnInit {
currency: string = '$';
constructor(private elementRef: ElementRef) {
super();
constructor(elementRef: ElementRef) {
super(elementRef);
}
ngOnInit() {
@@ -38,21 +38,4 @@ export class AmountWidget extends WidgetComponent implements OnInit {
}
}
setupMaterialComponents(componentHandler: any): boolean {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
if (this.elementRef && this.hasValue()) {
let el = this.elementRef.nativeElement;
let container = el.querySelector('.mdl-textfield');
if (container) {
container.MaterialTextfield.change(this.field.value);
}
}
return true;
}
return false;
}
}

View File

@@ -16,7 +16,7 @@
*/
import { Component, ElementRef } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { TextFieldWidgetComponent } from './../textfield-widget.component';
@Component({
moduleId: module.id,
@@ -24,27 +24,10 @@ import { WidgetComponent } from './../widget.component';
templateUrl: './date.widget.html',
styleUrls: ['./date.widget.css']
})
export class DateWidget extends WidgetComponent {
export class DateWidget extends TextFieldWidgetComponent {
constructor(private elementRef: ElementRef) {
super();
}
setupMaterialComponents(componentHandler: any): boolean {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
if (this.elementRef && this.hasValue()) {
let el = this.elementRef.nativeElement;
let container = el.querySelector('.mdl-textfield');
if (container) {
container.MaterialTextfield.change(this.field.value);
}
}
return true;
}
return false;
constructor(elementRef: ElementRef) {
super(elementRef);
}
}

View File

@@ -16,7 +16,7 @@
*/
import { Component, ElementRef } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { TextFieldWidgetComponent } from './../textfield-widget.component';
@Component({
moduleId: module.id,
@@ -24,27 +24,10 @@ import { WidgetComponent } from './../widget.component';
templateUrl: './multiline-text.widget.html',
styleUrls: ['./multiline-text.widget.css']
})
export class MultilineTextWidget extends WidgetComponent {
export class MultilineTextWidget extends TextFieldWidgetComponent {
constructor(private elementRef: ElementRef) {
super();
}
setupMaterialComponents(handler: any): boolean {
// workaround for MDL issues with dynamic components
if (handler) {
handler.upgradeAllRegistered();
if (this.elementRef && this.hasValue()) {
let el = this.elementRef.nativeElement;
let container = el.querySelector('.mdl-textfield');
if (container) {
container.MaterialTextfield.change(this.field.value);
}
}
return true;
}
return false;
constructor(elementRef: ElementRef) {
super(elementRef);
}
}

View File

@@ -16,7 +16,7 @@
*/
import { Component, ElementRef } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { TextFieldWidgetComponent } from './../textfield-widget.component';
@Component({
moduleId: module.id,
@@ -24,24 +24,10 @@ import { WidgetComponent } from './../widget.component';
templateUrl: './number.widget.html',
styleUrls: ['./number.widget.css']
})
export class NumberWidget extends WidgetComponent {
export class NumberWidget extends TextFieldWidgetComponent {
constructor(private elementRef: ElementRef) {
super();
constructor(elementRef: ElementRef) {
super(elementRef);
}
setupMaterialComponents(handler: any): boolean {
// workaround for MDL issues with dynamic components
if (handler) {
handler.upgradeAllRegistered();
if (this.elementRef && this.hasValue()) {
let container = this.elementRef.nativeElement.querySelector('.mdl-textfield');
if (container) {
container.MaterialTextfield.change(this.field.value.toString());
}
}
return true;
}
return false;
}
}

View File

@@ -18,4 +18,3 @@
</div>
</div>
</div>
-

View File

@@ -16,7 +16,7 @@
*/
import { Component, ElementRef } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { TextFieldWidgetComponent } from './../textfield-widget.component';
@Component({
moduleId: module.id,
@@ -24,27 +24,10 @@ import { WidgetComponent } from './../widget.component';
templateUrl: './text.widget.html',
styleUrls: ['./text.widget.css']
})
export class TextWidget extends WidgetComponent {
export class TextWidget extends TextFieldWidgetComponent {
constructor(private elementRef: ElementRef) {
super();
}
setupMaterialComponents(componentHandler: any): boolean {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
if (this.elementRef && this.hasValue()) {
let el = this.elementRef.nativeElement;
let container = el.querySelector('.mdl-textfield');
if (container) {
container.MaterialTextfield.change(this.field.value);
}
}
return true;
}
return false;
constructor(elementRef: ElementRef) {
super(elementRef);
}
}

View File

@@ -0,0 +1,47 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ElementRef } from '@angular/core';
import { WidgetComponent } from './widget.component';
export abstract class TextFieldWidgetComponent extends WidgetComponent {
protected elementRef: ElementRef;
constructor(elementRef: ElementRef) {
super();
this.elementRef = elementRef;
}
// Overrides base implementation
setupMaterialComponents(handler: any): boolean {
// workaround for MDL issues with dynamic components
if (handler) {
handler.upgradeAllRegistered();
if (this.elementRef && this.hasValue()) {
let el = this.elementRef.nativeElement;
let container = el.querySelector('.mdl-textfield');
if (container) {
container.MaterialTextfield.change(this.field.value.toString());
}
}
return true;
}
return false;
}
}