c41244ff-a015-455e-b2fc-341e56f1d3ed

Committed 21 Nov 2024 08:34AM UTC coverage: 90.344% (+0.001%) from 90.343%

Build # c41244ff-a015-455e-b2fc-341e56f1d3ed

Build Type

Pull #3264

circleci

Committed by

xinglu01

Commit Message

code review

Pull Request Pull Request #3264: feat(dialog): support overlay toTop with dialogRef(#TINFR-602)

Run Details

5532 of 6774 branches covered (81.67%)

Branch coverage included in aggregate %.

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

1 existing line in 1 file now uncovered.

13246 of 14011 relevant lines covered (94.54%)

993.63 hits per line

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

93.27

/src/core/overlay/abstract-overlay-ref.ts

import { Observable, Subject } from 'rxjs';
import { filter, finalize, take } from 'rxjs/operators';

import { GlobalPositionStrategy, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';

import { ESCAPE } from 'ngx-tethys/util';
import { ThyAbstractOverlayContainer } from './abstract-overlay-container';
import { ThyAbstractOverlayConfig, ThyAbstractOverlayOptions, ThyAbstractOverlayPosition } from './abstract-overlay.config';

export abstract class ThyAbstractOverlayRef<
    TComponent = unknown,
    TContainer extends ThyAbstractOverlayContainer = ThyAbstractOverlayContainer,
    TResult = unknown
> {
    id: string;
    componentInstance: TComponent;
    backdropClosable: boolean;
    disableClose: boolean;
    containerInstance: TContainer;
    /**
     * 获取 OverlayRef
     */
    abstract getOverlayRef(): OverlayRef;

    /**
     * 关闭当前模态框，若force为true，则canClose无效，强制关闭
     * @param dialogResult
     * @param force
     */
    abstract close(dialogResult?: TResult, force?: boolean): void;

    /**
     * 模态框打开后的回调
     */
    abstract afterOpened(): Observable<void>;

    /**
     * 模态框关闭后的回调
     */
    abstract afterClosed(): Observable<TResult | undefined>;

    /**
     * 模态框关闭前的回调
     */
    abstract beforeClosed(): Observable<TResult | undefined>;

    abstract keydownEvents(): Observable<KeyboardEvent>;

    /**
     * 点击模态框遮罩层的回调
     */
    abstract backdropClick(): Observable<MouseEvent>;

    /**
     * 更新模态框的位置
     * @param position
     */
    abstract updatePosition(position?: ThyAbstractOverlayPosition): this;

    /**
     * 模态框置顶
     */
    public toTop?(): void;
}

// Counter for unique overlay ids.
const uniqueIdMap: { [key: string]: number } = {};

function getUniqueId(name: string) {
    if (uniqueIdMap[name] !== undefined) {
        uniqueIdMap[name] = uniqueIdMap[name] + 1;
    } else {
        uniqueIdMap[name] = 0;
    }
    return uniqueIdMap[name];
}

export abstract class ThyAbstractInternalOverlayRef<
    T,
    TContainer extends ThyAbstractOverlayContainer,
    TResult = undefined
> extends ThyAbstractOverlayRef<T, TContainer, TResult> {
    /** The instance of component opened into the dialog. */
    componentInstance: T;

    /** Whether the user is allowed to close the dialog. */
    backdropClosable: boolean = this.config.backdropClosable;

    /** Whether the user is not allowed to close the dialog. */
    disableClose: boolean = this.config.disableClose;

    /** Subject for notifying the user that the dialog has finished opening. */
    private readonly _afterOpened = new Subject<void>();

    /** Subject for notifying the user that the dialog has finished closing. */
    private readonly _afterClosed = new Subject<TResult | undefined>();

    /** Subject for notifying the user that the dialog has started closing. */
    private readonly _beforeClosed = new Subject<TResult | undefined>();

    /** Result to be passed to afterClosed. */
    private _result: TResult | undefined;

    /** Fetches the position strategy object from the overlay ref. */
    protected getPositionStrategy(): PositionStrategy {
        return this.overlayRef.getConfig().positionStrategy;
    }

    constructor(
        private options: ThyAbstractOverlayOptions,
        protected overlayRef: OverlayRef,
        containerInstance: TContainer,
        protected config: ThyAbstractOverlayConfig
    ) {
        super();
        this.containerInstance = containerInstance;
        // Pass the id along to the container.
        this.id = containerInstance.id = config.id ? config.id : `thy-${this.options.name}-${getUniqueId(this.options.name)}`;
        // Emit when opening animation completes
        containerInstance.animationOpeningDone.pipe(take(1)).subscribe(() => {
            this._afterOpened.next();
            if (this.options.disposeWhenClose) {
                this._afterOpened.complete();
            }
        });

        // Dispose overlay when closing animation is complete
        containerInstance.animationClosingDone.pipe(take(1)).subscribe(() => {
            if (this.options.disposeWhenClose) {
                this.overlayRef.dispose();
            }
        });

        // Dispose overlay when container after destroy
        containerInstance.containerDestroy.pipe(take(1)).subscribe(() => {
            if (this.options.disposeWhenClose) {
                // component element has not been deleted when the component destroy, so use promise wait for component element destroyed
                Promise.resolve().then(() => {
                    this.overlayRef.dispose();
                });
            }
        });

        overlayRef
            .detachments()
            .pipe(
                finalize(() => {
                    this.overlayRef.dispose();
                })
            )
            .subscribe(() => {
                this._beforeClosed.next(this._result);
                this._beforeClosed.complete();
                this._afterClosed.next(this._result);
                this._afterClosed.complete();
                this.componentInstance = null;
            });

        // ESC close
        overlayRef
            .keydownEvents()
            .pipe(filter(event => event.keyCode === ESCAPE))
            .subscribe(() => {
                if ((this.disableClose !== undefined && !this.disableClose) || this.backdropClosable) {
                    this.close();
                }
            });
    }

    /**
     * Close the overlay.
     * @param overlayResult Optional result to return to the dialog opener.
     */
    close(overlayResult?: TResult, force?: boolean): void {
        if (force || !this.config.canClose || !!this.config.canClose(overlayResult)) {
            this._result = overlayResult;
            // Transition the backdrop in parallel to the overlay.
            this._beforeClosed.next(overlayResult);
            if (this.options.disposeWhenClose) {
                this._beforeClosed.complete();
            }

            this.overlayRef.detachBackdrop();
            this.containerInstance.startExitAnimation();
        }
    }

    /**
     * Gets an observable that is notified when the dialog is finished opening.
     */
    afterOpened(): Observable<void> {
        return this._afterOpened.asObservable();
    }

    /**
     * Gets an observable that is notified when the dialog is finished closing.
     */
    afterClosed(): Observable<TResult | undefined> {
        return this._afterClosed.asObservable();
    }

    /**
     * Gets an observable that is notified when the dialog has started closing.
     */
    beforeClosed(): Observable<TResult | undefined> {
        return this._beforeClosed.asObservable();
    }

    /**
     * Gets an observable that emits when the overlay's backdrop has been clicked.
     */
    backdropClick(): Observable<MouseEvent> {
        return this.overlayRef.backdropClick();
    }

    /**
     * Gets an observable that emits when keydown events are targeted on the overlay.
     */
    keydownEvents(): Observable<KeyboardEvent> {
        return this.overlayRef.keydownEvents();
    }

    /** Get overlay ref */
    getOverlayRef() {
        return this.overlayRef;
    }

    /**
     * Updates the overlay's position when is GlobalPositionStrategy
     * @param position New overlay position.
     */
    updateGlobalPosition(position?: ThyAbstractOverlayPosition): this {
        const strategy = this.getPositionStrategy() as GlobalPositionStrategy;

        if ((typeof ngDevMode === 'undefined' || ngDevMode) && !(strategy instanceof GlobalPositionStrategy)) {
            throw new Error(`current strategy is not GlobalPositionStrategy`);
        }

        if (position && (position.left || position.right)) {
            position.left ? strategy.left(position.left) : strategy.right(position.right);
        } else {
            strategy.centerHorizontally();
        }

        if (position && (position.top || position.bottom)) {
            position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
        } else {
            strategy.centerVertically();
        }

        this.overlayRef.updatePosition();

        return this;
    }
}

1	import { Observable, Subject } from 'rxjs';
2	import { filter, finalize, take } from 'rxjs/operators';
3
4	import { GlobalPositionStrategy, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';
5
6	import { ESCAPE } from 'ngx-tethys/util';
7	import { ThyAbstractOverlayContainer } from './abstract-overlay-container';
8	import { ThyAbstractOverlayConfig, ThyAbstractOverlayOptions, ThyAbstractOverlayPosition } from './abstract-overlay.config';	1✔
9
10	export abstract class ThyAbstractOverlayRef<	294✔
11	TComponent = unknown,	289✔
12	TContainer extends ThyAbstractOverlayContainer = ThyAbstractOverlayContainer,
13	TResult = unknown
14	> {	5✔
15	id: string;
16	componentInstance: TComponent;	294✔
17	backdropClosable: boolean;
18	disableClose: boolean;
19	containerInstance: TContainer;
20	/**
21	* 获取 OverlayRef	231✔
22	*/
23	abstract getOverlayRef(): OverlayRef;
24		336✔
25	/**	336✔
26	* 关闭当前模态框，若force为true，则canClose无效，强制关闭	336✔
27	* @param dialogResult	336✔
28	* @param force
29	*/	336✔
30	abstract close(dialogResult?: TResult, force?: boolean): void;
31		336✔
32	/**
33	* 模态框打开后的回调	336✔
34	*/
35	abstract afterOpened(): Observable<void>;	336✔
36
37	/**	336✔
38	* 模态框关闭后的回调	336✔
39	*/
40	abstract afterClosed(): Observable<TResult \| undefined>;	336✔
41
42	/**	336✔
43	* 模态框关闭前的回调	261✔
44	*/	261!
45	abstract beforeClosed(): Observable<TResult \| undefined>;	261✔
46
47	abstract keydownEvents(): Observable<KeyboardEvent>;
48
49	/**	336✔
50	* 点击模态框遮罩层的回调	91!
51	*/	91✔
52	abstract backdropClick(): Observable<MouseEvent>;
53
54	/**
55	* 更新模态框的位置	336✔
56	* @param position	325!
57	*/
58	abstract updatePosition(position?: ThyAbstractOverlayPosition): this;	325✔
59		325✔
60	/**
61	* 模态框置顶
62	*/
63	public toTop?(): void;	336✔
64	}
65
66	// Counter for unique overlay ids.	336✔
67	const uniqueIdMap: { [key: string]: number } = {};
68
69	function getUniqueId(name: string) {	336✔
70	if (uniqueIdMap[name] !== undefined) {	336✔
71	uniqueIdMap[name] = uniqueIdMap[name] + 1;	336✔
72	} else {	336✔
73	uniqueIdMap[name] = 0;	336✔
74	}
75	return uniqueIdMap[name];
76	}	336✔
77
78	export abstract class ThyAbstractInternalOverlayRef<	17✔
79	T,
80	TContainer extends ThyAbstractOverlayContainer,	3!
81	TResult = undefined	1✔
82	> extends ThyAbstractOverlayRef<T, TContainer, TResult> {
83	/** The instance of component opened into the dialog. */
84	componentInstance: T;
85
86	/** Whether the user is allowed to close the dialog. */
87	backdropClosable: boolean = this.config.backdropClosable;
88
89	/** Whether the user is not allowed to close the dialog. */
90	disableClose: boolean = this.config.disableClose;	333✔
91		330✔
92	/** Subject for notifying the user that the dialog has finished opening. */
93	private readonly _afterOpened = new Subject<void>();	330✔
94		330!
95	/** Subject for notifying the user that the dialog has finished closing. */	330✔
96	private readonly _afterClosed = new Subject<TResult \| undefined>();
97		330✔
98	/** Subject for notifying the user that the dialog has started closing. */	330✔
99	private readonly _beforeClosed = new Subject<TResult \| undefined>();
100
101	/** Result to be passed to afterClosed. */
102	private _result: TResult \| undefined;
103
104	/** Fetches the position strategy object from the overlay ref. */
105	protected getPositionStrategy(): PositionStrategy {	87✔
106	return this.overlayRef.getConfig().positionStrategy;
107	}
108
109	constructor(
110	private options: ThyAbstractOverlayOptions,
111	protected overlayRef: OverlayRef,	667✔
112	containerInstance: TContainer,
113	protected config: ThyAbstractOverlayConfig
114	) {
115	super();
116	this.containerInstance = containerInstance;
117	// Pass the id along to the container.	1✔
118	this.id = containerInstance.id = config.id ? config.id : `thy-${this.options.name}-${getUniqueId(this.options.name)}`;
119	// Emit when opening animation completes
120	containerInstance.animationOpeningDone.pipe(take(1)).subscribe(() => {
121	this._afterOpened.next();
122	if (this.options.disposeWhenClose) {
123	this._afterOpened.complete();	1✔
124	}
125	});
126
127	// Dispose overlay when closing animation is complete
128	containerInstance.animationClosingDone.pipe(take(1)).subscribe(() => {
129	if (this.options.disposeWhenClose) {	19✔
130	this.overlayRef.dispose();
131	}
132	});
133		107✔
134	// Dispose overlay when container after destroy
135	containerInstance.containerDestroy.pipe(take(1)).subscribe(() => {
136	if (this.options.disposeWhenClose) {
137	// component element has not been deleted when the component destroy, so use promise wait for component element destroyed
138	Promise.resolve().then(() => {
139	this.overlayRef.dispose();
140	});	116✔
141	}	116!
UNCOV 142	});	×
143
144	overlayRef	116✔
145	.detachments()	4✔
146	.pipe(
147	finalize(() => {
148	this.overlayRef.dispose();	112✔
149	})
150	)	116✔
151	.subscribe(() => {	2✔
152	this._beforeClosed.next(this._result);
153	this._beforeClosed.complete();
154	this._afterClosed.next(this._result);	114✔
155	this._afterClosed.complete();
156	this.componentInstance = null;	116✔
157	});	116✔
158
159	// ESC close
160	overlayRef
161	.keydownEvents()
162	.pipe(filter(event => event.keyCode === ESCAPE))
163	.subscribe(() => {
164	if ((this.disableClose !== undefined && !this.disableClose) \|\| this.backdropClosable) {
165	this.close();
166	}
167	});
168	}
169
170	/**
171	* Close the overlay.
172	* @param overlayResult Optional result to return to the dialog opener.
173	*/
174	close(overlayResult?: TResult, force?: boolean): void {
175	if (force \|\| !this.config.canClose \|\| !!this.config.canClose(overlayResult)) {
176	this._result = overlayResult;
177	// Transition the backdrop in parallel to the overlay.
178	this._beforeClosed.next(overlayResult);
179	if (this.options.disposeWhenClose) {
180	this._beforeClosed.complete();
181	}
182
183	this.overlayRef.detachBackdrop();
184	this.containerInstance.startExitAnimation();
185	}
186	}
187
188	/**
189	* Gets an observable that is notified when the dialog is finished opening.
190	*/
191	afterOpened(): Observable<void> {
192	return this._afterOpened.asObservable();
193	}
194
195	/**
196	* Gets an observable that is notified when the dialog is finished closing.
197	*/
198	afterClosed(): Observable<TResult \| undefined> {
199	return this._afterClosed.asObservable();
200	}
201
202	/**
203	* Gets an observable that is notified when the dialog has started closing.
204	*/
205	beforeClosed(): Observable<TResult \| undefined> {
206	return this._beforeClosed.asObservable();
207	}
208
209	/**
210	* Gets an observable that emits when the overlay's backdrop has been clicked.
211	*/
212	backdropClick(): Observable<MouseEvent> {
213	return this.overlayRef.backdropClick();
214	}
215
216	/**
217	* Gets an observable that emits when keydown events are targeted on the overlay.
218	*/
219	keydownEvents(): Observable<KeyboardEvent> {
220	return this.overlayRef.keydownEvents();
221	}
222
223	/** Get overlay ref */
224	getOverlayRef() {
225	return this.overlayRef;
226	}
227
228	/**
229	* Updates the overlay's position when is GlobalPositionStrategy
230	* @param position New overlay position.
231	*/
232	updateGlobalPosition(position?: ThyAbstractOverlayPosition): this {
233	const strategy = this.getPositionStrategy() as GlobalPositionStrategy;
234
235	if ((typeof ngDevMode === 'undefined' \|\| ngDevMode) && !(strategy instanceof GlobalPositionStrategy)) {
236	throw new Error(`current strategy is not GlobalPositionStrategy`);
237	}
238
239	if (position && (position.left \|\| position.right)) {
240	position.left ? strategy.left(position.left) : strategy.right(position.right);
241	} else {
242	strategy.centerHorizontally();
243	}
244
245	if (position && (position.top \|\| position.bottom)) {
246	position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
247	} else {
248	strategy.centerVertically();
249	}
250
251	this.overlayRef.updatePosition();
252
253	return this;
254	}
255	}

atinc / ngx-tethys / c41244ff-a015-455e-b2fc-341e56f1d3ed

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