devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
24 lines (23 loc) • 1.38 kB
JavaScript
import React from 'react';
import Template from '../../../core/Template';
import MobileGallery from '../Gallery';
import useDxMobileZoom from '../hooks/mobileZoom';
import useDxMobileSlide from '../hooks/mobileSlide';
const MobileSurface = ({ data }) => {
const ref = React.useRef();
useDxMobileZoom(ref, data.mobileZoomOptions);
useDxMobileSlide(ref, data.slideOptions);
return (React.createElement(React.Fragment, null,
React.createElement("div", { ref: ref, className: `dxrd-preview-wrapper dxrdp-fullscreen dxrd-preview-surface ${data.editingFieldsHighlighted ? 'dxrp-editing-fields-hightlighted' : ''}`, style: {
pointerEvents: data.surfaceEvents,
touchEvents: data.surfaceEvents,
top: data.topOffset + 'px',
height: data.previewWrapperSizeHeight + 'px',
width: data.previewWrapperSizeWidth + 'px',
}, onClick: data.click },
React.createElement(Template, { template: "dxrd-preview-progress-bar", data: data.progressBar }),
React.createElement("div", { className: "dxrd-mobile-content" },
React.createElement(MobileGallery, { data: data, slideOptions: data.slideOptions, gallery: data.gallery }))),
React.createElement("input", { type: "text", className: "dxrd-display-none" })));
};
export default MobileSurface;