devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
51 lines (50 loc) • 4.76 kB
JavaScript
import React from 'react';
import Template from '../../../core/Template';
import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
import useDxBrickSelection from '../../../../hooks/dxBrickSelection';
import useDxPreviewPageRenderer from '../../../../hooks/dxPreviewPageRenderer';
import Menu from 'devextreme-react/menu';
import LoadPanel from 'devextreme-react/load-panel';
const EditingFieldsHolder = ({ editingFields, editingFieldsKeyboardHelper }) => {
const mutationObserverRef = React.useRef();
useDxMutationObserver(mutationObserverRef, editingFieldsKeyboardHelper);
return (React.createElement("div", { ref: mutationObserverRef }, editingFields.map((editingField, index) => React.createElement(Template, { key: index, template: editingField.template, data: editingField }))));
};
const Image = ({ data }) => {
const pageRendererRef = React.useRef();
useDxPreviewPageRenderer(pageRendererRef, data.imageOptions);
return (React.createElement("div", null,
data.activeBricks.map(brick => React.createElement(Template, { key: brick.indexes, template: "dxrd-page-brick-mobile", data: brick })),
data.clickableBricks.map(brick => React.createElement(Template, { key: brick.indexes, template: "dxrd-page-brick-clickable", data: brick })),
!data.brickLoading
&& data.editingFields
&& React.createElement(EditingFieldsHolder, { editingFields: data.editingFields, editingFieldsKeyboardHelper: data.editingFieldsKeyboardHelper })));
};
const Page = ({ data }) => {
const brickSelectionRef = React.useRef();
useDxBrickSelection(brickSelectionRef, data.brickSelectionProg);
useDxPreviewPageRenderer(brickSelectionRef, data.imageOptions);
const position = { of: '#' + data.page_id };
const renderMenuItemTemplate = (item) => {
return (React.createElement("div", { className: "dxrd-ai-floating-smart-tag-container" },
item.text && (React.createElement("div", { className: "dxrd-ai-floating-smart-tag-text" }, item.text)),
item.items && item.text.length > 0 && (React.createElement("div", { className: `dx-icon dxrd-ai-floating-smart-tag-items ${(data.getModel()?.reportPreview?.rtlViewer ?? false) ? 'dx-icon-spinleft' : 'dx-icon-spinright'}` })),
item.icon && (React.createElement("div", { className: "dxrd-ai-floating-smart-tag-icon" },
React.createElement(Template, { template: item.icon, data: null })))));
};
const menuAttributes = {
class: 'dxrd-control-ai-smart-tag dxd-icon-accented'
};
return (React.createElement("div", null,
React.createElement(LoadPanel, { position: position, visible: data.loading }),
React.createElement("div", { role: "img", id: data.page_id, className: "dxrd-report-preview-content dxrd-position-relative dxrd-width-100 dxrd-height-100", "aria-label": data.currentPageAriaLabelImgAlt, onClick: e => data.clickToBrick(data, e), ref: brickSelectionRef },
React.createElement("div", { className: "dxrd-report-preview-content-loading-wrapper dxrd-background-white", style: { width: data.width + 2 + 'px', height: data.height + 2 + 'px' }, hidden: !data.pageLoading },
React.createElement("div", { className: "dxrd-report-preview-content-loading-panel dxrd-text-align-center", style: { paddingTop: data.height / 2.3 + 'px' } },
React.createElement("div", { className: "dxrd-report-preview-content-loading-panel-text" }, data.loadingText))),
React.createElement(Image, { data: data }),
data.aiServicesEnabled && data.active && (React.createElement("div", { style: { position: 'absolute', top: data.smartTagAIMenuPosition.topP, left: data.smartTagAIMenuPosition.leftP, right: data.smartTagAIMenuPosition.rightP, height: data.smartTagAIMenuPosition.heightP, width: data.smartTagAIMenuPosition.widthP } },
React.createElement(Menu, { dataSource: data.smartTagAIMenu.dataSource, hideSubmenuOnMouseLeave: data.smartTagAIMenu.hideSubmenuOnMouseLeave, elementAttr: menuAttributes, visible: data.smartTagAIMenu.visible, itemRender: renderMenuItemTemplate, showFirstSubmenuMode: 'onHover', onItemClick: (e) => typeof data.smartTagAIMenu.onItemClick === 'function' && data.smartTagAIMenu.onItemClick(e), onSubmenuShowing: (e) => typeof data.smartTagAIMenu.onSubmenuShowing === 'function' && data.smartTagAIMenu.onSubmenuShowing(e) }))),
data.aiServicesEnabled && data.aiCustomDocumentStorageId && (React.createElement("div", { className: "dxrd-report-preview-page-modified" },
React.createElement("span", { className: "dxrd-report-preview-page-modified-text" }, data.translatedPageBadgeText))))));
};
export default Page;