devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
45 lines (44 loc) • 3.22 kB
JavaScript
import React from 'react';
import { dxGalleryExtender } from 'devexpress-reporting/viewer/mobile/internal/gallery/_galleryComponent';
import { Gallery } from 'devextreme-react/gallery';
import ScrollView from 'devextreme-react/scroll-view';
import Template from '../../../core/Template';
const Max = (val1, val2) => {
return Math.max(val1, val2);
};
const renderGalleryItem = () => (item) => (React.createElement(ScrollView, { className: "dxrd-scrollView-mobile", direction: item.reportPreview.scrollViewOptions.direction, bounceEnabled: item.reportPreview.scrollViewOptions.bounceEnabled, disabled: item.reportPreview.scrollViewOptions.disabled, onUpdated: item.reportPreview.scrollViewOptions.onUpdated },
React.createElement("div", { className: "dxrd-gallery-blocks", style: {
width: item.gallery.contentSize ? item.gallery.contentSize.width + 'px' : undefined,
height: item.gallery.contentSize ? item.gallery.contentSize.height + +'px' : undefined
} }, item.blocks.filter(block => block.page).map(block => (React.createElement("div", { key: block.page.unifier, className: `dxrd-gallery-block ${block.classSet}`, style: {
left: block.position.left + 'px',
right: block.position.right + 'px',
top: block.position.top + 'px',
bottom: block.position.bottom + 'px',
} },
React.createElement("div", { className: "dxrd-gallery-block-content", style: {
width: Max(block.page.width, block.position.width) + 'px',
height: Max(block.page.height, block.position.height) + 'px',
backgroundColor: block.page.color
} },
React.createElement("div", { className: `dxrdp-active-border ${block.page.active && block.active ? 'dxrdp-active dxrdp-page-padding' : ''}`, hidden: !item.reportPreview.slideOptions.readerMode }),
React.createElement("div", { className: "dxrd-mobile-page", style: {
width: block.page.width + 'px',
height: block.page.height + 'px',
pointerEvents: block.reportPreview.pageEvents,
touchEvents: block.reportPreview.pageEvents,
} },
React.createElement(Template, { template: "dxrd-preview-page-mobile", data: block.page })))))))));
const MobileGallery = ({ data, slideOptions, gallery }) => {
const galleryRef = React.useRef();
React.useEffect(() => {
const widget = galleryRef.current.instance();
widget.option('gallery', gallery || data.gallery);
widget.option('slideOptions', slideOptions || data.slideOptions);
const extender = new dxGalleryExtender(widget);
extender.extend(widget.element());
return () => extender.dispose();
}, []);
return (React.createElement(Gallery, { className: "dxrd-mobile-gallery", ref: galleryRef, dataSource: data.gallery.items, animationEnabled: data.gallery.animationEnabled, disabled: data.zoomUpdating, width: "100%", height: "100%", showIndicator: false, loop: true, onSelectionChanged: data.onSlide, onOptionChanged: data.gallery.onOptionChanged, itemRender: renderGalleryItem() }));
};
export default MobileGallery;