feat: select all AIT-8411

.changeset/friendly-beans-yell.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+feat: select all AIT-8411

src/i18n/language/en.ts

@@ -20,5 +20,6 @@ export const en: I18NInterface = {
     saturday: 'Sat',
     sunday: 'Sun',
     now: 'Now',
+    select_all: 'Select All',
   },
 };

src/i18n/language/zh.ts

@@ -20,5 +20,6 @@ export const zh: I18NInterface = {
     saturday: '六',
     sunday: '日',
     now: '此刻',
+    select_all: '全选',
   },
 };

src/select/multi-select/multi-select.component.html

@@ -71,6 +71,34 @@
     (mousedown)="$event.preventDefault()"
   >
     <div #optionListRef class="aui-option-container__content">
+      <ng-container
+        *ngIf="
+          allowSelectAll &&
+          ((hasVisibleOption$ | async) ||
+            (allowCreate && (customCreatedOptions$ | async).length) ||
+            (allowCreate && filterString))
+        "
+      >
+        <div
+          class="aui-option"
+          [class]="bemSelectAll.block(size$ | async)"
+          [class.isDisabled]="disabled"
+          [class.isSelected]="!!(selectAllStatus$ | async)"
+          [class.isMulti]="true"
+          (click)="onSelectAllClick()"
+        >
+          <i class="aui-option__pointer">
+            <aui-icon
+              [icon]="
+                (selectAllStatus$ | async) === 'checked' ? 'check_s' : 'minus_s'
+              "
+              [hidden]="!(selectAllStatus$ | async)"
+            ></aui-icon>
+          </i>
+          {{ 'select_all' | auiI18n }}
+        </div>
+        <hr class="divider" />
+      </ng-container>
       <aui-option
         #inputtingOption
         *ngIf="allowCreate && filterString && !(hasMatchedOption$ | async)"

src/select/multi-select/multi-select.component.scss

@@ -1,8 +1,11 @@
 @import '../../theme/var';
 @import '../../theme/mixin';
 @import '../../input/tags-input/mixin';
+@import '../option/option-style';
 @import '../option-container';
 
+@include option('aui-option');
+
 @include option-container(aui-option-container);
 
 $block: aui-multi-select;

src/select/multi-select/multi-select.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterContentInit,
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -21,14 +22,16 @@ import {
   startWith,
   switchMap,
   takeUntil,
+  tap,
 } from 'rxjs/operators';
 
 import { createWithMaxRowCount } from '../../input/tags-input/with-max-row-count';
 import { ComponentSize } from '../../types';
-import { Bem, buildBem, coerceString } from '../../utils';
+import { Bem, buildBem, coerceAttrBoolean, coerceString } from '../../utils';
 import { BaseSelect } from '../base-select';
 import { OptionComponent } from '../option/option.component';
 import {
+  SelectAllStatus,
   SelectFilterOption,
   SelectPrimitiveValue,
   TagClassFn,
@@ -59,10 +62,14 @@ import {
 })
 export class MultiSelectComponent<T = SelectPrimitiveValue>
   extends BaseSelect<T, T[]>
-  implements AfterContentInit {
+  implements AfterContentInit, AfterViewInit {
   bem: Bem = buildBem('aui-multi-select');
+  bemSelectAll: Bem = buildBem('aui-option');
   selectedOptions$: Observable<Array<SelectFilterOption<T>>>;
+  selectAllStatus$: Observable<SelectAllStatus>;
+  selectAllStatus: SelectAllStatus;
 
+  private _allowSelectAll = false;
   selectedValues: T[] = [];
   values$ = this.value$$.asObservable();
 
@@ -75,6 +82,15 @@ export class MultiSelectComponent<T = SelectPrimitiveValue>
   @Input()
   customRowHeight = 0; // 0: use default style const value, > 1: for ```tagClassFn``` maybe affect lineHeight
 
+  @Input()
+  get allowSelectAll() {
+    return this._allowSelectAll;
+  }
+
+  set allowSelectAll(val: boolean | '') {
+    this._allowSelectAll = coerceAttrBoolean(val);
+  }
+
   @ViewChild('inputRef', { static: true })
   inputRef: ElementRef<HTMLInputElement>;
 
@@ -187,6 +203,34 @@ export class MultiSelectComponent<T = SelectPrimitiveValue>
     );
   }
 
