Skip to content

Commit cc6eca2

Browse files
GoodDayForSurfGoodDayForSurf
committed
refacor
use different propertyName for nesteds
1 parent 7b15efb commit cc6eca2

7 files changed

Lines changed: 81 additions & 46 deletions

File tree

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
createNgModule,
2020
inject,
2121
Injector,
22-
InjectionToken,
22+
InjectionToken, ContentChildren,
2323
} from '@angular/core';
2424

2525
import { isPlatformServer } from '@angular/common';
@@ -37,7 +37,9 @@ import {
3737
INestedOptionContainer,
3838
ICollectionNestedOption,
3939
ICollectionNestedOptionContainer,
40-
CollectionNestedOptionContainerImpl,
40+
CollectionNestedOptionContainerImpl,
41+
_updateNestedItems,
42+
NESTED_ITEM_TOKEN
4143
} from './nested-option';
4244

4345
import { DxIntegrationModule } from './integration';
@@ -48,7 +50,6 @@ config({
4850
});
4951

5052
let serverStateKey;
51-
export const NESTED_ITEM_TOKEN = new InjectionToken<string>('nested-item');
5253

5354
export const getServerStateKey = () => {
5455
if (!serverStateKey) {
@@ -69,6 +70,11 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
6970

7071
private readonly _collectionContainerImpl: ICollectionNestedOptionContainer;
7172

73+
@ContentChildren(NESTED_ITEM_TOKEN)
74+
set _nestedItems(value) {
75+
_updateNestedItems(value, this._setChildren.bind(this))
76+
}
77+
7278
eventHelper: EmitterHelper;
7379

7480
optionChangedHandlers: EventEmitter<any> = new EventEmitter();
@@ -308,11 +314,12 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
308314
this.templateUpdateRequired = true;
309315
}
310316

311-
protected legacyClassNames = {}
317+
protected getLegacyClassNames = (propertyName?: string) => [];
312318

313319
checkContentChildren<T>(propertyName: string, items: QueryList<T>) {
314-
const legacyItem = items.find((item) => this.legacyClassNames[propertyName]?.includes(item.constructor.name));
315-
const notLegacyItem = legacyItem && items.find((item) => !this.legacyClassNames[propertyName].includes(item.constructor.name));
320+
const legacyClassNames = this.getLegacyClassNames(propertyName);
321+
const legacyItem = items.find((item) => legacyClassNames.includes(item.constructor.name));
322+
const notLegacyItem = legacyItem && items.find((item) => !legacyClassNames.includes(item.constructor.name));
316323

317324
if (legacyItem && notLegacyItem) {
318325
if (console && console.warn) {

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

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import {
2-
Component, QueryList, ElementRef, Renderer2, EventEmitter,
2+
Component, QueryList, ElementRef, Renderer2, EventEmitter, ContentChildren, InjectionToken,
33
} from '@angular/core';
44

55
import render from 'devextreme/core/renderer';
66
import { triggerHandler } from 'devextreme/events';
77
import domAdapter from 'devextreme/core/dom_adapter';
88
import { getElement } from './utils';
9-
import { DX_TEMPLATE_WRAPPER_CLASS } from './template';
9+
import { DX_TEMPLATE_WRAPPER_CLASS } from './template';
10+
11+
export const NESTED_ITEM_TOKEN = new InjectionToken<string>('nested-item');
1012

1113
const VISIBILITY_CHANGE_SELECTOR = 'dx-visibility-change-handler';
1214

@@ -22,6 +24,26 @@ export interface INestedOptionContainer {
2224

2325
export type IOptionPathGetter = () => string;
2426

27+
export const _updateNestedItems = (
28+
items: QueryList<{ propertyName: string, component: ICollectionNestedOption}>,
29+
setChildrenFn: (propertyName: string, items: QueryList<ICollectionNestedOption>) => void
30+
) => {
31+
const groupedItems = items.reduce((acc, { propertyName, component }) => {
32+
acc[propertyName] = acc[propertyName] || [];
33+
acc[propertyName].push(component);
34+
35+
return acc;
36+
}, {});
37+
38+
Object.entries(groupedItems).forEach(([propertyName, components]: [string, ICollectionNestedOption[]]) => {
39+
const queryList = new QueryList<ICollectionNestedOption>();
40+
41+
queryList.reset(components);
42+
43+
setChildrenFn(propertyName, queryList);
44+
});
45+
};
46+
2547
@Component({
2648
template: '',
2749
})
@@ -202,6 +224,11 @@ export interface ICollectionNestedOption {
202224
export abstract class CollectionNestedOption extends BaseNestedOption implements ICollectionNestedOption {
203225
_index: number;
204226

227+
@ContentChildren(NESTED_ITEM_TOKEN)
228+
set _nestedItems(value) {
229+
_updateNestedItems(value, this.setChildren.bind(this));
230+
}
231+
205232
protected _fullOptionPath() {
206233
return `${this._getOptionPath()}[${this._index}].`;
207234
}

‎packages/devextreme-angular/src/ui/form/index.ts‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* tslint:disable:max-line-length */
22

3-
43
import {
54
TransferState,
65
Component,
@@ -17,7 +16,6 @@ import {
1716
OnChanges,
1817
DoCheck,
1918
SimpleChanges,
20-
ContentChildren,
2119
} from '@angular/core';
2220

2321
import { Mode } from 'devextreme/common';
@@ -67,17 +65,6 @@ import { DxoFormTabPanelOptionsModule } from 'devextreme-angular/ui/form/nested'
6765
import { DxiFormTabPanelOptionsItemModule } from 'devextreme-angular/ui/form/nested';
6866
import { DxiFormValidationRuleModule } from 'devextreme-angular/ui/form/nested';
6967

70-
/*import { DxiItemComponent } from 'devextreme-angular/ui/nested';
71-
72-
import { DxiFormButtonItemComponent } from 'devextreme-angular/ui/form/nested';
73-
import { DxiFormEmptyItemComponent } from 'devextreme-angular/ui/form/nested';
74-
import { DxiFormGroupItemComponent } from 'devextreme-angular/ui/form/nested';
75-
import { DxiFormItemComponent } from 'devextreme-angular/ui/form/nested';
76-
import { DxiFormSimpleItemComponent } from 'devextreme-angular/ui/form/nested';
77-
import { DxiFormTabbedItemComponent } from 'devextreme-angular/ui/form/nested';*/
78-
79-
import { NESTED_ITEM_TOKEN } from "devextreme-angular/core";
80-
8168
/**
8269
* [descr:dxForm]
8370
@@ -825,12 +812,6 @@ export class DxFormComponent extends DxComponent implements OnDestroy, OnChanges
825812
*/
826813
@Output() widthChange: EventEmitter<number | string | undefined>;
827814

828-
@ContentChildren(NESTED_ITEM_TOKEN)
829-
get _nestedItems() { return this._getOption('items') };
830-
set _nestedItems(value) {
831-
this._setChildren('items', value);
832-
}
833-
834815
constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,
835816
private _watcherHelper: WatcherHelper,
836817
private _idh: IterableDifferHelper,

‎packages/devextreme-angular/src/ui/form/nested/button-item-dxi.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,15 @@ import { CollectionNestedOption, NESTED_ITEM_TOKEN } from 'devextreme-angular/co
2929
template: '',
3030
styles: [''],
3131
imports: [ DxIntegrationModule ],
32-
providers: [NestedOptionHost, { provide: NESTED_ITEM_TOKEN, useExisting: DxiFormButtonItemComponent }]
32+
providers: [
33+
NestedOptionHost,
34+
{ provide: NESTED_ITEM_TOKEN,
35+
useFactory: (component: DxiFormButtonItemComponent) => ({
36+
propertyName: 'items',
37+
component
38+
}),
39+
deps: [DxiFormButtonItemComponent],
40+
}]
3341
})
3442
export class DxiFormButtonItemComponent extends CollectionNestedOption {
3543
@Input()

‎packages/devextreme-angular/src/ui/form/nested/group-item-dxi.ts‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
AfterViewInit,
1212
SkipSelf,
1313
Input,
14-
ContentChildren,
1514
} from '@angular/core';
1615

1716
import { DOCUMENT } from '@angular/common';
@@ -42,7 +41,17 @@ import { DxiFormTabbedItemComponent } from './tabbed-item-dxi';*/
4241
template: '<ng-content></ng-content>',
4342
styles: [':host { display: block; }'],
4443
imports: [ DxIntegrationModule ],
45-
providers: [NestedOptionHost, DxTemplateHost, { provide: NESTED_ITEM_TOKEN, useExisting: DxiFormGroupItemComponent }]
44+
providers: [
45+
NestedOptionHost,
46+
DxTemplateHost,
47+
{
48+
provide: NESTED_ITEM_TOKEN,
49+
useFactory: (component: DxiFormGroupItemComponent) => ({
50+
propertyName: 'items',
51+
component
52+
}),
53+
deps: [DxiFormGroupItemComponent],
54+
}]
4655
})
4756
export class DxiFormGroupItemComponent extends CollectionNestedOption implements AfterViewInit,
4857
IDxTemplateHost {
@@ -155,12 +164,6 @@ export class DxiFormGroupItemComponent extends CollectionNestedOption implements
155164
return 'items';
156165
}
157166

158-
@ContentChildren(NESTED_ITEM_TOKEN)
159-
get _nestedItems() { return this._getOption('items') };
160-
set _nestedItems(value) {
161-
this.setChildren('items', value);
162-
}
163-
164167
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
165168
@Host() optionHost: NestedOptionHost,
166169
private renderer: Renderer2,

‎packages/devextreme-angular/src/ui/form/nested/simple-item-dxi.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
AfterViewInit,
1212
SkipSelf,
1313
Input,
14-
ContentChildren,
1514
} from '@angular/core';
1615

1716
import { DOCUMENT } from '@angular/common';
@@ -37,7 +36,17 @@ import { CollectionNestedOption, NESTED_ITEM_TOKEN } from 'devextreme-angular/co
3736
template: '<ng-content></ng-content>',
3837
styles: [':host { display: block; }'],
3938
imports: [ DxIntegrationModule ],
40-
providers: [NestedOptionHost, DxTemplateHost, { provide: NESTED_ITEM_TOKEN, useExisting: DxiFormSimpleItemComponent }]
39+
providers: [
40+
NestedOptionHost,
41+
DxTemplateHost,
42+
{
43+
provide: NESTED_ITEM_TOKEN,
44+
useFactory: (component: DxiFormSimpleItemComponent) => ({
45+
propertyName: 'items',
46+
component
47+
}),
48+
deps: [DxiFormSimpleItemComponent],
49+
}]
4150
})
4251
export class DxiFormSimpleItemComponent extends CollectionNestedOption implements AfterViewInit,
4352
IDxTemplateHost {
@@ -158,13 +167,6 @@ export class DxiFormSimpleItemComponent extends CollectionNestedOption implement
158167
return 'items';
159168
}
160169

161-
@ContentChildren(NESTED_ITEM_TOKEN)
162-
get _nestedItems() { return this._getOption('validationRules') };
163-
set _nestedItems(value) {
164-
this.setChildren('validationRules', value);
165-
}
166-
167-
168170
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
169171
@Host() optionHost: NestedOptionHost,
170172
private renderer: Renderer2,

‎packages/devextreme-angular/src/ui/form/nested/validation-rule-dxi.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,14 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
2828
template: '',
2929
styles: [''],
3030
imports: [ DxIntegrationModule ],
31-
providers: [NestedOptionHost, { provide: NESTED_ITEM_TOKEN, useExisting: DxiFormValidationRuleComponent }]
31+
providers: [NestedOptionHost,
32+
{ provide: NESTED_ITEM_TOKEN,
33+
useFactory: (component: DxiFormValidationRuleComponent) => ({
34+
propertyName: 'validationRules',
35+
component
36+
}),
37+
deps: [DxiFormValidationRuleComponent],
38+
}]
3239
})
3340
export class DxiFormValidationRuleComponent extends CollectionNestedOption {
3441
@Input()

0 commit comments

Comments
 (0)