ba7e05e2-37c0-44c6-8725-6f617aa0d43e

import { ThyAbstractOverlayRef, ThyAbstractOverlayService, ThyClickPositioner } from 'ngx-tethys/core';
import { of } from 'rxjs';

import { Directionality } from '@angular/cdk/bidi';
import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal, ComponentType } from '@angular/cdk/portal';
import { Inject, Injectable, Injector, OnDestroy, Optional, StaticProvider, TemplateRef } from '@angular/core';

import { ThyConfirmConfig } from './confirm.config';
import { ThyConfirmAbstractComponent, THY_CONFIRM_COMPONENT_TOKEN } from './confirm/token';
import { ThyDialogContainerComponent } from './dialog-container.component';
import { ThyDialogRef, ThyInternalDialogRef } from './dialog-ref';
import { THY_DIALOG_DEFAULT_OPTIONS, ThyDialogConfig, ThyDialogSizes } from './dialog.config';
import { dialogAbstractOverlayOptions } from './dialog.options';

/**
 * @public
 * @order 10
 */
@Injectable()
export class ThyDialog extends ThyAbstractOverlayService<ThyDialogConfig, ThyDialogContainerComponent> implements OnDestroy {
    protected buildOverlayConfig(config: ThyDialogConfig<any>): OverlayConfig {
        const size = config.size || ThyDialogSizes.md;
        const overlayConfig = this.buildBaseOverlayConfig(config, [`dialog-${size}`]);
        overlayConfig.positionStrategy = this.overlay.position().global();
        overlayConfig.scrollStrategy = config.scrollStrategy || this.overlay.scrollStrategies.block();
        return overlayConfig;
    }

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

        return containerRef.instance;
    }

    protected createAbstractOverlayRef<T, TResult>(
        overlayRef: OverlayRef,
        containerInstance: ThyDialogContainerComponent,
        config: ThyDialogConfig<any>
    ): ThyAbstractOverlayRef<T, ThyDialogContainerComponent, TResult> {
        return new ThyInternalDialogRef(overlayRef, containerInstance, config);
    }

    protected createInjector<T>(
        config: ThyDialogConfig,
        dialogRef: ThyDialogRef<T>,
        dialogContainer: ThyDialogContainerComponent
    ): Injector {
        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;

        const injectionTokens: StaticProvider[] = [
            { provide: ThyDialogContainerComponent, useValue: dialogContainer },
            {
                provide: ThyDialogRef,
                useValue: dialogRef
            }
        ];

        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 });
    }

    constructor(
        overlay: Overlay,
        injector: Injector,
        @Optional()
        @Inject(THY_DIALOG_DEFAULT_OPTIONS)
        defaultConfig: ThyDialogConfig,
        clickPositioner: ThyClickPositioner,
        @Inject(THY_CONFIRM_COMPONENT_TOKEN) private confirmComponentType: ComponentType<ThyConfirmAbstractComponent>
    ) {
        super(dialogAbstractOverlayOptions, overlay, injector, defaultConfig);
        clickPositioner.initialize();
    }

    /**
     * 打开 Dialog
     */
    open<T, TData = unknown, TResult = unknown>(
        componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
        config?: ThyDialogConfig<TData>
    ): ThyDialogRef<T, TResult> {
        const dialogRef = this.openOverlay(componentOrTemplateRef, config);
        const dialogRefInternal = dialogRef as ThyInternalDialogRef<T, TResult>;
        dialogRefInternal.updateSizeAndPosition(
            dialogRef.containerInstance.config.width,
            dialogRef.containerInstance.config.height,
            dialogRef.containerInstance.config.position
        );
        return dialogRef as ThyDialogRef<T, TResult>;
    }

    /**
     * 打开 Confirm
     */
    confirm(options: ThyConfirmConfig) {
        return this.open(this.confirmComponentType, {
            initialState: {
                options: options
            }
        });
    }

    /**
     * 根据 id 获取 Dialog
     */
    getDialogById(id: string): ThyDialogRef<any> | undefined {
        return this.getAbstractOverlayById(id) as ThyDialogRef<any> | undefined;
    }

    /**
     * 获取所有打开的 Dialog
     */
    getOpenedDialogs(): ThyDialogRef<any>[] {
        return this.getAbstractOverlays();
    }

    /**
     * @description.en-us Finds the closest ThyDialogRef to an element by looking at the DOM.
     * @description 获取与指定元素最接近的 ThyDialogRef
     */
    getClosestDialog(element: HTMLElement): ThyDialogRef<any> | undefined {
        let parent: HTMLElement | null = element.parentElement;

        while (parent && !parent.classList.contains('thy-dialog-container')) {
            parent = parent.parentElement;
        }
        if (parent && parent.id) {
            return this.getDialogById(parent.id);
        }
        return null;
    }

    ngOnDestroy() {
        this.dispose();
    }
}

