UNPKG

devextreme-react

Version:

DevExtreme React UI and Visualization Components

148 lines (146 loc) 5.99 kB
/*! * devextreme-react * Version: 25.1.5 * Build date: Wed Sep 03 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/devextreme-react */ import * as React from 'react'; import * as events from 'devextreme/events'; import { useState, useMemo, useCallback, useEffect, useRef, } from 'react'; import { TemplateWrapper } from './template-wrapper'; import { TemplateInstantiationModels, generateID } from './helpers'; import { DX_REMOVE_EVENT } from './component-base'; import { getOption as getConfigOption } from './config'; function normalizeProps(props) { if (getConfigOption('useLegacyTemplateEngine')) { const model = props.data; if (model && Object.prototype.hasOwnProperty.call(model, 'key')) { model.dxkey = model.key; } return model; } return props; } const createMapKey = (key1, key2) => ({ key1, key2 }); const unsubscribeOnRemoval = (container, onContainerRemoved) => { if (container.nodeType === Node.ELEMENT_NODE) { events.off(container, DX_REMOVE_EVENT, onContainerRemoved); } }; const subscribeOnRemoval = (container, onContainerRemoved) => { if (container.nodeType === Node.ELEMENT_NODE) { events.on(container, DX_REMOVE_EVENT, onContainerRemoved); } }; const unwrapElement = (element) => (element.get ? element.get(0) : element); const getRandomId = () => `${generateID()}${generateID()}${generateID()}`; export const TemplateManager = ({ init, onTemplatesRendered }) => { const mounted = useRef(false); const [instantiationModels, setInstantiationModels] = useState({ collection: new TemplateInstantiationModels(), }); const [updateContext, setUpdateContext] = useState(); const widgetId = useRef(''); const templateFactories = useRef({}); const { collection } = instantiationModels; const getRenderFunc = useCallback((templateKey) => ({ model: data, index, container, onRendered, }) => { const containerElement = unwrapElement(container); const key = createMapKey(data, containerElement); const onRemoved = (componentKey) => { const model = collection.get(key); if (model && (!componentKey || model.componentKey === componentKey)) { collection.delete(key); setInstantiationModels({ collection }); } }; const onContainerRemoved = () => { onRemoved(); }; const hostWidgetId = widgetId.current; collection.set(key, { templateKey, index, componentKey: getRandomId(), onRendered: () => { unsubscribeOnRemoval(containerElement, onContainerRemoved); if (hostWidgetId === widgetId.current) { onRendered?.(); } }, onRemoved, onContainerRemoved, }); setInstantiationModels({ collection }); return containerElement; }, [collection]); useMemo(() => { function getTemplateFunction(template) { switch (template.type) { case 'children': return () => template.content; case 'render': return (props) => { normalizeProps(props); return template.content(props.data, props.index); }; case 'component': return (props) => { props = normalizeProps(props); return React.createElement.bind(null, template.content)(props); }; default: return () => React.createElement(React.Fragment); } } function createDXTemplates(templateOptions) { const factories = Object.entries(templateOptions) .reduce((res, [key, template]) => ({ ...res, [key]: getTemplateFunction(template), }), {}); templateFactories.current = factories; const dxTemplates = Object.keys(factories) .reduce((templates, templateKey) => { templates[templateKey] = { render: getRenderFunc(templateKey) }; return templates; }, {}); return dxTemplates; } function clearInstantiationModels() { widgetId.current = getRandomId(); instantiationModels.collection.clear(); setInstantiationModels({ ...instantiationModels }); } function updateTemplates(onUpdated) { if (mounted.current) { setUpdateContext({ onUpdated }); } } init({ createDXTemplates, clearInstantiationModels, updateTemplates }); }, [init, getRenderFunc]); useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []); useEffect(() => { if (updateContext) { updateContext.onUpdated(); } onTemplatesRendered(); }, [updateContext, onTemplatesRendered]); if (instantiationModels.collection.empty) { return null; } return (React.createElement(React.Fragment, null, Array.from(instantiationModels.collection).map(([{ key1: data, key2: container }, { index, templateKey, componentKey, onRendered, onRemoved, onContainerRemoved, }]) => { subscribeOnRemoval(container, onContainerRemoved); const factory = templateFactories.current[templateKey]; if (factory) { return React.createElement(TemplateWrapper, { key: componentKey, componentKey: componentKey, templateFactory: factory, data: data, index: index, container: container, onRemoved: onRemoved, onRendered: onRendered }); } return null; }))); };