@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
67 lines (66 loc) • 4.07 kB
JavaScript
import * as React from 'react';
import { useLayoutEffect, useRef, useState } from 'react';
import { useAdaptable } from '../../AdaptableContext';
import { createUuid } from '../../../components/utils/uuid';
import SimpleButton from '../../../components/SimpleButton';
import kebabCase from 'lodash/kebabCase';
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 (React.createElement(React.Fragment, null,
React.createElement("div", { ref: contentsDivDomRef, id: contentsDivId, className: contentsDivId, dangerouslySetInnerHTML: { __html: contentsHTML }, style: { width: '100%' } }),
customToolPanel.buttons?.length && (React.createElement("div", { id: buttonsDivId, className: `ab-ToolPanel__custom-content__buttons ${buttonsDivId}` }, customToolPanel.buttons.map((button) => {
// TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
// with the next opportunity we should abstract it
const toolPanelContext = {
...api.internalApi.buildBaseContext(),
toolPanelState: api.toolPanelApi.getToolPanelState(),
customToolPanel: customToolPanel,
};
const buttonIcon = api.internalApi.getIconForButton(button, toolPanelContext);
let buttonStyle = api.internalApi.getStyleForButton(button, toolPanelContext);
let buttonLabel = api.internalApi.getLabelForButton(button, toolPanelContext);
let buttonTooltip = api.internalApi.getTooltipForButton(button, toolPanelContext);
if (button.hidden && button.hidden(button, toolPanelContext)) {
return null;
}
const disabled = button.disabled && button.disabled(button, toolPanelContext);
const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
const uniqueKey = buttonLabel ?? createUuid();
return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
})))));
};
const hasCustomRenderFn = (customToolPanel) => customToolPanel.render;
const hasCustomFrameworkComponent = (customToolPanel) => customToolPanel.frameworkComponent;