inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove deprecated Angular api (#9516)

Browse Source
This commit is contained in:
Denys Vuika 2024-04-09 09:12:58 -04:00 committed by GitHub
parent 3bfadae286
commit d45a02042e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 101 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
lib/content-services/src/lib/directives/node-counter.directive.ts
View File

@ -15,27 +15,22 @@
* limitations under the License.
*/
import { Directive, Input, Component, OnInit, OnChanges, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { Directive, Input, Component, OnInit, OnChanges, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[adf-node-counter]'
})
export class NodeCounterDirective implements OnInit, OnChanges {
/** Number to display in the counter badge */
@Input('adf-node-counter')
counter: number;
componentRef: NodeCounterComponent;
constructor(
private resolver: ComponentFactoryResolver,
public viewContainerRef: ViewContainerRef
) {}
constructor(private viewContainerRef: ViewContainerRef) {}
ngOnInit() {
const componentFactory = this.resolver.resolveComponentFactory(NodeCounterComponent);
this.componentRef = this.viewContainerRef.createComponent(componentFactory).instance;
this.componentRef = this.viewContainerRef.createComponent(NodeCounterComponent).instance;
this.componentRef.counter = this.counter;
}
@ -48,9 +43,7 @@ export class NodeCounterDirective implements OnInit, OnChanges {
@Component({
selector: 'adf-node-counter',
template: `
<div>{{ 'NODE_COUNTER.SELECTED_COUNT' | translate: { count: counter } }}</div>
`
template: ` <div>{{ 'NODE_COUNTER.SELECTED_COUNT' | translate : { count: counter } }}</div> `
})
export class NodeCounterComponent {
counter: number;

24
lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts
View File

@ -15,18 +15,7 @@
* limitations under the License.
*/
import {
Component,
Input,
ViewChild,
ViewContainerRef,
OnInit,
OnDestroy,
ComponentRef,
ComponentFactoryResolver,
SimpleChanges,
OnChanges
} from '@angular/core';
import { Component, Input, ViewChild, ViewContainerRef, OnInit, OnDestroy, ComponentRef, SimpleChanges, OnChanges } from '@angular/core';
import { SearchFilterService } from '../../services/search-filter.service';
import { Observable } from 'rxjs';
import { SearchQueryBuilderService } from '../../services';
@ -56,23 +45,16 @@ export class SearchWidgetContainerComponent implements OnInit, OnDestroy, OnChan
componentRef: ComponentRef<any>;
constructor(
private searchFilterService: SearchFilterService,
private queryBuilder: SearchQueryBuilderService,
private componentFactoryResolver: ComponentFactoryResolver
) {}
constructor(private searchFilterService: SearchFilterService, private queryBuilder: SearchQueryBuilderService) {}
ngOnInit() {
const componentType = this.searchFilterService.widgets[this.selector];
if (componentType) {
const factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
if (factory) {
this.content.clear();
this.componentRef = this.content.createComponent(factory, 0);
this.componentRef = this.content.createComponent(componentType, { index: 0 });
this.setupWidget(this.componentRef);
}
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes['value']?.currentValue && this.componentRef?.instance) {

2
lib/core/src/lib/card-view/card-view.module.ts
View File

@ -34,7 +34,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
import { TranslateModule } from '@ngx-translate/core';
import { CardViewContentProxyDirective } from './directives/card-view-content-proxy.directive';
import { CardViewComponent } from './components/card-view/card-view.component';
import { CardViewBoolItemComponent } from './components/card-view-boolitem/card-view-boolitem.component';
import { CardViewDateItemComponent } from './components/card-view-dateitem/card-view-dateitem.component';
@ -77,7 +76,6 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
CardViewKeyValuePairsItemComponent,
CardViewSelectItemComponent,
CardViewItemDispatcherComponent,
CardViewContentProxyDirective,
CardViewArrayItemComponent,
SelectFilterInputComponent
],

16
lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
View File

@ -22,7 +22,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { CardViewItem } from '../../interfaces/card-view-item.interface';
import { CardItemTypeService } from '../../services/card-item-types.service';
import { CardViewContentProxyDirective } from '../../directives/card-view-content-proxy.directive';
import { CardViewItemDispatcherComponent } from './card-view-item-dispatcher.component';
@Component({
@ -35,7 +34,6 @@ export class CardViewShinyCustomElementItemComponent {
}
describe('CardViewItemDispatcherComponent', () => {
let fixture: ComponentFixture<CardViewItemDispatcherComponent>;
let cardItemTypeService: CardItemTypeService;
let component: CardViewItemDispatcherComponent;
@ -45,12 +43,8 @@ describe('CardViewItemDispatcherComponent', () => {
cardItemTypeService.setComponentTypeResolver('shiny-custom-element', () => CardViewShinyCustomElementItemComponent);
TestBed.configureTestingModule({
declarations: [
CardViewItemDispatcherComponent,
CardViewShinyCustomElementItemComponent,
CardViewContentProxyDirective
],
providers: [ { provide: CardItemTypeService, useValue: cardItemTypeService } ]
declarations: [CardViewItemDispatcherComponent, CardViewShinyCustomElementItemComponent],
providers: [{ provide: CardItemTypeService, useValue: cardItemTypeService }]
});
TestBed.compileComponents();
@ -83,7 +77,6 @@ describe('CardViewItemDispatcherComponent', () => {
});
describe('Sub-component creation', () => {
it('should load the CardViewShinyCustomElementItemComponent', () => {
const innerElement = fixture.debugElement.query(By.css('[data-automation-id="found-me"]'));
expect(innerElement).not.toBeNull();
@ -108,7 +101,7 @@ describe('CardViewItemDispatcherComponent', () => {
expect(shinyCustomElementItemComponent.displayEmpty).toBe(component.displayEmpty);
});
it('should update the subcomponent\'s input parameters', () => {
it('should update the subcomponent input parameters', () => {
const expectedEditable = false;
const expectedDisplayEmpty = true;
const expectedProperty = {};
@ -139,8 +132,7 @@ describe('CardViewItemDispatcherComponent', () => {
});
describe('Angular life-cycle methods', () => {
let shinyCustomElementItemComponent;
let shinyCustomElementItemComponent: any;
const lifeCycleMethods = [
'ngOnChanges',

23
lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
View File

@ -15,22 +15,14 @@
* limitations under the License.
*/
import {
Component,
Input,
OnChanges,
SimpleChange,
SimpleChanges,
ViewChild
} from '@angular/core';
import { Component, Input, OnChanges, SimpleChange, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
import { CardViewItem } from '../../interfaces/card-view-item.interface';
import { CardItemTypeService } from '../../services/card-item-types.service';
import { CardViewContentProxyDirective } from '../../directives/card-view-content-proxy.directive';
import { DEFAULT_SEPARATOR } from '../card-view-textitem/card-view-textitem.component';
@Component({
selector: 'adf-card-view-item-dispatcher',
template: '<ng-template adf-card-view-content-proxy></ng-template>'
template: '<ng-template #content></ng-template>'
})
export class CardViewItemDispatcherComponent implements OnChanges {
@Input()
@ -60,15 +52,15 @@ export class CardViewItemDispatcherComponent implements OnChanges {
@Input()
displayLabelForChips: boolean = false;
@ViewChild(CardViewContentProxyDirective, { static: true })
private content: CardViewContentProxyDirective;
private loaded: boolean = false;
private componentReference: any = null;
public ngOnInit;
public ngDoCheck;
@ViewChild('content', { read: ViewContainerRef, static: true })
content!: ViewContainerRef;
constructor(private cardItemTypeService: CardItemTypeService) {
const dynamicLifeCycleMethods = [
'ngOnInit',
@ -91,8 +83,7 @@ export class CardViewItemDispatcherComponent implements OnChanges {
this.loaded = true;
}
Object.entries(changes)
.forEach(([changeName, change]: [string, SimpleChange]) => {
Object.entries(changes).forEach(([changeName, change]: [string, SimpleChange]) => {
this.componentReference.instance[changeName] = change.currentValue;
});
@ -102,7 +93,7 @@ export class CardViewItemDispatcherComponent implements OnChanges {
private loadComponent() {
const factoryClass = this.cardItemTypeService.resolveComponentType(this.property);
this.componentReference = this.content.viewContainerRef.createComponent(factoryClass);
this.componentReference = this.content.createComponent(factoryClass);
this.componentReference.instance.editable = this.editable;
this.componentReference.instance.property = this.property;

25
lib/core/src/lib/card-view/directives/card-view-content-proxy.directive.ts
View File

@ -1,25 +0,0 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* 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 { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[adf-card-view-content-proxy]'
})
export class CardViewContentProxyDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}

2
lib/core/src/lib/card-view/public-api.ts
View File

@ -32,6 +32,4 @@ export * from './interfaces/card-view.interfaces';
export * from './validators/card-view.validators';
export * from './models/card-view.models';
export * from './services/card-view.services';
export * from './directives/card-view-content-proxy.directive';
export * from './card-view.module';

14
lib/core/src/lib/clipboard/clipboard.directive.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, ViewEncapsulation, OnInit } from '@angular/core';
import { Directive, Input, HostListener, Component, ViewContainerRef, ViewEncapsulation, OnInit } from '@angular/core';
import { ClipboardService } from './clipboard.service';
@Directive({
@ -36,16 +36,12 @@ export class ClipboardDirective {
// eslint-disable-next-line @angular-eslint/no-input-rename
@Input('clipboard-notification') message: string;
constructor(private clipboardService: ClipboardService,
public viewContainerRef: ViewContainerRef,
private resolver: ComponentFactoryResolver) {}
constructor(private clipboardService: ClipboardService, public viewContainerRef: ViewContainerRef) {}
@HostListener('mouseenter')
showTooltip() {
if (this.placeholder) {
const componentFactory = this.resolver.resolveComponentFactory(ClipboardComponent);
const componentRef = this.viewContainerRef.createComponent(componentFactory).instance;
const componentRef = this.viewContainerRef.createComponent(ClipboardComponent).instance;
componentRef.placeholder = this.placeholder;
}
}
@ -70,14 +66,14 @@ export class ClipboardDirective {
}
}
private copyContentToClipboard(content) {
private copyContentToClipboard(content: string) {
this.clipboardService.copyContentToClipboard(content, this.message);
}
}
@Component({
selector: 'adf-copy-content-tooltip',
template: `<span class='adf-copy-tooltip'>{{ placeholder | translate }} </span>`,
template: `<span class="adf-copy-tooltip">{{ placeholder | translate }} </span>`,
encapsulation: ViewEncapsulation.None
})
export class ClipboardComponent implements OnInit {

14
lib/core/src/lib/form/components/form-field/form-field.component.ts
View File

@ -19,10 +19,8 @@ import {
Compiler,
Component,
ComponentFactory,
ComponentFactoryResolver,
ComponentRef,
Input,
ModuleWithComponentFactories,
NgModule,
OnDestroy,
OnInit,
@ -70,12 +68,7 @@ export class FormFieldComponent implements OnInit, OnDestroy {
focus: boolean = false;
constructor(
private formRenderingService: FormRenderingService,
private componentFactoryResolver: ComponentFactoryResolver,
private visibilityService: WidgetVisibilityService,
private compiler: Compiler
) {}
constructor(private formRenderingService: FormRenderingService, private visibilityService: WidgetVisibilityService, private compiler: Compiler) {}
ngOnInit() {
const w: any = window;
@ -95,8 +88,7 @@ export class FormFieldComponent implements OnInit, OnDestroy {
} else {
const componentType = this.formRenderingService.resolveComponentType(originalField);
if (componentType) {
const factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
this.componentRef = this.container.createComponent(factory);
this.componentRef = this.container.createComponent(componentType);
const instance = this.componentRef.instance;
instance.field = this.field;
instance.fieldChanged.subscribe((field) => {
@ -153,7 +145,7 @@ export class FormFieldComponent implements OnInit, OnDestroy {
const decoratedCmp = Component(metadata)(cmpClass);
const moduleClass = class RuntimeComponentModule {};
const decoratedNgModule = NgModule({ imports: [], declarations: [decoratedCmp] })(moduleClass);
const module: ModuleWithComponentFactories<any> = compiler.compileModuleAndAllComponentsSync(decoratedNgModule);
const module = compiler.compileModuleAndAllComponentsSync(decoratedNgModule);
return module.componentFactories.find((x) => x.componentType === decoratedCmp);
}

17
lib/extensions/src/lib/components/dynamic-column/dynamic-column.component.ts
View File

@ -23,7 +23,6 @@ import {
ViewChild,
ViewContainerRef,
ComponentRef,
ComponentFactoryResolver,
OnChanges,
SimpleChanges,
ViewEncapsulation,
@ -33,9 +32,7 @@ import { ExtensionService } from '../../services/extension.service';
@Component({
selector: 'adf-dynamic-column',
template: `
<ng-container #content></ng-container>
`,
template: ` <ng-container #content></ng-container> `,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'adf-dynamic-column' },
@ -61,24 +58,16 @@ export class DynamicColumnComponent implements OnInit, OnChanges, OnDestroy {
private componentRef: ComponentRef<any>;
constructor(
private extensions: ExtensionService,
private componentFactoryResolver: ComponentFactoryResolver
) {}
constructor(private extensions: ExtensionService) {}
ngOnInit() {
const componentType = this.extensions.getComponentById(this.id);
if (componentType) {
const factory = this.componentFactoryResolver.resolveComponentFactory(
componentType
);
if (factory) {
this.content.clear();
this.componentRef = this.content.createComponent(factory, 0);
this.componentRef = this.content.createComponent(componentType, { index: 0 });
this.updateInstance();
}
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes.node) {

25
lib/extensions/src/lib/components/dynamic-component/dynamic.component.spec.ts
View File

@ -17,13 +17,7 @@
/* eslint-disable @angular-eslint/component-selector */
import {
Component,
Input,
OnChanges,
SimpleChange,
ComponentFactoryResolver
} from '@angular/core';
import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DynamicExtensionComponent } from './dynamic.component';
@ -44,11 +38,9 @@ export class TestComponent implements OnChanges {
}
describe('DynamicExtensionComponent', () => {
let fixture: ComponentFixture<DynamicExtensionComponent>;
let componentRegister: ComponentRegisterService;
let component: DynamicExtensionComponent;
let componentFactoryResolver: ComponentFactoryResolver;
beforeEach(() => {
componentRegister = new ComponentRegisterService();
@ -64,11 +56,8 @@ describe('DynamicExtensionComponent', () => {
});
describe('Sub-component creation', () => {
beforeEach(() => {
fixture = TestBed.createComponent(DynamicExtensionComponent);
componentFactoryResolver = TestBed.inject(ComponentFactoryResolver);
spyOn(componentFactoryResolver, 'resolveComponentFactory').and.callThrough();
component = fixture.componentInstance;
component.id = 'test-component';
component.data = { foo: 'bar' };
@ -87,22 +76,13 @@ describe('DynamicExtensionComponent', () => {
expect(innerElement).not.toBeNull();
});
it('should load the TestComponent only ONCE', () => {
component.ngOnChanges({});
fixture.detectChanges();
component.ngOnChanges({});
fixture.detectChanges();
expect((componentFactoryResolver.resolveComponentFactory as any).calls.count()).toBe(1);
});
it('should pass through the data', () => {
const testComponent = fixture.debugElement.query(By.css('test-component')).componentInstance;
expect(testComponent.data).toBe(component.data);
});
it('should update the subcomponent\'s input parameters', () => {
it('should update the subcomponent input parameters', () => {
const data = { foo: 'baz' };
component.ngOnChanges({ data: new SimpleChange(component.data, data, false) });
@ -113,7 +93,6 @@ describe('DynamicExtensionComponent', () => {
});
describe('Angular life-cycle methods in sub-component', () => {
let testComponent;
beforeEach(() => {

21
lib/extensions/src/lib/components/dynamic-component/dynamic.component.ts
View File

@ -15,17 +15,7 @@
* limitations under the License.
*/
import {
Component,
Input,
ComponentRef,
ComponentFactoryResolver,
ViewChild,
ViewContainerRef,
OnDestroy,
OnChanges,
SimpleChanges
} from '@angular/core';
import { Component, Input, ComponentRef, ViewChild, ViewContainerRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
import { ExtensionService } from '../../services/extension.service';
import { ExtensionComponent } from '../../services/component-register.service';
@ -47,7 +37,7 @@ export class DynamicExtensionComponent implements OnChanges, OnDestroy {
private componentRef: ComponentRef<ExtensionComponent>;
private loaded: boolean = false;
constructor(private extensions: ExtensionService, private componentFactoryResolver: ComponentFactoryResolver) {}
constructor(private extensions: ExtensionService) {}
ngOnChanges(changes: SimpleChanges) {
if (!this.loaded) {
@ -73,13 +63,8 @@ export class DynamicExtensionComponent implements OnChanges, OnDestroy {
private loadComponent() {
const componentType = this.extensions.getComponentById<ExtensionComponent>(this.id);
if (componentType) {
const factory = this.componentFactoryResolver.resolveComponentFactory(
componentType
);
if (factory) {
this.content.clear();
this.componentRef = this.content.createComponent(factory, 0);
}
this.componentRef = this.content.createComponent(componentType, { index: 0 });
}
}

25
lib/extensions/src/lib/components/dynamic-tab/dynamic-tab.component.ts
View File

@ -15,18 +15,7 @@
* limitations under the License.
*/
import {
Component,
Input,
OnInit,
OnDestroy,
ViewChild,
ViewContainerRef,
ComponentRef,
ComponentFactoryResolver,
OnChanges,
SimpleChanges
} from '@angular/core';
import { Component, Input, OnInit, OnDestroy, ViewChild, ViewContainerRef, ComponentRef, OnChanges, SimpleChanges } from '@angular/core';
import { Node } from '@alfresco/js-api';
import { ExtensionService } from '../../services/extension.service';
@ -47,24 +36,16 @@ export class DynamicTabComponent implements OnInit, OnChanges, OnDestroy {
private componentRef: ComponentRef<any>;
constructor(
private extensions: ExtensionService,
private componentFactoryResolver: ComponentFactoryResolver
) {}
constructor(private extensions: ExtensionService) {}
ngOnInit() {
const componentType = this.extensions.getComponentById(this.id);
if (componentType) {
const factory = this.componentFactoryResolver.resolveComponentFactory(
componentType
);
if (factory) {
this.content.clear();
this.componentRef = this.content.createComponent(factory, 0);
this.componentRef = this.content.createComponent(componentType, { index: 0 });
this.updateInstance();
}
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes.node) {

28
lib/extensions/src/lib/components/viewer/preview-extension.component.ts
View File

@ -15,24 +15,12 @@
* limitations under the License.
*/
import {
Component,
Input,
ComponentRef,
OnInit,
ComponentFactoryResolver,
ViewChild,
ViewContainerRef,
OnDestroy,
OnChanges
} from '@angular/core';
import { Component, Input, ComponentRef, OnInit, ViewChild, ViewContainerRef, OnDestroy, OnChanges } from '@angular/core';
import { ExtensionService } from '../../services/extension.service';
@Component({
selector: 'adf-preview-extension',
template: `
<div #content></div>
`
template: ` <div #content></div> `
})
export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy {
@ViewChild('content', { read: ViewContainerRef, static: true })
@ -52,10 +40,7 @@ export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy {
private componentRef: ComponentRef<any>;
constructor(
private extensionService: ExtensionService,
private componentFactoryResolver: ComponentFactoryResolver
) {}
constructor(private extensionService: ExtensionService) {}
ngOnInit() {
if (!this.id) {
@ -64,16 +49,11 @@ export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy {
const componentType = this.extensionService.getComponentById(this.id);
if (componentType) {
const factory = this.componentFactoryResolver.resolveComponentFactory(
componentType
);
if (factory) {
this.content.clear();
this.componentRef = this.content.createComponent(factory, 0);
this.componentRef = this.content.createComponent(componentType, { index: 0 });
this.updateInstance();
}
}
}
ngOnChanges() {
this.updateInstance();