refactor nesteds

Author: GoodDayForSurf

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

@@ -19,7 +19,7 @@ import {
   createNgModule,
   inject,
   Injector,
-  InjectionToken, ContentChildren,
+  ContentChildren,
 } from '@angular/core';
 
 import { isPlatformServer } from '@angular/common';
@@ -71,8 +71,15 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
   private readonly _collectionContainerImpl: ICollectionNestedOptionContainer;
 
   @ContentChildren(NESTED_ITEM_TOKEN)
-  set _nestedItems(value) {
-    _updateNestedItems(value, this._setChildren.bind(this))
+  set _nestedItems(value: QueryList<{ propertyName: string, className: string, component: ICollectionNestedOption}>) {
+    _updateNestedItems(
+        value, 
+        this.setChildren.bind(this),
+        {
+          componentClassName: this.constructor.name,
+          legacyClassNames: this.getLegacyClassNames(),
+        }
+    );
   }
 
   eventHelper: EmitterHelper;
@@ -224,12 +231,6 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     }
   }
 
-  _setChildren(propertyName, value, className = '') {
-    if (this.checkContentChildren(propertyName, value)) {
-      this.setChildren(propertyName, value);
-    }
-  }
-
   constructor(
     protected element: ElementRef,
     private readonly ngZone: NgZone,
@@ -314,24 +315,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     this.templateUpdateRequired = true;
   }
 
