refactor nesteds in angular

Author: GoodDayForSurf

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

@@ -19,6 +19,7 @@ import {
   createNgModule,
   inject,
   Injector,
+  ContentChildren,
 } from '@angular/core';
 
 import { isPlatformServer } from '@angular/common';
@@ -36,7 +37,9 @@ import {
   INestedOptionContainer,
   ICollectionNestedOption,
   ICollectionNestedOptionContainer,
-  CollectionNestedOptionContainerImpl,
+  CollectionNestedOptionContainerImpl, 
+  _updateNestedItems,
+  NESTED_ITEM_TOKEN
 } from './nested-option';
 
 import { DxIntegrationModule } from './integration';
@@ -47,6 +50,7 @@ config({
 });
 
 let serverStateKey;
+
 export const getServerStateKey = () => {
   if (!serverStateKey) {
     serverStateKey = makeStateKey<any>('DX_isPlatformServer');
@@ -66,6 +70,18 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
   private readonly _collectionContainerImpl: ICollectionNestedOptionContainer;
 
+  @ContentChildren(NESTED_ITEM_TOKEN)
+  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;
 
   optionChangedHandlers: EventEmitter<any> = new EventEmitter();
@@ -215,13 +231,6 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     }
   }
 
-  protected _setChildren(propertyName, value, className) {
-    if (this.checkContentChildren(propertyName, value, className)) {
-      this.setContentChildren(propertyName, value, className);
-      this.setChildren(propertyName, value);
-    }
-  }
-
   constructor(
     protected element: ElementRef,
     private readonly ngZone: NgZone,
@@ -306,27 +315,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     this.templateUpdateRequired = true;
   }
 
-  contentChildren = {};
-
-  checkContentChildren<T>(propertyName: string, items: QueryList<T>, className: string) {
-    if (this.contentChildren[propertyName] && this.contentChildren[propertyName] !== className) {
-      if (items.length > 0) {
-        if (console && console.warn) {
-          console.warn(`In ${this.constructor.name}, 
-          the nested ${className} and ${this.contentChildren[propertyName]} components are incompatible. 
-          Ensure that all nested components in the content area match.`);
-        }
-      }
-      return false;
-    }
-    return true;
-  }
-
-  setContentChildren<T>(propertyName: string, items: QueryList<T>, className: string) {
-    if (items.length > 0) {
-      this.contentChildren[propertyName] = className;
-    }
-  }
+  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

@@ -1,12 +1,14 @@
 import {
-  Component, QueryList, ElementRef, Renderer2, EventEmitter,
+  Component, QueryList, ElementRef, Renderer2, EventEmitter, ContentChildren, InjectionToken,
 } from '@angular/core';
 
 import render from 'devextreme/core/renderer';
 import { triggerHandler } from 'devextreme/events';
 import domAdapter from 'devextreme/core/dom_adapter';
 import { getElement } from './utils';
-import { DX_TEMPLATE_WRAPPER_CLASS } from './template';
+import { DX_TEMPLATE_WRAPPER_CLASS  } from './template';
+
+export const NESTED_ITEM_TOKEN = new InjectionToken<string>('nested-item');
 
 const VISIBILITY_CHANGE_SELECTOR = 'dx-visibility-change-handler';
 
@@ -22,6 +24,49 @@ 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, className: string, component: ICollectionNestedOption}>,
+    setChildrenFn: (propertyName: string, items: QueryList<ICollectionNestedOption>) => void,
+    { componentClassName, legacyClassNames }: { componentClassName: string, legacyClassNames: Record<string, string[]> }
+) => {
+  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>();
+
+    queryList.reset(components);
+
+    setChildrenFn(propertyName, queryList);
+  });
+};
+
 @Component({
   template: '',
 })
@@ -202,6 +247,18 @@ export interface ICollectionNestedOption {
 export abstract class CollectionNestedOption extends BaseNestedOption implements ICollectionNestedOption {
   _index: number;
 
+  @ContentChildren(NESTED_ITEM_TOKEN)
+  set _nestedItems(value: QueryList<{ propertyName: string, className: string, component: ICollectionNestedOption}>) {
+    _updateNestedItems(
+        value, 
+        this.setChildren.bind(this),
+        { 
+          componentClassName: this.constructor.name,
+          legacyClassNames: null,
+        }
+    );
+  }
+  
   protected _fullOptionPath() {
     return `${this._getOptionPath()}[${this._index}].`;
   }

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,