feat(addon-table): add token TUI_TABLE_PAGINATION_OPTIONS with prop…

…erty `sizeOptionContent`
taiga-family · May 20, 2022 · af590c9 · af590c9
1 parent 4a26fac
commit af590c9
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 2 deletions.
diff --git a/projects/addon-table/components/table-pagination/index.ts b/projects/addon-table/components/table-pagination/index.ts
@@ -1,2 +1,3 @@
 export * from './table-pagination.component';
 export * from './table-pagination.module';
+export * from './table-pagination-options';
diff --git a/projects/addon-table/components/table-pagination/table-pagination-options.ts b/projects/addon-table/components/table-pagination/table-pagination-options.ts
@@ -0,0 +1,27 @@
+import {InjectionToken, ValueProvider} from '@angular/core';
+import {TuiContextWithImplicit} from '@taiga-ui/cdk';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+
+export interface TuiTablePaginationOptions {
+    readonly sizeOptionContent: PolymorpheusContent<
+        TuiContextWithImplicit<number> & {total: number}
+    >;
+}
+
+export const TUI_TABLE_PAGINATION_DEFAULT_OPTIONS: TuiTablePaginationOptions = {
+    sizeOptionContent: ({$implicit}) => $implicit,
+};
+
+export const TUI_TABLE_PAGINATION_OPTIONS = new InjectionToken(
+    'Default parameters for TablePagination component',
+    {factory: () => TUI_TABLE_PAGINATION_DEFAULT_OPTIONS},
+);
+
+export function tuiTablePaginationOptionsProvider(
+    options: Partial<TuiTablePaginationOptions>,
+): ValueProvider {
+    return {
+        provide: TUI_TABLE_PAGINATION_OPTIONS,
+        useValue: {...TUI_TABLE_PAGINATION_DEFAULT_OPTIONS, ...options},
+    };
+}
diff --git a/projects/addon-table/components/table-pagination/table-pagination.component.ts b/projects/addon-table/components/table-pagination/table-pagination.component.ts
@@ -4,6 +4,11 @@ import {tuiDefaultProp} from '@taiga-ui/cdk';
 import {TUI_SPIN_TEXTS} from '@taiga-ui/core';
 import {Observable} from 'rxjs';
 
+import {
+    TUI_TABLE_PAGINATION_OPTIONS,
+    TuiTablePaginationOptions,
+} from './table-pagination-options';
+
 // @dynamic
 @Component({
     selector: 'tui-table-pagination',
@@ -39,6 +44,7 @@ export class TuiTablePaginationComponent {
         @Inject(TUI_SPIN_TEXTS) readonly spinTexts$: Observable<[string, string]>,
         @Inject(TUI_TABLE_PAGINATION_TEXTS)
         readonly texts$: Observable<Record<'pages' | 'linesPerPage' | 'of', string>>,
+        @Inject(TUI_TABLE_PAGINATION_OPTIONS) readonly options: TuiTablePaginationOptions,
     ) {}
 
     get pages(): number {

diff --git a/projects/addon-table/components/table-pagination/table-pagination.module.ts b/projects/addon-table/components/table-pagination/table-pagination.module.ts
@@ -7,6 +7,7 @@ import {
     TuiLinkModule,
     TuiSvgModule,
 } from '@taiga-ui/core';
+import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiTablePaginationComponent} from './table-pagination.component';
 
@@ -18,6 +19,7 @@ import {TuiTablePaginationComponent} from './table-pagination.component';
         TuiHostedDropdownModule,
         TuiDataListModule,
         TuiSvgModule,
+        PolymorpheusModule,
     ],
     declarations: [TuiTablePaginationComponent],
     exports: [TuiTablePaginationComponent],

diff --git a/projects/addon-table/components/table-pagination/table-pagination.template.html b/projects/addon-table/components/table-pagination/table-pagination.template.html
@@ -21,7 +21,11 @@
                             class="t-item"
                             (click)="onItem(item)"
                         >
-                            {{ item }}
+                            <span
+                                polymorpheus-outlet
+                                [content]="options.sizeOptionContent"
+                                [context]="{$implicit: item, total: total}"
+                            ></span>
                             <tui-svg
                                 *ngIf="item === size; else fakeIcon"
                                 src="tuiIconCheckLarge"

diff --git a/...cts/demo-integrations/cypress/tests/addon-table/table-pagination/table-pagination.spec.ts b/...cts/demo-integrations/cypress/tests/addon-table/table-pagination/table-pagination.spec.ts
@@ -35,6 +35,16 @@ describe('TablePagination', () => {
             );
         });
     });
