refactor nested dxi components. Group by props names

Author: GoodDayForSurf

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

@@ -19,7 +19,6 @@ import {
   createNgModule,
   inject,
   Injector,
-  ContentChildren,
 } from '@angular/core';
 
 import { isPlatformServer } from '@angular/common';
@@ -38,8 +37,8 @@ import {
   ICollectionNestedOption,
   ICollectionNestedOptionContainer,
   CollectionNestedOptionContainerImpl,
-  _updateNestedItems,
-  NESTED_ITEM_TOKEN,
+  checkIncompatibleNestedItems,  
+    
 } from './nested-option';
 
 import { DxIntegrationModule } from './integration';
@@ -64,27 +63,14 @@ 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;
 
-  private _currentNestedOptions:Map<string, any> = new Map();
-
-  @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(),
-        currentOptions: this._currentNestedOptions
-      },
-    );
-  }
-
   eventHelper: EmitterHelper;
 
   optionChangedHandlers: EventEmitter<any> = new EventEmitter();
@@ -104,7 +90,20 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
   widgetUpdateLocked = false;
 
   templateUpdateRequired = false;
+  
+  
+  protected _setChildren(propertyName: string, items: QueryList<ICollectionNestedOption>) {
+    const hasIncopatibleNestedItems = checkIncompatibleNestedItems(
+        items,
+        this._dxClassName,
+        this.getLegacyClassNames()[propertyName]
+    );
 
+    if (!hasIncopatibleNestedItems) {
+      this.setChildren(propertyName, items);
+    }
+  }
+  
   private _updateTemplates() {
     if (this.templates.length && this.templateUpdateRequired) {
       const updatedTemplates = {};

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

@@ -24,64 +24,25 @@ export interface INestedOptionContainer {
 
 export type IOptionPathGetter = () => string;
 
-/* const warnAboutIncompatibleNestedItems = (containerClassName: string, itemClassName: string, anotherItemClassName: string) => {
-  if (console && console.warn) {
+export const checkIncompatibleNestedItems = (
+     items: QueryList<ICollectionNestedOption>, 
+     containerClassName,
+     legacyClassNames,
+ ) => {
+/*  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,
-    currentOptions,
-  }: { componentClassName: string; legacyClassNames: Record<string, string[]>, currentOptions: Map<string, any> },
-) => {
-  const 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?.[propertyName]) {
-      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);
-    currentOptions.set(propertyName, true);
-    setChildrenFn(propertyName, queryList);
-  });
+  }*/
+  return false;
+}; 
 
-  currentOptions.forEach((updated, propertyName) => {
-    if (!updated) {
-      setChildrenFn(propertyName, new QueryList<ICollectionNestedOption>());
-    }
-    currentOptions.set(propertyName, false);
-  })
-};
 
 @Component({
   template: '',
 })
 export abstract class BaseNestedOption implements INestedOptionContainer, ICollectionNestedOptionContainer {
+  protected _dxClassName = 'BaseNestedOption';
   protected _host: INestedOptionContainer;
 
   protected _hostOptionPath: IOptionPathGetter;
@@ -93,25 +54,22 @@ export abstract class BaseNestedOption implements INestedOptionContainer, IColle
   protected abstract get _optionPath(): string;
   protected abstract _fullOptionPath(): string;
 
-  private _currentNestedOptions:Map<string, any> = new Map();
-
   constructor() {
     this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this), this._filterItems.bind(this));
   }
 
-  @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,
-          currentOptions: this._currentNestedOptions
-        },
+  protected _setChildren(propertyName: string, items: QueryList<ICollectionNestedOption>) {
+    const hasIncopatibleNestedItems = checkIncompatibleNestedItems(
+        items,
+        this._dxClassName,
+        null
     );
+    
+    if (!hasIncopatibleNestedItems) {
+      this.setChildren(propertyName, items);
+    }
   }
