devextreme-react
Version:
DevExtreme React UI and Visualization Components
74 lines (72 loc) • 2.71 kB
JavaScript
/*!
* devextreme-react
* Version: 25.2.3
* Build date: Fri Dec 12 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 { useImperativeHandle, forwardRef, useRef, useLayoutEffect, useCallback, } from 'react';
import { ComponentBase } from './component-base';
import { elementIsExtension } from './extension-component';
const Component = forwardRef((props, ref) => {
const componentBaseRef = useRef(null);
const extensionCreators = useRef([]);
const registerExtension = useCallback((creator) => {
extensionCreators.current.push(creator);
}, []);
const createExtensions = useCallback(() => {
extensionCreators.current.forEach((creator) => {
creator(componentBaseRef.current?.getElement());
});
}, []);
const renderChildren = useCallback(() => React.Children.map(props.children, (child) => {
if (React.isValidElement(child) && elementIsExtension(child)) {
return React.cloneElement(child, { onMounted: registerExtension });
}
return child;
}), [props, registerExtension]);
const createWidget = useCallback((el) => {
componentBaseRef.current?.createWidget(el);
}, []);
const clearExtensions = useCallback(() => {
props.clearExtensions?.();
extensionCreators.current = [];
}, [props.clearExtensions]);
const createWidgetRef = useRef(createWidget);
const clearExtensionsRef = useRef(clearExtensions);
useLayoutEffect(() => {
createWidget();
createExtensions();
return () => {
clearExtensionsRef.current?.();
};
}, []);
useLayoutEffect(() => {
createWidgetRef.current = createWidget;
}, [createWidget]);
useLayoutEffect(() => {
clearExtensionsRef.current = clearExtensions;
}, [clearExtensions]);
useImperativeHandle(ref, () => ({
getInstance() {
return componentBaseRef.current?.getInstance();
},
getElement() {
return componentBaseRef.current?.getElement();
},
createWidget(el) {
createWidgetRef.current?.(el);
},
clearExtensions() {
clearExtensionsRef.current?.();
},
}), []);
return (React.createElement(ComponentBase, { ref: componentBaseRef, renderChildren: renderChildren, ...props }));
});
export { Component, };