fix(module:config): add itemsize config for tree select table (#8347)

components/core/config/config.ts

@@ -93,6 +93,7 @@ export interface SelectConfig {
   nzBorderless?: boolean;
   nzSuffixIcon?: TemplateRef<NzSafeAny> | string | null;
   nzBackdrop?: boolean;
+  nzOptionHeightPx?: number;
 }
 
 export interface AffixConfig {
@@ -295,6 +296,7 @@ export interface TableConfig {
   nzShowSizeChanger?: boolean;
   nzSimple?: boolean;
   nzHideOnSinglePage?: boolean;
+  nzVirtualItemSize?: number;
 }
 
 export interface TabsConfig {
@@ -329,6 +331,7 @@ export interface TreeConfig {
   nzBlockNode?: boolean;
   nzShowIcon?: boolean;
   nzHideUnMatched?: boolean;
+  nzVirtualItemSize?: number;
 }
 
 export interface TreeSelectConfig {

components/select/select.component.ts

@@ -231,7 +231,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
   @Input() nzId: string | null = null;
   @Input() nzSize: NzSelectSizeType = 'default';
   @Input() nzStatus: NzStatus = '';
-  @Input() nzOptionHeightPx = 32;
+  @Input() @WithConfig<number>() nzOptionHeightPx = 32;
   @Input() nzOptionOverflowSize = 8;
   @Input() nzDropdownClassName: string[] | string | null = null;
   @Input() nzDropdownMatchSelectWidth = true;

components/table/src/table/table.component.ts

@@ -170,7 +170,7 @@ export class NzTableComponent<T> implements OnInit, OnDestroy, OnChanges, AfterV
   @Input() nzFooter: string | TemplateRef<NzSafeAny> | null = null;
   @Input() nzNoResult: string | TemplateRef<NzSafeAny> | undefined = undefined;
   @Input() nzPageSizeOptions = [10, 20, 30, 40, 50];
-  @Input() nzVirtualItemSize = 0;
+  @Input() @WithConfig() nzVirtualItemSize = 0;
   @Input() nzVirtualMaxBufferPx = 200;
   @Input() nzVirtualMinBufferPx = 100;
   @Input() nzVirtualForTrackBy: TrackByFunction<T> = index => index;

components/tree/tree.component.ts

@@ -214,7 +214,7 @@ export class NzTreeComponent
   @Input() @InputBoolean() nzDraggable: boolean = false;
   @Input() @InputBoolean() nzMultiple = false;
   @Input() nzExpandedIcon?: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>;
-  @Input() nzVirtualItemSize = 28;
+  @Input() @WithConfig() nzVirtualItemSize = 28;
   @Input() nzVirtualMaxBufferPx = 500;
   @Input() nzVirtualMinBufferPx = 28;
   @Input() nzVirtualHeight: string | null = null;

scripts/site/_site/doc/app/app.component.ts

@@ -12,6 +12,7 @@ import { environment } from '../environments/environment';
 import { AppService } from './app.service';
 import { ROUTER_LIST } from './router';
 import { loadScript } from './utils/load-script';
+import { NzConfigService } from 'ng-zorro-antd/core/config';
 
 interface DocPageMeta {
   path: string;
@@ -85,9 +86,20 @@ export class AppComponent implements OnInit {
     if (!this.platform.isBrowser) {
       return;
     }
+    if (theme === 'compact') {
+      this.nzConfigService.set('select', {
+        nzOptionHeightPx: 28
+      });
+    } else {
+      this.nzConfigService.set('select', {
+        nzOptionHeightPx: 32
+      });
+    }
     let loading: NzMessageRef | null = null;
     if (notification) {
-      loading = this.nzMessageService.loading(this.language === 'en' ? `Switching theme...` : `切换主题中...`, { nzDuration: 0 });
+      loading = this.nzMessageService.loading(this.language === 'en' ? `Switching theme...` : `切换主题中...`, {
+        nzDuration: 0
+      });
     }
     this.renderer.addClass(this.document.activeElement, 'preload');
     const successLoaded = () => {
@@ -142,6 +154,7 @@ export class AppComponent implements OnInit {
     private meta: Meta,
     private renderer: Renderer2,
     private cdr: ChangeDetectorRef,
+    private nzConfigService: NzConfigService,
     // tslint:disable-next-line:no-any
     @Inject(DOCUMENT) private document: any
   ) {}
@@ -211,7 +224,11 @@ export class AppComponent implements OnInit {
           } else {
             this.updateMateTitle(`${currentDemoComponent.zh}(${currentDemoComponent.label}) | NG-ZORRO`);
           }
-          this.updateDocMetaAndLocale(currentDemoComponent.description, `${currentDemoComponent.label}, ${currentDemoComponent.zh}`, path);
+          this.updateDocMetaAndLocale(
+            currentDemoComponent.description,
+            `${currentDemoComponent.label}, ${currentDemoComponent.zh}`,
+            path
+          );
         }
 
         const currentIntroComponent = this.routerList.intro.find(component => `/${component.path}` === this.router.url);
@@ -292,7 +309,8 @@ export class AppComponent implements OnInit {
     const isEn = this.language === 'en';
     const enDescription =
       'An enterprise-class UI design language and Angular-based implementation with a set of high-quality Angular components, one of best Angular UI library for enterprises';
-    const zhDescription = 'Ant Design 的 Angular 实现，开发和服务于企业级后台产品，开箱即用的高质量 Angular UI 组件库。';
+    const zhDescription =
+      'Ant Design 的 Angular 实现，开发和服务于企业级后台产品，开箱即用的高质量 Angular UI 组件库。';
     let descriptionContent = isEn ? enDescription : zhDescription;
     if (description) {
       descriptionContent = description;
@@ -373,7 +391,9 @@ export class AppComponent implements OnInit {
     if (!this.platform.isBrowser) {
       return;
     }
-    const loading = this.nzMessageService.loading(this.language === 'en' ? `Switching color...` : `切换主题中...`, { nzDuration: 0 });
+    const loading = this.nzMessageService.loading(this.language === 'en' ? `Switching color...` : `切换主题中...`, {
+      nzDuration: 0
+    });
     const changeColor = () => {
       (window as any).less
         .modifyVars({