d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Component, ContentChild, EventEmitter, HostBinding, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';

import {
    Direction,
    InnerTransferDragEvent,
    ThyTransferChangeEvent,
    ThyTransferDragEvent,
    ThyTransferItem,
    ThyTransferSelectEvent,
    TransferDirection
} from './transfer.interface';
import { ThyFlexibleTextComponent } from 'ngx-tethys/flexible-text';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
import { ThyTransferListComponent } from './transfer-list.component';

/**
 * 穿梭框组件
 * @name thy-transfer
 * @order 10
 */
@Component({
    selector: 'thy-transfer',
    templateUrl: './transfer.component.html',
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [ThyTransferListComponent, NgIf, ThyIconComponent, NgClass, NgTemplateOutlet, ThyFlexibleTextComponent]
})
export class ThyTransferComponent implements OnInit {
    @HostBinding('class') hostClass = 'thy-transfer';

    public leftDataSource: ThyTransferItem[] = [];

    public rightDataSource: ThyTransferItem[] = [];

    public allDataSource: ThyTransferItem[] = [];

    public leftTitle: string;

    public rightTitle: string;

    public rightDraggable = false;

    private _autoMove = true;

    /**
     * 数据源
     * @type ThyTransferItem[]
     */
    @Input()
    set thyData(value: ThyTransferItem[]) {
        if (value) {
            this.initializeTransferData(value);
        }
    }

    @Input() thyrenderLeftTemplateRef: TemplateRef<any>;

    @Input() thyrenderRightTemplateRef: TemplateRef<any>;

    /**
     * title集合，title[0]为左标题，title[1]为右标题
     * @type string[]
     */
    @Input()
    set thyTitles(value: string[]) {
        this.leftTitle = value[0] || '';
        this.rightTitle = value[1] || '';
    }

    /**
     * 右侧列表是否可以锁定
     * @default false
     */
    @Input() thyRightCanLock: boolean;

    /**
     * 右侧锁定最大数量
     */
    @Input() thyRightLockMax: number;

    /**
     * 右侧选择最大数量
     */
    @Input() thyRightMax: number;

    /**
     * 设置是否自动移动
     * @description.en-us Currently not implemented, in order to support the selections move
     * @default true
     */
    @Input()
    set thyAutoMove(value: boolean) {
        this._autoMove = value;
    }

    /**
     * 左侧列表是否拖动
     * @default false
     */
    @Input() thyLeftDraggable: boolean;

    /**
     * 右侧列表是否拖动
     * @default false
     */
    @Input() thyRightDraggable: boolean;

    /**
     * @type EventEmitter<ThyTransferDragEvent>
     */
    @Output() thyDraggableUpdate: EventEmitter<ThyTransferDragEvent> = new EventEmitter<ThyTransferDragEvent>();

    /**
     * Transfer变化的回调事件
     * @type EventEmitter<ThyTransferChangeEvent>
     */
    @Output() thyChange: EventEmitter<ThyTransferChangeEvent> = new EventEmitter<ThyTransferChangeEvent>();

    /**
     * 设置自定义Item渲染数据模板
     * @type TemplateRef
     */
    @ContentChild('renderTemplate') templateRef: TemplateRef<any>;

    /**
     * 设置自定义左侧内容模板
     * @type TemplateRef
     */
    @ContentChild('renderLeftTemplate') leftContentRef: TemplateRef<any>;

    /**
     * 设置自定义右侧内容模板
     * @type TemplateRef
     */
    @ContentChild('renderRightTemplate') rightContentRef: TemplateRef<any>;

    ngOnInit() {}

    initializeTransferData(data: ThyTransferItem[] = []) {
        this.allDataSource = [];
        this.leftDataSource = [];
        this.rightDataSource = [];
        data.forEach(item => {
            this.allDataSource.push(item);
            if (item.direction === TransferDirection.left) {
                this.leftDataSource.push(item);
            }
            if (item.direction === TransferDirection.right) {
                this.rightDataSource.push(item);
            }
        });
    }

    onSelect(from: Direction, event: ThyTransferSelectEvent) {
        if (event.item.isFixed) {
            return;
        }
        if (this.thyRightMax <= this.rightDataSource.length && from === TransferDirection.left) {
            return;
        }
        const to = from === TransferDirection.left ? TransferDirection.right : TransferDirection.left;
        event.item.checked = !event.item.checked;
        if (this._autoMove) {
            this.onMove(to);
        }
    }

    selectItem(event: ThyTransferSelectEvent) {
        this.onSelect(TransferDirection.left, event);
    }

    unselectItem(event: ThyTransferSelectEvent) {
        this.onSelect(TransferDirection.right, event);
    }

