950e0807-01d3-4301-9e8f-5b85fcb69c6b

Committed 29 May 2024 08:30AM UTC coverage: 90.42% (+0.01%) from 90.406%

Build # 950e0807-01d3-4301-9e8f-5b85fcb69c6b

Build Type

push

circleci

Committed by

web-flow

Commit Message

feat(breadcrumb): 面包屑导航支持传入items时省略展示 #INFR-12463 @wangkai @xuhaifeng @wumeimin (#3098)

Run Details

5467 of 6692 branches covered (81.69%)

Branch coverage included in aggregate %.

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

1 existing line in 1 file now uncovered.

13212 of 13966 relevant lines covered (94.6%)

982.74 hits per line

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

95.92

/src/breadcrumb/breadcrumb.component.ts

import {
    Component,
    ChangeDetectionStrategy,
    Input,
    ContentChild,
    TemplateRef,
    numberAttribute,
    OnChanges,
    SimpleChanges,
    OnInit,
    ChangeDetectorRef
} from '@angular/core';
import { ThyIcon } from 'ngx-tethys/icon';
import { NgIf, NgClass, NgTemplateOutlet, NgFor } from '@angular/common';
import { ThyBreadcrumbItem } from './breadcrumb-item.component';
import { SafeAny } from 'ngx-tethys/types';
import {
    ThyDropdownDirective,
    ThyDropdownMenuComponent,
    ThyDropdownMenuItemDirective,
    ThyDropdownMenuItemNameDirective
} from 'ngx-tethys/dropdown';
import { ThyAction } from 'ngx-tethys/action';
import { coerceBooleanProperty } from 'ngx-tethys/util';

const THY_BREADCRUMB_ITEM_ELLIPSIS_ID = 'THY_BREADCRUMB_ITEM_ELLIPSIS_ID';

const ELLIPSIS_ITEM = { _id: THY_BREADCRUMB_ITEM_ELLIPSIS_ID };

/**
 * 面包屑组件
 * @name thy-breadcrumb
 * @order 10
 */
@Component({
    selector: 'thy-breadcrumb',
    templateUrl: './breadcrumb.component.html',
    exportAs: 'ThyBreadcrumb',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-breadcrumb',
        '[class.thy-breadcrumb-separator]': '!!thySeparator',
        '[class.thy-breadcrumb-separator-slash]': 'thySeparator === "slash"',
        '[class.thy-breadcrumb-separator-backslash]': 'thySeparator === "backslash"',
        '[class.thy-breadcrumb-separator-vertical-line]': 'thySeparator === "vertical-line"'
    },
    standalone: true,
    imports: [
        NgIf,
        NgFor,
        ThyIcon,
        NgClass,
        ThyBreadcrumbItem,
        NgTemplateOutlet,
        ThyAction,
        ThyDropdownDirective,
        ThyDropdownMenuItemDirective,
        ThyDropdownMenuItemNameDirective,
        ThyDropdownMenuComponent,
        ThyIcon
    ]
})
export class ThyBreadcrumb implements OnInit, OnChanges {
    iconClasses: string[];
    svgIconName: string;

    /**
     * 面包屑的前缀 展示图标，如 folder-fill
     */
    @Input()
    set thyIcon(icon: string) {
        this.setIcon(icon);
    }

    /**
     * 面包屑的分隔符，不传值默认为 ">"
     * @type slash | backslash | vertical-line
     */
    @Input() thySeparator: 'slash' | 'backslash' | 'vertical-line';

    /**
     * 面包屑的每一项数据
     */
    @Input({ alias: 'thyItems' }) items: SafeAny[];

    /**
     * 最大显示数量，超出此数量后，面包屑会被省略, 0 表示不省略（仅当传入 thyItems 时有效）
     */
    @Input({ transform: numberAttribute }) thyMaxCount = 4;

    /**
     * 是否可点击弹出已被省略的面包屑项（仅当传入 thyItems 时有效）
     */
    @Input({ transform: coerceBooleanProperty }) thyExpandable = true;

    /**
     * 面包屑的每一项模板（仅当传入 thyItems 时有效）
     */
    @ContentChild('item') itemTemplate: TemplateRef<SafeAny>;

    public ellipsisItemId = THY_BREADCRUMB_ITEM_ELLIPSIS_ID;

    public ellipsisItems: SafeAny[];

    public showItems: SafeAny[];

    constructor(private cdr: ChangeDetectorRef) {}

    ngOnInit() {
        this.resetItems();
    }

    ngOnChanges(changes: SimpleChanges) {
        if ((changes.items && !changes.items.firstChange) || (changes.thyMaxCount && !changes.thyMaxCount.firstChange)) {
            this.resetItems();
        }
    }

    private setIcon(icon: string) {
        if (icon) {
            if (icon.includes('wtf')) {
                const classes = icon.split(' ');
                if (classes.length === 1) {
                    classes.unshift('wtf');
                }
                this.iconClasses = classes;
            } else {
                this.svgIconName = icon;
            }
        } else {
            this.iconClasses = null;
            this.svgIconName = null;
        }
    }

    private resetItems() {
        if (!this.items?.length) {
            return;
        }
        if (this.thyMaxCount && this.items.length > this.thyMaxCount) {
            const ellipsisIndex = this.items.length - this.thyMaxCount + 2;
            this.ellipsisItems = this.items.slice(1, ellipsisIndex);
            this.showItems = [this.items[0], ELLIPSIS_ITEM, ...this.items.slice(ellipsisIndex)];
        } else {
            this.showItems = [...this.items];
            this.ellipsisItems = [];
        }
    }
}

