b3b06eda-a793-45aa-81b9-6c0ccb856e39

Committed 14 Aug 2024 07:48AM UTC coverage: 90.471% (+0.003%) from 90.468%

Build # b3b06eda-a793-45aa-81b9-6c0ccb856e39

Build Type

Pull #3092

circleci

Committed by

minlovehua

Commit Message

Merge branch 'master' into v18.0.0-next

Pull Request Pull Request #3092: feat: upgrade ng to 18 #INFR-12428

Run Details

5500 of 6724 branches covered (81.8%)

Branch coverage included in aggregate %.

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

2 existing lines in 1 file now uncovered.

13251 of 14002 relevant lines covered (94.64%)

997.63 hits per line

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

90.38

/src/upload/file-drop.directive.ts

import { isEmpty } from 'ngx-tethys/util';
import { fromEvent, Subject } from 'rxjs';
import { filter, takeUntil, tap } from 'rxjs/operators';

import {
    Directive,
    ElementRef,
    EventEmitter,
    HostBinding,
    Inject,
    Input,
    NgZone,
    OnDestroy,
    OnInit,
    Output,
    Renderer2
} from '@angular/core';

import { FileSelectBaseDirective } from './file-select-base';
import { THY_UPLOAD_DEFAULT_OPTIONS, ThyUploadConfig } from './upload.config';

/**
 * @name thyFileDrop
 */
@Directive({
    selector: '[thyFileDrop]',
    standalone: true
})
export class ThyFileDropDirective extends FileSelectBaseDirective implements OnInit, OnDestroy {
    @HostBinding('class.drop-over')
    @HostBinding('class.thy-drop-over')
    isDragOver = false;
    private dragOverCustomClass: string;

    @Input() set thyFileDropClassName(value: string) {
        this.dragOverCustomClass = value;
    }

    @Output() thyOnDrop = new EventEmitter();

    /**
     * 当拖拽的文件中有不符合 thyAcceptType 中定义的类型时触发
     * @description.en-us It is triggered when there are files in the dragged files that do not conform to the types defined in thyAcceptType.
     */
    @Output() thyFilesReject = new EventEmitter<File[]>();

    private ngUnsubscribe$ = new Subject<void>();

    constructor(
        public elementRef: ElementRef,
        public renderer: Renderer2,
        public ngZone: NgZone,
        @Inject(THY_UPLOAD_DEFAULT_OPTIONS) public defaultConfig: ThyUploadConfig
    ) {
        super(elementRef, defaultConfig);
    }

    public ngOnInit(): void {
        this.ngZone.runOutsideAngular(() => {
            fromEvent(this.elementRef.nativeElement, 'dragenter')
                .pipe(
                    takeUntil(this.ngUnsubscribe$),
                    tap((event: DragEvent) => {
                        event.preventDefault();
                    }),
                    filter(event => event.dataTransfer.items && event.dataTransfer.items.length > 0)
                )
                .subscribe((event: DragEvent) => {
                    if (this.checkRejectFolderAndHtmlElement(event)) {
                        const files = this.filterFilesOrItems(Array.from(event.dataTransfer.items));
                        if (!isEmpty(files)) {
                            this.ngZone.run(() => {
                                this.isDragOver = true;
                                this.toggleDropOverClassName();
                            });
                        }
                    }
                });

            fromEvent(this.elementRef.nativeElement, 'dragover')
                .pipe(takeUntil(this.ngUnsubscribe$))
                .subscribe((event: any) => {
                    event.preventDefault();
                });

            fromEvent(this.elementRef.nativeElement, 'dragleave')
                .pipe(takeUntil(this.ngUnsubscribe$))
                .subscribe((event: any) => {
                    this.ngZone.run(() => {
                        if (!this.elementRef.nativeElement.contains(event.fromElement)) {
                            this.resetDragOver();
                            this.toggleDropOverClassName();
                        }
                    });
                });

            fromEvent(this.elementRef.nativeElement, 'drop')
                .pipe(
                    takeUntil(this.ngUnsubscribe$),
                    tap((event: DragEvent) => {
                        event.preventDefault();
                    })
                )
                .subscribe((event: DragEvent) => {
                    this.ngZone.run(() => {
                        if (this.checkRejectFolderAndHtmlElement(event)) {
                            const originFiles = event.dataTransfer ? Array.from(event.dataTransfer.files) : [];
                            const files = this.filterFilesOrItems(originFiles) as File[];

                            if (files.length !== originFiles.length) {
                                const differentFiles = originFiles.filter(item => !files.includes(item));
                                this.thyFilesReject.emit(differentFiles);
                            }
                            if (!isEmpty(files)) {
                                this.selectFiles(event, files, this.thyOnDrop);
                            }
                        }
                        this.resetDragOver();
                        this.toggleDropOverClassName();
                    });
                });
        });
    }

