devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
21 lines (20 loc) • 1.42 kB
JavaScript
import React from 'react';
import Template from '../../../core/Template';
import useDxMobileAutofit from '../hooks/mobileAutofit';
import useDxPreviewPageRenderer from '../../../../hooks/dxPreviewPageRenderer';
const MobilePage = ({ data }) => {
const ref = useDxMobileAutofit(data.autoFitOptions);
useDxPreviewPageRenderer(ref, data.imageOptions);
return (React.createElement("div", { className: "dxrdp-content", onClick: event => data.clickToBrick(data, event), style: { width: data.width + 'px', height: data.height + 'px' }, ref: ref },
React.createElement("div", { className: "dxrdp-loading-wrapper", style: {
width: data.width + 'px',
height: data.height + 'px',
lineHeight: data.height + 'px',
backgroundColor: data.color
}, hidden: !data.pageLoading }, data.loadingText),
React.createElement("div", { className: `dxrdp-active-border ${data.active && data.hasBricks ? 'dxrdp-active' : ''}`, hidden: data.readerMode }),
data.activeBricks?.map(brick => React.createElement(Template, { key: brick.indexes, template: "dxrd-page-brick-mobile", data: brick })),
!data.brickLoading && data.editingFields &&
data.editingFields.map((editingField, index) => React.createElement(Template, { key: index, template: editingField.template, data: editingField }))));
};
export default MobilePage;