d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    AfterContentInit,
    Component,
    ContentChild,
    ElementRef,
    EventEmitter,
    HostBinding,
    Input,
    OnInit,
    Output,
    TemplateRef,
    ViewChild,
    OnDestroy,
    NgZone
} from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { InputBoolean, ThyTranslate } from 'ngx-tethys/core';
import { htmlElementIsEmpty, coerceBooleanProperty } from 'ngx-tethys/util';
import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { ThyFlexibleTextComponent } from 'ngx-tethys/flexible-text';
import { ThyButtonIconComponent } from 'ngx-tethys/button';
import { NgTemplateOutlet, NgIf, NgClass } from '@angular/common';

type ThyPropertyOperationTypes = 'primary' | 'success' | 'warning' | 'danger';

/**
 * 属性操作组件
 * @name thy-property-operation
 * @order 10
 */
@Component({
    selector: 'thy-property-operation',
    templateUrl: './property-operation.component.html',
    standalone: true,
    imports: [NgTemplateOutlet, NgIf, NgClass, ThyButtonIconComponent, ThyFlexibleTextComponent, ThyIconComponent]
})
export class ThyPropertyOperationComponent implements OnInit, AfterContentInit, OnDestroy {
    private initialized = false;

    private hostRenderer = useHostRenderer();

    labelText: string;

    onlyHasTips = false;

    showClose = false;

    type: ThyPropertyOperationTypes;

    icon: string;

    value: string;

    labelHideWhenHasValue = false;

    /**
     * 点击移除图标时的事件回调，此函数只有在thyShowClose为true时才会发生
     */
    @Output() thyOnRemove = new EventEmitter();

    /**
     * 点击事件回调
     */
    @Output() thyClick = new EventEmitter<Event>();

    @HostBinding('class.thy-property-operation') _isPropertyOperation = true;

    @ContentChild('operationIcon') operationIcon: TemplateRef<any>;

    @ViewChild('contentElement', { static: true }) contentElement: ElementRef;

    /**
     * 属性的 Label 文本
     */
    @Input()
    set thyLabelText(value: string) {
        this.labelText = value;
    }

    /**
     * 属性的值
     */
    @Input()
    set thyValue(value: string) {
        this.value = value;
        this.setOnlyHasTips();
    }

    /**
     * 属性的 Label Translate Key
     */
    @Input()
    set thyLabelTextTranslateKey(value: string) {
        this.labelText = this.thyTranslate.instant(value);
    }

    /**
     * 图标
     */
    @Input()
    set thyIcon(value: string) {
        this.icon = value;
    }

    /**
     * 当有属性值时是否展示移除图标
     * @default false
     */
    @Input()
    @InputBoolean()
    set thyShowClose(value: boolean) {
        this.showClose = coerceBooleanProperty(value);
    }

    // 支持有值时，label不显示
    @Input()
    @InputBoolean()
    set thyLabelHasValue(value: boolean) {
        this.labelHideWhenHasValue = !coerceBooleanProperty(value);
    }

    /**
     * 有值时隐藏 label
     * @default false
     */
    @Input()
    @InputBoolean()
    set thyLabelHideWhenHasValue(value: boolean) {
        this.labelHideWhenHasValue = coerceBooleanProperty(value);
    }

    /**
     * 属性类型
     * @type  danger | primary | success | warning | null
     * @default null
     */
    @Input()
    set thyType(value: ThyPropertyOperationTypes) {
        this.type = value;
        this.setHostClass();
    }

    /**
     * 激活状态
     * @default false
     */
    @HostBinding('class.active')
    @Input('thyActive')
    @InputBoolean()
    active: boolean;

    /**
     * 禁用操作，添加后property operation中thyClick和thyOnRemove事件将会被禁用
     * @default false
     */
    @HostBinding('class.thy-property-operation-disabled')
    @Input('thyDisabled')
    @InputBoolean()
    disabled: boolean;

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

