@adaptabletools/adaptable/src/View/Dashboard/CustomToolbar.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { useAdaptable } from '../AdaptableContext';
import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../Components/AdaptableButton';
import { PanelDashboard } from '../Components/Panels/PanelDashboard';
import { AdaptableFormComponent } from '../../components/AdaptableFormComponent/AdaptableFormComponent';
import { getDefaultAdaptableFormData, validateAdaptableForm, } from '../../AdaptableState/Common/AdaptableForm';
export const CustomToolbarCmp = (props) => {
    const { api } = useAdaptable();
    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);
    const formContainerId = `${buttonsContainerId}-form`;
    const [toolbarFormData, setToolbarFormData] = useState(() => props.customToolbar.toolbarForm
        ? getDefaultAdaptableFormData(props.customToolbar.toolbarForm)
        : {});
    useEffect(() => {
        if (!props.customToolbar.toolbarForm) {
            return;
        }
        const resetter = () => {
            const next = getDefaultAdaptableFormData(props.customToolbar.toolbarForm);
            setToolbarFormData(next);
            if (props.customToolbar.onToolbarFormChange) {
                props.customToolbar.onToolbarFormChange(next, buildToolbarFormContext(next));
            }
        };
        api.dashboardApi.internalApi.registerCustomToolbarFormResetter(props.customToolbar.name, resetter);
        return () => {
            api.dashboardApi.internalApi.unregisterCustomToolbarFormResetter(props.customToolbar.name, resetter);
        };
    }, [api, props.customToolbar.name, props.customToolbar.toolbarForm]);
    const buildToolbarFormContext = (data) => {
        const baseCtx = {
            customToolbar: props.customToolbar,
            dashboardState: api.dashboardApi.getDashboardState(),
            formData: data,
            ...api.internalApi.buildBaseContext(),
        };
        const formErrors = props.customToolbar.toolbarForm
            ? validateAdaptableForm(props.customToolbar.toolbarForm, data, baseCtx)
            : {};
        baseCtx.formErrors = formErrors;
        baseCtx.formIsValid = Object.keys(formErrors).length === 0;
        return baseCtx;
    };
    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;
        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 (_jsxs(_Fragment, { children: [props.customToolbar.render && (_jsx("div", { id: renderContentContainerId, ref: renderContentContainerRef, className: `ab-CustomToolbar__rendered-content ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: renderedContentHTML } })), props.customToolbar.toolbarButtons && (_jsx("div", { id: buttonsContainerId, className: `ab-CustomToolbar__buttons ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, children: props.customToolbar.toolbarButtons.map((button, index) => {
                    const dashboardContext = {
                        customToolbar: props.customToolbar,
                        dashboardState: api.dashboardApi.getDashboardState(),
                        ...api.internalApi.buildBaseContext(),
                    };
                    return (_jsx(AdaptableButtonView, { button: button, context: dashboardContext, api: api, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.customToolbar, rerenderOnClick: false, style: { marginLeft: index ? 'var(--ab-base-space)' : 0 }, onAfterClick: () => setComponentRevision(componentRevision + 1) }, index));
                }) })), props.customToolbar.toolbarForm && (_jsx("div", { id: formContainerId, className: `ab-CustomToolbar__form ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, children: _jsx(AdaptableFormComponent, { formDef: { ...props.customToolbar.toolbarForm, layout: 'inline' }, data: toolbarFormData, displayTitle: false, api: api, context: buildToolbarFormContext(toolbarFormData), focusFirstButton: false, onChange: (newData) => {
                        setToolbarFormData(newData);
                        if (props.customToolbar.onToolbarFormChange) {
                            props.customToolbar.onToolbarFormChange(newData, buildToolbarFormContext(newData));
                        }
                    }, onButtonClick: (button) => {
                        const ctx = buildToolbarFormContext(toolbarFormData);
                        const formButton = button;
                        if (formButton.onClick) {
                            formButton.onClick(formButton, ctx);
                        }
                        setTimeout(() => {
                            setComponentRevision(componentRevision + 1);
                        }, 16);
                    } }) })), CustomReactFrameworkComponent && (_jsx("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}`, children: api.gridApi.getVariant() === 'react' ? (_jsx(CustomReactFrameworkComponent, { adaptableApi: api })) : null }))] }));
};
export const CustomToolbarWrapper = (props) => {
    const { api } = useAdaptable();
    return (_jsx(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'), children: _jsx(CustomToolbarCmp, { ...props }) }));
};