devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
88 lines (87 loc) • 4.56 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Callbacks from './options/ParametersPanelCallbacks';
import RequestOptions from './options/ParametersPanelRequestOptions';
import OptionsManager from '../../core/options-manager';
import { TemplateEngine } from '../core/template-engine';
import { JSReportParametersPanelBinding } from 'devexpress-reporting/viewer/binding/jsReportParametersPanelBinding';
import AccessibilitySettingsProvider from '../components/core/AccessibilitySettingsProvider';
import TemplateEngineProvider from '../components/core/TemplateEngineProvider';
import Template from '../components/core/Template';
import { ViewModelChangedEvent, viewModelGeneratorSettings } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
import '@devexpress/analytics-core/dx-analytics-core-svg-templates';
import 'devexpress-reporting/dx-reporting-svg-templates';
const validChildComponents = {
'callbacks': { component: Callbacks },
'requestOptions': { component: RequestOptions },
};
const DxParametersPanel = React.forwardRef(({ reportUrl, ...props }, ref) => {
const parametersPanelRef = React.useRef(null);
const [viewModel, setViewModel] = React.useState(null);
const [parametersPanelBinding, setParametersPanelBinding] = React.useState(null);
React.useImperativeHandle(ref, () => ({
instance() {
return parametersPanelBinding?.sender;
}
}), [parametersPanelBinding]);
viewModelGeneratorSettings.ensureChangesImmutable = false;
React.useEffect(() => {
if (parametersPanelBinding && viewModel) {
parametersPanelBinding.sender.OpenReport(reportUrl);
setViewModel({ ...viewModel });
}
}, [reportUrl]);
React.useEffect(() => {
let disposeViewModelSubscription;
const updateViewModel = (model) => {
const viewModel = model.GetPreviewModel()?.getViewModel();
setViewModel({ ...viewModel });
disposeViewModelSubscription && disposeViewModelSubscription();
disposeViewModelSubscription = viewModel?._viewModelEvents?.on(ViewModelChangedEvent, () => setViewModel({ ...viewModel }));
};
const controlOptions = OptionsManager.getControlOptions({ ...props, reportUrl }, DxParametersPanel.propTypes, DxParametersPanelProps, validChildComponents);
let binding;
binding = new JSReportParametersPanelBinding({ ...controlOptions, callbacks: {} }, OptionsManager.getEventRaiser(controlOptions.callbacks, () => binding?.sender), false);
binding.applyBindings(parametersPanelRef.current);
setParametersPanelBinding(binding);
const model = binding.sender;
updateViewModel(model);
const disposeModelSubscription = model.events.on('propertyChanged', (args) => {
if (args.propertyName === 'previewModel') {
updateViewModel(model);
}
});
return () => {
disposeModelSubscription && disposeModelSubscription();
disposeViewModelSubscription && disposeViewModelSubscription();
setViewModel(null);
setParametersPanelBinding(null);
setTimeout(() => {
binding && binding.dispose();
});
};
}, []);
return (React.createElement(TemplateEngineProvider, { templateEngine: props.templateEngine ?? new TemplateEngine() },
React.createElement(AccessibilitySettingsProvider, { value: { accessibilityCompliant: !!viewModel?.accessibilityCompliant } },
React.createElement("div", { ref: parametersPanelRef, className: props.cssClass, style: { width: props.width || DxParametersPanelProps.width, height: props.height || DxParametersPanelProps.height } },
React.createElement("div", { className: "dx-designer" }, !!viewModel && React.createElement(Template, { template: "dx-designer", data: viewModel }))))));
});
DxParametersPanel.displayName = 'DxParametersPanel';
DxParametersPanel.propTypes = {
height: PropTypes.string,
width: PropTypes.string,
cssClass: PropTypes.string,
templateEngine: PropTypes.instanceOf(TemplateEngine),
accessibilityCompliant: PropTypes.bool,
keepReportOnComponentDisposal: PropTypes.bool,
reportUrl: PropTypes.string,
rtl: PropTypes.bool,
developmentMode: PropTypes.bool,
children: PropTypes.node,
};
const DxParametersPanelProps = {
height: '100%',
width: '100%',
cssClass: '',
};
export default DxParametersPanel;