    private setHostClass(first = false) {
        if (!this.initialized && !first) {
            return;
        }
        this.hostRenderer.updateClass(this.type ? [`thy-property-operation-${this.type}`] : []);
    }

    private setOnlyHasTips(first = false) {
        if (!this.initialized && !first) {
            return;
        }
        if (this.value) {
            this.onlyHasTips = false;
        } else if (htmlElementIsEmpty(this.contentElement.nativeElement)) {
            this.onlyHasTips = true;
        } else {
            this.onlyHasTips = false;
        }
    }

    constructor(private thyTranslate: ThyTranslate, private elementRef: ElementRef<HTMLElement>, private ngZone: NgZone) {}

    ngOnInit() {
        this.setHostClass(true);

        this.ngZone.runOutsideAngular(() =>
            fromEvent<Event>(this.elementRef.nativeElement, 'click')
                .pipe(takeUntil(this.destroy$))
                .subscribe(event => {
                    if (this.disabled || this.thyClick.observers.length === 0) {
                        return;
                    }

                    this.ngZone.run(() => this.thyClick.emit(event));
                })
        );
    }

    ngAfterContentInit() {
        this.setOnlyHasTips(true);
        this.initialized = true;
    }

    ngOnDestroy(): void {
        this.destroy$.next();
    }

    remove($event: Event) {
        $event.stopPropagation();
        this.thyOnRemove.emit($event);
    }
}

