a6fd6bbd-4df4-4744-9e25-f8405cd2e9de

Committed 04 Nov 2024 06:51AM UTC coverage: 90.398% (+0.001%) from 90.397%

Build # a6fd6bbd-4df4-4744-9e25-f8405cd2e9de

Build Type

Pull #3226

circleci

Committed by

pubuzhixing8

Commit Message

feat(overlay): add openingDone property for ThyAbstractOverlayRef #TINFR-902

Pull Request Pull Request #3226: feat(overlay): add openingDone property for ThyAbstractOverlayRef #TI…

Run Details

5503 of 6730 branches covered (81.77%)

Branch coverage included in aggregate %.

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

1 existing line in 1 file now uncovered.

13185 of 13943 relevant lines covered (94.56%)

997.25 hits per line

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

93.4

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

import { ESCAPE, helpers } from 'ngx-tethys/util';
import { Observable, of, Subject } from 'rxjs';
import { filter, finalize, take } from 'rxjs/operators';

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

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;

    /**
     * 模态框打开是否完成，如果为 true 则代表打开动画执行完成
     */
    openingDone = false;

    /**
     * 获取 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;
}

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

atinc / ngx-tethys / a6fd6bbd-4df4-4744-9e25-f8405cd2e9de

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