a3721145-f971-410d-8b70-93e9aa8848df

Committed 21 May 2025 03:01AM UTC coverage: 90.257% (+0.01%) from 90.244%

Build # a3721145-f971-410d-8b70-93e9aa8848df

Build Type

Pull #3439

circleci

Committed by

xinglu01

Commit Message

feat(menu): code review

Pull Request Pull Request #3439: feat(menu): migrate to signal for menu

Run Details

5572 of 6844 branches covered (81.41%)

Branch coverage included in aggregate %.

10 of 11 new or added lines in 6 files covered. (90.91%)

5 existing lines in 2 files now uncovered.

13715 of 14525 relevant lines covered (94.42%)

899.24 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

87.5

/src/menu/item/action/menu-item-action.component.ts

import { ThyPopover, ThyPopoverConfig } from 'ngx-tethys/popover';
import { coerceBooleanProperty } from 'ngx-tethys/util';

import { ComponentType } from '@angular/cdk/portal';
import { Component, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, inject, input } from '@angular/core';

/**
 * 菜单项操作组件
 * @name thy-menu-item-action,[thy-menu-item-action],[thyMenuItemAction]
 * @order 25
 */
@Component({
    selector: 'thy-menu-item-action,[thy-menu-item-action],[thyMenuItemAction]',
    templateUrl: './menu-item-action.component.html',
    host: {
        class: 'thy-menu-item-action'
    }
})
export class ThyMenuItemAction implements OnInit, OnDestroy {
    private popover = inject(ThyPopover);
    private renderer = inject(Renderer2);
    private elementRef = inject(ElementRef);

    _boundEvent = false;

    /**
     * 设置 Action 菜单
     */
    readonly thyActionMenu = input<ComponentType<any> | TemplateRef<any>>();

    /**
     * 是否阻止事件冒泡
     */
    readonly thyStopPropagation = input(true, { transform: coerceBooleanProperty });

    /**
     * 弹出框的参数
     * @default { placement: "bottomLeft", insideClosable: true }
     */
    readonly thyPopoverOptions = input<ThyPopoverConfig>();

    private bindClickEvent() {
        if (this._boundEvent) {
            return;
        }
        this._boundEvent = true;
        this.removeClickListenerFn = this.renderer.listen(this.elementRef.nativeElement, 'click', event => {
            if (this.thyStopPropagation()) {
                event.stopPropagation();
            }
            if (this.thyActionMenu()) {
                const activeClass = 'action-active';
                const wrapDOM = (event.target as HTMLElement).closest('.thy-menu-item');
                wrapDOM?.classList.add(activeClass);
                const popoverRef = this.popover.open(
                    this.thyActionMenu(),
                    Object.assign(
                        {
                            origin: event.currentTarget as HTMLElement,
                            insideClosable: true,
                            placement: 'bottomLeft',
                            originActiveClass: 'active'
                        },
                        this.thyPopoverOptions()
                    )
                );
                popoverRef?.afterClosed().subscribe(() => {
                    wrapDOM?.classList.remove(activeClass);
                });
            }
        });
    }

    private removeClickListenerFn: VoidFunction | null = null;

    ngOnInit(): void {
        this.bindClickEvent();
    }

    ngOnDestroy(): void {
        this.removeClickListenerFn?.();
    }
}

1	import { ThyPopover, ThyPopoverConfig } from 'ngx-tethys/popover';
2	import { coerceBooleanProperty } from 'ngx-tethys/util';
3
4	import { ComponentType } from '@angular/cdk/portal';
5	import { Component, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, inject, input } from '@angular/core';
6
7	/**
8	* 菜单项操作组件
9	* @name thy-menu-item-action,[thy-menu-item-action],[thyMenuItemAction]
10	* @order 25
11	*/
12	@Component({	1✔
13	selector: 'thy-menu-item-action,[thy-menu-item-action],[thyMenuItemAction]',
14	templateUrl: './menu-item-action.component.html',	78✔
15	host: {	78✔
16	class: 'thy-menu-item-action'	78✔
17	}	78✔
18	})	78✔
19	export class ThyMenuItemAction implements OnInit, OnDestroy {	78✔
20	private popover = inject(ThyPopover);	78✔
21	private renderer = inject(Renderer2);	78✔
22	private elementRef = inject(ElementRef);
23
24	_boundEvent = false;	78!
UNCOV 25		×
26	/**
27	* 设置 Action 菜单	78✔
28	*/	78✔
29	readonly thyActionMenu = input<ComponentType<any> \| TemplateRef<any>>();	2!
30		2✔
31	/**
32	* 是否阻止事件冒泡	2!
33	*/	2✔
34	readonly thyStopPropagation = input(true, { transform: coerceBooleanProperty });	2✔
35		2✔
36	/**	2✔
37	* 弹出框的参数
38	* @default { placement: "bottomLeft", insideClosable: true }
39	*/
40	readonly thyPopoverOptions = input<ThyPopoverConfig>();
41
42	private bindClickEvent() {	2✔
43	if (this._boundEvent) {	2✔
44	return;
45	}
46	this._boundEvent = true;
47	this.removeClickListenerFn = this.renderer.listen(this.elementRef.nativeElement, 'click', event => {
48	if (this.thyStopPropagation()) {
49	event.stopPropagation();	78✔
50	}
51	if (this.thyActionMenu()) {
52	const activeClass = 'action-active';	78✔
53	const wrapDOM = (event.target as HTMLElement).closest('.thy-menu-item');
54	wrapDOM?.classList.add(activeClass);	1✔
55	const popoverRef = this.popover.open(
56	this.thyActionMenu(),
57	Object.assign(
58	{
59	origin: event.currentTarget as HTMLElement,
60	insideClosable: true,	1✔
61	placement: 'bottomLeft',
62	originActiveClass: 'active'
63	},
64	this.thyPopoverOptions()
65	)
66	);
67	popoverRef?.afterClosed().subscribe(() => {
68	wrapDOM?.classList.remove(activeClass);
69	});
70	}
71	});
72	}
73
74	private removeClickListenerFn: VoidFunction \| null = null;
75
76	ngOnInit(): void {
77	this.bindClickEvent();
78	}
79
80	ngOnDestroy(): void {
81	this.removeClickListenerFn?.();
82	}
83	}

atinc / ngx-tethys / a3721145-f971-410d-8b70-93e9aa8848df

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous