@grapecity/activereports-react
Version:
ActiveReportsJS components for React
172 lines (171 loc) • 7.61 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import * as React from 'react';
import { Component } from 'react';
import * as ArDesignerNs from '@grapecity/activereports/reportdesigner';
export { ColorThemes } from '@grapecity/activereports/reportdesigner';
/// ARJS Designer wrapper component
export class Designer extends Component {
constructor() {
super(...arguments);
this._host = React.createRef();
this._eventsRegistry = { documentChanged: null };
}
componentDidMount() {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
if (!this._designer) {
const dConfig = (_b = (_a = this.props).onInit) === null || _b === void 0 ? void 0 : _b.call(_a);
this._designer = new ArDesignerNs.Designer(this._host.current, dConfig);
}
yield this._designer.setResourceProvider({
getImagesList: () => __awaiter(this, void 0, void 0, function* () { var _c; return (_c = this.props.imageList) !== null && _c !== void 0 ? _c : []; }),
getReportsList: () => __awaiter(this, void 0, void 0, function* () { var _d; return (_d = this.props.reportList) !== null && _d !== void 0 ? _d : []; }),
getMasterReportList: () => __awaiter(this, void 0, void 0, function* () { var _e; return (_e = this.props.masterReportList) !== null && _e !== void 0 ? _e : []; }),
getThemesList: () => __awaiter(this, void 0, void 0, function* () { var _f; return (_f = this.props.themeList) !== null && _f !== void 0 ? _f : []; }),
});
yield this.applyProps({}, this.props);
});
}
componentDidUpdate(prevProps) {
return __awaiter(this, void 0, void 0, function* () {
if (!this._designer)
return;
yield this.applyProps(prevProps, this.props);
});
}
areDeepEqual(p1, p2) {
return JSON.stringify(p1) === JSON.stringify(p2);
}
isReportDef(report) {
return !!(report === null || report === void 0 ? void 0 : report.definition);
}
shouldReportUpdate(curr, prev) {
return ((curr === null || curr === void 0 ? void 0 : curr.id) !== (prev === null || prev === void 0 ? void 0 : prev.id) || (curr === null || curr === void 0 ? void 0 : curr.displayName) !== (prev === null || prev === void 0 ? void 0 : prev.displayName) || (this.isReportDef(curr) && curr.definition) !== (this.isReportDef(prev) && prev.definition));
}
applyProps(prevProps, props) {
var _a;
return __awaiter(this, void 0, void 0, function* () {
const designer = this._designer;
if (!designer) {
// should never be called
console.warn("Designer is not initialized yet.");
return;
}
if (this.shouldReportUpdate(props.report, prevProps.report)) {
if (props.report)
yield designer.setReport(props.report, "override");
else
yield designer.createReport({ reportType: 'CPL' }, "override");
}
;
if (props.dataSources !== prevProps.dataSources) {
yield designer.setDataSourceTemplates((_a = props.dataSources) !== null && _a !== void 0 ? _a : []);
}
if (this.props.documentChanged && !this._eventsRegistry.documentChanged) {
this._eventsRegistry.documentChanged = designer.documentChanged.register(e => { var _a, _b; return (_b = (_a = this.props).documentChanged) === null || _b === void 0 ? void 0 : _b.call(_a, e); });
}
else if (!this.props.documentChanged && this._eventsRegistry.documentChanged) {
this._eventsRegistry.documentChanged();
this._eventsRegistry.documentChanged = null;
}
if (props.onCreate !== prevProps.onCreate ||
props.onOpen !== prevProps.onOpen ||
props.onOpenFileMenu !== prevProps.onOpenFileMenu ||
props.onRender !== prevProps.onRender ||
props.onSave !== prevProps.onSave ||
props.onSaveAs !== prevProps.onSaveAs) {
yield designer.setActionHandlers({
onCreate: props.onCreate,
onOpen: props.onOpen,
onOpenFileMenu: props.onOpenFileMenu,
onRender: props.onRender,
onSave: props.onSave,
onSaveAs: props.onSaveAs,
});
}
});
}
/**
* Sets report.
* @param report Report info to load.
* @param whenDirty Action to perform in case of 'dirty' report.
* @param isDirtyInitial Initial value for 'dirty' state after load.
*/
setReport(report, whenDirty, isDirtyInitial) {
if (this._designer == null)
throw new Error("Designer is not initialized yet");
return this._designer.setReport(report, whenDirty, isDirtyInitial);
}
/**
* Gets report.
* @returns Promise with current report information.
*/
getReport() {
if (!this._designer)
throw new Error("Designer is not initialized yet");
return this._designer.getReport();
}
/**
* Creates report.
* @param reportInfo Report info to load.
* @param whenDirty Action to perform in case of 'dirty' report.
*/
createReport(reportInfo, whenDirty) {
if (this._designer == null)
throw new Error("Designer is not initialized yet");
return this._designer.createReport(reportInfo, whenDirty);
;
}
/**
* Process command.
* @param cmd Command name.
*/
processCommand(cmd) {
if (!this._designer)
throw new Error("Designer is not initialized yet");
return this._designer.processCommand(cmd);
}
/**
* Returns focus to Designer.
*/
focus() {
if (this._designer == null)
throw new Error("Designer is not initialized yet");
this._designer.focus();
}
/**
* Gets API to manipulate designer.
*/
getEditorAPI() {
if (this._designer == null)
throw new Error("Designer is not initialized yet");
return this._designer.getEditorAPI();
}
/*
* Access to the menu and sidebar panels
*/
getPanelsAPI() {
if (this._designer == null)
throw new Error("Designer is not initialized yet");
return this._designer.getPanelsAPI();
}
/*
* Manipulate notifications panel.
*/
getNotificationsAPI() {
if (this._designer == null)
throw new Error("Designer is not initialized yet");
return this._designer.getNotificationsAPI();
}
render() {
return React.createElement("div", { ref: this._host, style: { height: "100%" } });
}
}