d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    Component,
    HostBinding,
    Input,
    Output,
    EventEmitter,
    ChangeDetectionStrategy,
    OnInit,
    ChangeDetectorRef,
    forwardRef
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ThyButtonIconComponent } from 'ngx-tethys/button';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
import { ThyActionComponent } from 'ngx-tethys/action';
import { NgIf } from '@angular/common';
import { InputNumber } from 'ngx-tethys/core';

export type ThyArrowSwitcherTheme = 'default' | 'lite';
export interface ThyArrowSwitcherEvent {
    index: number;
    event: Event;
}

/**
 * 上下条切换组件
 * @name thy-arrow-switcher
 * @order 10
 */
@Component({
    selector: 'thy-arrow-switcher',
    templateUrl: './arrow-switcher.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => ThyArrowSwitcherComponent),
            multi: true
        }
    ],
    standalone: true,
    imports: [NgIf, ThyActionComponent, ThyTooltipDirective, ThyIconComponent, ThyButtonIconComponent]
})
export class ThyArrowSwitcherComponent implements OnInit, ControlValueAccessor {
    @HostBinding('class.thy-arrow-switcher') _isArrowSwitcher = true;

    @HostBinding('class.thy-arrow-switcher-small') _isSmallSize = false;

    total: number;

    theme: ThyArrowSwitcherTheme = 'default';

    /**
     * 点击上一条事件
     */
    @Output() thyPrevious = new EventEmitter<ThyArrowSwitcherEvent>();

    /**
     * 点击下一条事件
     */
    @Output() thyNext = new EventEmitter<ThyArrowSwitcherEvent>();

    /**
     * 设置上一条 Hover Tooltip 提示
     */
    @Input() thyPreviousTooltip: string;

    /**
     * 设置下一条 Hover Tooltip 提示
     */
    @Input() thyNextTooltip: string;

    /**
     * 展示主题
     * @type default | lite
     * @default default
     */
    @Input() set thyTheme(value: ThyArrowSwitcherTheme) {
        this.theme = value;
    }

    /**
     * 总条数
     */
    @Input()
    @InputNumber()
    set thyTotal(value: number) {
        if (value) {
            this.total = value;
            this.getDisabled();
        }
    }

    /**
     * 尺寸大小，默认尺寸为大号，取值为`sm`时展示小号
     */
    @Input()
    set thySize(size: string) {
        if (size === 'sm') {
            this._isSmallSize = true;
        }
    }

    index = 0;

    disabled = false;

    previousDisabled = false;

    nextDisabled = false;

    private onModelChange: (value: number) => void;

    private onModelTouched: () => void;

    constructor(private cd: ChangeDetectorRef) {}

    ngOnInit() {}

    writeValue(value: number): void {
        if (value >= 0) {
            this.index = value;
            this.getDisabled();
        }
        this.cd.markForCheck();
    }

    registerOnChange(fn: () => void) {
        this.onModelChange = fn;
    }

    registerOnTouched(fn: () => void) {
        this.onModelTouched = fn;
    }

    setDisabledState(isDisable: boolean) {
        this.disabled = isDisable;
    }

    getDisabled() {
        this.previousDisabled = this.index <= 0 || this.disabled;
        this.nextDisabled = this.index >= this.total - 1 || this.disabled;
    }

    onPreviousClick(event: Event) {
        this.index--;
        this.onModelChange(this.index);
        this.getDisabled();
        this.thyPrevious.emit({ index: this.index, event });
    }

    onNextClick(event: Event) {
        this.index++;
        this.onModelChange(this.index);
        this.getDisabled();
        this.thyNext.emit({ index: this.index, event });
    }
}