    private checkRejectFolderAndHtmlElement(event: DragEvent) {
        // 排除文件夹和HTML元素拖拽
        const items: DataTransferItemList | DataTransferItem[] = event.dataTransfer ? event.dataTransfer.items : [];
        let res = true;
        for (let index = 0; index < items.length; index++) {
            const item = items[index];
            const entry = this.getAsEntry(item);
            if (item.kind !== 'file' || (entry && !entry.isFile)) {
                res = false;
                // console.error(`file extensions not support drag upload, kind: ${item.kind}, type: ${item.type}`);
            }
        }
        return res;
    }

    private getAsEntry(item: DataTransferItem): FileSystemEntry {
        let entry: FileSystemEntry;
        if (item['getAsEntry']) {
            // https://wiki.whatwg.org/wiki/DragAndDropEntries
            entry = item['getAsEntry']();
        } else if (item.webkitGetAsEntry) {
            entry = item.webkitGetAsEntry();
        }
        return entry;
    }

    private filterFilesOrItems(items: Array<DataTransferItem | File>): Array<DataTransferItem | File> {
        if (this.acceptType && this.acceptType != '*/*') {
            return items.filter(item => {
                return this.acceptType.includes(item.type);
            });
        } else {
            return Array.from(items);
        }
    }

    private toggleDropOverClassName() {
        if (this.dragOverCustomClass) {
            if (this.isDragOver) {
                this.renderer.addClass(this.elementRef.nativeElement, this.dragOverCustomClass);
            } else {
                this.renderer.removeClass(this.elementRef.nativeElement, this.dragOverCustomClass);
            }
        }
    }

    private setDragOverState(isDragOver: boolean) {
        this.isDragOver = isDragOver;
    }

    private resetDragOver() {
        this.setDragOverState(false);
    }

    public ngOnDestroy(): void {
        this.ngUnsubscribe$.next();
        this.ngUnsubscribe$.complete();
    }
}