-
+  
   protected _optionChangedHandler(e: any) {
     const fullOptionPath = this._fullOptionPath();
 

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

@@ -16,7 +16,9 @@ import {
     EventEmitter,
     OnChanges,
     DoCheck,
-    SimpleChanges
+    SimpleChanges,
+    ContentChildren,
+    QueryList,
 } from '@angular/core';
 
 export { ExplicitTypes } from 'devextreme/ui/accordion';
@@ -36,13 +38,19 @@ import {
     DxTemplateModule,
     NestedOptionHost,
     IterableDifferHelper,
-    WatcherHelper
+    WatcherHelper,
+    ICollectionNestedOption,
 } from 'devextreme-angular/core';
 
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
 
 import { DxiAccordionItemModule } from 'devextreme-angular/ui/accordion/nested';
 
+import { 
+      PROPERTY_TOKEN_items,
+} from 'devextreme-angular/ui/nested/tokens';
+
+
 
 /**
  * [descr:dxAccordion]
@@ -62,6 +70,13 @@ import { DxiAccordionItemModule } from 'devextreme-angular/ui/accordion/nested';
     ]
 })
 export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck {
+protected _dxClassName = 'DxAccordionComponent';
+
+    @ContentChildren(PROPERTY_TOKEN_items)
+    set _itemsNestedItems(value: QueryList<ICollectionNestedOption>) {
+        this._setChildren('items', value);
+    }
+
     instance: DxAccordion<TItem, TKey> = null;
 
     /**
@@ -708,16 +723,16 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
 
     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

@@ -10,24 +10,26 @@ import {
     Inject,
     AfterViewInit,
     SkipSelf,
-    Input
+    Input,
 } from '@angular/core';
 
 import { DOCUMENT } from '@angular/common';
 
 
 
 import {
-    NESTED_ITEM_TOKEN,
     DxIntegrationModule,
     NestedOptionHost,
     extractTemplate,
     DxTemplateDirective,
     IDxTemplateHost,
-    DxTemplateHost
+    DxTemplateHost,
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
 
+import { PROPERTY_TOKEN_items } from 'devextreme-angular/ui/nested/tokens';
+
+
 @Component({
     selector: 'dxi-accordion-item',
     standalone: true,
@@ -38,18 +40,16 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
         NestedOptionHost,
         DxTemplateHost,
          {
-            provide: NESTED_ITEM_TOKEN,
-            useFactory: (component: DxiAccordionItemComponent) => ({
-                propertyName: 'items',
-                className: 'DxiAccordionItemComponent',
-                component
-            }),
-            deps: [DxiAccordionItemComponent],
+            provide: PROPERTY_TOKEN_items,
+            useExisting: DxiAccordionItemComponent,
          }
     ],
 })
 export class DxiAccordionItemComponent extends CollectionNestedOption implements AfterViewInit,
-    IDxTemplateHost {
+    IDxTemplateHost { 
+    protected _dxClassName = 'DxiAccordionItemComponent';
+
+    
     @Input()
     get disabled(): boolean {
         return this._getOption('disabled');
@@ -154,4 +154,4 @@ export class DxiAccordionItemComponent extends CollectionNestedOption implements
     DxiAccordionItemComponent
   ],
 })
-export class DxiAccordionItemModule { }
+export class DxiAccordionItemModule { }

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

@@ -16,7 +16,9 @@ import {
     EventEmitter,
     OnChanges,
     DoCheck,
-    SimpleChanges
+    SimpleChanges,
+    ContentChildren,
+    QueryList,
 } from '@angular/core';
 
 export { ExplicitTypes } from 'devextreme/ui/action_sheet';
@@ -36,13 +38,19 @@ import {
     DxTemplateModule,
     NestedOptionHost,
     IterableDifferHelper,
-    WatcherHelper
+    WatcherHelper,
+    ICollectionNestedOption,
 } from 'devextreme-angular/core';
 
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
 
 import { DxiActionSheetItemModule } from 'devextreme-angular/ui/action-sheet/nested';
 
+import { 
+      PROPERTY_TOKEN_items,
+} from 'devextreme-angular/ui/nested/tokens';
+
+
 
 /**
  * [descr:dxActionSheet]
@@ -62,6 +70,13 @@ import { DxiActionSheetItemModule } from 'devextreme-angular/ui/action-sheet/nes
     ]
 })
 export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck {
+protected _dxClassName = 'DxActionSheetComponent';
+
+    @ContentChildren(PROPERTY_TOKEN_items)
+    set _itemsNestedItems(value: QueryList<ICollectionNestedOption>) {
+        this._setChildren('items', value);
+    }
+
     instance: DxActionSheet<TItem, TKey> = null;
 
     /**
@@ -500,16 +515,16 @@ export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent
 
     protected getLegacyClassNames = () => {
         const legacyClassNames = {};
-        
+
         const getLegacyClassNamesForPropertyName = (propName) => {
                  legacyClassNames[propName] = legacyClassNames[propName] || [];
                  return legacyClassNames[propName];
         };
-        
+
 
         getLegacyClassNamesForPropertyName('items').push('DxiItemComponent');
 
-    
+
         return legacyClassNames || {};
     };