1	import {
2	Component,
3	HostBinding,
4	Input,
5	Output,
6	EventEmitter,
7	ChangeDetectionStrategy,
8	OnInit,
9	ChangeDetectorRef,
10	forwardRef
11	} from '@angular/core';
12	import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
13	import { ThyButtonIconComponent } from 'ngx-tethys/button';
14	import { ThyIconComponent } from 'ngx-tethys/icon';
15	import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
16	import { ThyActionComponent } from 'ngx-tethys/action';
17	import { NgIf } from '@angular/common';	1✔
18	import { InputNumber } from 'ngx-tethys/core';
19		×
20	export type ThyArrowSwitcherTheme = 'default' \| 'lite';
21	export interface ThyArrowSwitcherEvent {
22	index: number;	×
23	event: Event;	×
24	}	×
25
26	/**
27	* 上下条切换组件
28	* @name thy-arrow-switcher	×
29	* @order 10	×
30	*/
31	@Component({
32	selector: 'thy-arrow-switcher',
33	templateUrl: './arrow-switcher.component.html',	×
34	changeDetection: ChangeDetectionStrategy.OnPush,	×
35	providers: [	×
36	{	×
37	provide: NG_VALUE_ACCESSOR,	×
38	useExisting: forwardRef(() => ThyArrowSwitcherComponent),	×
39	multi: true	×
40	}	×
41	],	×
42	standalone: true,	×
43	imports: [NgIf, ThyActionComponent, ThyTooltipDirective, ThyIconComponent, ThyButtonIconComponent]
44	})
45	export class ThyArrowSwitcherComponent implements OnInit, ControlValueAccessor {
46	@HostBinding('class.thy-arrow-switcher') _isArrowSwitcher = true;	×
47		×
48	@HostBinding('class.thy-arrow-switcher-small') _isSmallSize = false;	×
49
50	total: number;	×
51
52	theme: ThyArrowSwitcherTheme = 'default';
53		×
54	/**
55	* 点击上一条事件
56	*/	×
57	@Output() thyPrevious = new EventEmitter<ThyArrowSwitcherEvent>();
58
59	/**	×
60	* 点击下一条事件
61	*/
62	@Output() thyNext = new EventEmitter<ThyArrowSwitcherEvent>();	×
63		×
64	/**
65	* 设置上一条 Hover Tooltip 提示
66	*/	×
67	@Input() thyPreviousTooltip: string;	×
68		×
69	/**	×
70	* 设置下一条 Hover Tooltip 提示
71	*/
72	@Input() thyNextTooltip: string;	×
73		×
74	/**	×
75	* 展示主题	×
76	* @type default \| lite
77	* @default default	1✔
78	*/
79	@Input() set thyTheme(value: ThyArrowSwitcherTheme) {
80	this.theme = value;	1✔
81	}
82
83	/**
84	* 总条数
85	*/
86	@Input()
87	@InputNumber()
88	set thyTotal(value: number) {
89	if (value) {
90	this.total = value;
91	this.getDisabled();
92	}	1✔
93	}
94
95	/**
96	* 尺寸大小，默认尺寸为大号，取值为`sm`时展示小号
97	*/	1✔
98	@Input()
99	set thySize(size: string) {
100	if (size === 'sm') {
101	this._isSmallSize = true;
102	}
103	}
104
105	index = 0;	×
106
107	disabled = false;
108
109	previousDisabled = false;
110
111	nextDisabled = false;
112
113	private onModelChange: (value: number) => void;
114
115	private onModelTouched: () => void;
116
117	constructor(private cd: ChangeDetectorRef) {}
118
119	ngOnInit() {}
120
121	writeValue(value: number): void {
122	if (value >= 0) {
123	this.index = value;
124	this.getDisabled();
125	}
126	this.cd.markForCheck();
127	}
128
129	registerOnChange(fn: () => void) {
130	this.onModelChange = fn;
131	}
132
133	registerOnTouched(fn: () => void) {
134	this.onModelTouched = fn;
135	}
136
137	setDisabledState(isDisable: boolean) {
138	this.disabled = isDisable;
139	}
140
141	getDisabled() {
142	this.previousDisabled = this.index <= 0 \|\| this.disabled;
143	this.nextDisabled = this.index >= this.total - 1 \|\| this.disabled;
144	}
145
146	onPreviousClick(event: Event) {
147	this.index--;
148	this.onModelChange(this.index);
149	this.getDisabled();
150	this.thyPrevious.emit({ index: this.index, event });
151	}
152
153	onNextClick(event: Event) {
154	this.index++;
155	this.onModelChange(this.index);
156	this.getDisabled();
157	this.thyNext.emit({ index: this.index, event });
158	}
159	}

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