devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
14 lines (13 loc) • 1.33 kB
JavaScript
import React from 'react';
import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
const ProgressBar = ({ data }) => {
const mutationObserverRef = React.useRef();
useDxMutationObserver(mutationObserverRef, data?.progressBarAccessibilityKeyboardHelper);
const handleCancelButtonClick = () => data.cancelButton.action && data.cancelButton.action();
return (React.createElement("div", { role: "dialog", className: `dxrd-preview-progress dxd-popup-back-color dxd-back-primary2 dxd-border-primary ${data.cssClasses}`, hidden: !data.visible, ref: mutationObserverRef },
React.createElement("div", { className: "dxrd-preview-progress-text dxd-text-primary" }, data.text),
React.createElement("div", { className: "dxrd-preview-progress-bar dxd-back-primary" },
React.createElement("div", { className: "dxrd-preview-progress-value dxd-preview-progress-bar-value-color dxd-back-accented", style: { width: data.progress + '%' } })),
React.createElement("div", { role: "button", className: "dxrd-preview-progress-cancel dxd-hyperlink-color dxd-border-accented dxd-text-accented dx-accessibility-list-item dx-accessibility-border-accented", hidden: !data.cancelButton.visible, onClick: handleCancelButtonClick }, data.cancelButton.text)));
};
export default ProgressBar;