devexpress-reporting-react/dx-report-designer/DxReportDesigner.js

DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.

import * as PropTypes from 'prop-types';
import React from 'react';
import Callbacks from './options/Callbacks';
import RequestOptions from './options/RequestOptions';
import DesignerModelSettings from './options/DesignerModelSettings';
import OptionsManager from '../core/options-manager';
import { validChildComponents as designerModelSettingsValidChildren } from './options/DesignerModelSettings';
import { JSReportDesignerBinding } from 'devexpress-reporting/dx-reportdesigner';
import * as ko from 'knockout';
const validChildComponents = {
    'callbacks': { component: Callbacks },
    'requestOptions': { component: RequestOptions },
    'designerModelSettings': { component: DesignerModelSettings, children: designerModelSettingsValidChildren },
};
const DxReportDesigner = React.forwardRef(({ reportUrl, ...props }, ref) => {
    const designerRef = React.useRef(null);
    const [designerBinding, setDesignerBinding] = React.useState(null);
    React.useImperativeHandle(ref, () => ({
        instance() {
            return designerBinding?.sender;
        }
    }), [designerBinding]);
    React.useEffect(() => {
        if (designerBinding) {
            designerBinding.sender.OpenReport(reportUrl);
        }
    }, [reportUrl]);
    React.useEffect(() => {
        const options = OptionsManager.getControlOptions({ ...props, reportUrl }, DxReportDesigner.propTypes, DxReportDesignerDefaultProps, validChildComponents);
        const callbacks = options.callbacks;
        options.callbacks = { designer: {}, preview: {} };
        const binding = new JSReportDesignerBinding(options, OptionsManager.getEventRaiser(callbacks, () => binding?.sender));
        binding.applyBindings(designerRef.current);
        setDesignerBinding(binding);
        return () => {
            designerRef.current && ko.cleanNode(designerRef.current);
        };
    }, []);
    return (React.createElement("div", { ref: designerRef, className: props.cssClass, style: { width: props.width || DxReportDesignerDefaultProps.width, height: props.height || DxReportDesignerDefaultProps.height } },
        React.createElement("div", { "data-bind": "dxReportDesigner: $data" })));
});
DxReportDesigner.displayName = 'DxReportDesigner';
DxReportDesigner.propTypes = {
    height: PropTypes.string,
    width: PropTypes.string,
    cssClass: PropTypes.string,
    developmentMode: PropTypes.bool,
    reportUrl: PropTypes.string,
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};
const DxReportDesignerDefaultProps = {
    height: '800px',
    width: '100%',
    cssClass: '',
};
export default DxReportDesigner;