@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
100 lines (99 loc) • 6.49 kB
JavaScript
import * as React from 'react';
import { useLayoutEffect, useRef, useState } from 'react';
import { useAdaptable } from '../AdaptableContext';
import { AdaptableButtonComponent } from '../Components/AdaptableButton';
import { PanelDashboard } from '../Components/Panels/PanelDashboard';
export const CustomToolbarCmp = (props) => {
const { api } = useAdaptable();
// dummy object which is used to force a re-render of the toolbar
const [componentRevision, setComponentRevision] = useState(1);
const renderContentContainerId = api.dashboardApi.internalApi.getCustomToolbarRenderContainerId(props.customToolbar.name);
const renderContentContainerRef = useRef(null);
const [renderedContentHTML, setRenderedContentHTML] = useState('');
const buttonsContainerId = api.dashboardApi.internalApi.getCustomToolbarButtonsContainerId(props.customToolbar.name);
const componentContainerId = api.dashboardApi.internalApi.getCustomToolbarComponentContainerId(props.customToolbar.name);
const componentContainerRef = useRef(null);
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]);
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(),
});
}
};
}, []);
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(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))));
};
export const CustomToolbarWrapper = (props) => {
const { api } = useAdaptable();
return (React.createElement(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(CustomToolbarCmp, { ...props })));
};