devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
42 lines (41 loc) • 3.85 kB
JavaScript
import { getLocalization } from '@devexpress/analytics-core/property-grid/localization/localization_utils';
import React from 'react';
import Template from '../../../core/Template';
import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
import useDxAutoFit from '../../../../hooks/dxAutoFit';
import useDxLazyImages from '../../../../hooks/dxLazyImages';
import useDxToView from '../../../../hooks/dxToView';
const MultiPageHolder = ({ lazyImagesOptions, pages }) => {
const lazyImagesRef = React.useRef();
useDxLazyImages(lazyImagesRef, lazyImagesOptions);
return (React.createElement("div", { className: "dxrd-report-preview-holder", role: "list", ref: lazyImagesRef }, pages.map((page, index) => React.createElement(MultiPageItem, { key: index, page: page }))));
};
const MultiPageItem = ({ page }) => {
const toViewRef = React.useRef();
useDxToView(toViewRef, page);
const valid = page.pageLoading || (!page.pageLoading && page.pageLoaded);
if (!valid)
return null;
return (React.createElement("div", { role: "listitem", className: `dxrd-report-preview dxrd-report-preview-multipage dx-accessibility-page-item dx-accessibility-border-accented ${page.active ? 'dxrd-report-preview-active' : ''}`, style: { width: page.width + 'px', height: page.height + 'px' }, ref: toViewRef },
React.createElement(Template, { template: "dxrd-preview-page", data: page })));
};
const Surface = ({ data }) => {
const clipboardMessage = getLocalization('Clipboard', 'ASPxReportsStringId.WebDocumentViewer_AriaClipboard');
const autoFitRef = React.useRef();
useDxAutoFit(autoFitRef, data.currentPage?.autoFitOptions);
const dxMutationObserverRef = React.useRef();
useDxMutationObserver(dxMutationObserverRef, data.previewBrickKeyboardHelper);
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: `dxrd-preview-wrapper ${data.rtlReport ? 'dx-rtl' : ''} ${data.editingFieldsHighlighted ? 'dxrp-editing-fields-hightlighted' : ''}`, "data-bind": "textCopier" },
React.createElement(Template, { template: "dxrd-preview-progress-bar", data: data.progressBar }),
React.createElement("div", { className: "dxrd-preview-surface", ref: dxMutationObserverRef },
!data.showMultipagePreview && (React.createElement("div", { className: "dxrd-report-preview-holder", role: "list" }, (!!data.currentPage && (data.currentPage.pageLoading || (!data.currentPage.pageLoading && data.currentPage.pageLoaded))) && (React.createElement("div", { role: "listitem", className: "dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented", ref: autoFitRef, style: { width: data.currentPage.width + 'px', height: data.currentPage.height + 'px' } },
React.createElement(Template, { template: "dxrd-preview-page", data: data.currentPage }))))),
data.showMultipagePreview && !!data.currentPage && React.createElement(MultiPageHolder, { pages: data.pages, lazyImagesOptions: data.lazyImagesOptions }),
React.createElement("div", { className: `dxrd-report-preview-placeholder ${!!data.currentPage ? 'dxrd-visually-hidden' : ''}` },
React.createElement("div", { "aria-live": "assertive", "aria-atomic": "true", className: "dxd-empty-area-placeholder-text-color dxd-text-info" }, data.emptyDocumentCaption)))),
React.createElement("div", { id: "dxrd-preview-bricks-live-region", className: "dxrd-visually-hidden", "aria-live": "polite", "aria-atomic": "true" }),
React.createElement("div", { id: "clipboard-container", className: "dxrd-position-absolute dxrd-top--100px" },
React.createElement("textarea", { disabled: true, "aria-label": clipboardMessage, id: "clipboard" }))));
};
export default Surface;