Skip to content

Commit fbce12e

Browse files
VasilyStrelyaevVasilyStrelyaev
authored
fix: React Charts regression (#30879)
1 parent 4d33793 commit fbce12e

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

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

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

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

8692
collection.set(key, {
8793
templateKey,
8894
index,
8995
componentKey: getRandomId(),
9096
onRendered: () => {
91-
unsubscribeOnRemoval(containerElement, onRemoved);
97+
unsubscribeOnRemoval(containerElement, onContainerRemoved);
9298

9399
if (hostWidgetId === widgetId.current) {
94100
onRendered?.();
95101
}
96102
},
97103
onRemoved,
104+
onContainerRemoved,
98105
});
99106

100107
setInstantiationModels({ collection });
@@ -185,14 +192,16 @@ export const TemplateManager: FC<TemplateManagerProps> = ({ init, onTemplatesRen
185192
componentKey,
186193
onRendered,
187194
onRemoved,
195+
onContainerRemoved,
188196
}]) => {
189-
subscribeOnRemoval(container, onRemoved);
197+
subscribeOnRemoval(container, onContainerRemoved);
190198

191199
const factory = templateFactories.current[templateKey];
192200

193201
if (factory) {
194202
return <TemplateWrapper
195203
key={componentKey}
204+
componentKey={componentKey}
196205
templateFactory={factory}
197206
data={data}
198207
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)