Skip to content

Commit 17d5ca1

Browse files
OriginRingOriginRing
authoredJan 21, 2025··
refactor(module:hash-code): modify component style name (NG-ZORRO#8988)
1 parent 2d8968d commit 17d5ca1

File tree

3 files changed

+78
-78
lines changed

3 files changed

+78
-78
lines changed
 

‎components/hash-code/hash-code.component.spec.ts

+16-16
Original file line numberDiff line numberDiff line change
@@ -29,56 +29,56 @@ describe('nz-hash-code', () => {
2929
it('basic', () => {
3030
fixture.detectChanges();
3131
const dom = resultEl.nativeElement;
32-
expect(dom.querySelector('.ant-hashCode-header-title').innerText).toBe('HashCode');
33-
expect(dom.querySelectorAll('.ant-hashCode-code-value-block').length).toBe(8);
34-
expect(dom.querySelector('.ant-hashCode-header-logo').innerText).toBe('Antd');
35-
expect(!!dom.querySelector('.ant-hashCode-texaure')).toBeTrue();
32+
expect(dom.querySelector('.ant-hash-code-header-title').innerText).toBe('HashCode');
33+
expect(dom.querySelectorAll('.ant-hash-code-code-value-block').length).toBe(8);
34+
expect(dom.querySelector('.ant-hash-code-header-logo').innerText).toBe('Antd');
35+
expect(!!dom.querySelector('.ant-hash-code-texaure')).toBeTrue();
3636
});
3737

3838
it('should value length work', () => {
3939
testComponent.value =
4040
'683109f0f40ca72a15e05cc20931f8e6683109f0f40ca72a15e05cc20931f8e6683109f0f40ca72a15e05cc20931f8e6683109f0f40ca72a15e05cc20931f8e6';
4141
fixture.detectChanges();
42-
expect(resultEl.nativeElement.querySelectorAll('.ant-hashCode-code-value-block').length).toBe(8);
42+
expect(resultEl.nativeElement.querySelectorAll('.ant-hash-code-code-value-block').length).toBe(8);
4343
testComponent.value = '683109f0f40ca72a15e05cc20931f8e6';
4444
fixture.detectChanges();
45-
expect(resultEl.nativeElement.querySelectorAll('.ant-hashCode-code-value-block').length).toBe(8);
45+
expect(resultEl.nativeElement.querySelectorAll('.ant-hash-code-code-value-block').length).toBe(8);
4646
testComponent.value = '683109f0f40ca72a';
4747
fixture.detectChanges();
48-
expect(resultEl.nativeElement.querySelectorAll('.ant-hashCode-code-value-block').length).toBe(4);
48+
expect(resultEl.nativeElement.querySelectorAll('.ant-hash-code-code-value-block').length).toBe(4);
4949
});
5050

5151
it('should mode single work', () => {
5252
testComponent.mode = 'single';
5353
fixture.detectChanges();
54-
expect(!!resultEl.nativeElement.querySelector('.ant-hashCode-header')).toBeFalse();
55-
expect(!!resultEl.nativeElement.querySelector('.ant-hashCode-header-copy')).toBeTrue();
56-
expect(resultEl.nativeElement.classList).toContain('ant-hashCode-single');
54+
expect(!!resultEl.nativeElement.querySelector('.ant-hash-code-header')).toBeFalse();
55+
expect(!!resultEl.nativeElement.querySelector('.ant-hash-code-header-copy')).toBeTrue();
56+
expect(resultEl.nativeElement.classList).toContain('ant-hash-code-single');
5757
});
5858

5959
it('should mode strip work', () => {
6060
testComponent.mode = 'strip';
6161
fixture.detectChanges();
62-
expect(resultEl.nativeElement.classList).toContain('ant-hashCode-strip');
62+
expect(resultEl.nativeElement.classList).toContain('ant-hash-code-strip');
6363
});
6464

6565
it('should rect mode work', () => {
6666
testComponent.mode = 'rect';
6767
fixture.detectChanges();
68-
expect(!!resultEl.nativeElement.querySelector('.ant-hashCode-header')).toBeFalse();
69-
expect(!!resultEl.nativeElement.querySelector('.ant-hashCode-header-copy')).toBeTrue();
70-
expect(resultEl.nativeElement.classList).toContain('ant-hashCode-rect');
68+
expect(!!resultEl.nativeElement.querySelector('.ant-hash-code-header')).toBeFalse();
69+
expect(!!resultEl.nativeElement.querySelector('.ant-hash-code-header-copy')).toBeTrue();
70+
expect(resultEl.nativeElement.classList).toContain('ant-hash-code-rect');
7171
});
7272

7373
it('should type work', () => {
7474
testComponent.type = 'primary';
7575
fixture.detectChanges();
76-
expect(resultEl.nativeElement.classList).toContain('ant-hashCode-primary');
76+
expect(resultEl.nativeElement.classList).toContain('ant-hash-code-primary');
7777
});
7878

7979
it('should copy work', fakeAsync(() => {
8080
fixture.detectChanges();
81-
const copy = resultEl.nativeElement.querySelector('.ant-hashCode-header-copy');
81+
const copy = resultEl.nativeElement.querySelector('.ant-hash-code-header-copy');
8282
dispatchMouseEvent(copy, 'click');
8383
waitingForTooltipToggling();
8484
expect(testComponent.copyValue).toBe(testComponent.value);

‎components/hash-code/hash-code.component.ts

+32-32
Original file line numberDiff line numberDiff line change
@@ -27,72 +27,72 @@ import { NzModeType } from './typings';
2727
exportAs: 'nzHashCode',
2828
template: `
2929
@if (nzMode !== 'single' && nzMode !== 'rect') {
30-
<div class="ant-hashCode-header">
31-
<div class="ant-hashCode-header-title">{{ nzTitle }}</div>
32-
<div class="ant-hashCode-header-copy" (click)="copyHandle()">
30+
<div class="ant-hash-code-header">
31+
<div class="ant-hash-code-header-title">{{ nzTitle }}</div>
32+
<div class="ant-hash-code-header-copy" (click)="copyHandle()">
3333
<nz-icon nzType="copy" nzTheme="outline" />
3434
</div>
35-
<div class="ant-hashCode-header-logo">
35+
<div class="ant-hash-code-header-logo">
3636
<ng-template [nzStringTemplateOutlet]="nzLogo">{{ nzLogo }}</ng-template>
3737
</div>
3838
</div>
3939
}
4040
4141
@if (nzMode === 'single' || nzMode === 'rect') {
42-
<div class="ant-hashCode-header-copy" (click)="copyHandle()">
42+
<div class="ant-hash-code-header-copy" (click)="copyHandle()">
4343
<nz-icon nzType="copy" nzTheme="outline" />
4444
</div>
4545
}
4646
4747
<div
48-
class="ant-hashCode-contant"
49-
[class.ant-hashCode-value-default]="nzType === 'default'"
50-
[class.ant-hashCode-value-primary]="nzType === 'primary'"
48+
class="ant-hash-code-contant"
49+
[class.ant-hash-code-value-default]="nzType === 'default'"
50+
[class.ant-hash-code-value-primary]="nzType === 'primary'"
5151
>
5252
<div
53-
class="ant-hashCode-code-value"
53+
class="ant-hash-code-code-value"
5454
[style]="{ height: nzMode === 'rect' ? '70px' : nzMode === 'single' ? '18px' : '35px' }"
5555
>
5656
@if (nzMode === 'double') {
5757
@if (hashDataList.length > 8) {
5858
@for (v of hashDataList.slice(0, 6); track v) {
59-
<div class="ant-hashCode-code-value-block">{{ v }}</div>
59+
<div class="ant-hash-code-code-value-block">{{ v }}</div>
6060
}
61-
<div class="ant-hashCode-code-value-block">····</div>
62-
<div class="ant-hashCode-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
61+
<div class="ant-hash-code-code-value-block">····</div>
62+
<div class="ant-hash-code-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
6363
} @else {
6464
@for (v of hashDataList; track v) {
65-
<div class="ant-hashCode-code-value-block">{{ v }}</div>
65+
<div class="ant-hash-code-code-value-block">{{ v }}</div>
6666
}
6767
}
6868
}
6969
7070
@if (nzMode === 'single') {
71-
<div class="ant-hashCode-code-value-block">{{ hashDataList[0] }}</div>
72-
<div class="ant-hashCode-code-value-block">····</div>
73-
<div class="ant-hashCode-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
71+
<div class="ant-hash-code-code-value-block">{{ hashDataList[0] }}</div>
72+
<div class="ant-hash-code-code-value-block">····</div>
73+
<div class="ant-hash-code-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
7474
}
7575
7676
@if (nzMode === 'rect' || nzMode === 'strip') {
7777
@if (hashDataList.length > 16) {
7878
@for (v of hashDataList.slice(0, 14); track v) {
79-
<div class="ant-hashCode-code-value-block">{{ v }}</div>
79+
<div class="ant-hash-code-code-value-block">{{ v }}</div>
8080
}
81-
<div class="ant-hashCode-code-value-block">····</div>
82-
<div class="ant-hashCode-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
81+
<div class="ant-hash-code-code-value-block">····</div>
82+
<div class="ant-hash-code-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
8383
} @else {
8484
@for (v of hashDataList; track v) {
85-
<div class="ant-hashCode-code-value-block">{{ v }}</div>
85+
<div class="ant-hash-code-code-value-block">{{ v }}</div>
8686
}
8787
}
8888
}
8989
</div>
9090
<div
91-
class="ant-hashCode-texaure"
92-
[class.ant-hashCode-texaure-double]="nzMode === 'double'"
93-
[class.ant-hashCode-texaure-single]="nzMode === 'single'"
94-
[class.ant-hashCode-texaure-strip]="nzMode === 'strip'"
95-
[class.ant-hashCode-texaure-rect]="nzMode === 'rect'"
91+
class="ant-hash-code-texaure"
92+
[class.ant-hash-code-texaure-double]="nzMode === 'double'"
93+
[class.ant-hash-code-texaure-single]="nzMode === 'single'"
94+
[class.ant-hash-code-texaure-strip]="nzMode === 'strip'"
95+
[class.ant-hash-code-texaure-rect]="nzMode === 'rect'"
9696
>
9797
<svg width="545px" height="111px" viewBox="0 0 545 111" version="1.1" xmlns="http://www.w3.org/2000/svg">
9898
<defs>
@@ -201,13 +201,13 @@ import { NzModeType } from './typings';
201201
</div>
202202
`,
203203
host: {
204-
class: 'ant-hashCode',
205-
'[class.ant-hashCode-default]': `nzType === 'default'`,
206-
'[class.ant-hashCode-primary]': `nzType === 'primary'`,
207-
'[class.ant-hashCode-double]': `nzMode === 'double'`,
208-
'[class.ant-hashCode-single]': `nzMode === 'single'`,
209-
'[class.ant-hashCode-strip]': `nzMode === 'strip'`,
210-
'[class.ant-hashCode-rect]': `nzMode === 'rect'`
204+
class: 'ant-hash-code',
205+
'[class.ant-hash-code-default]': `nzType === 'default'`,
206+
'[class.ant-hash-code-primary]': `nzType === 'primary'`,
207+
'[class.ant-hash-code-double]': `nzMode === 'double'`,
208+
'[class.ant-hash-code-single]': `nzMode === 'single'`,
209+
'[class.ant-hash-code-strip]': `nzMode === 'strip'`,
210+
'[class.ant-hash-code-rect]': `nzMode === 'rect'`
211211
}
212212
})
213213
export class NzHashCodeComponent implements OnChanges {

‎components/hash-code/style/index.less

+30-30
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@import '../../style/themes/index';
22
@import '../../style/mixins/index';
33

4-
@hashcode-prefix-cls: ~'@{ant-prefix}-hashCode';
4+
@hash-code-prefix-cls: ~'@{ant-prefix}-hash-code';
55

6-
.@{hashcode-prefix-cls} {
6+
.@{hash-code-prefix-cls} {
77
display: flex;
88
flex-direction: column;
99
align-items: center;
@@ -18,95 +18,95 @@
1818
cursor: pointer;
1919
}
2020

21-
.@{hashcode-prefix-cls}-header-copy {
21+
.@{hash-code-prefix-cls}-header-copy {
2222
margin-left: @margin-xs;
2323
cursor: pointer;
2424
opacity: 0.45;
2525
}
2626

27-
.@{hashcode-prefix-cls}-header {
27+
.@{hash-code-prefix-cls}-header {
2828
display: flex;
2929
justify-content: left;
3030
width: 100%;
3131
height: 22px;
3232
padding-bottom: @padding-xs;
3333

34-
.@{hashcode-prefix-cls}-header-title {
34+
.@{hash-code-prefix-cls}-header-title {
3535
font-size: @font-size-base;
3636
line-height: @line-height-base;
3737
text-align: center;
3838
opacity: 0.45;
3939
}
4040

41-
.@{hashcode-prefix-cls}-header-logo {
41+
.@{hash-code-prefix-cls}-header-logo {
4242
display: flex;
4343
flex: 1;
4444
justify-content: right;
4545
}
4646
}
4747

48-
.@{hashcode-prefix-cls}-double {
48+
.@{hash-code-prefix-cls}-double {
4949
width: 172px;
5050

51-
&.ant-hashCode-primary {
51+
&.ant-hash-code-primary {
5252
width: 220px;
5353
}
5454
}
5555

56-
.@{hashcode-prefix-cls}-single {
56+
.@{hash-code-prefix-cls}-single {
5757
display: flex;
5858
flex-direction: row-reverse;
5959
width: 236px;
6060

61-
&.ant-hashCode-primary {
61+
&.ant-hash-code-primary {
6262
width: 284px;
6363
}
6464

65-
.@{hashcode-prefix-cls}-header-copy {
65+
.@{hash-code-prefix-cls}-header-copy {
6666
margin-top: @margin-xs;
6767
}
6868
}
6969

70-
.@{hashcode-prefix-cls}-strip {
70+
.@{hash-code-prefix-cls}-strip {
7171
width: 350px;
7272

73-
&.ant-hashCode-primary {
73+
&.ant-hash-code-primary {
7474
width: 398px;
7575
}
7676
}
7777

78-
.@{hashcode-prefix-cls}-rect {
78+
.@{hash-code-prefix-cls}-rect {
7979
display: flex;
8080
flex-direction: row-reverse;
8181
width: 196px;
8282

83-
&.ant-hashCode-primary {
83+
&.ant-hash-code-primary {
8484
width: 244px;
8585
}
8686
}
8787

88-
.@{hashcode-prefix-cls}-primary {
88+
.@{hash-code-prefix-cls}-primary {
8989
padding: @padding-lg;
9090
background-color: @primary-color;
9191
border-radius: 24px;
9292

93-
.@{hashcode-prefix-cls}-header-copy {
93+
.@{hash-code-prefix-cls}-header-copy {
9494
opacity: 1;
9595
}
9696

97-
.@{hashcode-prefix-cls}-header-title,
98-
.@{hashcode-prefix-cls}-header-copy,
99-
.@{hashcode-prefix-cls}-header-logo {
97+
.@{hash-code-prefix-cls}-header-title,
98+
.@{hash-code-prefix-cls}-header-copy,
99+
.@{hash-code-prefix-cls}-header-logo {
100100
color: @text-color-dark;
101101
}
102102
}
103103

104-
.@{hashcode-prefix-cls}-contant {
104+
.@{hash-code-prefix-cls}-contant {
105105
width: 100%;
106106
height: 100%;
107107
}
108108

109-
.@{hashcode-prefix-cls}-code-value {
109+
.@{hash-code-prefix-cls}-code-value {
110110
display: flex;
111111
flex-wrap: wrap;
112112
gap: 0 10px;
@@ -115,41 +115,41 @@
115115
overflow: hidden;
116116
}
117117

118-
.@{hashcode-prefix-cls}-code-value-block {
118+
.@{hash-code-prefix-cls}-code-value-block {
119119
height: 16px;
120120
font-size: @font-size-base;
121121
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
122122
}
123123

124-
.@{hashcode-prefix-cls}-value-primary {
125-
.ant-hashCode-code-value-block {
124+
.@{hash-code-prefix-cls}-value-primary {
125+
.ant-hash-code-code-value-block {
126126
color: @text-color-inverse;
127127
}
128128
}
129129

130-
.@{hashcode-prefix-cls}-texaure-double {
130+
.@{hash-code-prefix-cls}-texaure-double {
131131
width: 175px;
132132
height: 36px;
133133
}
134134

135-
.@{hashcode-prefix-cls}-texaure {
135+
.@{hash-code-prefix-cls}-texaure {
136136
position: absolute;
137137
margin-top: -35px;
138138
overflow: hidden;
139139
}
140140

141-
.@{hashcode-prefix-cls}-texaure-single {
141+
.@{hash-code-prefix-cls}-texaure-single {
142142
width: 210px;
143143
height: 28px;
144144
margin-top: -21px;
145145
}
146146

147-
.@{hashcode-prefix-cls}-texaure-strip {
147+
.@{hash-code-prefix-cls}-texaure-strip {
148148
width: 350px;
149149
height: 36px;
150150
}
151151

152-
.@{hashcode-prefix-cls}-texaure-rect {
152+
.@{hash-code-prefix-cls}-texaure-rect {
153153
width: 175px;
154154
height: 72px;
155155
margin-top: -71px;

0 commit comments

Comments
 (0)
Please sign in to comment.