    private groupListByIsLock(list: ThyTransferItem[] = []) {
        const lock: ThyTransferItem[] = [],
            unlock: ThyTransferItem[] = [];
        list.forEach(item => {
            if (item.isLock) {
                lock.push(item);
            } else {
                unlock.push(item);
            }
        });
        return { lock: lock, unlock: unlock };
    }

    onMove(to: Direction) {
        const fromDataSource = to === TransferDirection.right ? this.leftDataSource : this.rightDataSource;
        const toDataSource = to === TransferDirection.right ? this.rightDataSource : this.leftDataSource;
        const selections = fromDataSource.filter(item => item.checked);
        const changeEvent: ThyTransferChangeEvent = {
            from: to === TransferDirection.right ? TransferDirection.left : TransferDirection.right,
            to: to,
            items: [...selections]
        };
        selections.forEach(item => {
            const index = fromDataSource.indexOf(item);
            const removed = fromDataSource.splice(index, 1)[0];
            removed.checked = !removed.checked;
            removed.direction = to;
            toDataSource.push(removed);
        });
        this.thyChange.emit({
            ...changeEvent,
            left: this.groupListByIsLock(this.leftDataSource),
            right: this.groupListByIsLock(this.rightDataSource)
        });
    }

    onDragUpdate(direction: Direction, event: InnerTransferDragEvent) {
        const otherDirectionData = direction === TransferDirection.left ? this.rightDataSource : this.leftDataSource;
        const otherListData = this.groupListByIsLock(otherDirectionData);
        this.thyDraggableUpdate.emit({
            ...event.dragEvent,
            left: direction === TransferDirection.left ? event.listData : otherListData,
            right: direction === TransferDirection.right ? event.listData : otherListData
        });

        this.rightDataSource =
            direction === TransferDirection.right
                ? [...event.listData.lock, ...event.listData.unlock]
                : [...otherListData.lock, ...otherListData.unlock];
    }
}

