Skip to content

Commit 345f9b2

Browse files
NikGurevNikGurev
committed
fix(file-upload): disabled state colors (#DS-3824)
1 parent 01bb9b6 commit 345f9b2

File tree

19 files changed

+319
-55
lines changed

19 files changed

+319
-55
lines changed

‎packages/components-dev/file-upload/module.ts

Lines changed: 182 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import { DOCUMENT } from '@angular/common';
12
import {
3+
afterNextRender,
24
ChangeDetectionStrategy,
35
ChangeDetectorRef,
46
Component,
@@ -7,6 +9,9 @@ import {
79
inject,
810
Input,
911
Output,
12+
Renderer2,
13+
viewChild,
14+
viewChildren,
1015
ViewEncapsulation
1116
} from '@angular/core';
1217
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -33,7 +38,9 @@ import {
3338
KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION,
3439
KbqFileItem,
3540
KbqFileUploadModule,
36-
KbqFileValidatorFn
41+
KbqFileValidatorFn,
42+
KbqMultipleFileUploadComponent,
43+
KbqSingleFileUploadComponent
3744
} from '@koobiq/components/file-upload';
3845
import { KbqFormFieldModule } from '@koobiq/components/form-field';
3946
import { KbqIconModule } from '@koobiq/components/icon';
@@ -100,6 +107,177 @@ const maxFileSize = (control: AbstractControl): ValidationErrors | null => {
100107
})
101108
export class DevCustomTextDirective {}
102109

110+
@Component({
111+
standalone: true,
112+
imports: [KbqFileUploadModule, ReactiveFormsModule, KbqIconModule],
113+
selector: 'dev-file-upload-state-and-style',
114+
template: `
115+
<table>
116+
<tr>
117+
<td>
118+
<kbq-file-upload>
119+
<i kbq-icon="kbq-file-o_16"></i>
120+
</kbq-file-upload>
121+
</td>
122+
<td>
123+
<kbq-file-upload [disabled]="true">
124+
<i kbq-icon="kbq-info-circle_16"></i>
125+
</kbq-file-upload>
126+
</td>
127+
<td>
128+
<kbq-file-upload #withEmptyErrorState>
129+
<i kbq-icon="kbq-info-circle_16"></i>
130+
</kbq-file-upload>
131+
</td>
132+
<td>
133+
<kbq-file-upload class="dev-dragover">
134+
<i kbq-icon="kbq-info-circle_16"></i>
135+
</kbq-file-upload>
136+
</td>
137+
</tr>
138+
<tr>
139+
<td>
140+
<kbq-file-upload [formControl]="file">
141+
<i kbq-icon="kbq-file-o_16"></i>
142+
</kbq-file-upload>
143+
</td>
144+
<td>
145+
<kbq-file-upload [formControl]="fileControlDisabled">
146+
<i kbq-icon="kbq-file-o_16"></i>
147+
</kbq-file-upload>
148+
</td>
149+
<td>
150+
<kbq-file-upload #withErrorState [formControl]="fileControlInvalid">
151+
<i kbq-icon="kbq-info-circle_16"></i>
152+
</kbq-file-upload>
153+
</td>
154+
<td>
155+
<kbq-file-upload class="dev-dragover" [formControl]="file">
156+
<i kbq-icon="kbq-file-o_16"></i>
157+
</kbq-file-upload>
158+
</td>
159+
</tr>
160+
<tr>
161+
<td>
162+
<kbq-multiple-file-upload>
163+
<ng-template #kbqFileIcon>
164+
<i kbq-icon="kbq-file-o_16"></i>
165+
</ng-template>
166+
</kbq-multiple-file-upload>
167+
</td>
168+
<td>
169+
<kbq-multiple-file-upload [disabled]="true">
170+
<ng-template #kbqFileIcon>
171+
<i kbq-icon="kbq-file-o_16"></i>
172+
</ng-template>
173+
</kbq-multiple-file-upload>
174+
</td>
175+
<td>
176+
<kbq-multiple-file-upload #multipleEmptyWithErrorState>
177+
<ng-template #kbqFileIcon>
178+
<i kbq-icon="kbq-file-o_16"></i>
179+
</ng-template>
180+
</kbq-multiple-file-upload>
181+
</td>
182+
<td>
183+
<kbq-multiple-file-upload class="dev-dragover">
184+
<ng-template #kbqFileIcon>
185+
<i kbq-icon="kbq-file-o_16"></i>
186+
</ng-template>
187+
</kbq-multiple-file-upload>
188+
</td>
189+
</tr>
190+
<tr>
191+
<td>
192+
<kbq-multiple-file-upload [formControl]="multipleFileControl">
193+
<ng-template #kbqFileIcon>
194+
<i kbq-icon="kbq-file-o_16"></i>
195+
</ng-template>
196+
</kbq-multiple-file-upload>
197+
</td>
198+
<td>
199+
<kbq-multiple-file-upload [formControl]="multipleFileControlDisabled">
200+
<ng-template #kbqFileIcon>
201+
<i kbq-icon="kbq-file-o_16"></i>
202+
</ng-template>
203+
</kbq-multiple-file-upload>
204+
</td>
205+
<td>
206+
<kbq-multiple-file-upload #multipleWithErrorState [formControl]="multipleFileControlInvalid">
207+
<ng-template #kbqFileIcon>
208+
<i kbq-icon="kbq-file-o_16"></i>
209+
</ng-template>
210+
</kbq-multiple-file-upload>
211+
</td>
212+
<td>
213+
<kbq-multiple-file-upload class="dev-dragover" [formControl]="multipleFileControl">
214+
<ng-template #kbqFileIcon>
215+
<i kbq-icon="kbq-file-o_16"></i>
216+
</ng-template>
217+
</kbq-multiple-file-upload>
218+
</td>
219+
</tr>
220+
<tr>
221+
<td>
222+
<kbq-multiple-file-upload
223+
class="dev-dragover"
224+
#multipleWithErrorState
225+
[formControl]="multipleFileControlInvalid"
226+
>
227+
<ng-template #kbqFileIcon>
228+
<i kbq-icon="kbq-file-o_16"></i>
229+
</ng-template>
230+
</kbq-multiple-file-upload>
231+
</td>
232+
</tr>
233+
</table>
234+
`,
235+
changeDetection: ChangeDetectionStrategy.OnPush
236+
})
237+
export class DevFileUploadStateAndStyle {
238+
testFile = new File(['test'] satisfies BlobPart[], 'test.file');
239+
240+
singleWithEmptyErrorState = viewChild<KbqSingleFileUploadComponent>('withEmptyErrorState');
241+
singleWithErrorState = viewChild<KbqSingleFileUploadComponent>('withErrorState');
242+
multipleEmptyWithErrorState = viewChild<KbqMultipleFileUploadComponent>('multipleEmptyWithErrorState');
243+
multipleWithErrorState = viewChildren<KbqMultipleFileUploadComponent>('multipleWithErrorState');
244+
245+
file = new FormControl(this.testFile);
246+
multipleFileControl = new FormControl([{ file: this.testFile } satisfies KbqFileItem]);
247+
248+
fileControlDisabled = new FormControl(this.testFile);
249+
multipleFileControlDisabled = new FormControl([{ file: this.testFile } satisfies KbqFileItem]);
250+
251+
fileControlInvalid = new FormControl(this.testFile, () => ({ error: true }));
252+
multipleFileControlInvalid = new FormControl([{ file: this.testFile } satisfies KbqFileItem]);
253+
254+
private readonly renderer = inject(Renderer2);
255+
private readonly document = inject(DOCUMENT);
256+
257+
constructor() {
258+
afterNextRender(() => {
259+
this.singleWithEmptyErrorState()!.errorState = true;
260+
this.singleWithErrorState()!.errorState = true;
261+
this.multipleEmptyWithErrorState()!.errorState = true;
262+
this.document.querySelectorAll('.dev-dragover .kbq-file-upload').forEach((el) => {
263+
this.renderer.addClass(el, 'dragover');
264+
});
265+
this.fileControlInvalid.updateValueAndValidity();
266+
this.multipleFileControlInvalid.updateValueAndValidity();
267+
268+
const multipleWithErrorState = this.multipleWithErrorState();
269+
270+
multipleWithErrorState.forEach((el) => {
271+
if (el) {
272+
el.files[0].hasError = true;
273+
}
274+
});
275+
});
276+
this.fileControlDisabled.disable();
277+
this.multipleFileControlDisabled.disable();
278+
}
279+
}
280+
103281
@Component({
104282
standalone: true,
105283
imports: [FileUploadExamplesModule],
@@ -197,7 +375,8 @@ export class DevMultipleFileUploadCompact {
197375
KbqRadioModule,
198376
KbqDataSizePipe,
199377
DevMultipleFileUploadCompact,
200-
DevCustomTextDirective
378+
DevCustomTextDirective,
379+
DevFileUploadStateAndStyle
201380
],
202381
selector: 'dev-app',
203382
templateUrl: 'template.html',
@@ -286,6 +465,7 @@ export class DevApp {
286465
}
287466
});
288467
});
468+
this.toggleDisabled();
289469
}
290470

