stimulsoft-reports-js-react/viewer.js

Stimulsoft Reports.JS is a reporting tool for React

import React from "react";
import { } from "./stimulsoft.reports.engine.mjs";
import { } from "./stimulsoft.reports.chart.mjs";
import { } from "./stimulsoft.reports.export.mjs";
import { } from "./stimulsoft.reports.import.xlsx.mjs";
import { } from "./stimulsoft.reports.maps.mjs";
import { Stimulsoft } from "./stimulsoft.viewer.mjs";
export { Stimulsoft };

export class Viewer extends React.Component {
    #viewer;
    #parentRef = React.createRef();

    #createViewer() {
        this.#viewer = new Stimulsoft.Viewer.StiViewer(this.props.options, this.props.id, false);
        this.#viewer.renderHtml(this.#parentRef.current);
        this.#bindEvents();

        this.#viewer.visible = this.props.visible ?? true;
    }

    #bindEvents() {
        if (typeof this.props.onPrepareVariables == "function") this.#viewer.onPrepareVariables = this.props.onPrepareVariables?.bind(this);
        if (typeof this.props.onBeginProcessData == "function") this.#viewer.onBeginProcessData = this.props.onPonBeginProcessDatarepareVariables?.bind(this);
        if (typeof this.props.onEndProcessData == "function") this.#viewer.onEndProcessData = this.props.onEndProcessData?.bind(this);
        if (typeof this.props.onPrintReport == "function") this.#viewer.onPrintReport = this.props.onPrintReport?.bind(this);
        if (typeof this.props.onBeginExportReport == "function") this.#viewer.onBeginExportReport = this.props.onBeginExportReport?.bind(this);
        if (typeof this.props.onEndExportReport == "function") this.#viewer.onEndExportReport = this.props.onEndExportReport?.bind(this);
        if (typeof this.props.onInteraction == "function") this.#viewer.onInteraction = this.props.onInteraction?.bind(this);
        if (typeof this.props.onEmailReport == "function") this.#viewer.onEmailReport = this.props.onEmailReport?.bind(this);
        if (typeof this.props.onDesignReport == "function") this.#viewer.onDesignReport = this.props.onDesignReport?.bind(this);
        if (typeof this.props.onShowReport == "function") this.#viewer.onShowReport = this.props.onShowReport?.bind(this);
        if (typeof this.props.onOpenReport == "function") this.#viewer.onOpenReport = (args, callback) => {
            args.preventDefault = false;
            this.props.onOpenReport?.bind(this)(args, callback);
        }
        if (typeof this.props.onOpenedReport == "function") this.#viewer.onOpenedReport = this.props.onOpenedReport?.bind(this);
    }

    componentDidMount() {
        this.#createViewer();
        this.#viewer.report = this.props.report;
    }

    componentWillUnmount() {
        if (this.#viewer != null)
            this.#viewer.dispose();
    }

    componentDidUpdate(prevProps) {
        if (this.props.options !== prevProps.options) {
            this.#createViewer();
            this.#viewer.report = this.props.report;
        }
        if (this.props.report !== prevProps.report)
            this.#viewer.report = this.props.report;
        if (this.props.visible !== prevProps.visible)
            this.#viewer.visible = this.props.visible;
        if (this.props.id !== prevProps.id) {
            this.#createViewer();
            this.#viewer.report = this.props.report;
        }
    }

    render() {
        return React.createElement('div', { ref: this.#parentRef });
    }
}