1	import { isEmpty } from 'ngx-tethys/util';
2	import { fromEvent, Subject } from 'rxjs';
3	import { filter, takeUntil, tap } from 'rxjs/operators';
4
5	import {
6	Directive,
7	ElementRef,
8	EventEmitter,
9	HostBinding,
10	Inject,
11	Input,	1✔
12	NgZone,
13	OnDestroy,	8✔
14	OnInit,
15	Output,
16	Renderer2	7✔
17	} from '@angular/core';	7✔
18		7✔
19	import { FileSelectBaseDirective } from './file-select-base';	7✔
20	import { THY_UPLOAD_DEFAULT_OPTIONS, ThyUploadConfig } from './upload.config';	7✔
21		7✔
22	/**	7✔
23	* @name thyFileDrop	7✔
24	*/	7✔
25	@Directive({
26	selector: '[thyFileDrop]',
27	standalone: true	7✔
28	})	7✔
29	export class ThyFileDropDirective extends FileSelectBaseDirective implements OnInit, OnDestroy {
30	@HostBinding('class.drop-over')	7✔
31	@HostBinding('class.thy-drop-over')	7✔
32	isDragOver = false;
33	private dragOverCustomClass: string;	7!
34		7✔
35	@Input() set thyFileDropClassName(value: string) {	7!
36	this.dragOverCustomClass = value;	7✔
37	}	7✔
38		7✔
39	@Output() thyOnDrop = new EventEmitter();
40
41	/**
42	* 当拖拽的文件中有不符合 thyAcceptType 中定义的类型时触发
43	* @description.en-us It is triggered when there are files in the dragged files that do not conform to the types defined in thyAcceptType.	7✔
44	*/
45	@Output() thyFilesReject = new EventEmitter<File[]>();
46		1✔
47	private ngUnsubscribe$ = new Subject<void>();
48		7✔
49	constructor(
50	public elementRef: ElementRef,
51	public renderer: Renderer2,	2✔
52	public ngZone: NgZone,	2!
53	@Inject(THY_UPLOAD_DEFAULT_OPTIONS) public defaultConfig: ThyUploadConfig	2✔
54	) {	2✔
55	super(elementRef, defaultConfig);
56	}
57
58	public ngOnInit(): void {	7✔
59	this.ngZone.runOutsideAngular(() => {
60	fromEvent(this.elementRef.nativeElement, 'dragenter')	6✔
61	.pipe(
62	takeUntil(this.ngUnsubscribe$),
63	tap((event: DragEvent) => {	6✔
64	event.preventDefault();	6!
65	}),	6✔
66	filter(event => event.dataTransfer.items && event.dataTransfer.items.length > 0)	6✔
67	)	6✔
68	.subscribe((event: DragEvent) => {	3✔
69	if (this.checkRejectFolderAndHtmlElement(event)) {	3✔
70	const files = this.filterFilesOrItems(Array.from(event.dataTransfer.items));
71	if (!isEmpty(files)) {	6✔
72	this.ngZone.run(() => {	2✔
73	this.isDragOver = true;
74	this.toggleDropOverClassName();
75	});	6✔
76	}	6✔
77	}
78	});
79
80	fromEvent(this.elementRef.nativeElement, 'dragover')
81	.pipe(takeUntil(this.ngUnsubscribe$))
82	.subscribe((event: any) => {
83	event.preventDefault();	13✔
84	});	13✔
85		13✔
86	fromEvent(this.elementRef.nativeElement, 'dragleave')	12✔
87	.pipe(takeUntil(this.ngUnsubscribe$))	12✔
88	.subscribe((event: any) => {	12!
UNCOV 89	this.ngZone.run(() => {	×
90	if (!this.elementRef.nativeElement.contains(event.fromElement)) {
91	this.resetDragOver();
92	this.toggleDropOverClassName();
93	}	13✔
94	});
95	});
96
97	fromEvent(this.elementRef.nativeElement, 'drop')	12!
98	.pipe(
UNCOV 99	takeUntil(this.ngUnsubscribe$),	×
100	tap((event: DragEvent) => {
101	event.preventDefault();	12!
102	})	12✔
103	)
104	.subscribe((event: DragEvent) => {	12✔
105	this.ngZone.run(() => {
106	if (this.checkRejectFolderAndHtmlElement(event)) {
107	const originFiles = event.dataTransfer ? Array.from(event.dataTransfer.files) : [];	13✔
108	const files = this.filterFilesOrItems(originFiles) as File[];	7✔
109		7✔
110	if (files.length !== originFiles.length) {
111	const differentFiles = originFiles.filter(item => !files.includes(item));
112	this.thyFilesReject.emit(differentFiles);
113	}	6✔
114	if (!isEmpty(files)) {
115	this.selectFiles(event, files, this.thyOnDrop);
116	}
117	}	15✔
118	this.resetDragOver();	2✔
119	this.toggleDropOverClassName();	1✔
120	});
121	});
122	});	1✔
123	}
124
125	private checkRejectFolderAndHtmlElement(event: DragEvent) {
126	// 排除文件夹和HTML元素拖拽
127	const items: DataTransferItemList \| DataTransferItem[] = event.dataTransfer ? event.dataTransfer.items : [];	8✔
128	let res = true;
129	for (let index = 0; index < items.length; index++) {
130	const item = items[index];	8✔
131	const entry = this.getAsEntry(item);
132	if (item.kind !== 'file' \|\| (entry && !entry.isFile)) {
133	res = false;	7✔
134	// console.error(`file extensions not support drag upload, kind: ${item.kind}, type: ${item.type}`);	7✔
135	}
136	}	1✔
137	return res;
138	}
139
140	private getAsEntry(item: DataTransferItem): FileSystemEntry {
141	let entry: FileSystemEntry;
142	if (item['getAsEntry']) {	1✔
143	// https://wiki.whatwg.org/wiki/DragAndDropEntries
144	entry = item['getAsEntry']();
145	} else if (item.webkitGetAsEntry) {
146	entry = item.webkitGetAsEntry();
147	}
148	return entry;
149	}	1✔
150
151	private filterFilesOrItems(items: Array<DataTransferItem \| File>): Array<DataTransferItem \| File> {
152	if (this.acceptType && this.acceptType != '/') {
153	return items.filter(item => {
154	return this.acceptType.includes(item.type);
155	});
156	} else {
157	return Array.from(items);
158	}
159	}
160
161	private toggleDropOverClassName() {
162	if (this.dragOverCustomClass) {
163	if (this.isDragOver) {
164	this.renderer.addClass(this.elementRef.nativeElement, this.dragOverCustomClass);
165	} else {
166	this.renderer.removeClass(this.elementRef.nativeElement, this.dragOverCustomClass);
167	}
168	}
169	}
170
171	private setDragOverState(isDragOver: boolean) {
172	this.isDragOver = isDragOver;
173	}
174
175	private resetDragOver() {
176	this.setDragOverState(false);
177	}
178
179	public ngOnDestroy(): void {
180	this.ngUnsubscribe$.next();
181	this.ngUnsubscribe$.complete();
182	}
183	}

atinc / ngx-tethys / b3b06eda-a793-45aa-81b9-6c0ccb856e39

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