291471
addFileMultiple(files: KbqFileItem[]) {

‎packages/components-dev/file-upload/template.html

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<dev-file-upload-state-and-style class="layout-margin-top-l layout-margin-bottom-l layout-row" />
2+
13
<button kbq-button (click)="toggleDisabled()">Toggle Disabled</button>
24

35
<button kbq-button (click)="startLoading()">Loading imitation for single and multiple</button>
@@ -25,15 +27,15 @@
2527
</kbq-checkbox>
2628
<div class="kbq-caption_mono">file name: {{ control.value?.file?.name }}</div>
2729
<kbq-file-upload class="layout-margin-bottom-s" [formControl]="control">
28-
<i color="contrast-fade" kbq-icon="kbq-file-o_16"></i>
30+
<i kbq-icon="kbq-file-o_16"></i>
2931
<kbq-hint>Размер файла не должен быть более 5 МБ</kbq-hint>
3032
@if (control.hasError('maxFileSize')) {
3133
<kbq-hint color="error">Слишком большой размер файла</kbq-hint>
3234
}
3335
</kbq-file-upload>
3436

3537
<kbq-file-upload [formControl]="secondControl">
36-
<i color="contrast-fade" kbq-icon="kbq-file-o_16"></i>
38+
<i kbq-icon="kbq-file-o_16"></i>
3739
</kbq-file-upload>
3840
</div>
3941

@@ -103,7 +105,7 @@
103105
(filesAdded)="onFilesAddedForListWithLoadOnAdd($event)"
104106
>
105107
<ng-template #kbqFileIcon>
106-
<i color="contrast-fade" kbq-icon="kbq-file-o_16"></i>
108+
<i kbq-icon="kbq-file-o_16"></i>
107109
</ng-template>
108110

109111
@for (control of this.fileListOnAddLoad.controls; track $index) {
@@ -128,7 +130,7 @@
128130
(fileQueueChanged)="addFileMultiple($event)"
129131
>
130132
<ng-template #kbqFileIcon>
131-
<i color="contrast-fade" kbq-icon="kbq-file-o_16"></i>
133+
<i kbq-icon="kbq-file-o_16"></i>
132134
</ng-template>
133135
<kbq-hint>{{ hintMessage }}</kbq-hint>
134136
</kbq-multiple-file-upload>
@@ -146,7 +148,7 @@
146148
(fileQueueChanged)="addFileMultiple($event)"
147149
>
148150
<ng-template #kbqFileIcon>
149-
<i color="contrast-fade" kbq-icon="kbq-file-o_16"></i>
151+
<i kbq-icon="kbq-file-o_16"></i>
150152
</ng-template>
151153
<kbq-hint>{{ hintMessage }}</kbq-hint>
152154
</kbq-file-upload>
@@ -163,7 +165,7 @@
163165
<br />
164166
<kbq-file-upload multiple (fileQueueChanged)="onFileQueueChange($event)">
165167
<ng-template #kbqFileIcon>
166-
<i color="contrast-fade" kbq-icon="kbq-file-o_16"></i>
168+
<i kbq-icon="kbq-file-o_16"></i>
167169
</ng-template>
168170
@for (error of errorMessages; track error) {
169171
<kbq-hint color="error">{{ error }}</kbq-hint>
@@ -182,7 +184,7 @@
182184
<br />
183185
<kbq-file-upload multiple [formControl]="multipleFileUploadControl" [progressMode]="'indeterminate'">
184186
<ng-template #kbqFileIcon>
185-
<i color="contrast-fade" kbq-icon="kbq-file-o_16"></i>
187+
<i kbq-icon="kbq-file-o_16"></i>
186188
</ng-template>
187189
@if (multipleFileUploadControl.hasError('maxFileSize')) {
188190
<kbq-hint color="error">Размер одного из файлов превысил лимит</kbq-hint>
@@ -204,7 +206,7 @@
204206
(filesAdded)="onFilesAdded($event)"
205207
>
206208
<ng-template #kbqFileIcon>
207-
<i color="contrast-fade" kbq-icon="kbq-file-o_16"></i>
209+
<i kbq-icon="kbq-file-o_16"></i>
208210
</ng-template>
209211
@for (control of this.fileListValidationOnSubmit.controls; track $index) {
210212
<kbq-hint color="error">

0 commit comments

Comments
 (0)