@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
52 lines (51 loc) • 3.13 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useLayoutEffect, useRef, useState } from 'react';
import { useAdaptable } from '../../AdaptableContext';
import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../AdaptableButton';
import { kebabCase } from '../../../Utilities/Extensions/StringExtensions';
export const CustomToolPanelContent = (props) => {
const { customToolPanel } = props;
const { api } = useAdaptable();
const contentsDivDomRef = useRef(null);
const contentsDivId = `ab-ToolPanel__${customToolPanel.name}__contents`;
const buttonsDivId = `ab-ToolPanel__${customToolPanel.name}__buttons`;
const [contentsHTML, setContentsHTML] = useState('');
useLayoutEffect(() => {
const element = contentsDivDomRef.current;
if (hasCustomRenderFn(customToolPanel)) {
const customRenderContext = {
phase: 'onMount',
element,
...api.internalApi.buildBaseContext(),
};
const html = customToolPanel.render(customRenderContext);
setContentsHTML(html);
}
else if (hasCustomFrameworkComponent(customToolPanel)) {
api.internalApi.createFrameworkComponent(element, customToolPanel.frameworkComponent, 'toolPanel');
}
return () => {
if (hasCustomRenderFn(customToolPanel)) {
customToolPanel.render({
phase: 'onDestroy',
element,
...api.internalApi.buildBaseContext(),
});
}
else if (hasCustomFrameworkComponent(customToolPanel) && !api.isDestroyed()) {
api.internalApi.destroyFrameworkComponent(element, customToolPanel.frameworkComponent, 'toolPanel');
}
};
}, []);
return (_jsxs(_Fragment, { children: [_jsx("div", { ref: contentsDivDomRef, id: contentsDivId, className: contentsDivId, dangerouslySetInnerHTML: { __html: contentsHTML }, style: { width: '100%' } }), customToolPanel.buttons?.length && (_jsx("div", { id: buttonsDivId, className: `ab-ToolPanel__custom-content__buttons ${buttonsDivId}`, children: customToolPanel.buttons.map((button) => {
const toolPanelContext = {
...api.internalApi.buildBaseContext(),
toolPanelState: api.toolPanelApi.getToolPanelState(),
customToolPanel: customToolPanel,
};
const buttonLabel = api.internalApi.getLabelForButton(button, toolPanelContext) ?? '';
return (_jsx(AdaptableButtonView, { button: button, context: toolPanelContext, api: api, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.customToolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)}` }, buttonLabel || button.Uuid));
}) }))] }));
};
const hasCustomRenderFn = (customToolPanel) => customToolPanel.render;
const hasCustomFrameworkComponent = (customToolPanel) => customToolPanel.frameworkComponent;