7d06cc42-808e-4eb8-bd0d-f2d48684ff92

Committed 11 Jul 2024 03:28AM UTC coverage: 90.441% (-0.008%) from 90.449%

Build # 7d06cc42-808e-4eb8-bd0d-f2d48684ff92

Build Type

push

circleci

Committed by

ggxxgxq

Commit Message

feat(menu): thyMenuItemAction click support thy-memu-item hightlight #INFR-12832

Run Details

5487 of 6714 branches covered (81.72%)

Branch coverage included in aggregate %.

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

1 existing line in 1 file now uncovered.

13236 of 13988 relevant lines covered (94.62%)

986.39 hits per line

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

81.82

/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;

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

atinc / ngx-tethys / 7d06cc42-808e-4eb8-bd0d-f2d48684ff92

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