@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
106 lines (105 loc) • 6.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomToolbarWrapper = exports.CustomToolbarCmp = 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 AdaptableButton_1 = require("../Components/AdaptableButton");
const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
const CustomToolbarCmp = (props) => {
const { api } = (0, AdaptableContext_1.useAdaptable)();
// dummy object which is used to force a re-render of the toolbar
const [componentRevision, setComponentRevision] = (0, react_1.useState)(1);
const renderContentContainerId = api.dashboardApi.internalApi.getCustomToolbarRenderContainerId(props.customToolbar.name);
const renderContentContainerRef = (0, react_1.useRef)(null);
const [renderedContentHTML, setRenderedContentHTML] = (0, react_1.useState)('');
const buttonsContainerId = api.dashboardApi.internalApi.getCustomToolbarButtonsContainerId(props.customToolbar.name);
const componentContainerId = api.dashboardApi.internalApi.getCustomToolbarComponentContainerId(props.customToolbar.name);
const componentContainerRef = (0, react_1.useRef)(null);
(0, react_1.useLayoutEffect)(() => {
const element = renderContentContainerRef.current;
const adaptableApi = api;
if (props.customToolbar.render) {
const html = props.customToolbar.render({
phase: 'onMount',
element,
...adaptableApi.internalApi.buildBaseContext(),
});
setRenderedContentHTML(html);
}
}, [componentRevision, props.dashboardRevision]);
(0, react_1.useLayoutEffect)(() => {
const element = renderContentContainerRef.current;
const adaptableApi = api;
// cleanup runs in a separate effect, this way it's executed only once on unmount
return () => {
if (props.customToolbar.render) {
props.customToolbar.render({
phase: 'onDestroy',
element,
...adaptableApi.internalApi.buildBaseContext(),
});
}
};
}, []);
(0, react_1.useLayoutEffect)(() => {
const containerElement = componentContainerRef.current;
const adaptableApi = api;
if (props.customToolbar.frameworkComponent) {
adaptableApi.internalApi.createFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
}
const destroyUnsubscribe = adaptableApi.eventApi.on('AdaptableDestroy', () => {
adaptableApi?.internalApi?.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
});
return () => {
destroyUnsubscribe();
if (props.customToolbar.frameworkComponent) {
adaptableApi?.internalApi?.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
}
};
}, []);
const CustomReactFrameworkComponent = props.customToolbar
.frameworkComponent;
return (React.createElement(React.Fragment, null,
props.customToolbar.render && (React.createElement("div", { id: renderContentContainerId, ref: renderContentContainerRef, className: `ab-CustomToolbar__rendered-content ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: renderedContentHTML } })),
props.customToolbar.toolbarButtons && (React.createElement("div", { id: buttonsContainerId, className: `ab-CustomToolbar__buttons ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 } }, props.customToolbar.toolbarButtons.map((button, index) => {
const dashboardContext = {
customToolbar: props.customToolbar,
dashboardState: api.dashboardApi.getDashboardState(),
...api.internalApi.buildBaseContext(),
};
const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
let buttonLabel = api.internalApi.getLabelForButton(button, dashboardContext);
let buttonTooltip = api.internalApi.getTooltipForButton(button, dashboardContext);
if (button.hidden && button.hidden(button, dashboardContext)) {
return null;
}
const disabled = button.disabled && button.disabled(button, dashboardContext);
let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: buttonStyle?.className || '', onClick: () => {
button.onClick ? button.onClick(button, dashboardContext) : null;
setTimeout(() => {
// mutate state to force a re-rendering
setComponentRevision(componentRevision + 1);
}, 16);
} }, buttonLabel));
}))),
CustomReactFrameworkComponent && (React.createElement("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}` }, api.gridApi.getVariant() === 'react' ? (React.createElement(CustomReactFrameworkComponent, { adaptableApi: api })) : null))));
};
exports.CustomToolbarCmp = CustomToolbarCmp;
const CustomToolbarWrapper = (props) => {
const { api } = (0, AdaptableContext_1.useAdaptable)();
return (React.createElement(PanelDashboard_1.PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'configure') !=
undefined, showCloseActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'close') != undefined, onConfigure: () => {
const customToolbarConfiguredInfo = {
...api.internalApi.buildBaseContext(),
customToolbar: props.customToolbar,
};
api.eventApi.emit('CustomToolbarConfigured', customToolbarConfiguredInfo);
}, accessLevel: api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard') },
React.createElement(exports.CustomToolbarCmp, { ...props })));
};
exports.CustomToolbarWrapper = CustomToolbarWrapper;