dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactoring directive tbTruncateWithTooltip to signal and watch content

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-12-17 11:18:28 +02:00
parent 5cd0f0ceb9
commit cb5b15802f
1 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui-ngx/src/app/shared/directives/truncate-with-tooltip.directive.ts
View File

@ -14,9 +14,11 @@
/// limitations under the License.
///
import { AfterViewInit, Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
import { booleanAttribute, Directive, ElementRef, input, OnInit, Renderer2 } from '@angular/core';
import { MatTooltip, TooltipPosition } from '@angular/material/tooltip';
import { coerceBoolean } from '@shared/decorators/coercion';
import { ContentObserver } from '@angular/cdk/observers';
import { merge } from 'rxjs';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
@Directive({
selector: '[tbTruncateWithTooltip]',
@ -25,38 +27,37 @@ import { coerceBoolean } from '@shared/decorators/coercion';
inputs: ['matTooltipClass', 'matTooltipTouchGestures'],
}]
})
export class TruncateWithTooltipDirective implements OnInit, AfterViewInit {
export class TruncateWithTooltipDirective implements OnInit {
@Input('tbTruncateWithTooltip')
text: string;
text = input<string>(undefined, {alias: 'tbTruncateWithTooltip'});
@Input()
@coerceBoolean()
tooltipEnabled = true;
tooltipEnabled = input(true, {transform: booleanAttribute});
@Input()
position: TooltipPosition = 'above';
position = input<TooltipPosition>('above');
constructor(
private elementRef: ElementRef<HTMLElement>,
private renderer: Renderer2,
private tooltip: MatTooltip
) {}
private tooltip: MatTooltip,
private contentObserver: ContentObserver
) {
merge(toObservable(this.text), this.contentObserver.observe(this.elementRef)).pipe(
takeUntilDestroyed()
).subscribe(() => {
this.tooltip.message = this.text() || this.elementRef.nativeElement.innerText
})
}
ngOnInit(): void {
this.applyTruncationStyles();
this.tooltip.position = this.position;
this.tooltip.position = this.position();
this.showTooltipOnOverflow(this);
}
ngAfterViewInit(): void {
this.tooltip.message = this.text || this.elementRef.nativeElement.innerText;
}
private showTooltipOnOverflow(ctx: TruncateWithTooltipDirective) {
ctx.tooltip.show = (function(old) {
function extendsFunction() {
if (ctx.tooltipEnabled && ctx.isOverflown()) {
if (ctx.tooltipEnabled() && ctx.isOverflown()) {
old.apply(ctx.tooltip, arguments);
}
}