stimulsoft-dashboards-js-react/designer.js

Stimulsoft Dashboards.JS is a dashboards 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 { } from "./stimulsoft.dashboards.mjs";
import { } from "./stimulsoft.viewer.mjs";
import { } from "./stimulsoft.designer.mjs";
import { Stimulsoft } from "./stimulsoft.blockly.editor.mjs";

export class Designer extends React.Component {
    #designer;
    #parentRef = React.createRef();

    #createDesigner() {
        this.#designer = new Stimulsoft.Designer.StiDesigner(this.props.options, this.props.id, false);
        this.#designer.renderHtml(this.#parentRef.current);
        this.#bindEvents();

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

    #bindEvents() {
        if (typeof this.props.onPrepareVariables == "function") this.#designer.onPrepareVariables = this.props.onPrepareVariables?.bind(this);
        if (typeof this.props.onBeginProcessData == "function") this.#designer.onBeginProcessData = this.props.onBeginProcessData?.bind(this);
        if (typeof this.props.onEndProcessData == "function") this.#designer.onEndProcessData = this.props.onEndProcessData?.bind(this);
        if (typeof this.props.onCreateReport == "function") this.#designer.onCreateReport = this.props.onCreateReport?.bind(this);
        if (typeof this.props.onCloseReport == "function") this.#designer.onCloseReport = this.props.onCloseReport?.bind(this);
        if (typeof this.props.onOpenReport == "function") this.#designer.onOpenReport = (args, callback) => {
            args.preventDefault = false;
            this.props.onOpenReport?.bind(this)(args, callback);
        }
        if (typeof this.props.onOpenedReport == "function") this.#designer.onOpenedReport = this.props.onOpenedReport.bind(this);
        if (typeof this.props.onSaveReport == "function") this.#designer.onSaveReport = (args, callback) => {
            args.preventDefault = false;
            this.props.onSaveReport?.bind(this)(args, callback);
        }
        if (typeof this.props.onSaveAsReport == "function") this.#designer.onSaveAsReport = this.props.onSaveAsReport?.bind(this);
        if (typeof this.props.onPreviewReport == "function") this.#designer.onPreviewReport = this.props.onPreviewReport?.bind(this);
        if (typeof this.props.onExit == "function") this.#designer.onExit = this.props.onExit?.bind(this);

        if (typeof this.props.onAssignedReport == "function") this.#designer.onAssignedReport = this.props.onAssignedReport?.bind(this);
    }

    componentDidMount() {
        this.#createDesigner();
        this.#designer.report = this.props.report;
    }

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

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

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

export { Stimulsoft };