@adaptabletools/adaptable/src/components/ProgressIndicator/ProgressIndicator.js

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

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
import { LoaderSpinner } from '../Loader';
import { useAdaptable } from '../../View/AdaptableContext';
import { ExternalRenderer } from '../../View/Components/ExternalRenderer';
import Dialog from '../Dialog';
import { Box, Flex } from '../Flex';
export const ProgressIndicator = () => {
    const adaptable = useAdaptable();
    const { active, text, render, frameworkComponent, renderMode } = useSelector((state) => state.Popup.ProgressIndicator);
    const [visible, setVisible] = useState(false);
    const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = useState({
        top: 0,
        left: 0,
        height: 0,
        width: 0,
    });
    const disableAdaptableGrid = (containerElement, disabled) => {
        const DISABLING_CSS_CLASS = 'ab-wait-for-progress-indicator';
        if (!containerElement) {
            return;
        }
        if (disabled) {
            containerElement.classList.add(DISABLING_CSS_CLASS);
        }
        else {
            containerElement.classList.remove(DISABLING_CSS_CLASS);
        }
    };
    const updateGridContainerCoordinates = (containerElement) => {
        if (!containerElement) {
            return;
        }
        const { top, left, height, width } = containerElement.getBoundingClientRect();
        setProgressIndicatorCoordinates({ top, left, height, width });
    };
    useEffect(() => {
        disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
        disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
        updateGridContainerCoordinates(adaptable.getAgGridContainerElement());
        requestAnimationFrame(() => {
            setVisible(active);
        });
    }, [active]);
    let customEl = null;
    if (render || frameworkComponent) {
        customEl = _jsx(ExternalRenderer, { render: render, frameworkComponent: frameworkComponent });
    }
    const replaceContent = renderMode === 'dialog' && customEl;
    return (_jsx(_Fragment, { children: active && (_jsx(Dialog, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}`, modalProps: {
                style: progressIndicatorCoordinates,
            }, children: replaceContent ? (customEl) : (_jsxs(Flex, { alignItems: "center", flexDirection: "column", className: "ab-ProgressIndicator-body twa:p-3", children: [_jsx(LoaderSpinner, {}), _jsxs(Box, { className: "twa:mt-3", children: [text && _jsx(Box, { children: text }), customEl] })] })) })) }));
};