1	import {
2	Component,
3	ChangeDetectionStrategy,
4	Input,
5	ContentChild,
6	TemplateRef,
7	numberAttribute,
8	OnChanges,
9	SimpleChanges,
10	OnInit,	1✔
11	ChangeDetectorRef	1✔
12	} from '@angular/core';
13	import { ThyIcon } from 'ngx-tethys/icon';
14	import { NgIf, NgClass, NgTemplateOutlet, NgFor } from '@angular/common';
15	import { ThyBreadcrumbItem } from './breadcrumb-item.component';
16	import { SafeAny } from 'ngx-tethys/types';
17	import {	1✔
18	ThyDropdownDirective,
19	ThyDropdownMenuComponent,	6✔
20	ThyDropdownMenuItemDirective,
21	ThyDropdownMenuItemNameDirective
22	} from 'ngx-tethys/dropdown';	15✔
23	import { ThyAction } from 'ngx-tethys/action';	15✔
24	import { coerceBooleanProperty } from 'ngx-tethys/util';	15✔
25		15✔
26	const THY_BREADCRUMB_ITEM_ELLIPSIS_ID = 'THY_BREADCRUMB_ITEM_ELLIPSIS_ID';
27
28	const ELLIPSIS_ITEM = { _id: THY_BREADCRUMB_ITEM_ELLIPSIS_ID };	15✔
29
30	/**
31	* 面包屑组件	19✔
32	* @name thy-breadcrumb	2✔
33	* @order 10
34	*/
35	@Component({
36	selector: 'thy-breadcrumb',	6✔
37	templateUrl: './breadcrumb.component.html',	5✔
38	exportAs: 'ThyBreadcrumb',	1✔
39	changeDetection: ChangeDetectionStrategy.OnPush,	1!
UNCOV 40	host: {	×
41	class: 'thy-breadcrumb',
42	'[class.thy-breadcrumb-separator]': '!!thySeparator',	1✔
43	'[class.thy-breadcrumb-separator-slash]': 'thySeparator === "slash"',
44	'[class.thy-breadcrumb-separator-backslash]': 'thySeparator === "backslash"',
45	'[class.thy-breadcrumb-separator-vertical-line]': 'thySeparator === "vertical-line"'	4✔
46	},
47	standalone: true,
48	imports: [
49	NgIf,	1✔
50	NgFor,	1✔
51	ThyIcon,
52	NgClass,
53	ThyBreadcrumbItem,
54	NgTemplateOutlet,	17✔
55	ThyAction,	11✔
56	ThyDropdownDirective,
57	ThyDropdownMenuItemDirective,	6✔
58	ThyDropdownMenuItemNameDirective,	4✔
59	ThyDropdownMenuComponent,	4✔
60	ThyIcon	4✔
61	]
62	})
63	export class ThyBreadcrumb implements OnInit, OnChanges {	2✔
64	iconClasses: string[];	2✔
65	svgIconName: string;
66
67	/**	1✔
68	* 面包屑的前缀展示图标，如 folder-fill
69	*/
70	@Input()	1✔
71	set thyIcon(icon: string) {
72	this.setIcon(icon);
73	}
74
75	/**
76	* 面包屑的分隔符，不传值默认为 ">"
77	* @type slash \| backslash \| vertical-line
78	*/
79	@Input() thySeparator: 'slash' \| 'backslash' \| 'vertical-line';	1✔
80
81	/**
82	* 面包屑的每一项数据
83	*/
84	@Input({ alias: 'thyItems' }) items: SafeAny[];
85
86	/**
87	* 最大显示数量，超出此数量后，面包屑会被省略, 0 表示不省略（仅当传入 thyItems 时有效）
88	*/
89	@Input({ transform: numberAttribute }) thyMaxCount = 4;
90
91	/**
92	* 是否可点击弹出已被省略的面包屑项（仅当传入 thyItems 时有效）
93	*/
94	@Input({ transform: coerceBooleanProperty }) thyExpandable = true;
95
96	/**
97	* 面包屑的每一项模板（仅当传入 thyItems 时有效）
98	*/
99	@ContentChild('item') itemTemplate: TemplateRef<SafeAny>;
100
101	public ellipsisItemId = THY_BREADCRUMB_ITEM_ELLIPSIS_ID;
102
103	public ellipsisItems: SafeAny[];
104
105	public showItems: SafeAny[];
106
107	constructor(private cdr: ChangeDetectorRef) {}
108
109	ngOnInit() {
110	this.resetItems();
111	}
112
113	ngOnChanges(changes: SimpleChanges) {
114	if ((changes.items && !changes.items.firstChange) \|\| (changes.thyMaxCount && !changes.thyMaxCount.firstChange)) {
115	this.resetItems();
116	}
117	}
118
119	private setIcon(icon: string) {
120	if (icon) {
121	if (icon.includes('wtf')) {
122	const classes = icon.split(' ');
123	if (classes.length === 1) {
124	classes.unshift('wtf');
125	}
126	this.iconClasses = classes;
127	} else {
128	this.svgIconName = icon;
129	}
130	} else {
131	this.iconClasses = null;
132	this.svgIconName = null;
133	}
134	}
135
136	private resetItems() {
137	if (!this.items?.length) {
138	return;
139	}
140	if (this.thyMaxCount && this.items.length > this.thyMaxCount) {
141	const ellipsisIndex = this.items.length - this.thyMaxCount + 2;
142	this.ellipsisItems = this.items.slice(1, ellipsisIndex);
143	this.showItems = [this.items[0], ELLIPSIS_ITEM, ...this.items.slice(ellipsisIndex)];
144	} else {
145	this.showItems = [...this.items];
146	this.ellipsisItems = [];
147	}
148	}
149	}

atinc / ngx-tethys / 950e0807-01d3-4301-9e8f-5b85fcb69c6b

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