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. /// 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 { 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({ @Directive({
selector: '[tbTruncateWithTooltip]', selector: '[tbTruncateWithTooltip]',
@ -25,38 +27,37 @@ import { coerceBoolean } from '@shared/decorators/coercion';
inputs: ['matTooltipClass', 'matTooltipTouchGestures'], inputs: ['matTooltipClass', 'matTooltipTouchGestures'],
}] }]
}) })
export class TruncateWithTooltipDirective implements OnInit, AfterViewInit { export class TruncateWithTooltipDirective implements OnInit {
@Input('tbTruncateWithTooltip') text = input<string>(undefined, {alias: 'tbTruncateWithTooltip'});
text: string;
@Input() tooltipEnabled = input(true, {transform: booleanAttribute});
@coerceBoolean()
tooltipEnabled = true;
@Input() position = input<TooltipPosition>('above');
position: TooltipPosition = 'above';
constructor( constructor(
private elementRef: ElementRef<HTMLElement>, private elementRef: ElementRef<HTMLElement>,
private renderer: Renderer2, 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 { ngOnInit(): void {
this.applyTruncationStyles(); this.applyTruncationStyles();
this.tooltip.position = this.position; this.tooltip.position = this.position();
this.showTooltipOnOverflow(this); this.showTooltipOnOverflow(this);
} }
ngAfterViewInit(): void {
this.tooltip.message = this.text || this.elementRef.nativeElement.innerText;
}
private showTooltipOnOverflow(ctx: TruncateWithTooltipDirective) { private showTooltipOnOverflow(ctx: TruncateWithTooltipDirective) {
ctx.tooltip.show = (function(old) { ctx.tooltip.show = (function(old) {
function extendsFunction() { function extendsFunction() {
if (ctx.tooltipEnabled && ctx.isOverflown()) { if (ctx.tooltipEnabled() && ctx.isOverflown()) {
old.apply(ctx.tooltip, arguments); old.apply(ctx.tooltip, arguments);
} }
} }