c0ef8457-a839-451f-8b72-80fd73106231

Committed 02 Apr 2024 02:27PM UTC coverage: 90.524% (-0.06%) from 90.585%

Build # c0ef8457-a839-451f-8b72-80fd73106231

Build Type

Pull #3062

circleci

Committed by

minlovehua

Commit Message

refactor(all): use the transform attribute of @Input() instead of @InputBoolean() and @InputNumber()

Pull Request Pull Request #3062: refactor(all): use the transform attribute of @input() instead of @InputBoolean() and @InputNumber()

Run Details

4987 of 6108 branches covered (81.65%)

Branch coverage included in aggregate %.

217 of 223 new or added lines in 82 files covered. (97.31%)

202 existing lines in 53 files now uncovered.

12246 of 12929 relevant lines covered (94.72%)

1055.59 hits per line

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

92.86

/src/drag-drop/drop-container.directive.ts

import {
    OnInit,
    Directive,
    Output,
    EventEmitter,
    ContentChildren,
    QueryList,
    AfterContentInit,
    NgZone,
    Input,
    booleanAttribute
} from '@angular/core';
import { ThyDragDirective } from './drag.directive';
import { merge, Observable, defer } from 'rxjs';
import { mixinUnsubscribe, MixinBase, Constructor, ThyUnsubscribe } from 'ngx-tethys/core';
import { takeUntil, startWith, take, switchMap } from 'rxjs/operators';
import { ThyDragDropEvent, ThyDragStartEvent, ThyDragEndEvent, ThyDragOverEvent } from './drag-drop.class';
import { THY_DROP_CONTAINER_DIRECTIVE, IThyDropContainerDirective } from './drop-container.class';

const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);

/**
 * @name thy-drop-container,[thyDropContainer]
 * @order 30
 */
@Directive({
    selector: 'thy-drop-container,[thyDropContainer]',
    providers: [
        {
            provide: THY_DROP_CONTAINER_DIRECTIVE,
            useExisting: ThyDropContainerDirective
        }
    ],
    standalone: true
})
export class ThyDropContainerDirective<T = any> extends _MixinBase implements OnInit, AfterContentInit, IThyDropContainerDirective {
    /**
     * 元数据
     * @type any[]
     */
    @Input('thyDropContainer')
    set dragContainer(data: T[]) {
        this.data = data;
    }

    /**
     * 元数据
     * @type any[]
     */
    @Input('thyDropContainerData') data: T[];

    /**
     * 是否禁用拖拽
     * @default false
     */
    @Input({ alias: 'thyDropContainerDisabled', transform: booleanAttribute }) disabled: boolean;

    /**
     * 拖拽之前的回调，函数返回 false 则阻止拖拽
     */
    @Input('thyBeforeDragStart') beforeStart: (e: ThyDragStartEvent<T>) => boolean;

    /**
     * 拖拽时回调，函数返回 false 则阻止移入
     */
    @Input('thyBeforeDragOver') beforeOver: (e: ThyDragOverEvent<T>) => boolean;

    /**
     * 拖放到元素时回调，函数返回 false 则阻止放置
     */
    @Input('thyBeforeDragDrop') beforeDrop: (e: ThyDragDropEvent<T>) => boolean;

    /**
     * 开始拖拽时调用
     */
    @Output('thyDragStarted') started = new EventEmitter<ThyDragStartEvent<ThyDragDirective>>();

    /**
     * dragend 触发时调用
     */
    @Output('thyDragEnded') ended = new EventEmitter<ThyDragEndEvent<ThyDragDirective>>();

    /**
     * dragover 触发时调用
     */
    @Output('thyDragOvered') overed = new EventEmitter<ThyDragOverEvent<ThyDragDirective>>();

    /**
     * drop 触发时调用
     */
    @Output('thyDragDropped') dropped = new EventEmitter<ThyDragDropEvent<ThyDragDirective>>();

    /**
     * @internal
     */
    @ContentChildren(ThyDragDirective, {
        descendants: false
    })
    draggables: QueryList<ThyDragDirective>;

    constructor(private ngZone: NgZone) {
        super();
    }

    ngOnInit() {}

    ngAfterContentInit() {
        this.draggables.changes.pipe(startWith(null), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
            this.draggableChanges();
        });
    }

    private draggableChanges() {
        this.resetDraggableChanges(item => item.dragRef.started).subscribe(event => {
            this.started.emit(event);
        });
        this.resetDraggableChanges(item => item.dragRef.ended).subscribe(event => {
            this.ended.emit(event);
        });
        this.resetDraggableChanges(item => item.dragRef.overed).subscribe(event => {
            this.overed.emit(event);
        });
        this.resetDraggableChanges(item => item.dragRef.dropped).subscribe(event => {
            this.dropped.emit(event);
        });
    }

    private resetDraggableChanges(fn: (item: ThyDragDirective) => Observable<any>) {
        return defer(() => {
            if (this.draggables) {
                return merge(...this.draggables.map(fn));
            }
            return this.ngZone.onStable.asObservable().pipe(
                take(1),
                switchMap(() => this.resetDraggableChanges.bind(this, fn))
            );
        }).pipe(takeUntil(merge(this.ngUnsubscribe$, this.draggables.changes))) as Observable<any>;
    }
}

