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

[ACS-7382] Standalone core directives, improved lint performance (#9559)

Browse Source
This commit is contained in:
Denys Vuika 2024-04-15 15:16:17 -04:00 committed by GitHub
parent 86d3ca7892
commit 7854cde20f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 86 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/core/.eslintignore
View File

@ -1 +1,2 @@
.storybook
coverage

27
lib/core/src/lib/directives/directive.module.ts
View File

@ -15,38 +15,17 @@
* limitations under the License.
*/
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MaterialModule } from '../material.module';
import { HighlightDirective } from './highlight.directive';
import { LogoutDirective } from './logout.directive';
import { UploadDirective } from './upload.directive';
import { TooltipCardDirective } from './tooltip-card/tooltip-card.directive';
import { OverlayModule } from '@angular/cdk/overlay';
import { TooltipCardComponent } from './tooltip-card/tooltip-card.component';
import { InfiniteSelectScrollDirective } from './infinite-select-scroll.directive';
@NgModule({
imports: [
CommonModule,
MaterialModule,
OverlayModule
],
declarations: [
HighlightDirective,
LogoutDirective,
UploadDirective,
TooltipCardDirective,
TooltipCardComponent,
InfiniteSelectScrollDirective
],
exports: [
HighlightDirective,
LogoutDirective,
UploadDirective,
TooltipCardDirective,
InfiniteSelectScrollDirective
]
imports: [HighlightDirective, LogoutDirective, UploadDirective, TooltipCardDirective, TooltipCardComponent, InfiniteSelectScrollDirective],
exports: [HighlightDirective, LogoutDirective, UploadDirective, TooltipCardDirective, TooltipCardComponent, InfiniteSelectScrollDirective]
})
/** @deprecated This module is deprecated and will be removed in a future release. Please consider importing standalone components and directives directly. */
export class DirectiveModule {}

16
lib/core/src/lib/directives/highlight.directive.ts
View File