1	import {
2	AfterContentInit,
3	Component,
4	ContentChild,
5	ElementRef,
6	EventEmitter,
7	HostBinding,
8	Input,
9	OnInit,
10	Output,
11	TemplateRef,
12	ViewChild,
13	OnDestroy,
14	NgZone
15	} from '@angular/core';
16	import { useHostRenderer } from '@tethys/cdk/dom';
17	import { InputBoolean, ThyTranslate } from 'ngx-tethys/core';
18	import { htmlElementIsEmpty, coerceBooleanProperty } from 'ngx-tethys/util';	1✔
19	import { fromEvent, Subject } from 'rxjs';
20	import { takeUntil } from 'rxjs/operators';	×
21	import { ThyIconComponent } from 'ngx-tethys/icon';
22	import { ThyFlexibleTextComponent } from 'ngx-tethys/flexible-text';
23	import { ThyButtonIconComponent } from 'ngx-tethys/button';	×
24	import { NgTemplateOutlet, NgIf, NgClass } from '@angular/common';	×
25
26	type ThyPropertyOperationTypes = 'primary' \| 'success' \| 'warning' \| 'danger';
27		×
28	/**
29	* 属性操作组件
30	* @name thy-property-operation	×
31	* @order 10
32	*/
33	@Component({	×
34	selector: 'thy-property-operation',
35	templateUrl: './property-operation.component.html',
36	standalone: true,	×
37	imports: [NgTemplateOutlet, NgIf, NgClass, ThyButtonIconComponent, ThyFlexibleTextComponent, ThyIconComponent]
38	})
39	export class ThyPropertyOperationComponent implements OnInit, AfterContentInit, OnDestroy {	×
40	private initialized = false;
41
42	private hostRenderer = useHostRenderer();	×
43		×
44	labelText: string;
45		×
46	onlyHasTips = false;	×
47		×
48	showClose = false;
49		×
50	type: ThyPropertyOperationTypes;
51		×
52	icon: string;	×
53		×
54	value: string;
55		×
56	labelHideWhenHasValue = false;	×
57
58	/**	×
59	* 点击移除图标时的事件回调，此函数只有在thyShowClose为true时才会发生	×
60	*/
61	@Output() thyOnRemove = new EventEmitter();
62		×
63	/**
64	* 点击事件回调
65	*/
66	@Output() thyClick = new EventEmitter<Event>();	×
67		×
68	@HostBinding('class.thy-property-operation') _isPropertyOperation = true;	×
69		×
70	@ContentChild('operationIcon') operationIcon: TemplateRef<any>;	×
71		×
72	@ViewChild('contentElement', { static: true }) contentElement: ElementRef;	×
73		×
74	/**	×
75	* 属性的 Label 文本	×
76	*/	×
77	@Input()	×
78	set thyLabelText(value: string) {
79	this.labelText = value;
80	}	×
81		×
82	/**
83	* 属性的值
84	*/	×
85	@Input()	×
86	set thyValue(value: string) {
87	this.value = value;	×
88	this.setOnlyHasTips();
89	}
90
91	/**	×
92	* 属性的 Label Translate Key	×
93	*/
94	@Input()
95	set thyLabelTextTranslateKey(value: string) {	×
96	this.labelText = this.thyTranslate.instant(value);
97	}
98		×
99	/**	×
100	* 图标
101	*/	1✔
102	@Input()
103	set thyIcon(value: string) {
104	this.icon = value;
105	}
106		1✔
107	/**
108	* 当有属性值时是否展示移除图标
109	* @default false
110	*/
111	@Input()
112	@InputBoolean()
113	set thyShowClose(value: boolean) {
114	this.showClose = coerceBooleanProperty(value);
115	}
116
117	// 支持有值时，label不显示
118	@Input()
119	@InputBoolean()
120	set thyLabelHasValue(value: boolean) {
121	this.labelHideWhenHasValue = !coerceBooleanProperty(value);
122	}
123
124	/**	1✔
125	* 有值时隐藏 label
126	* @default false
127	*/
128	@Input()
129	@InputBoolean()	1✔
130	set thyLabelHideWhenHasValue(value: boolean) {
131	this.labelHideWhenHasValue = coerceBooleanProperty(value);
132	}
133
134	/**	1✔
135	* 属性类型
136	* @type danger \| primary \| success \| warning \| null
137	* @default null
138	*/
139	@Input()	1✔
140	set thyType(value: ThyPropertyOperationTypes) {
141	this.type = value;
142	this.setHostClass();
143	}	1✔
144
145	/**
146	* 激活状态
147	* @default false	1✔
148	*/
149	@HostBinding('class.active')
150	@Input('thyActive')
151	@InputBoolean()
152	active: boolean;
153
154	/**
155	* 禁用操作，添加后property operation中thyClick和thyOnRemove事件将会被禁用
156	* @default false
157	*/
158	@HostBinding('class.thy-property-operation-disabled')
159	@Input('thyDisabled')
160	@InputBoolean()
161	disabled: boolean;
162
163	private destroy$ = new Subject<void>();
164
165	private setHostClass(first = false) {
166	if (!this.initialized && !first) {
167	return;
168	}
169	this.hostRenderer.updateClass(this.type ? [`thy-property-operation-${this.type}`] : []);
170	}
171
172	private setOnlyHasTips(first = false) {
173	if (!this.initialized && !first) {
174	return;
175	}
176	if (this.value) {
177	this.onlyHasTips = false;
178	} else if (htmlElementIsEmpty(this.contentElement.nativeElement)) {
179	this.onlyHasTips = true;
180	} else {
181	this.onlyHasTips = false;
182	}
183	}
184
185	constructor(private thyTranslate: ThyTranslate, private elementRef: ElementRef<HTMLElement>, private ngZone: NgZone) {}
186
187	ngOnInit() {
188	this.setHostClass(true);
189
190	this.ngZone.runOutsideAngular(() =>
191	fromEvent<Event>(this.elementRef.nativeElement, 'click')
192	.pipe(takeUntil(this.destroy$))
193	.subscribe(event => {
194	if (this.disabled \|\| this.thyClick.observers.length === 0) {
195	return;
196	}
197
198	this.ngZone.run(() => this.thyClick.emit(event));
199	})
200	);
201	}
202
203	ngAfterContentInit() {
204	this.setOnlyHasTips(true);
205	this.initialized = true;
206	}
207
208	ngOnDestroy(): void {
209	this.destroy$.next();
210	}
211
212	remove($event: Event) {
213	$event.stopPropagation();
214	this.thyOnRemove.emit($event);
215	}
216	}

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