1	import {
2	OnInit,
3	Directive,
4	Output,
5	EventEmitter,
6	ContentChildren,
7	QueryList,
8	AfterContentInit,	1✔
9	NgZone,
10	Input,
11	booleanAttribute
12	} from '@angular/core';
13	import { ThyDragDirective } from './drag.directive';	1✔
14	import { merge, Observable, defer } from 'rxjs';
15	import { mixinUnsubscribe, MixinBase, Constructor, ThyUnsubscribe } from 'ngx-tethys/core';	20✔
16	import { takeUntil, startWith, take, switchMap } from 'rxjs/operators';
17	import { ThyDragDropEvent, ThyDragStartEvent, ThyDragEndEvent, ThyDragOverEvent } from './drag-drop.class';
18	import { THY_DROP_CONTAINER_DIRECTIVE, IThyDropContainerDirective } from './drop-container.class';	20✔
19		20✔
20	const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);	20✔
21		20✔
22	/**	20✔
23	* @name thy-drop-container,[thyDropContainer]	20✔
24	* @order 30
25	*/
26	@Directive({
27	selector: 'thy-drop-container,[thyDropContainer]',	20✔
28	providers: [	20✔
29	{
30	provide: THY_DROP_CONTAINER_DIRECTIVE,
31	useExisting: ThyDropContainerDirective
32	}	38✔
33	],	1✔
34	standalone: true
35	})	38✔
36	export class ThyDropContainerDirective<T = any> extends _MixinBase implements OnInit, AfterContentInit, IThyDropContainerDirective {	1✔
37	/**
38	* 元数据	38✔
39	* @type any[]	1✔
40	*/
41	@Input('thyDropContainer')	38✔
42	set dragContainer(data: T[]) {	1✔
43	this.data = data;
44	}
45
46	/**	80✔
47	* 元数据	80!
48	* @type any[]	80✔
49	*/
UNCOV 50	@Input('thyDropContainerData') data: T[];	×
51
52	/**
53	* 是否禁用拖拽	1✔
54	* @default false
55	*/
56	@Input({ alias: 'thyDropContainerDisabled', transform: booleanAttribute }) disabled: boolean;	1✔
57
58	/**
59	* 拖拽之前的回调，函数返回 false 则阻止拖拽
60	*/
61	@Input('thyBeforeDragStart') beforeStart: (e: ThyDragStartEvent<T>) => boolean;
62
63	/**
64	* 拖拽时回调，函数返回 false 则阻止移入
65	*/
66	@Input('thyBeforeDragOver') beforeOver: (e: ThyDragOverEvent<T>) => boolean;
67
68	/**
69	* 拖放到元素时回调，函数返回 false 则阻止放置
70	*/
71	@Input('thyBeforeDragDrop') beforeDrop: (e: ThyDragDropEvent<T>) => boolean;
72		1✔
73	/**
74	* 开始拖拽时调用
75	*/
76	@Output('thyDragStarted') started = new EventEmitter<ThyDragStartEvent<ThyDragDirective>>();
77
78	/**
79	* dragend 触发时调用
80	*/
81	@Output('thyDragEnded') ended = new EventEmitter<ThyDragEndEvent<ThyDragDirective>>();
82
83	/**
84	* dragover 触发时调用
85	*/
86	@Output('thyDragOvered') overed = new EventEmitter<ThyDragOverEvent<ThyDragDirective>>();
87
88	/**
89	* drop 触发时调用
90	*/
91	@Output('thyDragDropped') dropped = new EventEmitter<ThyDragDropEvent<ThyDragDirective>>();
92
93	/**
94	* @internal
95	*/
96	@ContentChildren(ThyDragDirective, {
97	descendants: false
98	})
99	draggables: QueryList<ThyDragDirective>;
100
101	constructor(private ngZone: NgZone) {
102	super();
103	}
104
105	ngOnInit() {}
106
107	ngAfterContentInit() {
108	this.draggables.changes.pipe(startWith(null), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
109	this.draggableChanges();
110	});
111	}
112
113	private draggableChanges() {
114	this.resetDraggableChanges(item => item.dragRef.started).subscribe(event => {
115	this.started.emit(event);
116	});
117	this.resetDraggableChanges(item => item.dragRef.ended).subscribe(event => {
118	this.ended.emit(event);
119	});
120	this.resetDraggableChanges(item => item.dragRef.overed).subscribe(event => {
121	this.overed.emit(event);
122	});
123	this.resetDraggableChanges(item => item.dragRef.dropped).subscribe(event => {
124	this.dropped.emit(event);
125	});
126	}
127
128	private resetDraggableChanges(fn: (item: ThyDragDirective) => Observable<any>) {
129	return defer(() => {
130	if (this.draggables) {
131	return merge(...this.draggables.map(fn));
132	}
133	return this.ngZone.onStable.asObservable().pipe(
134	take(1),
135	switchMap(() => this.resetDraggableChanges.bind(this, fn))
136	);
137	}).pipe(takeUntil(merge(this.ngUnsubscribe$, this.draggables.changes))) as Observable<any>;
138	}
139	}

atinc / ngx-tethys / c0ef8457-a839-451f-8b72-80fd73106231

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