8000 feat(select-control): add thySize param and add test case · atinc/ngx-tethys@4f2de96 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 4f2de96

Browse files
pubuzhixing8pubuzhixing8
committed
feat(select-control): add thySize param and add test case
1 parent 6a61088 commit 4f2de96

File tree

4 files changed

+41
-14
lines changed

4 files changed

+41
-14
lines changed

‎src/core/select/select-control/select-control.component.ts

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {
1313
import { UpdateHostClassService } from '../../../shared';
1414
import { SelectOptionBase } from '../select-option/select-option-base';
1515

16+
export type SelectControlSize = 'xs' | 'sm' | 'md' | 'lg' | '';
17+
1618
@Component({
1719
selector: 'thy-select-control,[thySelectControl]',
1820
templateUrl: './select-control.component.html',
@@ -32,6 +34,8 @@ export class ThySelectControlComponent implements OnInit {
3234

3335
disabled = false;
3436

37+
size: SelectControlSize;
38+
3539
selectedOptions: SelectOptionBase[];
3640

3741
@Input()
@@ -51,7 +55,7 @@ export class ThySelectControlComponent implements OnInit {
5155
this.setInputValue('');
5256
});
5357
}
54-
this.setSelectionClass();
58+
this.setSelectControlClass();
5559
}
5660

5761
@Input()
@@ -61,7 +65,7 @@ export class ThySelectControlComponent implements OnInit {
6165

6266
set thyIsMultiple(value: boolean) {
6367
this.isMultiple = value;
64-
this.setSelectionClass();
68+
this.setSelectControlClass();
6569
}
6670

6771
@Input()
@@ -71,7 +75,7 @@ export class ThySelectControlComponent implements OnInit {
7175

7276
set thyShowSearch(value: boolean) {
7377
this.showSearch = value;
74-
this.setSelectionClass();
78+
this.setSelectControlClass();
7579
}
7680

7781
@Input()
@@ -99,7 +103,7 @@ export class ThySelectControlComponent implements OnInit {
99103

100104
set thyDisabled(value: boolean) {
101105
this.disabled = value;
102-
this.setSelectionClass();
106+
this.setSelectControlClass();
103107
}
104108

105109
@Input()
@@ -111,6 +115,16 @@ export class ThySelectControlComponent implements OnInit {
111115
@Input()
112116
thyPlaceholder = '';
113117

118+
@Input()
119+
get thySize(): SelectControlSize {
120+
return this.size;
121+
}
122+
123+
set thySize(value: SelectControlSize) {
124+
this.size = value;
125+
this.setSelectControlClass();
126+
}
127+
114128
@Output()
115129
thyOnSearch = new EventEmitter<string>();
116130

@@ -182,21 +196,23 @@ export class ThySelectControlComponent implements OnInit {
182196
}
183197

184198
ngOnInit() {
185-
this.setSelectionClass();
199+
this.setSelectControlClass();
186200
}
187201

188-
setSelectionClass() {
202+
setSelectControlClass() {
189203
const modeType = this.isMultiple ? 'multiple' : 'single';
190-
const selectionClass = {
204+
6DAF const selectControlClass = {
191205
[`form-control`]: true,
206+
[`form-control-${this.thySize}`]: !!this.thySize,
192207
[`form-control-custom`]: true,
193208
[`select-control`]: true,
209+
[`select-control-size`]: true,
194210
[`select-control-${modeType}`]: true,
195211
[`select-control-show-search`]: this.showSearch,
196212
[`panel-is-opened`]: this.panelOpened,
197213
[`disabled`]: this.disabled
198214
};
199-
this.updateHostClassService.updateClassByMap(selectionClass);
215+
this.updateHostClassService.updateClassByMap(selectControlClass);
200216
}
201217

202218
setInputValue(value: string) {

‎src/core/select/select-control/select-control.spec.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { ThyFormModule } from '../../../form';
1616
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
1717
import { UpdateHostClassService } from '../../../shared/update-host-class.service';
1818
import { ThyIconModule } from '../../../icon/icon.module';
19-
import { ThySelectControlComponent } from './select-control.component';
19+
import { ThySelectControlComponent, SelectControlSize } from './select-control.component';
2020
import { SelectOptionBase } from '../select-option/select-option-base';
2121

2222
@Component({
@@ -28,6 +28,7 @@ import { SelectOptionBase } from '../select-option/select-option-base';
2828
[thyShowSearch]="thyShowSearch"
2929
[thySelectedOptions]="selectedOptions"
3030
[thyAllowClear]="thyAllowClear"
31+
[thySize]="thySize"
3132
></thy-select-control>
3233
`
3334
})
@@ -42,6 +43,8 @@ class BasicSelectControlComponent {
4243

4344
thyAllowClear = true;
4445

46+
thySize = null;
47+
4548
@ViewChild(ThySelectControlComponent)
4649
selectControlComponent: ThySelectControlComponent;
4750
}
@@ -89,6 +92,15 @@ describe('ThySelectControl', () => {
8992
fixture.detectChanges();
9093
expect(selectElement.classList.contains('select-control-show-search')).toBeTruthy();
9194
});
95+
96+
it('should get size class when set thySize', () => {
97+
const size: SelectControlSize = 'md';
98+
expect(selectElement.classList.contains(`form-control-${size}`)).not.toBeTruthy();
99+
fixture.componentInstance.thySize = size;
100+
fixture.detectChanges();
101+
selectElement = fixture.debugElement.query(By.css('.form-control')).nativeElement;
102+
expect(selectElement.classList.contains(`form-control-${size}`)).toBeTruthy();
103+
});
92104
});
93105

94106
describe('placeholder', () => {

‎src/select/custom-select/custom-select.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
[thyIsMultiple]="thyMode === 'multiple'"
1010
[thyShowSearch]="thyShowSearch"
1111
[thyAllowClear]="thyAllowClear"
12+
[thySize]="thySize"
1213
[thyPlaceholder]="thyPlaceHolder"
1314
[customDisplayTemplate]="selectedValueDisplayRef"
1415
[thyDisabled]="_disabled"
1516
(thyOnClear)="clearSelectValue($event)"
1617
(thyOnRemove)="remove($event)"
1718
(thyOnSearch)="onSearchFilter($event)"
18-
[ngClass]="_size ? 'form-control-' + _size : ''"
1919
></div>
2020

2121
<ng-template

‎src/select/custom-select/custom-select.component.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,7 @@ import { SelectionModel } from '@angular/cdk/collections';
5151
import { ThyScrollDirective } from '../../directive/thy-scroll.directive';
5252
import { helpers } from '../../util';
5353
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
54-
55-
export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | '';
54+
import { SelectControlSize } from '../../core';
5655

5756
export type SelectMode = 'multiple' | '';
5857

@@ -96,7 +95,7 @@ export class ThySelectCustomComponent
9695
OnDestroy {
9796
_disabled = false;
9897

99-
_size: InputSize;
98+
_size: SelectControlSize;
10099

101100
_mode: SelectMode = '';
102101

@@ -175,7 +174,7 @@ export class ThySelectCustomComponent
175174
}
176175

177176
@Input()
178-
set thySize(value: InputSize) {
177+
set thySize(value: SelectControlSize) {
179178
this._size = value;
180179
}
181180

0 commit comments

Comments
 (0)
0