fix(module:select): fix nzDropdownMatchSelectWidth not work

close #5058
NG-ZORRO · Apr 17, 2020 · 335f589 · 335f589
1 parent 867dc87
commit 335f589
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 7 deletions.
diff --git a/components/core/transition-patch/transition-patch.directive.ts b/components/core/transition-patch/transition-patch.directive.ts
@@ -15,7 +15,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
  * https://github.com/angular/angular/issues/34718
  */
 @Directive({
-  selector: '[nz-button],nz-button-group,[nz-icon],[nz-menu-item],[nz-submenu]'
+  selector: '[nz-button],nz-button-group,[nz-icon],[nz-menu-item],[nz-submenu],nz-select-top-control'
 })
 export class NzTransitionPatchDirective implements AfterViewInit, OnChanges {
   @Input() hidden: NzSafeAny = null;

diff --git a/components/select/option-container.component.ts b/components/select/option-container.component.ts
@@ -34,6 +34,7 @@ import { NzSelectItemInterface, NzSelectModeType } from './select.types';
         <nz-embed-empty nzComponentName="select" [specificContent]="notFoundContent"></nz-embed-empty>
       </div>
       <cdk-virtual-scroll-viewport
+        [class.full-width]="!matchWidth"
         [itemSize]="itemSize"
         [maxBufferPx]="itemSize * maxItemLength"
         [minBufferPx]="itemSize * maxItemLength"
@@ -78,6 +79,7 @@ export class NzOptionContainerComponent implements OnChanges {
   @Input() listOfSelectedValue: NzSafeAny[] = [];
   @Input() compareWith: (o1: NzSafeAny, o2: NzSafeAny) => boolean;
   @Input() mode: NzSelectModeType = 'default';
+  @Input() matchWidth = true;
   @Input() listOfContainerItem: NzSelectItemInterface[] = [];
   @Output() readonly itemClick = new EventEmitter<NzSafeAny>();
   @Output() readonly itemHover = new EventEmitter<NzSafeAny>();

diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -120,6 +120,7 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
     >
       <nz-option-container
         [style]="nzDropdownStyle"
+        [matchWidth]="nzDropdownMatchSelectWidth"
         [class.ant-select-dropdown-placement-bottomLeft]="dropDownPosition === 'bottom'"
         [class.ant-select-dropdown-placement-topLeft]="dropDownPosition === 'top'"
         [@slideMotion]="dropDownPosition"
@@ -170,7 +171,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
   @Input() nzDropdownClassName: string | null = null;
   @Input() nzDropdownMatchSelectWidth = true;
   @Input() nzDropdownStyle: { [key: string]: string } | null = null;
-  @Input() nzNotFoundContent: string | undefined = undefined;
+  @Input() nzNotFoundContent: string | TemplateRef<NzSafeAny> | undefined = undefined;
   @Input() nzPlaceHolder: string | TemplateRef<NzSafeAny> | null = null;
   @Input() nzMaxTagCount = Infinity;
   @Input() nzDropdownRender: TemplateRef<NzSafeAny> | null = null;

diff --git a/components/select/select.spec.ts b/components/select/select.spec.ts
@@ -358,7 +358,7 @@ describe('select', () => {
       flush();
       fixture.detectChanges();
       expect(
-        document.querySelectorAll('nz-option-item')[0].parentElement!.nextElementSibling!.querySelector('nz-option-item')!.textContent
+        document.querySelectorAll('nz-option-item')[0].parentElement!.querySelector('nz-option-item')!.nextElementSibling!.textContent
       ).toBe('label_02');
     }));
   });

diff --git a/components/select/style/patch.less b/components/select/style/patch.less
@@ -10,4 +10,10 @@
   .cdk-virtual-scroll-content-wrapper {
     right: 0;
   }
+  .full-width {
+    contain: initial;
+    .cdk-virtual-scroll-content-wrapper {
+      position: static;
+    }
+  }
 }
diff --git a/components/spin/spin.component.ts b/components/spin/spin.component.ts
@@ -18,7 +18,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
-import { NumberInput, NzSizeLDSType } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NumberInput, NzSizeLDSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean, InputNumber } from 'ng-zorro-antd/core/util';
 
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -62,8 +62,8 @@ const NZ_CONFIG_COMPONENT_NAME = 'spin';
 })
 export class NzSpinComponent implements OnChanges, OnDestroy, OnInit {
   static ngAcceptInputType_nzDelay: NumberInput;
-  static ngAcceptInputType_nzSimple: NumberInput;
-  static ngAcceptInputType_nzSpinning: NumberInput;
+  static ngAcceptInputType_nzSimple: BooleanInput;
+  static ngAcceptInputType_nzSpinning: BooleanInput;
 
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzIndicator: TemplateRef<void>;
   @Input() nzSize: NzSizeLDSType = 'default';

diff --git a/docs/faq.zh-CN.md b/docs/faq.zh-CN.md
@@ -7,7 +7,7 @@ title: 常见问题
 
 ### Angular 是不是打出来的包很大？ `ng-zorro-antd` 打包大小如何？
 
-Angular 的 hello-world 项目（包含路由、动画与 Http 等模块） gzip 之后大概 `30KB`，`ng-zorro-antd` 的官网（包含所有组件，懒加载）打包后 gzip 之后为 `287KB`。这与 React 或者 Vue 增加路由、动画、Http 等模块之后的体积不会有太大差异。
+Angular 的 hello-world 项目（包含路由、动画与 Http 等模块） gzip 之后大概 `30KB`，`ng-zorro-antd` 的官网（包含所有组件，懒加载）打包后 gzip 之后为 `287KB`。这与 React 或者 Vue 增加路由、动画、Http 等模块之后 gzip 的体积不会有太大差异。
 
 如果碰到了打包大小问题，首先请确定使用了 `ng build --prod` 正确的方式进行了打包，如果除 `ng-zorro-antd` 之外还引入了其他第三方组件库，你可以通过 `ng build --prod --sourceMap=true` 命令生成 sourcemap 文件后，再通过 source-map-explorer 检查每个模块所占用的体积，具体操作可以参考[官方文档](https://angular.cn/guide/deployment#inspect-the-bundles)。