add checking incompatible nesteds

Author: GoodDayForSurf

packages/devextreme-angular/src/core/component.ts

@@ -38,7 +38,7 @@ import {
   ICollectionNestedOptionContainer,
   CollectionNestedOptionContainerImpl,
   checkIncompatibleNestedItems,
-
+  CollectionNestedOption,
 } from './nested-option';
 
 import { DxIntegrationModule } from './integration';
@@ -63,13 +63,15 @@ export const getServerStateKey = () => {
 })
 export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterContentChecked, AfterViewInit, AfterViewChecked,
     INestedOptionContainer, ICollectionNestedOptionContainer, IDxTemplateHost {
-  protected _dxClassName = 'DxComponent';
-
   private _initialOptions: any = {};
 
   protected _optionsToUpdate: any = {};
 
   private readonly _collectionContainerImpl: ICollectionNestedOptionContainer;
+  
+  protected _legacyNestedClassNames: Record<string, any> = {};
+
+  protected _dxClassName = 'DxComponent';
 
   eventHelper: EmitterHelper;
 
@@ -91,11 +93,11 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
   templateUpdateRequired = false;
 
-  protected _setChildren(propertyName: string, items: QueryList<ICollectionNestedOption>) {
+  protected _setChildren(propertyName: string, items: QueryList<CollectionNestedOption>) {
     const hasIncopatibleNestedItems = checkIncompatibleNestedItems(
       items,
       this._dxClassName,
-      this.getLegacyClassNames()[propertyName],
+      this._legacyNestedClassNames[propertyName],
     );
 
     if (!hasIncopatibleNestedItems) {
@@ -316,8 +318,6 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     this.templateUpdateRequired = true;
   }
 
-  protected getLegacyClassNames: () => Record<string, string[]> = () => ({});
-
   setChildren<T extends ICollectionNestedOption>(propertyName: string, items: QueryList<T>) {
     this.resetOptions(propertyName);
     return this._collectionContainerImpl.setChildren(propertyName, items);

packages/devextreme-angular/src/core/nested-option.ts

@@ -23,24 +23,30 @@ export interface INestedOptionContainer {
 export type IOptionPathGetter = () => string;
 
 export const checkIncompatibleNestedItems = (
-  items: QueryList<ICollectionNestedOption>,
-  containerClassName,
-  legacyClassNames,
-) =>
-/*  if (console && console.warn) {
-    console.warn(`In ${containerClassName},
-          the nested ${itemClassName} and ${anotherItemClassName} components are incompatible.
+  items: QueryList<CollectionNestedOption>,
+  containerClassName: string,
+  legacyClassNames: string[],
+) => {
+  if (items.length > 0 && legacyClassNames.length > 0 && console && console.warn) {
+    const itemsLassNames = items.map((item) => item._dxClassName);
+    const itemLegacyClassName = itemsLassNames.find((itemClassName) => legacyClassNames.includes(itemClassName));
+    const itemClassName = itemsLassNames.find((itemClassName) => !legacyClassNames.includes(itemClassName));
+
+    if (itemLegacyClassName && itemClassName) {
+      console.warn(`In ${containerClassName},
+          the nested ${itemClassName} and ${itemLegacyClassName} components are incompatible.
           Ensure that all nested components in the content area match.`);
-  } */
-  false
-;
+
+      return true;
+    }
+  }
+  return false;
+};
 
 @Component({
   template: '',
 })
 export abstract class BaseNestedOption implements INestedOptionContainer, ICollectionNestedOptionContainer {
-  protected _dxClassName = 'BaseNestedOption';
-
   protected _host: INestedOptionContainer;
 
   protected _hostOptionPath: IOptionPathGetter;
@@ -50,17 +56,20 @@ export abstract class BaseNestedOption implements INestedOptionContainer, IColle
   protected _initialOptions = {};
 
   protected abstract get _optionPath(): string;
+
+  _dxClassName = 'BaseNestedOption';
+  
   protected abstract _fullOptionPath(): string;
 
   constructor() {
     this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this), this._filterItems.bind(this));
   }
 
-  protected _setChildren(propertyName: string, items: QueryList<ICollectionNestedOption>) {
+  protected _setChildren(propertyName: string, items: QueryList<CollectionNestedOption>) {
     const hasIncopatibleNestedItems = checkIncompatibleNestedItems(
       items,
       this._dxClassName,
-      null,
+      [],
     );
 
     if (!hasIncopatibleNestedItems) {

packages/devextreme-angular/src/ui/accordion/index.ts

@@ -39,7 +39,7 @@ import {
     NestedOptionHost,
     IterableDifferHelper,
     WatcherHelper,
-    ICollectionNestedOption,
+    CollectionNestedOption,
 } from 'devextreme-angular/core';
 
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
@@ -70,10 +70,10 @@ import {
     ]
 })
 export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck {
-protected _dxClassName = 'DxAccordionComponent';
+    _dxClassName = 'DxAccordionComponent';
 
     @ContentChildren(PROPERTY_TOKEN_items)
-    set _itemsNestedItems(value: QueryList<ICollectionNestedOption>) {
+    set _itemsNestedItems(value: QueryList<CollectionNestedOption>) {
         this._setChildren('items', value);
     }
 
@@ -721,20 +721,11 @@ protected _dxClassName = 'DxAccordionComponent';
 
 
 
-    protected getLegacyClassNames = () => {
-        const legacyClassNames = {};
-
-        const getLegacyClassNamesForPropertyName = (propName) => {
-                 legacyClassNames[propName] = legacyClassNames[propName] || [];
-                 return legacyClassNames[propName];
-        };
-
-    
-        getLegacyClassNamesForPropertyName('items').push('DxiItemComponent');
-    
-
-        return legacyClassNames || {};
-    };
+   protected _legacyNestedClassNames: Record<string, string[]> = {
+ "items": [
+  "DxiItemComponent"
+ ]
+};
 
 
 

packages/devextreme-angular/src/ui/accordion/nested/item-dxi.ts

@@ -47,7 +47,7 @@ import { PROPERTY_TOKEN_items } from 'devextreme-angular/tokens';
 })
 export class DxiAccordionItemComponent extends CollectionNestedOption implements AfterViewInit,
     IDxTemplateHost {
-    protected _dxClassName = 'DxiAccordionItemComponent';
+    _dxClassName = 'DxiAccordionItemComponent';
 
 
     @Input()

packages/devextreme-angular/src/ui/action-sheet/index.ts

@@ -39,7 +39,7 @@ import {
     NestedOptionHost,
     IterableDifferHelper,
     WatcherHelper,
-    ICollectionNestedOption,
+    CollectionNestedOption,
 } from 'devextreme-angular/core';
 
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
@@ -70,10 +70,10 @@ import {
     ]
 })
 export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck {
-protected _dxClassName = 'DxActionSheetComponent';
+    _dxClassName = 'DxActionSheetComponent';
 
     @ContentChildren(PROPERTY_TOKEN_items)
-    set _itemsNestedItems(value: QueryList<ICollectionNestedOption>) {
+    set _itemsNestedItems(value: QueryList<CollectionNestedOption>) {
         this._setChildren('items', value);
     }
 
@@ -513,20 +513,11 @@ protected _dxClassName = 'DxActionSheetComponent';
 
 
 
-    protected getLegacyClassNames = () => {
-        const legacyClassNames = {};
-
-        const getLegacyClassNamesForPropertyName = (propName) => {
-                 legacyClassNames[propName] = legacyClassNames[propName] || [];
-                 return legacyClassNames[propName];
-        };
-
-    
-        getLegacyClassNamesForPropertyName('items').push('DxiItemComponent');
-    
-
-        return legacyClassNames || {};
-    };
+   protected _legacyNestedClassNames: Record<string, string[]> = {
+ "items": [
+  "DxiItemComponent"
+ ]
+};
 
 
 

packages/devextreme-angular/src/ui/action-sheet/nested/item-dxi.ts

@@ -49,7 +49,7 @@ import { PROPERTY_TOKEN_items } from 'devextreme-angular/tokens';
 })
 export class DxiActionSheetItemComponent extends CollectionNestedOption implements AfterViewInit,
     IDxTemplateHost {
-    protected _dxClassName = 'DxiActionSheetItemComponent';
+    _dxClassName = 'DxiActionSheetItemComponent';
 
 
     @Input()

packages/devextreme-angular/src/ui/autocomplete/index.ts

@@ -48,7 +48,7 @@ import {
     NestedOptionHost,
     IterableDifferHelper,
     WatcherHelper,
-    ICollectionNestedOption,
+    CollectionNestedOption,
 } from 'devextreme-angular/core';
 
 import { DxiButtonModule } from 'devextreme-angular/ui/nested';
@@ -117,20 +117,20 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
     ]
 })
 export class DxAutocompleteComponent extends DxComponent implements OnDestroy, ControlValueAccessor, OnChanges, DoCheck {
-protected _dxClassName = 'DxAutocompleteComponent';
+    _dxClassName = 'DxAutocompleteComponent';
 
     @ContentChildren(PROPERTY_TOKEN_buttons)
-    set _buttonsNestedItems(value: QueryList<ICollectionNestedOption>) {
+    set _buttonsNestedItems(value: QueryList<CollectionNestedOption>) {
         this._setChildren('buttons', value);
     }
 
     @ContentChildren(PROPERTY_TOKEN_items)
-    set _itemsNestedItems(value: QueryList<ICollectionNestedOption>) {
+    set _itemsNestedItems(value: QueryList<CollectionNestedOption>) {
         this._setChildren('items', value);
     }
 
     @ContentChildren(PROPERTY_TOKEN_toolbarItems)
-    set _toolbarItemsNestedItems(value: QueryList<ICollectionNestedOption>) {
+    set _toolbarItemsNestedItems(value: QueryList<CollectionNestedOption>) {
         this._setChildren('toolbarItems', value);
     }
 
@@ -1380,22 +1380,14 @@ protected _dxClassName = 'DxAutocompleteComponent';
     @HostListener('onBlur', ['$event']) touched = (_) => {};
 
 
-    protected getLegacyClassNames = () => {
-        const legacyClassNames = {};
-
-        const getLegacyClassNamesForPropertyName = (propName) => {
-                 legacyClassNames[propName] = legacyClassNames[propName] || [];
-                 return legacyClassNames[propName];
-        };
-
-    
-        getLegacyClassNamesForPropertyName('buttons').push('DxiButtonComponent');
-    
-        getLegacyClassNamesForPropertyName('items').push('DxiItemComponent');
-    
-
-        return legacyClassNames || {};
-    };
+   protected _legacyNestedClassNames: Record<string, string[]> = {
+ "buttons": [
+  "DxiButtonComponent"
+ ],
+ "items": [
+  "DxiItemComponent"
+ ]
+};
 
 
 

packages/devextreme-angular/src/ui/autocomplete/nested/animation.ts

@@ -35,7 +35,7 @@ import { NestedOption } from 'devextreme-angular/core';
     ],
 })
 export class DxoAutocompleteAnimationComponent extends NestedOption implements OnDestroy, OnInit {
-    protected _dxClassName = 'DxoAutocompleteAnimationComponent';
+    _dxClassName = 'DxoAutocompleteAnimationComponent';
 
 
     @Input()

packages/devextreme-angular/src/ui/autocomplete/nested/at.ts

@@ -35,7 +35,7 @@ import { NestedOption } from 'devextreme-angular/core';
     ],
 })
 export class DxoAutocompleteAtComponent extends NestedOption implements OnDestroy, OnInit {
-    protected _dxClassName = 'DxoAutocompleteAtComponent';
+    _dxClassName = 'DxoAutocompleteAtComponent';
 
 
     @Input()

packages/devextreme-angular/src/ui/autocomplete/nested/boundary-offset.ts

@@ -34,7 +34,7 @@ import { NestedOption } from 'devextreme-angular/core';
     ],
 })
 export class DxoAutocompleteBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit {
-    protected _dxClassName = 'DxoAutocompleteBoundaryOffsetComponent';
+    _dxClassName = 'DxoAutocompleteBoundaryOffsetComponent';
 
 
     @Input()