@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
72 lines (71 loc) • 4.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomToolPanelContent = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const AdaptableContext_1 = require("../../AdaptableContext");
const uuid_1 = require("../../../components/utils/uuid");
const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
const CustomToolPanelContent = (props) => {
const { customToolPanel } = props;
const { api } = (0, AdaptableContext_1.useAdaptable)();
const contentsDivDomRef = (0, react_1.useRef)(null);
const contentsDivId = `ab-ToolPanel__${customToolPanel.name}__contents`;
const buttonsDivId = `ab-ToolPanel__${customToolPanel.name}__buttons`;
const [contentsHTML, setContentsHTML] = (0, react_1.useState)('');
(0, react_1.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 ?? (0, uuid_1.createUuid)();
return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
})))));
};
exports.CustomToolPanelContent = CustomToolPanelContent;
const hasCustomRenderFn = (customToolPanel) => customToolPanel.render;
const hasCustomFrameworkComponent = (customToolPanel) => customToolPanel.frameworkComponent;