devextreme-react
Version:
DevExtreme React UI and Visualization Components
175 lines (173 loc) • 7.34 kB
JavaScript
/*!
* 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
*/
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TemplateManager = void 0;
const React = __importStar(require("react"));
const events = __importStar(require("devextreme/events"));
const react_1 = require("react");
const template_wrapper_1 = require("./template-wrapper");
const helpers_1 = require("./helpers");
const component_base_1 = require("./component-base");
const config_1 = require("./config");
function normalizeProps(props) {
if ((0, config_1.getOption)('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, component_base_1.DX_REMOVE_EVENT, onContainerRemoved);
}
};
const subscribeOnRemoval = (container, onContainerRemoved) => {
if (container.nodeType === Node.ELEMENT_NODE) {
events.on(container, component_base_1.DX_REMOVE_EVENT, onContainerRemoved);
}
};
const unwrapElement = (element) => (element.get ? element.get(0) : element);
const getRandomId = () => `${(0, helpers_1.generateID)()}${(0, helpers_1.generateID)()}${(0, helpers_1.generateID)()}`;
const TemplateManager = ({ init, onTemplatesRendered }) => {
const mounted = (0, react_1.useRef)(false);
const [instantiationModels, setInstantiationModels] = (0, react_1.useState)({
collection: new helpers_1.TemplateInstantiationModels(),
});
const [updateContext, setUpdateContext] = (0, react_1.useState)();
const widgetId = (0, react_1.useRef)('');
const templateFactories = (0, react_1.useRef)({});
const { collection } = instantiationModels;
const getRenderFunc = (0, react_1.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]);
(0, react_1.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]);
(0, react_1.useEffect)(() => {
mounted.current = true;
return () => {
mounted.current = false;
};
}, []);
(0, react_1.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(template_wrapper_1.TemplateWrapper, { key: componentKey, componentKey: componentKey, templateFactory: factory, data: data, index: index, container: container, onRemoved: onRemoved, onRendered: onRendered });
}
return null;
})));
};
exports.TemplateManager = TemplateManager;