feat: replaced setters in favor of ngOnChanges (#2228)

SAP · Apr 7, 2020 · e054cf9 · e054cf9
1 parent d356914
commit e054cf9
Show file tree

Hide file tree

Showing 16 changed files with 328 additions and 348 deletions.
diff --git a/libs/core/src/lib/bar/bar.component.ts b/libs/core/src/lib/bar/bar.component.ts
@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    Input,
+    OnChanges,
+    OnInit,
+    ViewEncapsulation,
+} from '@angular/core';
 import { applyCssClass, CssClassBuilder } from '../utils/public_api';
 
 export type SizeType = '' | 's' | 'm_l' | 'xl';
@@ -15,84 +23,39 @@ export type BarDesignType = 'header' | 'subheader' | 'header-with-subheader' | '
     templateUrl: './bar.component.html',
     styleUrls: ['./bar.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BarComponent implements OnInit, OnChanges, CssClassBuilder {
-
+export class BarComponent implements OnChanges, OnInit, CssClassBuilder {
     /** user's custom classes */
-    private _class: string = '';
     @Input()
-    set class(userClass: string) {
-        this._class = userClass;
-        this.buildComponentCssClass();
-    }
+    class: string;
 
     /** Whether the Bar component is used as a header, subheader, header-with-subheader,
      * footer or floating-footer.
      * Types available: 'header' | 'subheader' | 'header-with-subheader' | 'footer' | 'floating-footer' */
-    private _barDesign: BarDesignType;
     @Input()
-    set barDesign(barDesign: BarDesignType) {
-        this._barDesign = barDesign;
-        this.buildComponentCssClass();
-    }
+    barDesign: BarDesignType;
 
     /** Whether the Bar component is used in Page Layout. */
-    private _inPage: boolean;
     @Input()
-    set inPage(inPage: boolean) {
-        this._inPage = inPage;
-        this.buildComponentCssClass();
-    }
+    inPage: boolean;
 
     /** Whether the Bar component is used in Home Page Layout. */
-    private _inHomePage: boolean;
     @Input()
-    set inHomePage(inHomePage: boolean) {
-        this._inHomePage = inHomePage;
-        this.buildComponentCssClass();
-    }
+    inHomePage: boolean;
 
     /** The size of the Page in Page responsive design.
      * Available sizes: 's' | 'm_l' | 'xl'
-    */
-    private _size: SizeType = '';
+     */
     @Input()
-    set size(size: SizeType) {
-        this._size = size;
-        this.buildComponentCssClass();
-    }
+    size: SizeType = '';
 
     /** Whether to apply cosy mode to the Bar. */
-    private _cosy: boolean;
     @Input()
-    set cosy(cosy: boolean) {
-        this._cosy = cosy;
-        this.buildComponentCssClass();
-    }
-
-    @applyCssClass
-    /** CssClassBuilder interface implementation
-     * function must return single string
-     * function is responsible for order which css classes are applied
-     */
-    buildComponentCssClass(): string {
-        return [
-            'fd-bar',
-            this._cosy ? 'fd-bar--cosy' : '',
-            this._barDesign ? `fd-bar--${this._barDesign}` : '',
-            this._inPage && !this._size ? 'fd-bar--page' : '',
-            this._inPage && this._size ? `fd-bar--page-${this._size}` : '',
-            this._inHomePage && !this._size ? 'fd-bar--home-page' : '',
-            this._inHomePage && this._size ? `fd-bar--home-page-${this._size}` : '',
-            this._class
-        ].filter(x => x !== '').join(' ');
-    }
+    cosy: boolean;
 
     /** @hidden */
-    constructor(
-        private _elementRef: ElementRef
-    ) { }
+    constructor(private _elementRef: ElementRef) {}
 
     /** @hidden */
     ngOnInit(): void {
@@ -104,7 +67,26 @@ export class BarComponent implements OnInit, OnChanges, CssClassBuilder {
         this.buildComponentCssClass();
     }
 
-    /** @hidden */
+    @applyCssClass
+    /** CssClassBuilder interface implementation
+     * function must return single string
+     * function is responsible for order which css classes are applied
+     */
+    buildComponentCssClass(): string {
+        return [
+            'fd-bar',
+            this.cosy ? 'fd-bar--cosy' : '',
+            this.barDesign ? `fd-bar--${this.barDesign}` : '',
+            this.inPage && !this.size ? 'fd-bar--page' : '',
+            this.inPage && this.size ? `fd-bar--page-${this.size}` : '',
+            this.inHomePage && !this.size ? 'fd-bar--home-page' : '',
+            this.inHomePage && this.size ? `fd-bar--home-page-${this.size}` : '',
+            this.class,
+        ]
+            .filter((x) => x !== '')
+            .join(' ');
+    }
+
     elementRef(): ElementRef<any> {
         return this._elementRef;
     }

diff --git a/libs/core/src/lib/form/form-group/form-group.component.ts b/libs/core/src/lib/form/form-group/form-group.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation, ElementRef, Input, AfterViewInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
 import { CssClassBuilder, applyCssClass } from '../../utils/public_api';
 
 /**
@@ -20,28 +20,31 @@ import { CssClassBuilder, applyCssClass } from '../../utils/public_api';
     styleUrls: ['./form-group.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FormGroupComponent implements CssClassBuilder, AfterViewInit {
-    class: string;
-    /** @hidden */
+export class FormGroupComponent implements CssClassBuilder, OnChanges, OnInit {
     @HostBinding('class.fd-form-group')
     fdFormGroupClass: boolean = true;
 
-    private _isInline: boolean = false;
     /** Determines if form items should be displayed inline or not
      * Default value is set to false;
      */
-    @Input() set isInline(inline: boolean) {
-        this._isInline = inline;
-        this.buildComponentCssClass();
-    }
+    @Input()
+    isInline: boolean;
+
+    /** @hidden */
+    class: string;
 
     /** @hidden */
     constructor(private _elementRef: ElementRef) {
 
     }
 
     /** @hidden */
-    ngAfterViewInit() {
+    ngOnChanges() {
+        this.buildComponentCssClass();
+    }
+
+    /** @hidden */
+    ngOnInit(): void {
         this.buildComponentCssClass();
     }
 
@@ -51,7 +54,7 @@ export class FormGroupComponent implements CssClassBuilder, AfterViewInit {
      */
     @applyCssClass
     buildComponentCssClass(): string {
-        return this._isInline ? 'fd-form-group--inline' : '';
+        return this.isInline ? 'fd-form-group--inline' : '';
     }
 
     /** @hidden */

diff --git a/libs/core/src/lib/link/link.component.spec.ts b/libs/core/src/lib/link/link.component.spec.ts
@@ -34,23 +34,23 @@ describe('LinkComponent', () => {
     });
 
     it('Should Add emphasized class', () => {
-        component.ngOnInit();
+        component.ngOnChanges();
         component.emphasized = true;
         component.ngOnChanges();
         fixture.detectChanges();
         expect(component.elementRef().nativeElement.classList.contains('fd-link--emphasized')).toBe(true);
     });
 
     it('Should Add inverted class', () => {
-        component.ngOnInit();
+        component.ngOnChanges();
         component.inverted = true;
         component.ngOnChanges();
         fixture.detectChanges();
         expect(component.elementRef().nativeElement.classList.contains('fd-link--inverted')).toBe(true);
     });
 
     it('Should Add disabled class', () => {
-        component.ngOnInit();
+        component.ngOnChanges();
         component.disabled = true;
         component.ngOnChanges();
         fixture.detectChanges();

diff --git a/libs/core/src/lib/link/link.component.ts b/libs/core/src/lib/link/link.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, ViewEncapsulation, OnInit } from '@angular/core';
 import { applyCssClass, CssClassBuilder } from '../utils/public_api';
 
 @Component({
@@ -11,19 +11,33 @@ import { applyCssClass, CssClassBuilder } from '../utils/public_api';
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class LinkComponent implements OnInit, OnChanges, CssClassBuilder {
+export class LinkComponent implements OnChanges, OnInit, CssClassBuilder {
 
     /** user's custom classes */
-    @Input() class: string;
+    @Input()
+    class: string;
 
     /** Whether user wants to use emphasized mode */
-    @Input() emphasized: boolean;
+    @Input()
+    emphasized: boolean;
 
     /** Whether user wants to put disabled mode */
-    @Input() disabled: boolean;
+    @Input()
+    disabled: boolean;
 
     /** Whether user wants to use inverted mode */
-    @Input() inverted: boolean;
+    @Input()
+    inverted: boolean;
+
+    /** @hidden */
+    constructor(
+        private _elementRef: ElementRef
+    ) { }
+
+    /** @hidden */
+    ngOnChanges(): void {
+        this.buildComponentCssClass();
+    }
 
     @applyCssClass
     /** CssClassBuilder interface implementation
@@ -39,21 +53,11 @@ export class LinkComponent implements OnInit, OnChanges, CssClassBuilder {
         ].filter(x => x !== '').join(' ');
     }
 
-    /** @hidden */
-    constructor(
-        private _elementRef: ElementRef
-    ) {}
-
     /** @hidden */
     elementRef(): ElementRef<any> {
         return this._elementRef;
     }
 
-    /** @hidden */
-    ngOnChanges(): void {
-        this.buildComponentCssClass();
-    }
-
     /** @hidden */
     ngOnInit(): void {
         this.buildComponentCssClass();

diff --git a/libs/core/src/lib/list/list-message.directive.ts b/libs/core/src/lib/list/list-message.directive.ts
@@ -1,34 +1,31 @@
-import { Directive, ElementRef, Input, OnInit } from '@angular/core';
+import { Directive, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
 import { MessageStates } from '../form/form-message/form-message.component';
 import { applyCssClass, CssClassBuilder } from '../utils/public_api';
 
 @Directive({
     // tslint:disable-next-line:directive-selector
     selector: '[fd-list-message]',
 })
-export class ListMessageDirective implements OnInit, CssClassBuilder {
+export class ListMessageDirective implements OnChanges, OnInit, CssClassBuilder {
 
     /** Type of the message. Can be 'success' | 'error' | 'warning' | 'information' */
-    private _type: MessageStates;
     @Input()
-    set type(type: MessageStates) {
-        this._type = type;
-        this.buildComponentCssClass();
-    }
+    type: MessageStates;
 
-    private _class: string = '';
-    @Input() set class(userClass: string) {
-        this._class = userClass;
-        this.buildComponentCssClass();
-    } // user's custom classes
+    /** Apply user custom styles */
+    @Input()
+    class: string;
 
     constructor(
         private _elementRef: ElementRef
-    ) {}
+    ) { }
 
-    /** Function runs when component is initialized
-     * function should build component css class
-     */
+    /** @hidden */
+    ngOnChanges(): void {
+        this.buildComponentCssClass();
+    }
+
+    /** @hidden */
     ngOnInit(): void {
         this.buildComponentCssClass();
     }
@@ -41,8 +38,8 @@ export class ListMessageDirective implements OnInit, CssClassBuilder {
     buildComponentCssClass(): string {
         return [
             'fd-list__message',
-            this._type ? ('fd-list__message--' + this._type) : '',
-            this._class
+            this.type ? ('fd-list__message--' + this.type) : '',
+            this.class
         ].filter(x => x !== '').join(' ');
     }
 

diff --git a/libs/core/src/lib/list/list.component.ts b/libs/core/src/lib/list/list.component.ts
@@ -41,6 +41,4 @@ export class ListComponent {
     @Input()
     @HostBinding('class.fd-list--no-border')
     noBorder: boolean = false;
-
-
 }