devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
54 lines (53 loc) • 5.31 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';
import useDxTextCopier from '../../../../hooks/dxTextCopier';
import Button from 'devextreme-react/button';
import Popup from 'devextreme-react/popup';
import { Position } from 'devextreme-react/cjs/popup';
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 textCopier = React.useRef();
useDxTextCopier(textCopier, { viewModel: data });
const dxMutationObserverRef = React.useRef();
useDxMutationObserver(dxMutationObserverRef, data.previewBrickKeyboardHelper);
return (React.createElement(React.Fragment, null,
React.createElement("div", { ref: textCopier, 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(Popup, { width: 450, height: 150, visible: data._exportTranslatedDocPopupVisible, container: '.dxrd-preview-surface', dragEnabled: false, hideOnOutsideClick: true, showCloseButton: false, showTitle: false, onHidden: () => data.onExportPopupHiding() },
React.createElement(Position, { at: "top", my: "top", of: "#dxrd-preview-ai-panel-id", collision: "fit" }),
React.createElement("span", { "data-bind": "text: _exportTranslatedDodumentWarningMsg", className: "dxrd-preview-export-warning-popup-text" }, data._exportTranslatedDodumentWarningMsg),
React.createElement("div", { className: "dxrd-preview-export-warning-popup-button-group" },
React.createElement(Button, { text: data._exportTranslatedDocumentButtonText, onClick: () => data._exportTranslatedHandler(), className: "dxrd-preview-export-warning-popup-button dx-button-default" }),
React.createElement(Button, { text: data._exportOriginalDocumentButtonText, onClick: () => data._exportTranslatedCancel(), className: "dxrd-preview-export-warning-popup-button" })))),
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;