From 8151d3493e64e4bebf0d48821070647c53b57153 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 11 Oct 2016 11:03:59 +0100 Subject: [PATCH] Base class for 'textfield' widgets Reduces repetitive code needed to fix MDL problems for textfield-based components --- .../widgets/amount/amount.widget.ts | 25 ++-------- .../components/widgets/date/date.widget.ts | 25 ++-------- .../multiline-text/multiline-text.widget.ts | 25 ++-------- .../widgets/number/number.widget.ts | 22 ++------- .../components/widgets/tabs/tabs.widget.html | 1 - .../components/widgets/text/text.widget.ts | 25 ++-------- .../widgets/textfield-widget.component.ts | 47 +++++++++++++++++++ 7 files changed, 67 insertions(+), 103 deletions(-) create mode 100644 ng2-components/ng2-activiti-form/src/components/widgets/textfield-widget.component.ts diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts index b40556b1fe..2915520260 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts @@ -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; - } - } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts index 78bf35a398..1aa4962958 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts @@ -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); } } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts index a14cd81be9..3a36db6320 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts @@ -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); } } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts index d888cb6d7d..f3a04d58a4 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts @@ -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; - } } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html index 4cb709f601..f79783472b 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html @@ -18,4 +18,3 @@ -- diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts index 5d1261d014..e8498ab545 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts @@ -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); } } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/textfield-widget.component.ts b/ng2-components/ng2-activiti-form/src/components/widgets/textfield-widget.component.ts new file mode 100644 index 0000000000..03f9e09fc9 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/textfield-widget.component.ts @@ -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; + } + +}