-  protected getLegacyClassNames = (propertyName?: string) => []; 
-
-  checkContentChildren<T>(propertyName: string, items: QueryList<T>) {
-    const legacyClassNames = this.getLegacyClassNames(propertyName);
-    const legacyItem = items.find((item) => legacyClassNames.includes(item.constructor.name));
-    const notLegacyItem = legacyItem && items.find((item) => !legacyClassNames.includes(item.constructor.name));
-
-      if (legacyItem && notLegacyItem) {
-        if (console && console.warn) {
-          console.warn(`In ${this.constructor.name},
-          the nested ${legacyItem.constructor.name} and ${notLegacyItem.constructor.name} components are incompatible.
-          Ensure that all nested components in the content area match.`);
-        }
-        return false;
-      }
-
-    return true;
-  }
+  protected getLegacyClassNames: () => Record<string, string[]> = () => ({}); 
 
   setChildren<T extends ICollectionNestedOption>(propertyName: string, items: QueryList<T>) {
     this.resetOptions(propertyName);

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

@@ -24,16 +24,39 @@ export interface INestedOptionContainer {
 
 export type IOptionPathGetter = () => string;
 
+const warnAboutIncompatibleNestedItems = (containerClassName: string, itemClassName: string, anotherItemClassName: string) => {
+  if (console && console.warn) {
+    console.warn(`In ${containerClassName},
+          the nested ${itemClassName} and ${anotherItemClassName} components are incompatible.
+          Ensure that all nested components in the content area match.`);
+  }
+}
+
 export const _updateNestedItems = (
-    items: QueryList<{ propertyName: string, component: ICollectionNestedOption}>,
-    setChildrenFn: (propertyName: string, items: QueryList<ICollectionNestedOption>) => void
+    items: QueryList<{ propertyName: string, className: string, component: ICollectionNestedOption}>,
+    setChildrenFn: (propertyName: string, items: QueryList<ICollectionNestedOption>) => void,
+    { componentClassName, legacyClassNames }: { componentClassName: string, legacyClassNames: Record<string, string[]> }
 ) => {
-  const groupedItems = items.reduce((acc, { propertyName, component }) => {
-    acc[propertyName] = acc[propertyName] || [];
-    acc[propertyName].push(component);
-
-    return acc;
-  }, {});
+  let hasLegacy = {};
+  const groupedItems = {}
+  
+  for (let index = 0; index < items.length; index++) {
+    const { propertyName, className, component } = items.get(index);
+
+    groupedItems[propertyName] = groupedItems[propertyName] || [];
+    groupedItems[propertyName].push(component);
+
+    if (legacyClassNames) {
+      const isLegacyClassName = legacyClassNames[propertyName].includes(className);
+      
+      if (index === 0) {
+        hasLegacy[propertyName] = isLegacyClassName;
+      } else if (hasLegacy[propertyName] !== isLegacyClassName) {
+        warnAboutIncompatibleNestedItems(componentClassName, items.get(0).className, className);
+        return;
+      }
+    }
+  }
 
   Object.entries(groupedItems).forEach(([propertyName, components]: [string, ICollectionNestedOption[]]) => {
     const queryList = new QueryList<ICollectionNestedOption>();
@@ -225,8 +248,15 @@ export abstract class CollectionNestedOption extends BaseNestedOption implements
   _index: number;
 
   @ContentChildren(NESTED_ITEM_TOKEN)
-  set _nestedItems(value) {
-    _updateNestedItems(value, this.setChildren.bind(this));
+  set _nestedItems(value: QueryList<{ propertyName: string, className: string, component: ICollectionNestedOption}>) {
+    _updateNestedItems(
+        value, 
+        this.setChildren.bind(this),
+        { 
+          componentClassName: this.constructor.name,
+          legacyClassNames: null,
+        }
+    );
   }
 
   protected _fullOptionPath() {

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

@@ -16,9 +16,7 @@ import {
     EventEmitter,
     OnChanges,
     DoCheck,
-    SimpleChanges,
-    ContentChildren,
-    QueryList
+    SimpleChanges
 } from '@angular/core';
 
 export { ExplicitTypes } from 'devextreme/ui/accordion';
@@ -45,10 +43,6 @@ import { DxiItemModule } from 'devextreme-angular/ui/nested';
 
 import { DxiAccordionItemModule } from 'devextreme-angular/ui/accordion/nested';
 
-import { DxiItemComponent } from 'devextreme-angular/ui/nested';
-
-import { DxiAccordionItemComponent } from 'devextreme-angular/ui/accordion/nested';
-
 
 /**
  * [descr:dxAccordion]
@@ -712,22 +706,20 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
 
 
 
-    @ContentChildren(DxiAccordionItemComponent)
-    get itemsChildren(): QueryList<DxiAccordionItemComponent> {
-        return this._getOption('items');
-    }
-    set itemsChildren(value) {
-        this._setChildren('items', value, 'DxiAccordionItemComponent');
-    }
-
-
-    @ContentChildren(DxiItemComponent)
-    get itemsLegacyChildren(): QueryList<DxiItemComponent> {
-        return this._getOption('items');
-    }
-    set itemsLegacyChildren(value) {
-        this._setChildren('items', value, 'DxiItemComponent');
-    }
+    protected getLegacyClassNames = () => {
+        const legacyClassNames = {};
+        
+        const getLegacyClassNamesForPropertyName = (propName) => {
+                 legacyClassNames[propName] = legacyClassNames[propName] || [];
+                 return legacyClassNames[propName];
+        };
+        
+    
+        getLegacyClassNamesForPropertyName('items').push('DxiItemComponent');
+    
+    
+        return legacyClassNames || {};
+    };
 
 
 

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

@@ -18,6 +18,7 @@ import { DOCUMENT } from '@angular/common';
 
 
 import {
+    NESTED_ITEM_TOKEN,
     DxIntegrationModule,
     NestedOptionHost,
     extractTemplate,
@@ -27,14 +28,25 @@ import {
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
 
-
 @Component({
     selector: 'dxi-accordion-item',
     standalone: true,
     template: '<ng-content></ng-content>',
     styles: [':host { display: block; }'],
     imports: [ DxIntegrationModule ],
-    providers: [NestedOptionHost, DxTemplateHost]
+    providers: [
+        NestedOptionHost,
+         DxTemplateHost,
+         {
+            provide: NESTED_ITEM_TOKEN,
+            useFactory: (component: DxiAccordionItemComponent) => ({
+                propertyName: 'items',
+                className: 'DxiAccordionItemComponent',
+                component
+            }),
+            deps: [DxiAccordionItemComponent],
+         }
+         ]
 })
 export class DxiAccordionItemComponent extends CollectionNestedOption implements AfterViewInit,
     IDxTemplateHost {
@@ -107,7 +119,6 @@ export class DxiAccordionItemComponent extends CollectionNestedOption implements
         return 'items';
     }
 
-
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost,
             private renderer: Renderer2,

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

@@ -16,9 +16,7 @@ import {
     EventEmitter,
     OnChanges,
     DoCheck,
-    SimpleChanges,
-    ContentChildren,
-    QueryList
+    SimpleChanges
 } from '@angular/core';
 
 export { ExplicitTypes } from 'devextreme/ui/action_sheet';
@@ -45,10 +43,6 @@ import { DxiItemModule } from 'devextreme-angular/ui/nested';
 
 import { DxiActionSheetItemModule } from 'devextreme-angular/ui/action-sheet/nested';
 
-import { DxiItemComponent } from 'devextreme-angular/ui/nested';
-
-import { DxiActionSheetItemComponent } from 'devextreme-angular/ui/action-sheet/nested';
-
 
 /**
  * [descr:dxActionSheet]
@@ -504,22 +498,20 @@ export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent
 
 
 
-    @ContentChildren(DxiActionSheetItemComponent)
-    get itemsChildren(): QueryList<DxiActionSheetItemComponent> {
-        return this._getOption('items');
-    }
-    set itemsChildren(value) {
-        this._setChildren('items', value, 'DxiActionSheetItemComponent');
-    }
-
-
-    @ContentChildren(DxiItemComponent)
-    get itemsLegacyChildren(): QueryList<DxiItemComponent> {
-        return this._getOption('items');
-    }
-    set itemsLegacyChildren(value) {
-        this._setChildren('items', value, 'DxiItemComponent');
-    }
+    protected getLegacyClassNames = () => {
+        const legacyClassNames = {};
+        
+        const getLegacyClassNamesForPropertyName = (propName) => {
+                 legacyClassNames[propName] = legacyClassNames[propName] || [];
+                 return legacyClassNames[propName];
+        };
+        
+    
+        getLegacyClassNamesForPropertyName('items').push('DxiItemComponent');
+    
+    
+        return legacyClassNames || {};
+    };
 
 
 

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

@@ -20,6 +20,7 @@ import { NativeEventInfo } from 'devextreme/common/core/events';
 import { ButtonStyle, ButtonType } from 'devextreme/common';
 
 import {
+    NESTED_ITEM_TOKEN,
     DxIntegrationModule,
     NestedOptionHost,
     extractTemplate,
@@ -29,14 +30,25 @@ import {
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
 
-
 @Component({
     selector: 'dxi-action-sheet-item',
     standalone: true,
     template: '<ng-content></ng-content>',
     styles: [':host { display: block; }'],
     imports: [ DxIntegrationModule ],
-    providers: [NestedOptionHost, DxTemplateHost]
+    providers: [
+        NestedOptionHost,
+         DxTemplateHost,
+         {
+            provide: NESTED_ITEM_TOKEN,
+            useFactory: (component: DxiActionSheetItemComponent) => ({
+                propertyName: 'items',
+                className: 'DxiActionSheetItemComponent',
+                component
+            }),
+            deps: [DxiActionSheetItemComponent],
+         }
+         ]
 })
 export class DxiActionSheetItemComponent extends CollectionNestedOption implements AfterViewInit,
     IDxTemplateHost {
@@ -101,7 +113,6 @@ export class DxiActionSheetItemComponent extends CollectionNestedOption implemen
         return 'items';
     }
 
-
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost,
             private renderer: Renderer2,