+  ngAfterViewInit() {
+    super.ngAfterViewInit();
+    this.selectAllStatus$ = combineLatest([
+      this.allOptions$.pipe(startWith(this.contentOptions)),
+      this.value$,
+      this.filterString$,
+    ]).pipe(
+      map(([allOptions]: [QueryList<OptionComponent<T>>, T[], string]) => {
+        const visibleOptions = allOptions.filter(({ visible }) => visible);
+        const checkedOptions = visibleOptions.filter(
+          ({ selected }) => selected,
+        );
+        return checkedOptions.length &&
+          checkedOptions.length !== visibleOptions.length
+          ? SelectAllStatus.Indeterminate
+          : checkedOptions.length === 0
+          ? SelectAllStatus.Empty
+          : SelectAllStatus.Checked;
+      }),
+      startWith(SelectAllStatus.Empty),
+      tap(selectAllStatus => {
+        this.selectAllStatus = selectAllStatus;
+      }),
+      publishReplay(1),
+      refCount(),
+    );
+  }
+
   onShowOptions() {
     super.onShowOptions();
     this.inputRef.nativeElement.focus();
@@ -290,6 +334,26 @@ export class MultiSelectComponent<T = SelectPrimitiveValue>
     event.preventDefault();
   }
 
+  onSelectAllClick() {
+    if (this.disabled) {
+      return;
+    }
+    const visibleOptionsValue = this.allOptions
+      .filter(({ visible }) => visible)
+      .map(({ value }) => value);
+    if (this.selectAllStatus === SelectAllStatus.Checked) {
+      this.emitValueChange(
+        this.snapshot.value.filter(
+          value => !visibleOptionsValue.includes(value),
+        ),
+      );
+    } else {
+      this.emitValueChange([
+        ...new Set(this.snapshot.value.concat(visibleOptionsValue)),
+      ]);
+    }
+  }
+
   private resetInput() {
     this.inputRef.nativeElement.value = '';
     this.setInputWidth();

src/select/option-container.scss

@@ -1,5 +1,6 @@
 @import '../theme/var';
 @import '../theme/mixin';
+@import './option-group/option-group-style.scss';
 
 @mixin option-container($block) {
   .#{$block} {
@@ -13,6 +14,10 @@
       position: relative;
       overflow: auto;
       @include scroll-bar;
+      .divider {
+        border: none;
+        @include option-group-divider;
+      }
     }
 
     &__placeholder {

src/select/option-group/option-group-style.scss

@@ -1,6 +1,11 @@
 @import '../../theme/var';
 @import '../../theme/mixin';
 
+@mixin option-group-divider {
+  border-top: $menu-group-divide-width $menu-group-divide-style
+    $menu-group-divide-color;
+}
+
 @mixin option-group($block) {
   .#{$block} {
     &__title {
@@ -14,7 +19,6 @@
   #{$block}:not(:first-child) .#{$block} {
     margin-top: $menu-padding;
     padding-top: $menu-padding;
-    border-top: $menu-group-divide-width $menu-group-divide-style
-      $menu-group-divide-color;
+    @include option-group-divider;
   }
 }

src/select/select.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { I18nModule } from '../i18n/public-api';
 import { IconModule } from '../icon/public-api';
 import { InputModule } from '../input/public-api';
 import { TagModule } from '../tag/public-api';
@@ -18,7 +19,14 @@ import { SelectComponent } from './select.component';
 import { IncludesDirective } from './validators';
 
 @NgModule({
-  imports: [CommonModule, InputModule, IconModule, TooltipModule, TagModule],
+  imports: [
+    CommonModule,
+    InputModule,
+    I18nModule,
+    IconModule,
+    TooltipModule,
+    TagModule,
+  ],
   declarations: [
     SelectComponent,
     OptionComponent,

src/select/select.types.ts

@@ -26,3 +26,9 @@ export type TagClassFn<
   value: V,
 ) => // tslint:disable-next-line: max-union-size
 string | string[] | Set<string> | { [className: string]: unknown };
+
+export enum SelectAllStatus {
+  Empty = '',
+  Checked = 'checked',
+  Indeterminate = 'indeterminate',
+}

stories/select/select.stories.mdx

@@ -184,7 +184,11 @@ import { SelectModule, IconModule } from '@alauda/ui';
   <Story name="multi" height="240px">
     {{
       template: /* HTML */ `
-        <aui-multi-select [(ngModel)]="value" [maxRowCount]="3">
+        <aui-multi-select
+          [(ngModel)]="value"
+          [maxRowCount]="3"
+          [allowSelectAll]="true"
+        >
           <aui-option *ngFor="let option of arr" [value]="option">
             {{ option }}
           </aui-option>