32ab3322-5681-4202-bd2a-3fb846e1c37e

Committed 04 Dec 2023 11:19AM UTC coverage: 90.349% (+0.01%) from 90.339%

Build # 32ab3322-5681-4202-bd2a-3fb846e1c37e

Build Type

push

circleci

Committed by

web-flow

Commit Message

feat: support animation for select and popover #INFR-10478 (#2931)

Run Details

5334 of 6564 branches covered (0.0%)

Branch coverage included in aggregate %.

17 of 17 new or added lines in 4 files covered. (100.0%)

17 existing lines in 2 files now uncovered.

13287 of 14046 relevant lines covered (94.6%)

975.2 hits per line

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

93.8

/src/popover/popover.service.ts

import { ComponentTypeOrTemplateRef, getFlexiblePositions, ThyAbstractOverlayRef, ThyAbstractOverlayService } from 'ngx-tethys/core';
import { FunctionProp, isFunction } from 'ngx-tethys/util';
import { of, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { Directionality } from '@angular/cdk/bidi';
import { coerceArray, coerceElement } from '@angular/cdk/coercion';
import {
    FlexibleConnectedPositionStrategy,
    FlexibleConnectedPositionStrategyOrigin,
    Overlay,
    OverlayConfig,
    OverlayContainer,
    OverlayRef,
    PositionStrategy,
    ScrollStrategy,
    ViewportRuler
} from '@angular/cdk/overlay';
import { Platform } from '@angular/cdk/platform';
import { ComponentPortal } from '@angular/cdk/portal';
import { DOCUMENT } from '@angular/common';
import { ElementRef, Inject, Injectable, Injector, NgZone, OnDestroy, Optional, StaticProvider, TemplateRef } from '@angular/core';

import { ThyPopoverContainerComponent } from './popover-container.component';
import { ThyInternalPopoverRef, ThyPopoverRef } from './popover-ref';
import {
    THY_POPOVER_DEFAULT_CONFIG,
    THY_POPOVER_DEFAULT_CONFIG_VALUE,
    THY_POPOVER_SCROLL_STRATEGY,
    ThyPopoverConfig
} from './popover.config';
import { popoverAbstractOverlayOptions } from './popover.options';
import { SafeAny } from 'ngx-tethys/types';

/**
 * @public
 * @order 10
 */
@Injectable()
export class ThyPopover extends ThyAbstractOverlayService<ThyPopoverConfig, ThyPopoverContainerComponent> implements OnDestroy {
    private readonly ngUnsubscribe$ = new Subject();

    private originInstancesMap = new Map<
        ElementRef | HTMLElement,
        {
            config: ThyPopoverConfig;
            popoverRef: ThyPopoverRef<any, any>;
        }
    >();

    private buildPositionStrategy<TData>(config: ThyPopoverConfig<TData>): PositionStrategy {
        const origin: FlexibleConnectedPositionStrategyOrigin = config.originPosition ? config.originPosition : config.origin;
        // const positionStrategy = this.overlay.position().flexibleConnectedTo(origin);
        const positionStrategy = new FlexibleConnectedPositionStrategy(
            origin,
            this._viewportRuler,
            this._document,
            this._platform,
            this._overlayContainer
        );
        const positions = getFlexiblePositions(config.placement, config.offset, 'thy-popover');
        positionStrategy.withPositions(positions);
        positionStrategy.withGrowAfterOpen(true);
        positionStrategy.withTransformOriginOn('.thy-popover-container');
        positionStrategy.positionChanges.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(change => {
            if (change.scrollableViewProperties.isOverlayClipped) {
                // After position changes occur and the overlay is clipped by
                // a parent scrollable then close the tooltip.
                this.ngZone.run(() => this.close());
            }
        });
        return positionStrategy;
    }

    private buildScrollStrategy(config: ThyPopoverConfig): ScrollStrategy {
        if (config.scrollStrategy) {
            return config.scrollStrategy;
        } else if (this.scrollStrategy && isFunction(this.scrollStrategy)) {
            return this.scrollStrategy();
        } else {
            this.overlay.scrollStrategies.block();
        }
    }

    protected buildOverlayConfig<TData>(config: ThyPopoverConfig<TData>): OverlayConfig {
        const positionStrategy = this.buildPositionStrategy(config);
        const overlayConfig = this.buildBaseOverlayConfig(config, 'thy-popover-panel');
        overlayConfig.positionStrategy = positionStrategy;
        overlayConfig.scrollStrategy = this.buildScrollStrategy(config);
        return overlayConfig;
    }

    protected attachOverlayContainer(overlay: OverlayRef, config: ThyPopoverConfig<any>): ThyPopoverContainerComponent {
        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
        const injector = Injector.create({
            parent: userInjector || this.injector,
            providers: [{ provide: ThyPopoverConfig, useValue: config }]
        });
        const containerPortal = new ComponentPortal(ThyPopoverContainerComponent, config.viewContainerRef, injector);
        const containerRef = overlay.attach<ThyPopoverContainerComponent>(containerPortal);
        return containerRef.instance;
    }

    protected createAbstractOverlayRef<T, TResult = unknown>(
        overlayRef: OverlayRef,
        containerInstance: ThyPopoverContainerComponent,
        config: ThyPopoverConfig
    ): ThyAbstractOverlayRef<T, ThyPopoverContainerComponent, TResult> {
        return new ThyInternalPopoverRef(overlayRef, containerInstance, config);
    }

    protected createInjector<T>(
        config: ThyPopoverConfig,
        popoverRef: ThyPopoverRef<T>,
        popoverContainer: ThyPopoverContainerComponent
    ): Injector {
        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;

        const injectionTokens: StaticProvider[] = [
            { provide: ThyPopoverContainerComponent, useValue: popoverContainer },
            {
                provide: ThyPopoverRef,
                useValue: popoverRef
            }
        ];

        if (config.direction && (!userInjector || !userInjector.get<Directionality | null>(Directionality, null))) {
            injectionTokens.push({
                provide: Directionality,
                useValue: {
                    value: config.direction,
                    change: of()
                }
            });
        }

        return Injector.create({ parent: userInjector || this.injector, providers: injectionTokens });
    }

    private originElementAddActiveClass(config: ThyPopoverConfig) {
        if (config.originActiveClass) {
            coerceElement<HTMLElement>(config.origin).classList.add(...coerceArray(config.originActiveClass));
        }
    }

    private originElementRemoveActiveClass(config: ThyPopoverConfig) {
        if (config.originActiveClass) {
            coerceElement<HTMLElement>(config.origin).classList.remove(...coerceArray(config.originActiveClass));
        }
    }

    constructor(
        overlay: Overlay,
        injector: Injector,
        @Optional()
        @Inject(THY_POPOVER_DEFAULT_CONFIG)
        defaultConfig: ThyPopoverConfig,
        @Inject(THY_POPOVER_SCROLL_STRATEGY)
        scrollStrategy: FunctionProp<ScrollStrategy>,
        private ngZone: NgZone,
        private _viewportRuler: ViewportRuler,
        @Optional() @Inject(DOCUMENT) private _document: any,
        private _platform: Platform,
        private _overlayContainer: OverlayContainer
    ) {
        super(
            popoverAbstractOverlayOptions,
            overlay,
            injector,
            {
                ...THY_POPOVER_DEFAULT_CONFIG_VALUE,
                ...defaultConfig
            },
            scrollStrategy
        );
    }

    private ensureCloseClosest(origin: HTMLElement) {
        let closeAndEnd = false;
        this.originInstancesMap.forEach((value, key) => {
            if (value.config.manualClosure) {
                if (key === origin) {
                    value.popoverRef.close();
                    closeAndEnd = true;
                }
            } else {
                if (key === origin) {
                    closeAndEnd = true;
                }
                value.popoverRef.close();
            }
        });
        return closeAndEnd;
    }

    /**
     * 打开悬浮层
     */
    open<T, TData = unknown, TResult = unknown>(
        componentOrTemplateRef: ComponentTypeOrTemplateRef<T>,
        config?: ThyPopoverConfig<TData>
    ): ThyPopoverRef<T, TResult> {
        const originElement = coerceElement(config.origin);
        // 默认关闭之前的弹出框
        // 1. 当之前的 Popover 设置 manualClosure 为 true 时, 弹出其他 Popover 时不自动关闭 manualClosure 为 true 的 Popover
        // 2. 当前的 Origin 对应的 Popover 已经弹出，不管 manualClosure 设置为何，直接关闭并返回
        if (this.ensureCloseClosest(originElement)) {
            return;
        }

        const popoverRef = this.openOverlay<T, TResult>(componentOrTemplateRef, config) as ThyPopoverRef<T, TResult, TData>;

        if (config.placement === 'top' || config.placement === 'bottom') {
            popoverRef.containerInstance.animationTrigger = 'scaleYMotion';
        } else if (config.placement === 'left' || config.placement === 'right') {
            popoverRef.containerInstance.animationTrigger = 'scaleXMotion';
        } else {
            popoverRef.containerInstance.animationTrigger = 'scaleMotion';
        }

        config = popoverRef.containerInstance.config;
        popoverRef.afterClosed().subscribe(() => {
            this.originElementRemoveActiveClass(config);
            this.originInstancesMap.delete(originElement);
        });

        this.originElementAddActiveClass(config);
        this.originInstancesMap.set(originElement, {
            config,
            popoverRef
        });

        return popoverRef;
    }

    /**
     * 根据Id获取打开的悬浮层
     */
    getPopoverById(id: string): ThyPopoverRef<any> | undefined {
        return this.getAbstractOverlayById(id) as ThyPopoverRef<any> | undefined;
    }

    /**
     * 获取已经打开的悬浮层
     */
    getOpenedPopovers(): ThyPopoverRef<SafeAny>[] {
        return this.getAbstractOverlays();
    }

    /**
     * @description.en-us Finds the closest ThyPopoverRef to an element by looking at the DOM.
     * @description 通过 Dom 元素查找最近弹出的悬浮层
     */
    getClosestPopover(element: HTMLElement): ThyPopoverRef<any> | undefined {
        const parent = element.closest('.thy-popover-container');

        if (parent && parent.id) {
            return this.getPopoverById(parent.id);
        }
        return null;
    }

    /**
     * 关闭悬浮层
     */
    close<T>(result?: T, force?: boolean) {
        super.close(result, force);
    }

    /**
     * @internal
     */
    ngOnDestroy() {
        this.dispose();
    }
}

1	import { ComponentTypeOrTemplateRef, getFlexiblePositions, ThyAbstractOverlayRef, ThyAbstractOverlayService } from 'ngx-tethys/core';
2	import { FunctionProp, isFunction } from 'ngx-tethys/util';
3	import { of, Subject } from 'rxjs';
4	import { takeUntil } from 'rxjs/operators';
5
6	import { Directionality } from '@angular/cdk/bidi';
7	import { coerceArray, coerceElement } from '@angular/cdk/coercion';
8	import {
9	FlexibleConnectedPositionStrategy,
10	FlexibleConnectedPositionStrategyOrigin,
11	Overlay,
12	OverlayConfig,
13	OverlayContainer,
14	OverlayRef,
15	PositionStrategy,
16	ScrollStrategy,
17	ViewportRuler
18	} from '@angular/cdk/overlay';
19	import { Platform } from '@angular/cdk/platform';
20	import { ComponentPortal } from '@angular/cdk/portal';
21	import { DOCUMENT } from '@angular/common';	1✔
22	import { ElementRef, Inject, Injectable, Injector, NgZone, OnDestroy, Optional, StaticProvider, TemplateRef } from '@angular/core';
23		166✔
24	import { ThyPopoverContainerComponent } from './popover-container.component';
25	import { ThyInternalPopoverRef, ThyPopoverRef } from './popover-ref';	166✔
26	import {	166✔
27	THY_POPOVER_DEFAULT_CONFIG,	166✔
28	THY_POPOVER_DEFAULT_CONFIG_VALUE,	166✔
29	THY_POPOVER_SCROLL_STRATEGY,	166✔
30	ThyPopoverConfig	166✔
31	} from './popover.config';	145!
32	import { popoverAbstractOverlayOptions } from './popover.options';
33	import { SafeAny } from 'ngx-tethys/types';
UNCOV 34		×
35	/**
36	* @public
37	* @order 10	166✔
38	*/
39	@Injectable()
40	export class ThyPopover extends ThyAbstractOverlayService<ThyPopoverConfig, ThyPopoverContainerComponent> implements OnDestroy {	166✔
41	private readonly ngUnsubscribe$ = new Subject();	23✔
42
43	private originInstancesMap = new Map<	143!
44	ElementRef \| HTMLElement,	143✔
45	{
46	config: ThyPopoverConfig;
UNCOV 47	popoverRef: ThyPopoverRef<any, any>;	×
48	}
49	>();
50
51	private buildPositionStrategy<TData>(config: ThyPopoverConfig<TData>): PositionStrategy {	166✔
52	const origin: FlexibleConnectedPositionStrategyOrigin = config.originPosition ? config.originPosition : config.origin;	166✔
53	// const positionStrategy = this.overlay.position().flexibleConnectedTo(origin);	166✔
54	const positionStrategy = new FlexibleConnectedPositionStrategy(	166✔
55	origin,	166✔
56	this._viewportRuler,
57	this._document,
58	this._platform,	165✔
59	this._overlayContainer	165✔
60	);	280✔
61	const positions = getFlexiblePositions(config.placement, config.offset, 'thy-popover');
62	positionStrategy.withPositions(positions);
63	positionStrategy.withGrowAfterOpen(true);	165✔
64	positionStrategy.withTransformOriginOn('.thy-popover-container');	165✔
65	positionStrategy.positionChanges.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(change => {	165✔
66	if (change.scrollableViewProperties.isOverlayClipped) {
67	// After position changes occur and the overlay is clipped by
68	// a parent scrollable then close the tooltip.	165✔
69	this.ngZone.run(() => this.close());
70	}
71	});	95✔
72	return positionStrategy;	95✔
73	}
74
75	private buildScrollStrategy(config: ThyPopoverConfig): ScrollStrategy {
76	if (config.scrollStrategy) {
77	return config.scrollStrategy;
78	} else if (this.scrollStrategy && isFunction(this.scrollStrategy)) {
79	return this.scrollStrategy();	95!
80	} else {	×
81	this.overlay.scrollStrategies.block();
82	}
83	}
84
85	protected buildOverlayConfig<TData>(config: ThyPopoverConfig<TData>): OverlayConfig {
86	const positionStrategy = this.buildPositionStrategy(config);
87	const overlayConfig = this.buildBaseOverlayConfig(config, 'thy-popover-panel');
88	overlayConfig.positionStrategy = positionStrategy;	95✔
89	overlayConfig.scrollStrategy = this.buildScrollStrategy(config);
90	return overlayConfig;
91	}	165✔
92		160✔
93	protected attachOverlayContainer(overlay: OverlayRef, config: ThyPopoverConfig<any>): ThyPopoverContainerComponent {
94	const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
95	const injector = Injector.create({
96	parent: userInjector \|\| this.injector,	165✔
97	providers: [{ provide: ThyPopoverConfig, useValue: config }]	160✔
98	});
99	const containerPortal = new ComponentPortal(ThyPopoverContainerComponent, config.viewContainerRef, injector);
100	const containerRef = overlay.attach<ThyPopoverContainerComponent>(containerPortal);
101	return containerRef.instance;	287✔
102	}
103
104	protected createAbstractOverlayRef<T, TResult = unknown>(
105	overlayRef: OverlayRef,	287✔
106	containerInstance: ThyPopoverContainerComponent,	287✔
107	config: ThyPopoverConfig	287✔
108	): ThyAbstractOverlayRef<T, ThyPopoverContainerComponent, TResult> {	287✔
109	return new ThyInternalPopoverRef(overlayRef, containerInstance, config);	287✔
110	}	287✔
111		287✔
112	protected createInjector<T>(
113	config: ThyPopoverConfig,
114	popoverRef: ThyPopoverRef<T>,	168✔
115	popoverContainer: ThyPopoverContainerComponent	168✔
116	): Injector {	16✔
117	const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;	11✔
118		1✔
119	const injectionTokens: StaticProvider[] = [	1✔
120	{ provide: ThyPopoverContainerComponent, useValue: popoverContainer },
121	{
122	provide: ThyPopoverRef,
123	useValue: popoverRef	5✔
124	}	1✔
125	];
126		5✔
127	if (config.direction && (!userInjector \|\| !userInjector.get<Directionality \| null>(Directionality, null))) {
128	injectionTokens.push({
129	provide: Directionality,	168✔
130	useValue: {
131	value: config.direction,
132	change: of()
133	}
134	});
135	}	168✔
136
137	return Injector.create({ parent: userInjector \|\| this.injector, providers: injectionTokens });
138	}
139		168✔
140	private originElementAddActiveClass(config: ThyPopoverConfig) {	2✔
141	if (config.originActiveClass) {
142	coerceElement<HTMLElement>(config.origin).classList.add(...coerceArray(config.originActiveClass));	166✔
143	}	165✔
144	}	41✔
145
146	private originElementRemoveActiveClass(config: ThyPopoverConfig) {	124✔
147	if (config.originActiveClass) {	5✔
148	coerceElement<HTMLElement>(config.origin).classList.remove(...coerceArray(config.originActiveClass));
149	}
150	}	119✔
151
152	constructor(	165✔
153	overlay: Overlay,	165✔
154	injector: Injector,	165✔
155	@Optional()	165✔
156	@Inject(THY_POPOVER_DEFAULT_CONFIG)
157	defaultConfig: ThyPopoverConfig,	165✔
158	@Inject(THY_POPOVER_SCROLL_STRATEGY)	165✔
159	scrollStrategy: FunctionProp<ScrollStrategy>,
160	private ngZone: NgZone,
161	private _viewportRuler: ViewportRuler,
162	@Optional() @Inject(DOCUMENT) private _document: any,	165✔
163	private _platform: Platform,
164	private _overlayContainer: OverlayContainer
165	) {
166	super(
167	popoverAbstractOverlayOptions,
168	overlay,	3✔
169	injector,
170	{
171	...THY_POPOVER_DEFAULT_CONFIG_VALUE,
172	...defaultConfig
173	},
174	scrollStrategy	1✔
175	);
176	}
177
178	private ensureCloseClosest(origin: HTMLElement) {
179	let closeAndEnd = false;
180	this.originInstancesMap.forEach((value, key) => {
181	if (value.config.manualClosure) {	2✔
182	if (key === origin) {	2✔
183	value.popoverRef.close();	1✔
184	closeAndEnd = true;
185	}	1✔
186	} else {
187	if (key === origin) {
188	closeAndEnd = true;
189	}
190	value.popoverRef.close();
191	}	18✔
192	});
193	return closeAndEnd;
194	}
195
196	/**
197	* 打开悬浮层	288✔
198	*/
199	open<T, TData = unknown, TResult = unknown>(	1✔
200	componentOrTemplateRef: ComponentTypeOrTemplateRef<T>,
201	config?: ThyPopoverConfig<TData>
202	): ThyPopoverRef<T, TResult> {
203	const originElement = coerceElement(config.origin);
204	// 默认关闭之前的弹出框
205	// 1. 当之前的 Popover 设置 manualClosure 为 true 时, 弹出其他 Popover 时不自动关闭 manualClosure 为 true 的 Popover
206	// 2. 当前的 Origin 对应的 Popover 已经弹出，不管 manualClosure 设置为何，直接关闭并返回
207	if (this.ensureCloseClosest(originElement)) {
208	return;
209	}
210
211	const popoverRef = this.openOverlay<T, TResult>(componentOrTemplateRef, config) as ThyPopoverRef<T, TResult, TData>;	1✔
212
213	if (config.placement === 'top' \|\| config.placement === 'bottom') {
214	popoverRef.containerInstance.animationTrigger = 'scaleYMotion';
215	} else if (config.placement === 'left' \|\| config.placement === 'right') {
216	popoverRef.containerInstance.animationTrigger = 'scaleXMotion';
217	} else {
218	popoverRef.containerInstance.animationTrigger = 'scaleMotion';
219	}
220
221	config = popoverRef.containerInstance.config;
222	popoverRef.afterClosed().subscribe(() => {
223	this.originElementRemoveActiveClass(config);
224	this.originInstancesMap.delete(originElement);
225	});
226
227	this.originElementAddActiveClass(config);
228	this.originInstancesMap.set(originElement, {
229	config,
230	popoverRef
231	});
232
233	return popoverRef;
234	}
235
236	/**
237	* 根据Id获取打开的悬浮层
238	*/
239	getPopoverById(id: string): ThyPopoverRef<any> \| undefined {
240	return this.getAbstractOverlayById(id) as ThyPopoverRef<any> \| undefined;
241	}
242
243	/**
244	* 获取已经打开的悬浮层
245	*/
246	getOpenedPopovers(): ThyPopoverRef<SafeAny>[] {
247	return this.getAbstractOverlays();
248	}
249
250	/**
251	* @description.en-us Finds the closest ThyPopoverRef to an element by looking at the DOM.
252	* @description 通过 Dom 元素查找最近弹出的悬浮层
253	*/
254	getClosestPopover(element: HTMLElement): ThyPopoverRef<any> \| undefined {
255	const parent = element.closest('.thy-popover-container');
256
257	if (parent && parent.id) {
258	return this.getPopoverById(parent.id);
259	}
260	return null;
261	}
262
263	/**
264	* 关闭悬浮层
265	*/
266	close<T>(result?: T, force?: boolean) {
267	super.close(result, force);
268	}
269
270	/**
271	* @internal
272	*/
273	ngOnDestroy() {
274	this.dispose();
275	}
276	}

atinc / ngx-tethys / 32ab3322-5681-4202-bd2a-3fb846e1c37e

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