refactor(all): use the transform attribute of @input() instead of @In…

…putBoolean() and @InputNumber()
atinc · Apr 2, 2024 · df715d6 · df715d6
1 parent f744f67
commit df715d6
Show file tree

Hide file tree

Showing 39 changed files with 134 additions and 177 deletions.
diff --git a/src/autocomplete/autocomplete.component.ts b/src/autocomplete/autocomplete.component.ts
@@ -29,7 +29,6 @@ import {
     ThyStopPropagationDirective
 } from 'ngx-tethys/shared';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ThyEmpty } from 'ngx-tethys/empty';
 import { NgClass, NgIf } from '@angular/common';
 
@@ -111,15 +110,7 @@ export class ThyAutocomplete extends _MixinBase implements IThyOptionParentCompo
      * @type boolean
      * @default false
      */
-    @Input({ transform: booleanAttribute })
-    set thyAutoActiveFirstOption(value: boolean) {
-        this._autoActiveFirstOption = coerceBooleanProperty(value);
-    }
-
-    get thyAutoActiveFirstOption(): boolean {
-        return this._autoActiveFirstOption;
-    }
-    private _autoActiveFirstOption: boolean;
+    @Input({ transform: booleanAttribute }) thyAutoActiveFirstOption: boolean;
 
     /**
      * 被选中时调用，参数包含选中项的 value 值

diff --git a/src/avatar/avatar.component.ts b/src/avatar/avatar.component.ts
@@ -10,7 +10,7 @@ import {
     booleanAttribute
 } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
-import { coerceBooleanProperty, isString } from 'ngx-tethys/util';
+import { isString } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { ThyAvatarService } from './avatar.service';
 import { AvatarShortNamePipe, AvatarBgColorPipe, AvatarSrcPipe } from './avatar.pipe';
@@ -120,7 +120,7 @@ export class ThyAvatar implements OnInit {
      */
     @Input({ transform: booleanAttribute })
     set thyShowRemove(value: boolean) {
-        this._showRemove = coerceBooleanProperty(value);
+        this._showRemove = value;
     }
 
     /**
@@ -129,7 +129,7 @@ export class ThyAvatar implements OnInit {
      */
     @Input({ transform: booleanAttribute })
     set thyRemovable(value: boolean) {
-        this._showRemove = coerceBooleanProperty(value);
+        this._showRemove = value;
     }
 
     /**

diff --git a/src/badge/badge.component.ts b/src/badge/badge.component.ts
@@ -1,5 +1,4 @@
 import { isTextColor } from 'ngx-tethys/core';
-import { coerceBooleanProperty } from 'ngx-tethys/util';
 
 import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, booleanAttribute, numberAttribute } from '@angular/core';
 import { NgIf } from '@angular/common';
@@ -172,7 +171,7 @@ export class ThyBadge implements OnInit {
      */
     @Input({ transform: booleanAttribute })
     set thyKeepShow(value: boolean) {
-        this.keepShowValue = coerceBooleanProperty(value);
+        this.keepShowValue = value;
         if (this.initialized) {
             this.combineBadgeDisplayContent();
         }

diff --git a/src/button/button-icon.component.ts b/src/button/button-icon.component.ts
@@ -2,7 +2,6 @@ import { NgClass, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, ViewEncapsulation, booleanAttribute } from '@angular/core';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { ThyIcon } from 'ngx-tethys/icon';
-import { coerceBooleanProperty } from 'ngx-tethys/util';
 
 export type ThyButtonIconShape = '' | 'circle-dashed' | 'circle-solid' | 'circle-thick-dashed' | 'circle-thick-solid' | 'self-icon';
 
@@ -81,7 +80,7 @@ export class ThyButtonIcon implements OnInit {
      */
     @Input({ transform: booleanAttribute })
     set thyLight(value: boolean) {
-        this._isLighted = coerceBooleanProperty(value);
+        this._isLighted = value;
     }
 
     /**
@@ -90,7 +89,7 @@ export class ThyButtonIcon implements OnInit {
      */
     @Input({ transform: booleanAttribute })
     set thyActive(value: boolean) {
-        this._isActive = coerceBooleanProperty(value);
+        this._isActive = value;
     }
 
     /**

diff --git a/src/card/content.component.ts b/src/card/content.component.ts
@@ -1,6 +1,4 @@
-import { coerceBooleanProperty } from 'ngx-tethys/util';
-
-import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, booleanAttribute } from '@angular/core';
 
 /**
  * 卡片内容组件
@@ -24,9 +22,9 @@ export class ThyCardContent implements OnInit {
      * 内容区，滚动
      * @default false
      */
-    @Input('thyScroll')
-    set thyScroll(value: any) {
-        this.scrollClassName = coerceBooleanProperty(value);
+    @Input({ transform: booleanAttribute })
+    set thyScroll(value: boolean) {
+        this.scrollClassName = value;
     }
 
     @HostBinding('class.thy-card-content--sm') _thySizeSm = false;

diff --git a/src/cascader/cascader.component.ts b/src/cascader/cascader.component.ts
@@ -7,7 +7,7 @@ import {
 import { ThyEmpty } from 'ngx-tethys/empty';
 import { ThyIcon } from 'ngx-tethys/icon';
 import { SelectControlSize, SelectOptionBase, ThySelectControl } from 'ngx-tethys/shared';
-import { coerceBooleanProperty, elementMatchClosest, isEmpty } from 'ngx-tethys/util';
+import { elementMatchClosest, isEmpty } from 'ngx-tethys/util';
 import { BehaviorSubject, Observable, Subject, Subscription, timer } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter, take, takeUntil } from 'rxjs/operators';
 import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
@@ -213,16 +213,14 @@ export class ThyCascader
      * 是否只读
      * @default false
      */
-    @Input()
-    // eslint-disable-next-line prettier/prettier
+    @Input({ transform: booleanAttribute })
+    override set thyDisabled(value: boolean) {
+        this.disabled = value;
+    }
     override get thyDisabled(): boolean {
         return this.disabled;
     }
 
-    override set thyDisabled(value: boolean) {
-        this.disabled = coerceBooleanProperty(value);
-    }
-
     disabled = false;
 
     /**

diff --git a/src/checkbox/checkbox.component.ts b/src/checkbox/checkbox.component.ts
@@ -1,7 +1,6 @@
 import { booleanAttribute, Component, forwardRef, Input } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ThyTranslate } from 'ngx-tethys/core';
-import { coerceBooleanProperty } from 'ngx-tethys/util';
 import { ThyFormCheckBaseComponent } from 'ngx-tethys/shared';
 import { NgClass, NgIf } from '@angular/common';
 
@@ -38,7 +37,7 @@ export class ThyCheckbox extends ThyFormCheckBaseComponent {
      */
     @Input({ transform: booleanAttribute })
     set thyIndeterminate(value: boolean) {
-        this.isIndeterminate = coerceBooleanProperty(value);
+        this.isIndeterminate = value;
     }
 
     constructor(thyTranslate: ThyTranslate) {

diff --git a/src/color-picker/color-picker.component.ts b/src/color-picker/color-picker.component.ts
@@ -21,7 +21,6 @@ import { ThyColorPickerPanel } from './color-picker-panel.component';
 import { DEFAULT_COLORS } from './constant';
 import { ThyColor } from './helpers/color.class';
 import { takeUntil } from 'rxjs/operators';
-import { coerceBooleanProperty } from 'ngx-tethys/util';
 
 export class OverlayBase extends ThyOverlayDirectiveBase {
     constructor(protected zone: NgZone, protected elementRef: ElementRef<HTMLElement>, platform: Platform, focusMonitor: FocusMonitor) {
@@ -127,15 +126,14 @@ export class ThyColorPickerDirective extends _BaseMixin implements OnInit, OnDes
     /**
      * 是否属于禁用状态
      */
-    @Input()
+    @Input({ transform: booleanAttribute })
+    override set thyDisabled(value: boolean) {
+        this.disabled = value;
+    }
     override get thyDisabled(): boolean {
         return this.disabled;
     }
 
-    override set thyDisabled(value: boolean) {
-        this.disabled = coerceBooleanProperty(value);
-    }
-
     protected onChangeFn: (value: number | string) => void = () => {};
 
     private onTouchFn: () => void = () => {};

diff --git a/src/date-picker/abstract-picker.component.ts b/src/date-picker/abstract-picker.component.ts
@@ -1,5 +1,5 @@
 import { TabIndexDisabledControlValueAccessorMixin } from 'ngx-tethys/core';
-import { coerceBooleanProperty, TinyDate, warnDeprecation } from 'ngx-tethys/util';
+import { TinyDate, warnDeprecation } from 'ngx-tethys/util';
 import { Subject } from 'rxjs';
 
 import {
@@ -173,12 +173,12 @@ export abstract class AbstractPickerComponent
      * @default false
      */
     @Input({ transform: booleanAttribute })
+    set thyDisabled(value: boolean) {
+        this.disabled = value;
+    }
     get thyDisabled(): boolean {
         return this.disabled;
     }
-    set thyDisabled(value: boolean) {
-        this.disabled = coerceBooleanProperty(value);
-    }
 
     disabled = false;
 

diff --git a/src/date-picker/lib/popups/inner-popup.component.ts b/src/date-picker/lib/popups/inner-popup.component.ts
@@ -1,4 +1,5 @@
 import {
+    booleanAttribute,
     ChangeDetectionStrategy,
     Component,
     EventEmitter,
@@ -10,7 +11,7 @@ import {
     TemplateRef
 } from '@angular/core';
 
-import { coerceBooleanProperty, FunctionProp, TinyDate } from 'ngx-tethys/util';
+import { FunctionProp, TinyDate } from 'ngx-tethys/util';
 import { DateHelperService } from '../../date-helper.service';
 import { RangePartType } from '../../inner-types';
 import { isAfterMoreThanLessOneYear, isAfterMoreThanOneDecade, isAfterMoreThanOneMonth, isAfterMoreThanOneYear } from '../../picker.util';
@@ -72,8 +73,9 @@ export class InnerPopup implements OnChanges {
 
     @Input() panelMode: ThyPanelMode;
 
-    @Input() set showDateRangeInput(value: boolean) {
-        this._showDateRangeInput = coerceBooleanProperty(value);
+    @Input({ transform: booleanAttribute })
+    set showDateRangeInput(value: boolean) {
+        this._showDateRangeInput = value;
     }
 
     get showDateRangeInput() {

diff --git a/src/dialog/body/dialog-body.component.ts b/src/dialog/body/dialog-body.component.ts
@@ -1,6 +1,5 @@
-import { Component, Input, OnInit, HostBinding } from '@angular/core';
+import { Component, Input, OnInit, HostBinding, booleanAttribute } from '@angular/core';
 import { ThyDialog } from '../dialog.service';
-import { coerceBooleanProperty } from 'ngx-tethys/util';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 
 /**
@@ -26,9 +25,9 @@ export class ThyDialogBody implements OnInit {
      * 清除间距
      * @default false
      */
-    @Input()
-    set thyClearPadding(value: string) {
-        this.thyClearPaddingClassName = coerceBooleanProperty(value);
+    @Input({ transform: booleanAttribute })
+    set thyClearPadding(value: boolean) {
+        this.thyClearPaddingClassName = value;
     }
 
     constructor(private dialog: ThyDialog) {}

diff --git a/src/dialog/footer/dialog-footer.component.ts b/src/dialog/footer/dialog-footer.component.ts
@@ -1,4 +1,3 @@
-import { coerceBooleanProperty } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { Component, ContentChild, Inject, Input, OnInit, TemplateRef, booleanAttribute } from '@angular/core';
 
@@ -32,7 +31,7 @@ export class ThyDialogFooter implements OnInit {
      */
     @Input({ transform: booleanAttribute })
     set thyDivided(value: boolean) {
-        this.divided = coerceBooleanProperty(value);
+        this.divided = value;
     }
 
     /**

diff --git a/src/drag-drop/drag-handle.directive.ts b/src/drag-drop/drag-handle.directive.ts
@@ -1,5 +1,4 @@
 import { Directive, ElementRef, Input, Optional, booleanAttribute } from '@angular/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ThyDragDirective } from './drag.directive';
 
 /**
@@ -20,7 +19,7 @@ export class ThyDragHandleDirective {
      */
     @Input({ alias: 'thyDisabled', transform: booleanAttribute })
     set disabled(value: boolean) {
-        this._disabled = coerceBooleanProperty(value);
+        this._disabled = value;
     }
     get disabled(): boolean {
         return this._disabled;

diff --git a/src/dropdown/dropdown-menu-item.directive.ts b/src/dropdown/dropdown-menu-item.directive.ts
@@ -1,5 +1,4 @@
 import { Directive, HostBinding, Input, HostListener, ElementRef, OnInit, booleanAttribute } from '@angular/core';
-import { coerceBooleanProperty } from 'ngx-tethys/util';
 import { fromEvent } from 'rxjs';
 import { debounceTime, shareReplay } from 'rxjs/operators';
 import { useHostRenderer } from '@tethys/cdk/dom';
@@ -40,7 +39,7 @@ export class ThyDropdownMenuItemDirective implements OnInit {
      */
     @Input({ transform: booleanAttribute })
     set thyDisabled(value: boolean) {
-        this.disabled = coerceBooleanProperty(value);
+        this.disabled = value;
     }
 
     @HostListener('click', ['$event'])

diff --git a/src/empty/empty.component.ts b/src/empty/empty.component.ts
@@ -1,5 +1,4 @@
 import { ThyTranslate } from 'ngx-tethys/core';
-import { coerceBooleanProperty } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import {
     AfterViewInit,
@@ -171,9 +170,8 @@ export class ThyEmpty implements OnInit, AfterViewInit, OnChanges {
 
     private _calculatePosition() {
         const sizeOptions = sizeMap[this.thySize || 'md'];
-        const topAuto = coerceBooleanProperty(this.thyTopAuto);
         let marginTop = null;
-        if (topAuto) {
+        if (this.thyTopAuto) {
             // 选择参考父容器居中
             const containerElement = this.thyContainer ? this.thyContainer.nativeElement : this.elementRef.nativeElement.parentElement;
             // containerElement.height;

diff --git a/src/form/form-group-label.directive.ts b/src/form/form-group-label.directive.ts
@@ -1,5 +1,4 @@
-import { Directive, HostBinding, Input } from '@angular/core';
-import { coerceBooleanProperty } from 'ngx-tethys/util';
+import { Directive, HostBinding, Input, booleanAttribute } from '@angular/core';
 import { ThyTranslate } from 'ngx-tethys/core';
 
 /**
@@ -29,9 +28,9 @@ export class ThyFormGroupLabelDirective {
         }
     }
 
-    @Input()
-    set thyLabelRequired(value: string) {
-        this.labelRequired = coerceBooleanProperty(value);
+    @Input({ transform: booleanAttribute })
+    set thyLabelRequired(value: boolean) {
+        this.labelRequired = value;
     }
 
     constructor(private thyTranslate: ThyTranslate) {}

diff --git a/src/form/form-group.component.ts b/src/form/form-group.component.ts
@@ -2,7 +2,6 @@ import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import { ThyTranslate } from 'ngx-tethys/core';
 import { ThyIcon } from 'ngx-tethys/icon';
 import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
-import { coerceBooleanProperty } from 'ngx-tethys/util';
 
 import {
     ChangeDetectionStrategy,
@@ -78,14 +77,14 @@ export class ThyFormGroup implements OnInit {
     /**
      * Label 是否显示必填项样式
      */
-    @Input()
-    set thyLabelRequired(value: string) {
-        this.labelRequired = coerceBooleanProperty(value);
+    @Input({ transform: booleanAttribute })
+    set thyLabelRequired(value: boolean) {
+        this.labelRequired = value;
     }
 
-    @Input()
-    set thyLabelPaddingTopClear(value: string) {
-        this.labelPaddingTopClear = coerceBooleanProperty(value);
+    @Input({ transform: booleanAttribute })
+    set thyLabelPaddingTopClear(value: boolean) {
+        this.labelPaddingTopClear = value;
     }
 
     /**
@@ -135,7 +134,7 @@ export class ThyFormGroup implements OnInit {
      */
     @Input({ transform: booleanAttribute })
     set thyRowFill(value: boolean) {
-        this._rowFill = coerceBooleanProperty(value);
+        this._rowFill = value;
     }
 
     /**