feat(kit): provide custom formatSize handler in TuiFileComponent (#…

…3483)
taiga-family · Jan 24, 2023 · fb9d0cd · fb9d0cd
1 parent e1607d7
commit fb9d0cd
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/projects/kit/components/files/file/file-options.ts b/projects/kit/components/files/file/file-options.ts
@@ -0,0 +1,20 @@
+import {InjectionToken} from '@angular/core';
+import {tuiFormatSize} from '@taiga-ui/kit/utils';
+
+export interface TuiFileOptions {
+    readonly formatSize: (
+        units: [string, string, string],
+        size?: number,
+    ) => string | null;
+}
+
+export const TUI_FILE_DEFAULT_OPTIONS: TuiFileOptions = {
+    formatSize: tuiFormatSize,
+};
+
+export const TUI_FILE_OPTIONS = new InjectionToken<TuiFileOptions>(
+    `[TUI_FILE_OPTIONS]: Default parameters for file component`,
+    {
+        factory: () => TUI_FILE_DEFAULT_OPTIONS,
+    },
+);
diff --git a/projects/kit/components/files/file/file.component.ts b/projects/kit/components/files/file/file.component.ts
@@ -8,17 +8,23 @@ import {
     Output,
 } from '@angular/core';
 import {DomSanitizer, SafeValue} from '@angular/platform-browser';
-import {TUI_IS_MOBILE, tuiDefaultProp, tuiIsObserved, tuiPure} from '@taiga-ui/cdk';
+import {
+    TUI_IS_MOBILE,
+    tuiDefaultProp,
+    TuiInjectionTokenType,
+    tuiIsObserved,
+    tuiPure,
+} from '@taiga-ui/cdk';
 import {TuiSizeL} from '@taiga-ui/core';
+import {TuiLanguage} from '@taiga-ui/i18n';
 import {TuiFileLike} from '@taiga-ui/kit/interfaces';
 import {TUI_DIGITAL_INFORMATION_UNITS, TUI_FILE_TEXTS} from '@taiga-ui/kit/tokens';
 import {TuiFileState} from '@taiga-ui/kit/types';
-import {tuiFormatSize} from '@taiga-ui/kit/utils/files';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable, of} from 'rxjs';
 import {map} from 'rxjs/operators';
 
-type FileTexts = 'loadingError' | 'preview' | 'remove';
+import {TUI_FILE_OPTIONS} from './file-options';
 
 @Component({
     selector: 'tui-file',
@@ -58,12 +64,17 @@ export class TuiFileComponent {
     focused = false;
 
     constructor(
-        @Inject(TUI_IS_MOBILE) readonly isMobile: boolean,
+        @Inject(TUI_IS_MOBILE)
+        readonly isMobile: TuiInjectionTokenType<typeof TUI_IS_MOBILE>,
         @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
         @Inject(TUI_FILE_TEXTS)
-        readonly fileTexts$: Observable<Record<FileTexts, string>>,
+        readonly fileTexts$: TuiInjectionTokenType<typeof TUI_FILE_TEXTS>,
+        @Inject(TUI_FILE_OPTIONS)
+        private readonly options: TuiInjectionTokenType<typeof TUI_FILE_OPTIONS>,
         @Inject(TUI_DIGITAL_INFORMATION_UNITS)
-        private readonly units$: Observable<[string, string, string]>,
+        private readonly units$: TuiInjectionTokenType<
+            typeof TUI_DIGITAL_INFORMATION_UNITS
+        >,
     ) {}
 
     get preview(): SafeValue {
@@ -138,7 +149,7 @@ export class TuiFileComponent {
     private calculateContent$(
         state: TuiFileState,
         file: TuiFileLike,
-        fileTexts$: Observable<Record<'loadingError' | 'preview' | 'remove', string>>,
+        fileTexts$: Observable<Record<keyof TuiLanguage['fileTexts'], string>>,
     ): Observable<PolymorpheusContent> {
         return state === 'error' && !file.content
             ? fileTexts$.pipe(map(texts => texts.loadingError))
@@ -150,7 +161,7 @@ export class TuiFileComponent {
         file: TuiFileLike,
         units$: Observable<[string, string, string]>,
     ): Observable<string | null> {
-        return units$.pipe(map(units => tuiFormatSize(units, file.size)));
+        return units$.pipe(map(units => this.options.formatSize(units, file.size)));
     }
 
     @tuiPure

diff --git a/projects/kit/components/files/index.ts b/projects/kit/components/files/index.ts
@@ -1,3 +1,4 @@
 export * from './file/file.component';
+export * from './file/file-options';
 export * from './files.component';
 export * from './files.module';