refactor: remove some deprecated APIs

.changeset/cold-peas-grow.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": major
+---
+
+refactor: remove some deprecated APIs

src/autocomplete/autocomplete.component.ts

@@ -101,7 +101,7 @@ export class AutocompleteComponent implements AfterContentInit {
       tap(hasContent => {
         if (hasContent) {
           this.directive$$.pipe(first()).subscribe(directive => {
-            window.requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
               directive.overlayRef.updatePosition();
             });
           });
@@ -117,7 +117,7 @@ export class AutocompleteComponent implements AfterContentInit {
       )
       .subscribe(() => {
         this.directive$$.pipe(first()).subscribe(directive => {
-          window.requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
             directive.overlayRef?.updatePosition();
           });
         });

src/button/button.component.spec.ts

@@ -47,7 +47,6 @@ describe('ButtonComponent', () => {
       ButtonType.Success,
       ButtonType.Warning,
       ButtonType.Danger,
-      ButtonType.Info,
       ButtonType.Text,
     ];
 

src/button/button.types.ts

@@ -12,14 +12,6 @@ export const ButtonType = {
    * represents default internally, @link https://github.com/angular/vscode-ng-language-service/issues/1147
    */
   Empty: '',
-  /**
-   * @deprecated use `ButtonType.Danger` instead
-   */
-  Error: 'danger',
-  /**
-   * @deprecated use `ButtonType.Default` instead
-   */
-  Info: 'default',
 } as const;
 
 export type ButtonType = ValueOf<typeof ButtonType>;

src/card/helper-directives.ts

@@ -1,18 +1,12 @@
-import { Directive, Input } from '@angular/core';
+import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[auiCardHeader]',
   host: {
     '[class.aui-card__header]': 'true',
   },
 })
-export class CardHeaderDirective {
-  /**
-   * @deprecated
-   */
-  @Input()
-  size: 'default' | 'secondary' = 'default';
-}
+export class CardHeaderDirective {}
 
 @Directive({
   selector: '[auiCardFooter]',

src/i18n/i18n.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable, isDevMode } from '@angular/core';
-import { BehaviorSubject, Observable, pluck } from 'rxjs';
+import { BehaviorSubject, Observable, map } from 'rxjs';
 
 import { I18NInterface, I18NInterfaceToken, StringMap } from './i18n.type';
 
@@ -13,7 +13,9 @@ export class I18nService {
 
   constructor(@Inject(I18NInterfaceToken) private _i18n: I18NInterface) {
     this.i18nChange$$ = new BehaviorSubject<I18NInterface>(this._i18n);
-    this.localeChange$ = this.i18nChange$$.asObservable().pipe(pluck('locale'));
+    this.localeChange$ = this.i18nChange$$
+      .asObservable()
+      .pipe(map(i18n => i18n.locale));
   }
 
   setI18n(i18n: I18NInterface) {

src/paginator/paginator.component.ts

@@ -14,27 +14,6 @@ import { Bem, buildBem } from '../utils';
 
 import { PaginatorIntl } from './paginator-intl';
 
-/**
- * Change event object that is emitted when the user selects a
- * different page size or navigates to another page.
- * @deprecated use Output events directly instead
- */
-export class PageEvent {
-  /** The current page index. */
-  pageIndex: number;
-
-  /**
-   * Index of the page that was selected previously.
-   */
-  previousPageIndex: number;
-
-  /** The current page size */
-  pageSize: number;
-
-  /** The current total number of items being paged */
-  length: number;
-}
-
 @Component({
   selector: 'aui-paginator',
   templateUrl: 'paginator.component.html',
@@ -79,18 +58,6 @@ export class PaginatorComponent implements OnDestroy {
   @Input()
   total = 0;
 
-  /**
-   * @deprecated use `total` instead
-   */
-  @Input()
-  get length() {
-    return this.total;
-  }
-
-  set length(val) {
-    this.total = val;
-  }
-
   @Input()
   layout: string | string[] = 'total,pager,sizes';
 

src/radio/radio-group/radio-group.component.ts

@@ -39,14 +39,6 @@ export class RadioGroupComponent extends CommonFormControl<any> {
   @Input()
   direction: 'row' | 'column' = 'row';
 
-  /**
-   * @deprecated use `plain` instead
-   */
-  @Input()
-  set isPlain(val: boolean) {
-    this.plain = val;
-  }
-
   @Input()
   set plain(val: boolean) {
     this.isPlain$$.next(val);

src/steps/steps.component.ts

@@ -47,12 +47,6 @@ export class StepsComponent implements OnInit, OnDestroy {
     this.stepsChange$$.next(val);
   }
 
-  /**
-   * @deprecated type 为 step 时一般在使用上下文中控制是否可以进行下一步；type 为 progress 时强制按顺序执行
-   */
-  @Input()
-  linear = false;
-
   @Input()
   get currentIndex() {
     return this._currentIndex;
@@ -100,23 +94,7 @@ export class StepsComponent implements OnInit, OnDestroy {
   }
 
   private setCurrentIndex(index: number) {
-    if (this.linear) {
-      if (this.steps?.length) {
-        const ret = Math.min(Math.max(0, index), this.steps.length - 1);
-        const reversedPrevSteps = this.steps.slice(0, ret).reverse();
-        const doneIndex = reversedPrevSteps.findIndex(
-          step => step.state === StepState.Done || step.optional,
-        );
-        const lastDoneStepIndex =
-          doneIndex > -1 ? reversedPrevSteps.length - doneIndex : 0;
-        this._currentIndex = this.selectedIndex = Math.min(
-          lastDoneStepIndex,
-          ret,
-        );
-      }
-    } else {
-      this._currentIndex = this.selectedIndex = index;
-    }
+    this._currentIndex = this.selectedIndex = index;
   }
 
   private getProgressCurrentIndex(steps: StepItem[]) {
@@ -182,7 +160,7 @@ export class StepsComponent implements OnInit, OnDestroy {
     if (!this.selectable || this.selectedIndex === i) {
       return false;
     }
-    const isLinear = this.isProgress ? true : this.linear;
+    const isLinear = this.isProgress;
     if (
       isLinear &&
       !currentStep.optional &&

src/steps/types.ts

@@ -14,10 +14,6 @@ export interface StepItem {
   description?: string;
   state?: StepState;
   optional?: boolean;
-  /**
-   * @deprecated 每个步骤不再需要单独控制。通过组件参数 selectable 统一控制
-   */
-  editable?: boolean;
 }
 
 export type StepsOrientation = 'horizontal' | 'vertical';

src/tabs/tab-group.component.spec.ts

@@ -4,6 +4,7 @@ import {
   TestBed,
   fakeAsync,
   tick,
+  waitForAsync,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
@@ -63,23 +64,22 @@ describe('TabGroupComponent', () => {
     }));
 
     // Note: needs to be `async` in order to fail when we expect it to.
-    // TODO: 升级ng15 提示报错 'TypeError: mql.addListener is not a function',暂时注释该case
-    // it('should set to correct tab on fast change', waitForAsync(() => {
-    //   const component = fixture.componentInstance;
-    //   component.selectedIndex = 0;
-    //   fixture.detectChanges();
-    //   setTimeout(() => {
-    //     component.selectedIndex = 1;
-    //     fixture.detectChanges();
-    //     setTimeout(() => {
-    //       component.selectedIndex = 0;
-    //       fixture.detectChanges();
-    //       fixture.whenStable().then(() => {
-    //         expect(component.selectedIndex).toBe(0);
-    //       });
-    //     }, 1);
-    //   }, 1);
-    // }));
+    it('should set to correct tab on fast change', waitForAsync(() => {
+      const component = fixture.componentInstance;
+      component.selectedIndex = 0;
+      fixture.detectChanges();
+      setTimeout(() => {
+        component.selectedIndex = 1;
+        fixture.detectChanges();
+        setTimeout(() => {
+          component.selectedIndex = 0;
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            expect(component.selectedIndex).toBe(0);
+          });
+        }, 1);
+      }, 1);
+    }));
 
     it('should change tabs based on selectedIndex', fakeAsync(() => {
       const component = fixture.componentInstance;

src/tabs/tab-header-active-indicator.component.ts

@@ -35,13 +35,9 @@ export class TabHeaderActiveIndicatorComponent {
    * @param element
    */
   alignToElement(element: HTMLElement) {
-    if (typeof requestAnimationFrame === 'undefined') {
-      this._setStyles(element);
-    } else {
-      this._ngZone.runOutsideAngular(() => {
-        requestAnimationFrame(() => this._setStyles(element));
-      });
-    }
+    this._ngZone.runOutsideAngular(() => {
+      requestAnimationFrame(() => this._setStyles(element));
+    });
   }
 
   /**

src/tabs/tab-header.component.ts

@@ -199,9 +199,7 @@ export class TabHeaderComponent
 
     // Defer the first call in order to allow for slower browsers to lay out the elements.
     // This helps in cases where the user lands directly on a page with paginated tabs.
-    typeof requestAnimationFrame === 'undefined'
-      ? realign()
-      : requestAnimationFrame(realign);
+    requestAnimationFrame(realign);
 
     // On window resize, realign the ink bar and update the orientation of
     // the key manager if the direction has changed.

stories/steps/steps.mdx

@@ -23,14 +23,13 @@ Steps
 
 ### Steps Properties
 
-| 名称         | 类型                       | 描述                                                                                                  |
-| ------------ | -------------------------- | ----------------------------------------------------------------------------------------------------- |
-| linear       | boolean                    | 是否按顺序执行，默认为 false。如果为 true，当前步骤非可选及未完成时后面步骤无法的点击。（deprecated） |
-| selectable   | boolean                    | 是否可以点击步骤切换或查看。默认为 false                                                              |
-| orientation  | 'vertical' or 'horizontal' | 方向                                                                                                  |
-| currentIndex | number                     | 当前的步骤。当 type 为 progress 时，无需传入，组件会根据 steps 的状态自动设置                         |
-| steps        | StepItem[]                 | 步骤                                                                                                  |
-| type         | 'step' or 'progress'       | 默认为 step                                                                                           |
+| 名称         | 类型                       | 描述                                                                          |
+| ------------ | -------------------------- | ----------------------------------------------------------------------------- |
+| selectable   | boolean                    | 是否可以点击步骤切换或查看。默认为 false                                      |
+| orientation  | 'vertical' or 'horizontal' | 方向                                                                          |
+| currentIndex | number                     | 当前的步骤。当 type 为 progress 时，无需传入，组件会根据 steps 的状态自动设置 |
+| steps        | StepItem[]                 | 步骤                                                                          |
+| type         | 'step' or 'progress'       | 默认为 step                                                                   |
 
 ### Steps Output
 
@@ -41,10 +40,9 @@ Steps
 
 ### StepItem Definition
 
-| 名称        | 类型      | 可选  | 描述                                                  |
-| ----------- | --------- | ----- | ----------------------------------------------------- |
-| label       | string    | false | 步骤名称                                              |
-| description | string    | true  | 步骤描述                                              |
-| editable    | boolean   | true  | 完成后是否可以选择该步骤。默认为 true。（deprecated） |
-| state       | StepState | true  | 状态。'done', 'pending' or 'error'                    |
-| optional    | boolean   | true  | 是否可跳过。默认为 false                              |
+| 名称        | 类型      | 可选  | 描述                               |
+| ----------- | --------- | ----- | ---------------------------------- |
+| label       | string    | false | 步骤名称                           |
+| description | string    | true  | 步骤描述                           |
+| state       | StepState | true  | 状态。'done', 'pending' or 'error' |
+| optional    | boolean   | true  | 是否可跳过。默认为 false           |