@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
78 lines (77 loc) • 3.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressIndicator = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const react_1 = require("react");
const Loader_1 = require("../Loader");
const AdaptableContext_1 = require("../../View/AdaptableContext");
const ExternalRenderer_1 = require("../../View/Components/ExternalRenderer");
const Dialog_1 = tslib_1.__importDefault(require("../Dialog"));
const rebass_1 = require("rebass");
const ProgressIndicator = () => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const { active, text, render, frameworkComponent, renderMode } = (0, react_redux_1.useSelector)((state) => state.Popup.ProgressIndicator);
const [visible, setVisible] = (0, react_1.useState)(false);
const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = (0, react_1.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 });
};
(0, react_1.useEffect)(() => {
disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
updateGridContainerCoordinates(adaptable.getAgGridContainerElement());
// #raf_progress_indicator
// without rAF the progress indicator would be rendered instantly, without the 'transition-delay' defined via CSS
requestAnimationFrame(() => {
setVisible(active);
});
}, [active]);
let customEl = null;
if (render || frameworkComponent) {
customEl = React.createElement(ExternalRenderer_1.ExternalRenderer, { render: render, frameworkComponent: frameworkComponent });
}
// Check if we should replace the default content
const replaceContent = renderMode === 'dialog' && customEl;
return (React.createElement(
React.Fragment,
null,
active && (React.createElement(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}`, modalProps: {
style: progressIndicatorCoordinates,
} }, replaceContent ? (
// If renderMode is 'dialog', replace the entire content with custom element
customEl) : (
// Otherwise use the default Flex layout
(React.createElement(
rebass_1.Flex,
{ alignItems: "center", flexDirection: "column", p: 3, className: "ab-ProgressIndicator-body" },
React.createElement(Loader_1.LoaderSpinner, null),
React.createElement(rebass_1.Box, { mt: 3 },
text && React.createElement(rebass_1.Box, null, text),
customEl)
)))))
));
};
exports.ProgressIndicator = ProgressIndicator;