Skip to content

Commit 02833d2

Browse files
VasilyStrelyaevVasilyStrelyaev
authored
fix: React Charts regression (DevExpress#30879) (DevExpress#30892)
1 parent 259598f commit 02833d2

File tree

4 files changed

+55
-17
lines changed

4 files changed

+55
-17
lines changed

‎packages/devextreme-react/src/core/__tests__/template-wrapper.test.tsx‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ describe('Template Wrapper', () => {
7878
<>
7979
<div className='template-container' />
8080
<TemplateWrapper
81-
key={1}
81+
key='1'
82+
componentKey='1'
8283
templateFactory={templateFunction}
8384
data={{ text: 'My template' }}
8485
index={1}
@@ -103,7 +104,8 @@ describe('Template Wrapper', () => {
103104
<>
104105
<div className='template-container' />
105106
<TemplateWrapper
106-
key={2}
107+
key='2'
108+
componentKey='2'
107109
templateFactory={templateFunction}
108110
data={{ text: 'My template' }}
109111
index={1}
@@ -124,7 +126,8 @@ describe('Template Wrapper', () => {
124126
<>
125127
<div className='template-container' />
126128
<TemplateWrapper
127-
key={3}
129+
key='3'
130+
componentKey='3'
128131
templateFactory={templateFunction}
129132
data={{ text: 'My template' }}
130133
index={1}
@@ -145,7 +148,8 @@ describe('Template Wrapper', () => {
145148
<>
146149
<div className='template-container' />
147150
<TemplateWrapper
148-
key={4}
151+
key='4'
152+
componentKey='4'
149153
templateFactory={templateFunction}
150154
data={{ text: 'My template' }}
151155
index={1}
@@ -182,7 +186,8 @@ describe('Template Wrapper', () => {
182186
<>
183187
<div className='template-container' />
184188
<TemplateWrapper
185-
key={1}
189+
key='1'
190+
componentKey='1'
186191
templateFactory={templateFunction}
187192
data={{ text: 'My template' }}
188193
index={1}
@@ -202,7 +207,8 @@ describe('Template Wrapper', () => {
202207
<>
203208
<div className='template-container' />
204209
<TemplateWrapper
205-
key={2}
210+
key='2'
211+
componentKey='2'
206212
templateFactory={templateFunction}
207213
data={{ text: 'My template' }}
208214
index={1}
@@ -232,6 +238,8 @@ describe('Template Wrapper', () => {
232238
<>
233239
<div className='template-container' />
234240
<TemplateWrapper
241+
key='1'
242+
componentKey='1'
235243
templateFactory={templateFunction}
236244
data={{ text: 'My template' }}
237245
index={1}
@@ -309,6 +317,8 @@ describe('Template Wrapper', () => {
309317
<tbody className='tbody-container' />
310318
</table>
311319
<TemplateWrapper
320+
key='1'
321+
componentKey='1'
312322
templateFactory={templateFunction}
313323
data={{ text: 'My template' }}
314324
index={1}
@@ -317,6 +327,8 @@ describe('Template Wrapper', () => {
317327
onRemoved={() => undefined}
318328
/>
319329
<TemplateWrapper
330+
key='2'
331+
componentKey='2'
320332
templateFactory={tableBodyTemplateFunction}
321333
data={{ text: 'My template' }}
322334
index={1}
@@ -325,6 +337,8 @@ describe('Template Wrapper', () => {
325337
onRemoved={() => undefined}
326338
/>
327339
<TemplateWrapper
340+
key='3'
341+
componentKey='3'
328342
templateFactory={tableRowTemplateFunction}
329343
data={{ text: 'My template' }}
330344
index={1}
@@ -356,6 +370,8 @@ describe('Template Wrapper', () => {
356370
<>
357371
<div className='template-container' />
358372
<TemplateWrapper
373+
key='1'
374+
componentKey='1'
359375
templateFactory={templateFunction}
360376
data={{ text: 'My template' }}
361377
index={1}
@@ -389,6 +405,8 @@ describe('Template Wrapper', () => {
389405
<>
390406
<div className='template-container' />
391407
<TemplateWrapper
408+
key='1'
409+
componentKey='1'
392410
templateFactory={templateFunction}
393411
data={{ text: 'My template' }}
394412
index={1}
@@ -427,6 +445,8 @@ describe('Template Wrapper', () => {
427445
<>
428446
<div className='template-container' />
429447
<TemplateWrapper
448+
key='1'
449+
componentKey='1'
430450
templateFactory={templateFunction}
431451
data={{ text: 'My template' }}
432452
index={1}
@@ -463,6 +483,8 @@ describe('Template Wrapper', () => {
463483
<>
464484
<div className='template-container' />
465485
<TemplateWrapper
486+
key='1'
487+
componentKey='1'
466488
templateFactory={templateFunction}
467489
data={{ text: 'My template' }}
468490
index={1}
@@ -497,6 +519,8 @@ describe('Template Wrapper', () => {
497519
<>
498520
<div className='template-container' />
499521
<TemplateWrapper
522+
key='1'
523+
componentKey='1'
500524
templateFactory={templateFunction}
501525
data={{ text: 'My template' }}
502526
index={1}
@@ -531,6 +555,8 @@ describe('Template Wrapper', () => {
531555
<>
532556
<div className='template-container' />
533557
<TemplateWrapper
558+
key='1'
559+
componentKey='1'
534560
templateFactory={templateFunction}
535561
data={{ text: 'My template' }}
536562
index={1}

‎packages/devextreme-react/src/core/template-manager.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,15 @@ function normalizeProps(props: ITemplateArgs): ITemplateArgs | ITemplateArgs['da
3838

3939
const createMapKey = (key1: any, key2: HTMLElement) => ({ key1, key2 });
4040

41-
const unsubscribeOnRemoval = (container: HTMLElement, onRemoved: () => void) => {
41+
const unsubscribeOnRemoval = (container: HTMLElement, onContainerRemoved: () => void) => {
4242
if (container.nodeType === Node.ELEMENT_NODE) {
43-
events.off(container, DX_REMOVE_EVENT, onRemoved);
43+
events.off(container, DX_REMOVE_EVENT, onContainerRemoved);
4444
}
4545
};
4646

47-
const subscribeOnRemoval = (container: HTMLElement, onRemoved: () => void) => {
47+
const subscribeOnRemoval = (container: HTMLElement, onContainerRemoved: () => void) => {
4848
if (container.nodeType === Node.ELEMENT_NODE) {
49-
events.on(container, DX_REMOVE_EVENT, onRemoved);
49+
events.on(container, DX_REMOVE_EVENT, onContainerRemoved);
5050
}
5151
};
5252

@@ -73,27 +73,34 @@ export const TemplateManager: FC<TemplateManagerProps> = ({ init, onTemplatesRen
7373
const containerElement = unwrapElement(container);
7474
const key = createMapKey(data, containerElement);
7575

76-
const onRemoved = (): void => {
77-
if (collection.get(key)) {
76+
const onRemoved = (componentKey?: string): void => {
77+
const model = collection.get(key);
78+
79+
if (model && (!componentKey || model.componentKey === componentKey)) {
7880
collection.delete(key);
7981
setInstantiationModels({ collection });
8082
}
8183
};
8284

85+
const onContainerRemoved = (): void => {
86+
onRemoved();
87+
};
88+
8389
const hostWidgetId = widgetId.current;
8490

8591
collection.set(key, {
8692
templateKey,
8793
index,
8894
componentKey: getRandomId(),
8995
onRendered: () => {
90-
unsubscribeOnRemoval(containerElement, onRemoved);
96+
unsubscribeOnRemoval(containerElement, onContainerRemoved);
9197

9298
if (hostWidgetId === widgetId.current) {
9399
onRendered?.();
94100
}
95101
},
96102
onRemoved,
103+
onContainerRemoved,
97104
});
98105

99106
setInstantiationModels({ collection });
@@ -174,14 +181,16 @@ export const TemplateManager: FC<TemplateManagerProps> = ({ init, onTemplatesRen
174181
componentKey,
175182
onRendered,
176183
onRemoved,
184+
onContainerRemoved,
177185
}]) => {
178-
subscribeOnRemoval(container, onRemoved);
186+
subscribeOnRemoval(container, onContainerRemoved);
179187

180188
const factory = templateFactories.current[templateKey];
181189

182190
if (factory) {
183191
return <TemplateWrapper
184192
key={componentKey}
193+
componentKey={componentKey}
185194
templateFactory={factory}
186195
data={data}
187196
index={index}

‎packages/devextreme-react/src/core/template-wrapper.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const TemplateWrapperComponent: FC<TemplateWrapperProps> = ({
4040
container,
4141
onRemoved,
4242
onRendered,
43+
componentKey,
4344
}) => {
4445
const [removalListenerRequired, setRemovalListenerRequired] = useState(false);
4546
const isRemovalLocked = useRef(false);
@@ -64,7 +65,7 @@ const TemplateWrapperComponent: FC<TemplateWrapperProps> = ({
6465

6566
// In case of multiple root elements, letting the widget remove them all sync
6667
Promise.resolve().then(() => {
67-
onRemoved();
68+
onRemoved(componentKey);
6869
});
6970
}, [onRemoved]);
7071

‎packages/devextreme-react/src/core/types.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,9 @@ export interface TemplateWrapperProps {
3636
data: any;
3737
index: number;
3838
container: HTMLElement;
39+
componentKey: string;
3940
onRendered: () => void;
40-
onRemoved: () => void;
41+
onRemoved: (componentKey: string) => void;
4142
}
4243

4344
export type TemplateFunc = (arg: TemplateArgs) => JSX.Element | ReactNode;
@@ -66,7 +67,8 @@ export interface TemplateInstantiationModel {
6667
componentKey: string;
6768
index: any;
6869
onRendered: () => void;
69-
onRemoved: () => void;
70+
onRemoved: (componentKey: string) => void;
71+
onContainerRemoved: () => void;
7072
}
7173

7274
export type GetRenderFuncFn = (templateKey: string) => RenderFunc;

0 commit comments

Comments
 (0)