+
+    it('Custom size-option content', () => {
+        cy.tuiVisit('/components/table-pagination');
+
+        initializeAliases('#custom-size-option-content');
+
+        cy.get('@linesPerPageSelect').click();
+        waitForCheckmarkIcon();
+        cy.get('tui-dropdown-box').matchImageSnapshot('2-[sizeOptionContent]-dropdown');
+    });
 });
 
 function initializeAliases(selectorToTablePagination: string): void {

diff --git a/projects/demo/src/modules/tables/table-pagination/examples/2/index.html b/projects/demo/src/modules/tables/table-pagination/examples/2/index.html
@@ -0,0 +1,4 @@
+<tui-table-pagination
+    [total]="total"
+    [items]="sizeOptions"
+></tui-table-pagination>
diff --git a/projects/demo/src/modules/tables/table-pagination/examples/2/index.ts b/projects/demo/src/modules/tables/table-pagination/examples/2/index.ts
@@ -0,0 +1,35 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiTablePaginationOptions,
+    tuiTablePaginationOptionsProvider,
+} from '@taiga-ui/addon-table';
+
+const customOptionContent: TuiTablePaginationOptions['sizeOptionContent'] = ({
+    $implicit,
+    total,
+}) => {
+    switch ($implicit) {
+        case 10:
+            return 'Ten';
+        case total:
+            return 'Show all rows';
+        default:
+            return $implicit;
+    }
+};
+
+@Component({
+    selector: 'tui-table-pagination-example-2',
+    templateUrl: './index.html',
+    providers: [
+        tuiTablePaginationOptionsProvider({sizeOptionContent: customOptionContent}),
+    ],
+    changeDetection,
+    encapsulation,
+})
+export class TuiTablePaginationExample2 {
+    total = 350;
+    sizeOptions = [10, 50, 100, this.total];
+}
diff --git a/projects/demo/src/modules/tables/table-pagination/table-pagination.component.ts b/projects/demo/src/modules/tables/table-pagination/table-pagination.component.ts
@@ -25,6 +25,11 @@ export class ExampleTuiTablePaginationComponent {
         TypeScript: import('!!raw-loader!./examples/1/index.ts'),
     };
 
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+    };
+
     readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
     readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 }
diff --git a/projects/demo/src/modules/tables/table-pagination/table-pagination.module.ts b/projects/demo/src/modules/tables/table-pagination/table-pagination.module.ts
@@ -5,6 +5,7 @@ import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiTablePaginationModule} from '@taiga-ui/addon-table';
 
 import {TuiTablePaginationExample1} from './examples/1';
+import {TuiTablePaginationExample2} from './examples/2';
 import {ExampleTuiTablePaginationComponent} from './table-pagination.component';
 
 @NgModule({
@@ -14,7 +15,11 @@ import {ExampleTuiTablePaginationComponent} from './table-pagination.component';
         TuiAddonDocModule,
         RouterModule.forChild(generateRoutes(ExampleTuiTablePaginationComponent)),
     ],
-    declarations: [ExampleTuiTablePaginationComponent, TuiTablePaginationExample1],
+    declarations: [
+        ExampleTuiTablePaginationComponent,
+        TuiTablePaginationExample1,
+        TuiTablePaginationExample2,
+    ],
     exports: [ExampleTuiTablePaginationComponent],
 })
 export class ExampleTuiTablePaginationModule {}
diff --git a/projects/demo/src/modules/tables/table-pagination/table-pagination.template.html b/projects/demo/src/modules/tables/table-pagination/table-pagination.template.html
@@ -14,6 +14,27 @@
         >
             <tui-table-pagination-example-1></tui-table-pagination-example-1>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="custom-size-option-content"
+            i18n-heading
+            heading="Custom size-option content"
+            [description]="tokenDescription"
+            [content]="example2"
+        >
+            <ng-template #tokenDescription>
+                You can customize the component via DI-token
+                <code>TUI_TABLE_PAGINATION_OPTIONS</code>
+                .
+
+                <p class="tui-space_bottom-0">
+                    Use function
+                    <code>tuiTablePaginationOptionsProvider</code>
+                    to provide new value of this token.
+                </p>
+            </ng-template>
+            <tui-table-pagination-example-2></tui-table-pagination-example-2>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>