51d8d517-87cf-4f0e-9ce3-b75b9714ec53

Committed 11 Jul 2024 09:13AM UTC coverage: 90.451% (+0.002%) from 90.449%

Build # 51d8d517-87cf-4f0e-9ce3-b75b9714ec53

Build Type

push

circleci

Committed by

web-flow

Commit Message

feat(menu): thyMenuItemAction click support thy-memu-item hightlight … (#3119)

Run Details

5484 of 6708 branches covered (81.75%)

Branch coverage included in aggregate %.

5 of 5 new or added lines in 1 file covered. (100.0%)

1 existing line in 1 file now uncovered.

13233 of 13985 relevant lines covered (94.62%)

986.65 hits per line

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

85.71

/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, Input, OnDestroy, Renderer2, TemplateRef } 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'
    },
    standalone: true
})
export class ThyMenuItemAction implements OnDestroy {
    _boundEvent = false;

    _actionMenu: ComponentType<any> | TemplateRef<any>;

    /**
     * 设置 Action 菜单
     */
    @Input()
    set thyActionMenu(value: ComponentType<any> | TemplateRef<any>) {
        this._actionMenu = value;
        if (this._actionMenu) {
            this.bindClickEvent();
        }
    }

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

    /**
     * 弹出框的参数
     * @default { placement: "bottomLeft", insideClosable: true }
     */
    @Input() thyPopoverOptions: 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._actionMenu) {
                const activeClass = 'action-active';
                const wrapDOM = (event.target as HTMLElement).closest('.thy-menu-item');
                wrapDOM?.classList.add(activeClass);
                const popoverRef = this.popover.open(
                    this._actionMenu,
                    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;

    constructor(private popover: ThyPopover, private renderer: Renderer2, private elementRef: ElementRef) {}

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

atinc / ngx-tethys / 51d8d517-87cf-4f0e-9ce3-b75b9714ec53

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