1	import { Component, ContentChild, EventEmitter, HostBinding, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
2
3	import {
4	Direction,
5	InnerTransferDragEvent,
6	ThyTransferChangeEvent,
7	ThyTransferDragEvent,
8	ThyTransferItem,
9	ThyTransferSelectEvent,
10	TransferDirection
11	} from './transfer.interface';
12	import { ThyFlexibleTextComponent } from 'ngx-tethys/flexible-text';
13	import { ThyIconComponent } from 'ngx-tethys/icon';
14	import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common';	1✔
15	import { ThyTransferListComponent } from './transfer-list.component';
16		×
17	/**	×
18	* 穿梭框组件	×
19	* @name thy-transfer	×
20	* @order 10	×
21	*/	×
22	@Component({	×
23	selector: 'thy-transfer',	×
24	templateUrl: './transfer.component.html',
25	encapsulation: ViewEncapsulation.None,
26	standalone: true,	×
27	imports: [ThyTransferListComponent, NgIf, ThyIconComponent, NgClass, NgTemplateOutlet, ThyFlexibleTextComponent]	×
28	})
29	export class ThyTransferComponent implements OnInit {
30	@HostBinding('class') hostClass = 'thy-transfer';
31		×
32	public leftDataSource: ThyTransferItem[] = [];	×
33
34	public rightDataSource: ThyTransferItem[] = [];
35		×
36	public allDataSource: ThyTransferItem[] = [];
37
38	public leftTitle: string;	×
39		×
40	public rightTitle: string;	×
41		×
42	public rightDraggable = false;	×
43		×
44	private _autoMove = true;	×
45		×
46	/**
47	* 数据源	×
48	* @type ThyTransferItem[]	×
49	*/
50	@Input()
51	set thyData(value: ThyTransferItem[]) {
52	if (value) {
53	this.initializeTransferData(value);	×
54	}	×
55	}
56		×
57	@Input() thyrenderLeftTemplateRef: TemplateRef<any>;	×
58
59	@Input() thyrenderRightTemplateRef: TemplateRef<any>;	×
60		×
61	/**	×
62	* title集合，title[0]为左标题，title[1]为右标题	×
63	* @type string[]
64	*/
65	@Input()
66	set thyTitles(value: string[]) {	×
67	this.leftTitle = value[0] \|\| '';
68	this.rightTitle = value[1] \|\| '';
69	}	×
70
71	/**	×
72	* 右侧列表是否可以锁定	×
73	* @default false	×
74	*/	×
75	@Input() thyRightCanLock: boolean;	×
76
77	/**
78	* 右侧锁定最大数量	×
79	*/
80	@Input() thyRightLockMax: number;
81		×
82	/**
83	* 右侧选择最大数量
84	*/	×
85	@Input() thyRightMax: number;	×
86		×
87	/**	×
88	* 设置是否自动移动	×
89	* @description.en-us Currently not implemented, in order to support the selections move
90	* @default true
91	*/
92	@Input()	×
93	set thyAutoMove(value: boolean) {	×
94	this._autoMove = value;	×
95	}	×
96		×
97	/**	×
98	* 左侧列表是否拖动
99	* @default false	×
100	*/
101	@Input() thyLeftDraggable: boolean;
102
103	/**
104	* 右侧列表是否拖动
105	* @default false
106	*/	×
107	@Input() thyRightDraggable: boolean;	×
108		×
109	/**
110	* @type EventEmitter<ThyTransferDragEvent>	×
111	*/	×
112	@Output() thyDraggableUpdate: EventEmitter<ThyTransferDragEvent> = new EventEmitter<ThyTransferDragEvent>();
113		×
114	/**	×
115	* Transfer变化的回调事件
116	* @type EventEmitter<ThyTransferChangeEvent>
117	*/
118	@Output() thyChange: EventEmitter<ThyTransferChangeEvent> = new EventEmitter<ThyTransferChangeEvent>();	1✔
119
120	/**
121	* 设置自定义Item渲染数据模板
122	* @type TemplateRef
123	*/
124	@ContentChild('renderTemplate') templateRef: TemplateRef<any>;
125
126	/**
127	* 设置自定义左侧内容模板
128	* @type TemplateRef
129	*/
130	@ContentChild('renderLeftTemplate') leftContentRef: TemplateRef<any>;
131
132	/**
133	* 设置自定义右侧内容模板
134	* @type TemplateRef
135	*/
136	@ContentChild('renderRightTemplate') rightContentRef: TemplateRef<any>;
137		1✔
138	ngOnInit() {}
139
140	initializeTransferData(data: ThyTransferItem[] = []) {
141	this.allDataSource = [];
142	this.leftDataSource = [];
143	this.rightDataSource = [];
144	data.forEach(item => {
145	this.allDataSource.push(item);
146	if (item.direction === TransferDirection.left) {
147	this.leftDataSource.push(item);
148	}
149	if (item.direction === TransferDirection.right) {
150	this.rightDataSource.push(item);
151	}
152	});
153	}
154
155	onSelect(from: Direction, event: ThyTransferSelectEvent) {
156	if (event.item.isFixed) {
157	return;
158	}
159	if (this.thyRightMax <= this.rightDataSource.length && from === TransferDirection.left) {
160	return;
161	}
162	const to = from === TransferDirection.left ? TransferDirection.right : TransferDirection.left;
163	event.item.checked = !event.item.checked;
164	if (this._autoMove) {
165	this.onMove(to);
166	}
167	}
168
169	selectItem(event: ThyTransferSelectEvent) {
170	this.onSelect(TransferDirection.left, event);
171	}
172
173	unselectItem(event: ThyTransferSelectEvent) {
174	this.onSelect(TransferDirection.right, event);
175	}
176
177	private groupListByIsLock(list: ThyTransferItem[] = []) {
178	const lock: ThyTransferItem[] = [],
179	unlock: ThyTransferItem[] = [];
180	list.forEach(item => {
181	if (item.isLock) {
182	lock.push(item);
183	} else {
184	unlock.push(item);
185	}
186	});
187	return { lock: lock, unlock: unlock };
188	}
189
190	onMove(to: Direction) {
191	const fromDataSource = to === TransferDirection.right ? this.leftDataSource : this.rightDataSource;
192	const toDataSource = to === TransferDirection.right ? this.rightDataSource : this.leftDataSource;
193	const selections = fromDataSource.filter(item => item.checked);
194	const changeEvent: ThyTransferChangeEvent = {
195	from: to === TransferDirection.right ? TransferDirection.left : TransferDirection.right,
196	to: to,
197	items: [...selections]
198	};
199	selections.forEach(item => {
200	const index = fromDataSource.indexOf(item);
201	const removed = fromDataSource.splice(index, 1)[0];
202	removed.checked = !removed.checked;
203	removed.direction = to;
204	toDataSource.push(removed);
205	});
206	this.thyChange.emit({
207	...changeEvent,
208	left: this.groupListByIsLock(this.leftDataSource),
209	right: this.groupListByIsLock(this.rightDataSource)
210	});
211	}
212
213	onDragUpdate(direction: Direction, event: InnerTransferDragEvent) {
214	const otherDirectionData = direction === TransferDirection.left ? this.rightDataSource : this.leftDataSource;
215	const otherListData = this.groupListByIsLock(otherDirectionData);
216	this.thyDraggableUpdate.emit({
217	...event.dragEvent,
218	left: direction === TransferDirection.left ? event.listData : otherListData,
219	right: direction === TransferDirection.right ? event.listData : otherListData
220	});
221
222	this.rightDataSource =
223	direction === TransferDirection.right
224	? [...event.listData.lock, ...event.listData.unlock]
225	: [...otherListData.lock, ...otherListData.unlock];
226	}
227	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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