1	import { ThyAbstractOverlayRef, ThyAbstractOverlayService, ThyClickPositioner } from 'ngx-tethys/core';
2	import { of } from 'rxjs';
3
4	import { Directionality } from '@angular/cdk/bidi';
5	import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
6	import { ComponentPortal, ComponentType } from '@angular/cdk/portal';
7	import { Inject, Injectable, Injector, OnDestroy, Optional, StaticProvider, TemplateRef } from '@angular/core';
8
9	import { ThyConfirmConfig } from './confirm.config';
10	import { ThyConfirmAbstractComponent, THY_CONFIRM_COMPONENT_TOKEN } from './confirm/token';
11	import { ThyDialogContainerComponent } from './dialog-container.component';
12	import { ThyDialogRef, ThyInternalDialogRef } from './dialog-ref';
13	import { THY_DIALOG_DEFAULT_OPTIONS, ThyDialogConfig, ThyDialogSizes } from './dialog.config';
14	import { dialogAbstractOverlayOptions } from './dialog.options';
15
16	/**
17	* @public	1✔
18	* @order 10
19	*/	×
20	@Injectable()	×
21	export class ThyDialog extends ThyAbstractOverlayService<ThyDialogConfig, ThyDialogContainerComponent> implements OnDestroy {	×
22	protected buildOverlayConfig(config: ThyDialogConfig<any>): OverlayConfig {	×
23	const size = config.size \|\| ThyDialogSizes.md;	×
24	const overlayConfig = this.buildBaseOverlayConfig(config, [`dialog-${size}`]);
25	overlayConfig.positionStrategy = this.overlay.position().global();
26	overlayConfig.scrollStrategy = config.scrollStrategy \|\| this.overlay.scrollStrategies.block();	×
27	return overlayConfig;	×
28	}	×
29
30	protected attachOverlayContainer(overlay: OverlayRef, config: ThyDialogConfig<any>): ThyDialogContainerComponent {
31	const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;	×
32	const injector = Injector.create({	×
33	parent: userInjector \|\| this.injector,	×
34	providers: [{ provide: ThyDialogConfig, useValue: config }]
35	});
36	const containerPortal = new ComponentPortal(ThyDialogContainerComponent, config.viewContainerRef, injector);	×
37	const containerRef = overlay.attach<ThyDialogContainerComponent>(containerPortal);
38
39	return containerRef.instance;	×
40	}	×
41
42	protected createAbstractOverlayRef<T, TResult>(
43	overlayRef: OverlayRef,
44	containerInstance: ThyDialogContainerComponent,
45	config: ThyDialogConfig<any>
46	): ThyAbstractOverlayRef<T, ThyDialogContainerComponent, TResult> {
47	return new ThyInternalDialogRef(overlayRef, containerInstance, config);	×
48	}	×
49
50	protected createInjector<T>(
51	config: ThyDialogConfig,
52	dialogRef: ThyDialogRef<T>,
53	dialogContainer: ThyDialogContainerComponent
54	): Injector {
55	const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
56		×
57	const injectionTokens: StaticProvider[] = [
58	{ provide: ThyDialogContainerComponent, useValue: dialogContainer },
59	{	×
60	provide: ThyDialogRef,	×
61	useValue: dialogRef	×
62	}
63	];
64
65	if (config.direction && (!userInjector \|\| !userInjector.get<Directionality \| null>(Directionality, null))) {
66	injectionTokens.push({
67	provide: Directionality,	×
68	useValue: {	×
69	value: config.direction,	×
70	change: of()	×
71	}
72	});
73	}
74
75	return Injector.create({ parent: userInjector \|\| this.injector, providers: injectionTokens });
76	}	×
77
78	constructor(
79	overlay: Overlay,
80	injector: Injector,
81	@Optional()
82	@Inject(THY_DIALOG_DEFAULT_OPTIONS)
83	defaultConfig: ThyDialogConfig,
84	clickPositioner: ThyClickPositioner,
85	@Inject(THY_CONFIRM_COMPONENT_TOKEN) private confirmComponentType: ComponentType<ThyConfirmAbstractComponent>
86	) {	×
87	super(dialogAbstractOverlayOptions, overlay, injector, defaultConfig);
88	clickPositioner.initialize();
89	}
90
91	/**
92	* 打开 Dialog	×
93	*/
94	open<T, TData = unknown, TResult = unknown>(
95	componentOrTemplateRef: ComponentType<T> \| TemplateRef<T>,
96	config?: ThyDialogConfig<TData>
97	): ThyDialogRef<T, TResult> {
98	const dialogRef = this.openOverlay(componentOrTemplateRef, config);
99	const dialogRefInternal = dialogRef as ThyInternalDialogRef<T, TResult>;	×
100	dialogRefInternal.updateSizeAndPosition(	×
101	dialogRef.containerInstance.config.width,	×
102	dialogRef.containerInstance.config.height,
103	dialogRef.containerInstance.config.position	×
104	);	×
105	return dialogRef as ThyDialogRef<T, TResult>;
106	}	×
107
108	/**
109	* 打开 Confirm	×
110	*/
111	confirm(options: ThyConfirmConfig) {	1✔
112	return this.open(this.confirmComponentType, {
113	initialState: {
114	options: options
115	}
116	});
117	}
118
119	/**	1✔
120	* 根据 id 获取 Dialog
121	*/
122	getDialogById(id: string): ThyDialogRef<any> \| undefined {
123	return this.getAbstractOverlayById(id) as ThyDialogRef<any> \| undefined;
124	}
125
126	/**
127	* 获取所有打开的 Dialog
128	*/
129	getOpenedDialogs(): ThyDialogRef<any>[] {
130	return this.getAbstractOverlays();
131	}
132
133	/**
134	* @description.en-us Finds the closest ThyDialogRef to an element by looking at the DOM.
135	* @description 获取与指定元素最接近的 ThyDialogRef
136	*/
137	getClosestDialog(element: HTMLElement): ThyDialogRef<any> \| undefined {
138	let parent: HTMLElement \| null = element.parentElement;
139
140	while (parent && !parent.classList.contains('thy-dialog-container')) {
141	parent = parent.parentElement;
142	}
143	if (parent && parent.id) {
144	return this.getDialogById(parent.id);
145	}
146	return null;
147	}
148
149	ngOnDestroy() {
150	this.dispose();
151	}
152	}

atinc / ngx-tethys / ba7e05e2-37c0-44c6-8725-6f617aa0d43e

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