feat(kit): support disabledItemHandler in native select, put `tuiMu…

…ltiSelectGroup` inside native multiselect (#4065)
taiga-family · Mar 31, 2023 · 85cb74b · 85cb74b
1 parent f49df01
commit 85cb74b
Show file tree

Hide file tree

Showing 17 changed files with 42 additions and 54 deletions.
diff --git a/projects/demo/src/modules/components/multi-select/examples/10/index.html b/projects/demo/src/modules/components/multi-select/examples/10/index.html
@@ -1,5 +1,4 @@
 <tui-multi-select
-    placeholder="Ignored text"
     class="b-form"
     [formControl]="itemControl"
     [tuiTextfieldLabelOutside]="true"
@@ -11,14 +10,12 @@
 
     <select
         tuiSelect
-        tuiMultiSelectGroup
         multiple
         [items]="items"
     ></select>
 </tui-multi-select>
 
 <tui-multi-select
-    placeholder="Ignored text"
     class="b-form tui-space_top-5"
     [formControl]="itemGroupControl"
     [tuiTextfieldLabelOutside]="true"
@@ -29,7 +26,6 @@
 
     <select
         tuiSelect
-        tuiMultiSelectGroup
         multiple
         [items]="groupItems"
         [labels]="labels"

diff --git a/projects/demo/src/modules/components/select/examples/11/index.html b/projects/demo/src/modules/components/select/examples/11/index.html
@@ -15,6 +15,7 @@
         Food
         <select
             tuiSelect
+            [disabledItemHandler]="disabledItemHandler"
             [items]="groupItems"
             [labels]="labels"
         ></select>

diff --git a/projects/demo/src/modules/components/select/examples/11/index.ts b/projects/demo/src/modules/components/select/examples/11/index.ts
@@ -2,6 +2,7 @@ import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiBooleanHandler} from '@taiga-ui/cdk';
 
 @Component({
     selector: 'tui-select-example-11',
@@ -28,4 +29,6 @@ export class TuiSelectExample11 {
     ];
 
     labels = ['Salad', 'Soup'];
+
+    disabledItemHandler: TuiBooleanHandler<string> = item => item.startsWith('Chicken');
 }
diff --git a/...nts/select/native-select/native-select.ts → ...ts/kit/abstract/abstract-native-select.ts b/...nts/select/native-select/native-select.ts → ...ts/kit/abstract/abstract-native-select.ts
@@ -3,26 +3,31 @@ import {
     ElementRef,
     HostBinding,
     Inject,
+    Input,
     TemplateRef,
     ViewChild,
 } from '@angular/core';
-import {AbstractTuiControl, TuiIdService} from '@taiga-ui/cdk';
+import {AbstractTuiControl, TuiBooleanHandler, TuiIdService} from '@taiga-ui/cdk';
 import {TUI_TEXTFIELD_HOST, TuiDataListDirective, TuiTextfieldHost} from '@taiga-ui/core';
+import {TUI_ITEMS_HANDLERS, TuiItemsHandlers} from '@taiga-ui/kit/tokens';
 
 @Directive()
-export abstract class AbstractTuiNativeSelect {
+export abstract class AbstractTuiNativeSelect<T = TuiTextfieldHost> {
+    @Input()
+    disabledItemHandler: TuiBooleanHandler<string> | null = null;
+
     @ViewChild(TuiDataListDirective, {read: TemplateRef, static: true})
     readonly datalist: TemplateRef<any> | null = null;
 
     constructor(
-        @Inject(TUI_TEXTFIELD_HOST) readonly host: TuiTextfieldHost,
+        @Inject(TUI_TEXTFIELD_HOST) readonly host: T,
         @Inject(AbstractTuiControl) readonly control: AbstractTuiControl<unknown>,
-        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLInputElement>,
+        @Inject(ElementRef) protected readonly elementRef: ElementRef<HTMLSelectElement>,
         @Inject(TuiIdService)
         private readonly idService: TuiIdService,
-    ) {
-        this.host.process(this.elementRef.nativeElement);
-    }
+        @Inject(TUI_ITEMS_HANDLERS)
+        readonly itemsHandlers: TuiItemsHandlers<string>,
+    ) {}
 
     @HostBinding(`id`)
     get id(): string {

diff --git a/projects/kit/abstract/index.ts b/projects/kit/abstract/index.ts
@@ -0,0 +1 @@
+export * from './abstract-native-select';
diff --git a/projects/kit/abstract/ng-package.json b/projects/kit/abstract/ng-package.json
@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}
diff --git a/projects/kit/components/multi-select/multi-select.directive.ts b/projects/kit/components/multi-select/multi-select.directive.ts
@@ -18,9 +18,7 @@ export class TuiMultiSelectDirective extends AbstractTuiTextfieldHost<
     disableItemHandler: TuiBooleanHandler<string> = item =>
         this.host.disabledItemHandler(item);
 
-    onValueChange(_: string): void {
-        //
-    }
+    onValueChange(): void {}
 
     onSelectionChange(value: string[]): void {
         this.host.onValueChange(value);

diff --git a/...s/kit/components/multi-select/native-multi-select/native-multi-select-group.template.html b/...s/kit/components/multi-select/native-multi-select/native-multi-select-group.template.html
@@ -2,9 +2,10 @@
 
 <tui-data-list-wrapper
     *tuiDataList
+    tuiMultiSelectGroup
     [items]="items"
     [labels]="labels"
-    [disabledItemHandler]="host.disableItemHandler"
+    [disabledItemHandler]="disabledItemHandler || host.disableItemHandler"
 ></tui-data-list-wrapper>
 <optgroup
     *ngFor="let group of items; let index = index"
@@ -14,7 +15,7 @@
         *ngFor="let option of group"
         [selected]="option | tuiMapper : selectedMapper : host.value"
         [value]="option"
-        [disabled]="host.disableItemHandler(option)"
+        [disabled]="disabledItemHandler ? disabledItemHandler(option) : host.disableItemHandler(option)"
     >
         {{ option }}
     </option>

diff --git a/projects/kit/components/multi-select/native-multi-select/native-multi-select.template.html b/projects/kit/components/multi-select/native-multi-select/native-multi-select.template.html
@@ -2,14 +2,15 @@
 
 <tui-data-list-wrapper
     *tuiDataList
+    tuiMultiSelectGroup
     [items]="items"
-    [disabledItemHandler]="host.disableItemHandler"
+    [disabledItemHandler]="disabledItemHandler || host.disableItemHandler"
 ></tui-data-list-wrapper>
 <option
     *ngFor="let option of items"
     [selected]="option | tuiMapper : selectedMapper : host.value"
     [value]="option"
-    [disabled]="host.disableItemHandler(option)"
+    [disabled]="disabledItemHandler ? disabledItemHandler(option) : host.disableItemHandler(option)"
 >
     {{ option }}
 </option>
diff --git a/projects/kit/components/multi-select/native-multi-select/native-multi-select.ts b/projects/kit/components/multi-select/native-multi-select/native-multi-select.ts
@@ -1,36 +1,11 @@
-import {
-    ChangeDetectorRef,
-    Directive,
-    ElementRef,
-    HostBinding,
-    Inject,
-    TemplateRef,
-    ViewChild,
-} from '@angular/core';
-import {AbstractTuiControl, TuiIdService, TuiMapper} from '@taiga-ui/cdk';
-import {TUI_TEXTFIELD_HOST, TuiDataListDirective} from '@taiga-ui/core';
+import {Directive} from '@angular/core';
+import {TuiMapper} from '@taiga-ui/cdk';
+import {AbstractTuiNativeSelect} from '@taiga-ui/kit/abstract';
 
-import {TuiMultiSelectDirective} from '../multi-select.directive';
+import type {TuiMultiSelectDirective} from '../multi-select.directive';
 
 @Directive()
-export abstract class AbstractTuiNativeMultiSelect {
-    @ViewChild(TuiDataListDirective, {read: TemplateRef, static: true})
-    readonly datalist: TemplateRef<any> | null = null;
-
-    constructor(
-        @Inject(TUI_TEXTFIELD_HOST) readonly host: TuiMultiSelectDirective,
-        @Inject(AbstractTuiControl) readonly control: AbstractTuiControl<unknown>,
-        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLSelectElement>,
-        @Inject(TuiIdService)
-        private readonly idService: TuiIdService,
-        @Inject(ChangeDetectorRef) readonly cdr: ChangeDetectorRef,
-    ) {}
-
-    @HostBinding(`id`)
-    get id(): string {
-        return this.elementRef.nativeElement.id || this.idService.generate();
-    }
-
+export abstract class AbstractTuiNativeMultiSelect extends AbstractTuiNativeSelect<TuiMultiSelectDirective> {
     selectedMapper: TuiMapper<string, boolean> = (option, value) =>
         value.includes(option);
 

diff --git a/projects/kit/components/select/index.ts b/projects/kit/components/select/index.ts
@@ -1,4 +1,3 @@
-export * from './native-select/native-select';
 export * from './native-select/native-select.component';
 export * from './native-select/native-select-group.component';
 export * from './select.component';

diff --git a/projects/kit/components/select/native-select/native-select-group.component.ts b/projects/kit/components/select/native-select/native-select-group.component.ts
@@ -1,7 +1,6 @@
 import {ChangeDetectionStrategy, Component, Input, TemplateRef} from '@angular/core';
 import {tuiAsDataList} from '@taiga-ui/core';
-
-import {AbstractTuiNativeSelect} from './native-select';
+import {AbstractTuiNativeSelect} from '@taiga-ui/kit/abstract';
 
 @Component({
     selector: 'select[tuiSelect][labels]:not([multiple])',

diff --git a/projects/kit/components/select/native-select/native-select-group.template.html b/projects/kit/components/select/native-select/native-select-group.template.html
@@ -2,6 +2,7 @@
     *tuiDataList
     [items]="items"
     [labels]="labels"
+    [disabledItemHandler]="disabledItemHandler || itemsHandlers.disabledItemHandler"
 ></tui-data-list-wrapper>
 <optgroup
     *ngFor="let group of items; let index = index"
@@ -10,6 +11,7 @@
     <option
         *ngFor="let option of group"
         [value]="option"
+        [disabled]="disabledItemHandler ? disabledItemHandler(option) : itemsHandlers.disabledItemHandler(option)"
     >
         {{ option }}
     </option>

diff --git a/projects/kit/components/select/native-select/native-select.component.ts b/projects/kit/components/select/native-select/native-select.component.ts
@@ -1,7 +1,6 @@
 import {ChangeDetectionStrategy, Component, Input, TemplateRef} from '@angular/core';
 import {tuiAsDataList} from '@taiga-ui/core';
-
-import {AbstractTuiNativeSelect} from './native-select';
+import {AbstractTuiNativeSelect} from '@taiga-ui/kit/abstract';
 
 @Component({
     selector: 'select[tuiSelect]:not([labels]):not([multiple])',

diff --git a/projects/kit/components/select/native-select/native-select.template.html b/projects/kit/components/select/native-select/native-select.template.html
@@ -1,10 +1,12 @@
 <tui-data-list-wrapper
     *tuiDataList
     [items]="items"
+    [disabledItemHandler]="disabledItemHandler || itemsHandlers.disabledItemHandler"
 ></tui-data-list-wrapper>
 <option
     *ngFor="let option of items"
     [value]="option"
+    [disabled]="disabledItemHandler ? disabledItemHandler(option) : itemsHandlers.disabledItemHandler(option)"
 >
     {{ option }}
 </option>
diff --git a/projects/kit/components/select/select.component.ts b/projects/kit/components/select/select.component.ts
@@ -36,13 +36,13 @@ import {
     TuiTextfieldCleanerDirective,
     TuiValueContentContext,
 } from '@taiga-ui/core';
+import {AbstractTuiNativeSelect} from '@taiga-ui/kit/abstract';
 import {TUI_ARROW_MODE, TuiArrowMode} from '@taiga-ui/kit/components/arrow';
 import {TUI_SELECT_OPTION} from '@taiga-ui/kit/components/select-option';
 import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers';
 import {TUI_ITEMS_HANDLERS, TuiItemsHandlers} from '@taiga-ui/kit/tokens';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {AbstractTuiNativeSelect} from './native-select/native-select';
 import {TUI_SELECT_OPTIONS, TuiSelectOptions} from './select-options';
 
 @Component({

diff --git a/projects/kit/index.ts b/projects/kit/index.ts
@@ -1,3 +1,4 @@
+export * from '@taiga-ui/kit/abstract';
 export * from '@taiga-ui/kit/classes';
 export * from '@taiga-ui/kit/components';
 export * from '@taiga-ui/kit/constants';