Skip to content

Commit

Permalink
refactor(module:hash-code): modify component style name (NG-ZORRO#8988)
Browse files Browse the repository at this point in the history
  • Loading branch information
OriginRing authored Jan 21, 2025
1 parent 2d8968d commit 17d5ca1
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 78 deletions.
32 changes: 16 additions & 16 deletions components/hash-code/hash-code.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,56 +29,56 @@ describe('nz-hash-code', () => {
it('basic', () => {
fixture.detectChanges();
const dom = resultEl.nativeElement;
expect(dom.querySelector('.ant-hashCode-header-title').innerText).toBe('HashCode');
expect(dom.querySelectorAll('.ant-hashCode-code-value-block').length).toBe(8);
expect(dom.querySelector('.ant-hashCode-header-logo').innerText).toBe('Antd');
expect(!!dom.querySelector('.ant-hashCode-texaure')).toBeTrue();
expect(dom.querySelector('.ant-hash-code-header-title').innerText).toBe('HashCode');
expect(dom.querySelectorAll('.ant-hash-code-code-value-block').length).toBe(8);
expect(dom.querySelector('.ant-hash-code-header-logo').innerText).toBe('Antd');
expect(!!dom.querySelector('.ant-hash-code-texaure')).toBeTrue();
});

it('should value length work', () => {
testComponent.value =
'683109f0f40ca72a15e05cc20931f8e6683109f0f40ca72a15e05cc20931f8e6683109f0f40ca72a15e05cc20931f8e6683109f0f40ca72a15e05cc20931f8e6';
fixture.detectChanges();
expect(resultEl.nativeElement.querySelectorAll('.ant-hashCode-code-value-block').length).toBe(8);
expect(resultEl.nativeElement.querySelectorAll('.ant-hash-code-code-value-block').length).toBe(8);
testComponent.value = '683109f0f40ca72a15e05cc20931f8e6';
fixture.detectChanges();
expect(resultEl.nativeElement.querySelectorAll('.ant-hashCode-code-value-block').length).toBe(8);
expect(resultEl.nativeElement.querySelectorAll('.ant-hash-code-code-value-block').length).toBe(8);
testComponent.value = '683109f0f40ca72a';
fixture.detectChanges();
expect(resultEl.nativeElement.querySelectorAll('.ant-hashCode-code-value-block').length).toBe(4);
expect(resultEl.nativeElement.querySelectorAll('.ant-hash-code-code-value-block').length).toBe(4);
});

it('should mode single work', () => {
testComponent.mode = 'single';
fixture.detectChanges();
expect(!!resultEl.nativeElement.querySelector('.ant-hashCode-header')).toBeFalse();
expect(!!resultEl.nativeElement.querySelector('.ant-hashCode-header-copy')).toBeTrue();
expect(resultEl.nativeElement.classList).toContain('ant-hashCode-single');
expect(!!resultEl.nativeElement.querySelector('.ant-hash-code-header')).toBeFalse();
expect(!!resultEl.nativeElement.querySelector('.ant-hash-code-header-copy')).toBeTrue();
expect(resultEl.nativeElement.classList).toContain('ant-hash-code-single');
});

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

it('should rect mode work', () => {
testComponent.mode = 'rect';
fixture.detectChanges();
expect(!!resultEl.nativeElement.querySelector('.ant-hashCode-header')).toBeFalse();
expect(!!resultEl.nativeElement.querySelector('.ant-hashCode-header-copy')).toBeTrue();
expect(resultEl.nativeElement.classList).toContain('ant-hashCode-rect');
expect(!!resultEl.nativeElement.querySelector('.ant-hash-code-header')).toBeFalse();
expect(!!resultEl.nativeElement.querySelector('.ant-hash-code-header-copy')).toBeTrue();
expect(resultEl.nativeElement.classList).toContain('ant-hash-code-rect');
});

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

it('should copy work', fakeAsync(() => {
fixture.detectChanges();
const copy = resultEl.nativeElement.querySelector('.ant-hashCode-header-copy');
const copy = resultEl.nativeElement.querySelector('.ant-hash-code-header-copy');
dispatchMouseEvent(copy, 'click');
waitingForTooltipToggling();
expect(testComponent.copyValue).toBe(testComponent.value);
Expand Down
64 changes: 32 additions & 32 deletions components/hash-code/hash-code.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,72 +27,72 @@ import { NzModeType } from './typings';
exportAs: 'nzHashCode',
template: `
@if (nzMode !== 'single' && nzMode !== 'rect') {
<div class="ant-hashCode-header">
<div class="ant-hashCode-header-title">{{ nzTitle }}</div>
<div class="ant-hashCode-header-copy" (click)="copyHandle()">
<div class="ant-hash-code-header">
<div class="ant-hash-code-header-title">{{ nzTitle }}</div>
<div class="ant-hash-code-header-copy" (click)="copyHandle()">
<nz-icon nzType="copy" nzTheme="outline" />
</div>
<div class="ant-hashCode-header-logo">
<div class="ant-hash-code-header-logo">
<ng-template [nzStringTemplateOutlet]="nzLogo">{{ nzLogo }}</ng-template>
</div>
</div>
}
@if (nzMode === 'single' || nzMode === 'rect') {
<div class="ant-hashCode-header-copy" (click)="copyHandle()">
<div class="ant-hash-code-header-copy" (click)="copyHandle()">
<nz-icon nzType="copy" nzTheme="outline" />
</div>
}
<div
class="ant-hashCode-contant"
[class.ant-hashCode-value-default]="nzType === 'default'"
[class.ant-hashCode-value-primary]="nzType === 'primary'"
class="ant-hash-code-contant"
[class.ant-hash-code-value-default]="nzType === 'default'"
[class.ant-hash-code-value-primary]="nzType === 'primary'"
>
<div
class="ant-hashCode-code-value"
class="ant-hash-code-code-value"
[style]="{ height: nzMode === 'rect' ? '70px' : nzMode === 'single' ? '18px' : '35px' }"
>
@if (nzMode === 'double') {
@if (hashDataList.length > 8) {
@for (v of hashDataList.slice(0, 6); track v) {
<div class="ant-hashCode-code-value-block">{{ v }}</div>
<div class="ant-hash-code-code-value-block">{{ v }}</div>
}
<div class="ant-hashCode-code-value-block">····</div>
<div class="ant-hashCode-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
<div class="ant-hash-code-code-value-block">····</div>
<div class="ant-hash-code-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
} @else {
@for (v of hashDataList; track v) {
<div class="ant-hashCode-code-value-block">{{ v }}</div>
<div class="ant-hash-code-code-value-block">{{ v }}</div>
}
}
}
@if (nzMode === 'single') {
<div class="ant-hashCode-code-value-block">{{ hashDataList[0] }}</div>
<div class="ant-hashCode-code-value-block">····</div>
<div class="ant-hashCode-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
<div class="ant-hash-code-code-value-block">{{ hashDataList[0] }}</div>
<div class="ant-hash-code-code-value-block">····</div>
<div class="ant-hash-code-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
}
@if (nzMode === 'rect' || nzMode === 'strip') {
@if (hashDataList.length > 16) {
@for (v of hashDataList.slice(0, 14); track v) {
<div class="ant-hashCode-code-value-block">{{ v }}</div>
<div class="ant-hash-code-code-value-block">{{ v }}</div>
}
<div class="ant-hashCode-code-value-block">····</div>
<div class="ant-hashCode-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
<div class="ant-hash-code-code-value-block">····</div>
<div class="ant-hash-code-code-value-block">{{ hashDataList[hashDataList.length - 1] }}</div>
} @else {
@for (v of hashDataList; track v) {
<div class="ant-hashCode-code-value-block">{{ v }}</div>
<div class="ant-hash-code-code-value-block">{{ v }}</div>
}
}
}
</div>
<div
class="ant-hashCode-texaure"
[class.ant-hashCode-texaure-double]="nzMode === 'double'"
[class.ant-hashCode-texaure-single]="nzMode === 'single'"
[class.ant-hashCode-texaure-strip]="nzMode === 'strip'"
[class.ant-hashCode-texaure-rect]="nzMode === 'rect'"
class="ant-hash-code-texaure"
[class.ant-hash-code-texaure-double]="nzMode === 'double'"
[class.ant-hash-code-texaure-single]="nzMode === 'single'"
[class.ant-hash-code-texaure-strip]="nzMode === 'strip'"
[class.ant-hash-code-texaure-rect]="nzMode === 'rect'"
>
<svg width="545px" height="111px" viewBox="0 0 545 111" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
Expand Down Expand Up @@ -201,13 +201,13 @@ import { NzModeType } from './typings';
</div>
`,
host: {
class: 'ant-hashCode',
'[class.ant-hashCode-default]': `nzType === 'default'`,
'[class.ant-hashCode-primary]': `nzType === 'primary'`,
'[class.ant-hashCode-double]': `nzMode === 'double'`,
'[class.ant-hashCode-single]': `nzMode === 'single'`,
'[class.ant-hashCode-strip]': `nzMode === 'strip'`,
'[class.ant-hashCode-rect]': `nzMode === 'rect'`
class: 'ant-hash-code',
'[class.ant-hash-code-default]': `nzType === 'default'`,
'[class.ant-hash-code-primary]': `nzType === 'primary'`,
'[class.ant-hash-code-double]': `nzMode === 'double'`,
'[class.ant-hash-code-single]': `nzMode === 'single'`,
'[class.ant-hash-code-strip]': `nzMode === 'strip'`,
'[class.ant-hash-code-rect]': `nzMode === 'rect'`
}
})
export class NzHashCodeComponent implements OnChanges {
Expand Down
60 changes: 30 additions & 30 deletions components/hash-code/style/index.less
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';

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

.@{hashcode-prefix-cls} {
.@{hash-code-prefix-cls} {
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -18,95 +18,95 @@
cursor: pointer;
}

.@{hashcode-prefix-cls}-header-copy {
.@{hash-code-prefix-cls}-header-copy {
margin-left: @margin-xs;
cursor: pointer;
opacity: 0.45;
}

.@{hashcode-prefix-cls}-header {
.@{hash-code-prefix-cls}-header {
display: flex;
justify-content: left;
width: 100%;
height: 22px;
padding-bottom: @padding-xs;

.@{hashcode-prefix-cls}-header-title {
.@{hash-code-prefix-cls}-header-title {
font-size: @font-size-base;
line-height: @line-height-base;
text-align: center;
opacity: 0.45;
}

.@{hashcode-prefix-cls}-header-logo {
.@{hash-code-prefix-cls}-header-logo {
display: flex;
flex: 1;
justify-content: right;
}
}

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

&.ant-hashCode-primary {
&.ant-hash-code-primary {
width: 220px;
}
}

.@{hashcode-prefix-cls}-single {
.@{hash-code-prefix-cls}-single {
display: flex;
flex-direction: row-reverse;
width: 236px;

&.ant-hashCode-primary {
&.ant-hash-code-primary {
width: 284px;
}

.@{hashcode-prefix-cls}-header-copy {
.@{hash-code-prefix-cls}-header-copy {
margin-top: @margin-xs;
}
}

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

&.ant-hashCode-primary {
&.ant-hash-code-primary {
width: 398px;
}
}

.@{hashcode-prefix-cls}-rect {
.@{hash-code-prefix-cls}-rect {
display: flex;
flex-direction: row-reverse;
width: 196px;

&.ant-hashCode-primary {
&.ant-hash-code-primary {
width: 244px;
}
}

.@{hashcode-prefix-cls}-primary {
.@{hash-code-prefix-cls}-primary {
padding: @padding-lg;
background-color: @primary-color;
border-radius: 24px;

.@{hashcode-prefix-cls}-header-copy {
.@{hash-code-prefix-cls}-header-copy {
opacity: 1;
}

.@{hashcode-prefix-cls}-header-title,
.@{hashcode-prefix-cls}-header-copy,
.@{hashcode-prefix-cls}-header-logo {
.@{hash-code-prefix-cls}-header-title,
.@{hash-code-prefix-cls}-header-copy,
.@{hash-code-prefix-cls}-header-logo {
color: @text-color-dark;
}
}

.@{hashcode-prefix-cls}-contant {
.@{hash-code-prefix-cls}-contant {
width: 100%;
height: 100%;
}

.@{hashcode-prefix-cls}-code-value {
.@{hash-code-prefix-cls}-code-value {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
Expand All @@ -115,41 +115,41 @@
overflow: hidden;
}

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

.@{hashcode-prefix-cls}-value-primary {
.ant-hashCode-code-value-block {
.@{hash-code-prefix-cls}-value-primary {
.ant-hash-code-code-value-block {
color: @text-color-inverse;
}
}

.@{hashcode-prefix-cls}-texaure-double {
.@{hash-code-prefix-cls}-texaure-double {
width: 175px;
height: 36px;
}

.@{hashcode-prefix-cls}-texaure {
.@{hash-code-prefix-cls}-texaure {
position: absolute;
margin-top: -35px;
overflow: hidden;
}

.@{hashcode-prefix-cls}-texaure-single {
.@{hash-code-prefix-cls}-texaure-single {
width: 210px;
height: 28px;
margin-top: -21px;
}

.@{hashcode-prefix-cls}-texaure-strip {
.@{hash-code-prefix-cls}-texaure-strip {
width: 350px;
height: 36px;
}

.@{hashcode-prefix-cls}-texaure-rect {
.@{hash-code-prefix-cls}-texaure-rect {
width: 175px;
height: 72px;
margin-top: -71px;
Expand Down

0 comments on commit 17d5ca1

Please sign in to comment.