@ -21,10 +21,10 @@ import { Directive, ElementRef, Input, Renderer2, AfterViewChecked } from '@angu
import { HighlightTransformService, HighlightTransformResult } from '../common/services/highlight-transform.service';
@Directive({
selector: '[adf-highlight]'
selector: '[adf-highlight]',
standalone: true
})
export class HighlightDirective implements AfterViewChecked {
/** Class selector for highlightable elements. */
@Input('adf-highlight-selector')
selector: string = '';
@ -37,11 +37,7 @@ export class HighlightDirective implements AfterViewChecked {
@Input('adf-highlight-class')
classToApply: string = 'adf-highlight';
constructor(
private el: ElementRef,
private renderer: Renderer2,
private highlightTransformService: HighlightTransformService) {
}
constructor(private el: ElementRef, private renderer: Renderer2, private highlightTransformService: HighlightTransformService) {}
ngAfterViewChecked() {
this.highlight();
@ -52,7 +48,11 @@ export class HighlightDirective implements AfterViewChecked {
const elements = this.el.nativeElement.querySelectorAll(selector);
elements.forEach((element) => {
const highlightTransformResult: HighlightTransformResult = this.highlightTransformService.highlight(element.innerHTML, search, classToApply);
const highlightTransformResult: HighlightTransformResult = this.highlightTransformService.highlight(
element.innerHTML,
search,
classToApply
);
if (highlightTransformResult.changed) {
this.renderer.setProperty(element, 'innerHTML', highlightTransformResult.text);
}

15
lib/core/src/lib/directives/infinite-select-scroll.directive.spec.ts
View File

@ -25,8 +25,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatSelectHarness } from '@angular/material/select/testing';
@Component({
template: `
<mat-select adf-infinite-select-scroll (scrollEnd)="load()" >
template: ` <mat-select adf-infinite-select-scroll (scrollEnd)="load()">
<mat-option *ngFor="let option of options; let idx = index">
{{ option.text }}
</mat-option>
@ -54,14 +53,8 @@ describe('InfiniteSelectScrollDirective', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
MatSelectModule,
NoopAnimationsModule
],
declarations: [
TestComponent,
InfiniteSelectScrollDirective
]
imports: [MatSelectModule, NoopAnimationsModule, InfiniteSelectScrollDirective],
declarations: [TestComponent]
});
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
@ -77,7 +70,7 @@ describe('InfiniteSelectScrollDirective', () => {
it('should call an action on scrollEnd event', async () => {
const select = await loader.getHarness(MatSelectHarness);
const panel = (await select.host());
const panel = await select.host();
await panel.dispatchEvent('scrollEnd');

11
lib/core/src/lib/directives/infinite-select-scroll.directive.ts
View File

@ -23,7 +23,8 @@ import { takeUntil } from 'rxjs/operators';
const SELECT_ITEM_HEIGHT_EM = 3;
@Directive({
selector: '[adf-infinite-select-scroll]'
selector: '[adf-infinite-select-scroll]',
standalone: true
})
export class InfiniteSelectScrollDirective implements AfterViewInit, OnDestroy {
static readonly MAX_ITEMS = 50;
@ -37,11 +38,9 @@ export class InfiniteSelectScrollDirective implements AfterViewInit, OnDestroy {
constructor(@Inject(MatSelect) private matSelect: MatSelect) {}
ngAfterViewInit() {
this.matSelect.openedChange
.pipe(takeUntil(this.onDestroy$))
.subscribe((opened: boolean) => {
this.matSelect.openedChange.pipe(takeUntil(this.onDestroy$)).subscribe((opened: boolean) => {
if (opened) {
this.itemHeightToWaitBeforeLoadNext = (this.getItemHeight() * (InfiniteSelectScrollDirective.MAX_ITEMS / 2));
this.itemHeightToWaitBeforeLoadNext = this.getItemHeight() * (InfiniteSelectScrollDirective.MAX_ITEMS / 2);
this.matSelect.panel.nativeElement.addEventListener('scroll', (event: Event) => this.handleScrollEvent(event));
}
});
@ -60,7 +59,7 @@ export class InfiniteSelectScrollDirective implements AfterViewInit, OnDestroy {
private isScrollInNextFetchArea(event: Event): boolean {
const target = event.target as HTMLElement;
return target.scrollTop >= (target.scrollHeight - target.offsetHeight - this.itemHeightToWaitBeforeLoadNext);
return target.scrollTop >= target.scrollHeight - target.offsetHeight - this.itemHeightToWaitBeforeLoadNext;
}
private getItemHeight(): number {

12
lib/core/src/lib/directives/logout.directive.ts
View File

@ -21,10 +21,10 @@ import { AppConfigService } from '../app-config/app-config.service';
import { AuthenticationService } from '../auth/services/authentication.service';
@Directive({
selector: '[adf-logout]'
selector: '[adf-logout]',
standalone: true
})
export class LogoutDirective implements OnInit {
/** URI to redirect to after logging out. */
@Input()
redirectUri: string;
@ -33,15 +33,15 @@ export class LogoutDirective implements OnInit {
@Input()
enableRedirect: boolean = true;
constructor(private elementRef: ElementRef,
constructor(
private elementRef: ElementRef,
private renderer: Renderer2,
private router: Router,
private appConfig: AppConfigService,
private authenticationService: AuthenticationService) {
}
private authenticationService: AuthenticationService
) {}
ngOnInit() {
if (this.elementRef.nativeElement) {
this.renderer.listen(this.elementRef.nativeElement, 'click', (evt) => {
evt.preventDefault();

6
lib/core/src/lib/directives/public-api.ts
View File

@ -15,10 +15,12 @@
* limitations under the License.
*/
export * from './tooltip-card/tooltip-card.directive';
export * from './tooltip-card/tooltip-card.component';
export * from './highlight.directive';
export * from './infinite-select-scroll.directive';
export * from './logout.directive';
export * from './upload.directive';
export * from './tooltip-card/tooltip-card.directive';
export * from './infinite-select-scroll.directive';
export * from './directive.module';

13
lib/core/src/lib/directives/tooltip-card/tooltip-card.component.ts
View File

@ -18,21 +18,18 @@
import { Component, Input, SecurityContext } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';
import { DomSanitizer } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
@Component({
selector: 'adf-tooltip-card-component',
standalone: true,
imports: [CommonModule],
templateUrl: './tooltip-card.component.html',
styleUrls: ['./tooltip-card.component.scss'],
animations: [
trigger('tooltip', [
transition(':enter', [
style({ opacity: 0 }),
animate(200, style({ opacity: 1 }))
]),
transition(':leave', [
animate(200, style({ opacity: 0 }))
])
transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),
transition(':leave', [animate(200, style({ opacity: 0 }))])
])
]
})

25
lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.spec.ts
View File

@ -27,7 +27,14 @@ import { TooltipCardComponent } from './tooltip-card.component';
const IMAGE_URL = 'alfresco-logo.svg';
@Component({
template: `<span #span [adf-tooltip-card]="'Sample text'" [image]="'${IMAGE_URL}'" [width]="'400'" [htmlContent]="'this is the <b>html</b> raw code'" class="test-component"></span>`
template: `<span
#span
[adf-tooltip-card]="'Sample text'"
[image]="'${IMAGE_URL}'"
[width]="'400'"
[htmlContent]="'this is the <b>html</b> raw code'"
class="test-component"
></span>`
})
class TestComponent {
@ViewChild(TooltipCardDirective, { static: true })
@ -43,20 +50,12 @@ describe('TooltipCardDirective', () => {
let overlayService: Overlay;
let overlayContainer: OverlayContainer;
beforeEach((() => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
CommonModule,
OverlayModule,
NoopAnimationsModule
],
declarations: [
TooltipCardDirective,
TooltipCardComponent,
TestComponent
]
imports: [CommonModule, OverlayModule, NoopAnimationsModule, TooltipCardDirective, TooltipCardComponent],
declarations: [TestComponent]
}).compileComponents();
}));
});
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);

23
lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.ts
View File

@ -20,9 +20,11 @@ import { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overla
import { ComponentPortal } from '@angular/cdk/portal';
import { TooltipCardComponent } from './tooltip-card.component';
@Directive({ selector: '[adf-tooltip-card]' })
@Directive({
selector: '[adf-tooltip-card]',
standalone: true
})
export class TooltipCardDirective implements OnInit, OnDestroy {
@Input('adf-tooltip-card') text = '';
@Input() image = '';
@Input() width = '300';
@ -36,11 +38,7 @@ export class TooltipCardDirective implements OnInit, OnDestroy {
private overlayRef: OverlayRef;
constructor(
private overlay: Overlay,
private overlayPositionBuilder: OverlayPositionBuilder,
private elementRef: ElementRef) {
}
constructor(private overlay: Overlay, private overlayPositionBuilder: OverlayPositionBuilder, private elementRef: ElementRef) {}
ngOnDestroy(): void {
if (this.overlayRef) {
@ -49,24 +47,23 @@ export class TooltipCardDirective implements OnInit, OnDestroy {
}
ngOnInit(): void {
const positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(this.elementRef)
.withPositions([{
const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([
{
originX: this.originX,
originY: this.originY,
overlayX: this.overlayX,
overlayY: this.overlayY,
offsetY: this.offsetY,
offsetX: this.offsetX
}]);
}
]);
this.overlayRef = this.overlay.create({ positionStrategy });
}
@HostListener('mouseenter')
show() {
const tooltipRef: ComponentRef<TooltipCardComponent>
= this.overlayRef?.attach(new ComponentPortal(TooltipCardComponent));
const tooltipRef: ComponentRef<TooltipCardComponent> = this.overlayRef?.attach(new ComponentPortal(TooltipCardComponent));
tooltipRef.instance.text = this.text;
tooltipRef.instance.image = this.image;
tooltipRef.instance.width = this.width;

3
lib/core/src/lib/directives/upload.directive.ts
View File

@ -21,7 +21,8 @@ import { Directive, ElementRef, HostListener, Input, NgZone, OnDestroy, OnInit,
import { FileInfo, FileUtils } from '../common/utils/file-utils';
@Directive({
selector: '[adf-upload]'
selector: '[adf-upload]',
standalone: true
})
export class UploadDirective implements OnInit, OnDestroy {
/** Enables/disables uploading. */

2
lib/extensions/.eslintignore Normal file
View File

@ -0,0 +1,2 @@
.storybook
coverage

2
lib/insights/.eslintignore Normal file
View File

@ -0,0 +1,2 @@
.storybook
coverage

3
lib/js-api/.eslintignore Normal file
View File

@ -0,0 +1,3 @@
.storybook
coverage
docs

1
lib/process-services-cloud/.eslintignore
View File

@ -1 +1,2 @@
.storybook
coverage

2
lib/process-services/.eslintignore Normal file
View File

@ -0,0 +1,2 @@
.storybook
coverage